Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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      </lightning-button>
12      <lightning-button
13        variant="brand"
14        label="Erase" 
15        title="Erase the content of an NFC tag"
16        onclick={handleEraseClick} 
17        class="slds-var-m-left_x-small">
18      </lightning-button>
19      <lightning-button
20        variant="brand"
21        label="Write" 
22        title="Write sample content to an NFC tag"
23        onclick={handleWriteClick} 
24        class="slds-var-m-left_x-small">
25      </lightning-button>
26    </div>
27    <div class="slds-var-m-around_medium">
28      <lightning-formatted-text value={status}></lightning-formatted-text>
29    </div>
30  </lightning-card>    
31</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.read(options)
19          .then((result) => {
20            // Do something with the result
21            this.status = JSON.stringify(result, undefined, 2);
22          })
23          .catch((error) => {
24            // Handle errors
25            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
26          });
27      } else {
28        // service not available
29        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
30      }
31    }
32
33    handleEraseClick() {
34      if(this.nfcService.isAvailable()) {
35        const options = {
36          "instructionText": "Hold your phone near the tag to erase.",
37          "successText": "Tag erased successfully!"
38        };
39        this.nfcService.erase(options)
40          .then(() => {
41            this.status = "Tag erased successfully!";
42          })
43          .catch((error) => {
44            // Handle errors
45            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
46          });
47      } else {
48        // service not available
49        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
50      }
51    }
52
53    async handleWriteClick() {
54      if(this.nfcService.isAvailable()) {
55        const options = {
56          "instructionText": "Hold your phone near the tag to write.",
57          "successText": "Tag written successfully!"
58        };
59        const payload = await this.createWritePayload();
60        this.nfcService.write(payload, options)
61          .then(() => {
62            this.status = "Tag written successfully!";
63          })
64          .catch((error) => {
65            // Handle errors
66            this.status = 'Error code: ' + error.code + '\nError message: ' + error.message;
67          });
68      } else {
69        // service not available
70        this.status = 'Problem initiating NFC service. Are you using a mobile device?';
71      }
72    }
73
74    async createWritePayload() {
75      // Here we demonstrate how you can write several records to an NFC tag.
76      // Consider the scenario where you want to write the content of a business card
77      // to an NFC tag. The content can be broken down into a number of text and uri records.
78      const nameRecord = await this.nfcService.createTextRecord({text: "John Smith", langId: "en"});
79      const phone1Record = await this.nfcService.createTextRecord({text: "(123) 456-7890 Office", langId: "en"});
80      const phone2Record = await this.nfcService.createTextRecord({text: "(321) 654-0987 Direct", langId: "en"});
81      const emailRecord = await this.nfcService.createUriRecord("mailto:john.smith@email.com");
82      const addressRecord = await this.nfcService.createTextRecord({text: "584 South Paris Hill Ave., Lancaster, CA 93535", langId: "en"});
83      const websiteRecord = await this.nfcService.createUriRecord("https://www.mycompany.com");
84      return [nameRecord, phone1Record, phone2Record, emailRecord, addressRecord, websiteRecord];
85    }
86}

Mobile and Offline Developer Guide

NFCService Example