NFCService Example

Here’s a basic example of a Lightning web component that uses NFCService to parse text data from an image.

The component’s HTML template is minimal, with a display view that includes three buttons, one each for read, erase, and write operations.

1<template>
2  <lightning-card title="NFC Service Demo" icon-name="custom:phone_portrait">
3    <div class="slds-var-m-around_medium">
4      Choose an action to perform on an NFC tag:<br /><br />
5
6      <lightning-button
7        variant="brand"
8        label="Read"
9        title="Read the content of an NFC tag"
10        onclick="{handleReadClick}"
11      >
12      </lightning-button>
13      <lightning-button
14        variant="brand"
15        label="Erase"
16        title="Erase the content of an NFC tag"
17        onclick="{handleEraseClick}"
18        class="slds-var-m-left_x-small"
19      >
20      </lightning-button>
21      <lightning-button
22        variant="brand"
23        label="Write"
24        title="Write sample content to an NFC tag"
25        onclick="{handleWriteClick}"
26        class="slds-var-m-left_x-small"
27      >
28      </lightning-button>
29    </div>
30    <div class="slds-var-m-around_medium">
31      <lightning-formatted-text value="{status}"></lightning-formatted-text>
32    </div>
33  </lightning-card>
34</template>

This example uses NFCService to select the NFC operation to be performed, performs the operation, and displays a success message when completed successfully. An error message is returned when there’s an error.

1import { LightningElement } from "lwc";
2import { getNfcService } from "lightning/mobileCapabilities";
3
4export default class NimbusPluginNfcService extends LightningElement {
5  status;
6  nfcService;
7
8  connectedCallback() {
9    this.nfcService = getNfcService();
10  }
11
12  handleReadClick() {
13    if (this.nfcService.isAvailable()) {
14      const options = {
15        instructionText: "Hold your phone near the tag to read.",
16        successText: "Tag read successfully!",
17      };
18      this.nfcService
19        .read(options)
20        .then((result) => {
21          // Do something with the result
22          this.status = JSON.stringify(result, undefined, 2);
23        })
24        .catch((error) => {
25          // Handle errors
26          this.status = "Error code: " + error.code + "\nError message: " + error.message;
27        });
28    } else {
29      // service not available
30      this.status = "Problem initiating NFC service. Are you using a mobile device?";
31    }
32  }
33
34  handleEraseClick() {
35    if (this.nfcService.isAvailable()) {
36      const options = {
37        instructionText: "Hold your phone near the tag to erase.",
38        successText: "Tag erased successfully!",
39      };
40      this.nfcService
41        .erase(options)
42        .then(() => {
43          this.status = "Tag erased successfully!";
44        })
45        .catch((error) => {
46          // Handle errors
47          this.status = "Error code: " + error.code + "\nError message: " + error.message;
48        });
49    } else {
50      // service not available
51      this.status = "Problem initiating NFC service. Are you using a mobile device?";
52    }
53  }
54
55  async handleWriteClick() {
56    if (this.nfcService.isAvailable()) {
57      const options = {
58        instructionText: "Hold your phone near the tag to write.",
59        successText: "Tag written successfully!",
60      };
61      const payload = await this.createWritePayload();
62      this.nfcService
63        .write(payload, options)
64        .then(() => {
65          this.status = "Tag written successfully!";
66        })
67        .catch((error) => {
68          // Handle errors
69          this.status = "Error code: " + error.code + "\nError message: " + error.message;
70        });
71    } else {
72      // service not available
73      this.status = "Problem initiating NFC service. Are you using a mobile device?";
74    }
75  }
76
77  async createWritePayload() {
78    // Here we demonstrate how you can write several records to an NFC tag.
79    // Consider the scenario where you want to write the content of a business card
80    // to an NFC tag. The content can be broken down into a number of text and uri records.
81    const nameRecord = await this.nfcService.createTextRecord({ text: "John Smith", langId: "en" });
82    const phone1Record = await this.nfcService.createTextRecord({
83      text: "(123) 456-7890 Office",
84      langId: "en",
85    });
86    const phone2Record = await this.nfcService.createTextRecord({
87      text: "(321) 654-0987 Direct",
88      langId: "en",
89    });
90    const emailRecord = await this.nfcService.createUriRecord("mailto:john.smith@email.com");
91    const addressRecord = await this.nfcService.createTextRecord({
92      text: "584 South Paris Hill Ave., Lancaster, CA 93535",
93      langId: "en",
94    });
95    const websiteRecord = await this.nfcService.createUriRecord("https://www.mycompany.com");
96    return [nameRecord, phone1Record, phone2Record, emailRecord, addressRecord, websiteRecord];
97  }
98}