HealthService Example

Here’s a minimal but complete example of a Lightning web component that uses HealthService to write a weight record to the device and read the weight history back again.

The component’s HTML template is minimal, with a button to write a weight record, a button to read weight history, and a place to display results.

1<!-- healthServiceExample.html -->
2<template>
3  <lightning-card title="HealthService Example" icon-name="custom:custom14">
4    <div class="slds-var-m-around_medium">
5      <lightning-button
6        variant="brand"
7        label="Write Weight"
8        onclick="{handleWriteWeight}"
9        class="slds-var-m-right_x-small"
10      ></lightning-button>
11      <lightning-button label="Get Weight History" onclick="{handleGetWeight}"></lightning-button>
12    </div>
13
14    <!-- After weight records are read, they're displayed here -->
15    <div class="slds-var-m-around_medium">
16      <p><b>Weight History</b></p>
17      <ul class="slds-var-m-around_medium">
18        <template for:each="{weightRecords}" for:item="record">
19          <li key="{record.startTime}">{record.value} {record.unit}</li>
20        </template>
21      </ul>
22      <p><lightning-formatted-text value="{status}"></lightning-formatted-text></p>
23    </div>
24  </lightning-card>
25</template>

Note the use of the for:each directive and nested template tag to iterate through the list of weight records.

This example writes a sample weight record to the device, and then reads the weight history back and displays it. In a real component, the weight value comes from a Salesforce record or user input.

1// healthServiceExample.js
2import { LightningElement } from "lwc";
3import { getHealthService } from "lightning/mobileCapabilities";
4
5export default class HealthServiceExample extends LightningElement {
6  // Component state: result status, and weight records
7  status = "No health data read yet.";
8  weightRecords = [];
9
10  handleWriteWeight() {
11    const myHealthService = getHealthService();
12
13    // Make sure HealthService is available before trying to write health data
14    if (myHealthService.isAvailable()) {
15      const record = {
16        value: 80.5,
17        unit: "kg",
18        startTime: Date.now(),
19        endTime: null,
20      };
21
22      myHealthService
23        .writeWeight(record)
24        .then(() => {
25          this.status = "Weight record saved to device.";
26        })
27        .catch((error) => {
28          // Handle permission or write errors here
29          this.status = "Error code: " + error.code + "\n\nError message: " + error.message;
30          console.error(this.status);
31        });
32    } else {
33      // HealthService isn't available
34      // Are you running in a supported mobile app?
35      this.status = "HealthService API isn't available.";
36    }
37  }
38
39  handleGetWeight() {
40    const myHealthService = getHealthService();
41
42    // Make sure HealthService is available before trying to read health data
43    if (myHealthService.isAvailable()) {
44      const options = {
45        startTime: null,
46        endTime: null,
47        limit: 10,
48        preferredUnit: "kg",
49      };
50
51      myHealthService
52        .getWeight(options)
53        .then((results) => {
54          this.weightRecords = results;
55          this.status = "Number of records read: " + results.length;
56        })
57        .catch((error) => {
58          // Handle permission or read errors here
59          this.weightRecords = [];
60          this.status = "Error code: " + error.code + "\n\nError message: " + error.message;
61          console.error(this.status);
62        });
63    } else {
64      // HealthService isn't available
65      this.status = "HealthService API isn't available.";
66    }
67  }
68}

See Also

Use the HealthService API