Ever heard of Near Field Communication (NFC)? NFC is a facility that can be used for two devices to interface with each other, mostly through a physical chip that each of the two devices can read from. While it sounds a bit complicated, let’s simplify it with a real-world example.
You may have noticed the icon that looks like a wifi signal on top of your credit card. That icon means that the card is NFC-ready. This allows you to be able to make contactless payments between your credit card and a card reader when you are at a store making a purchase.
With the power of NFC in mind, we are pleased to announce the debut of our NFCService mobile capability! Using NFCService, you can update records via Lightning web components (LWCs) using the native NFC capabilities readily available on iOS and Android devices.
Let’s take a look at how!
Work with the NFCService API
Before we discuss how to use the NFCService API, let’s walk through a quick example of NFCService using Dreamhouse, a sample app that features some LWCs for mobile use cases in a real estate context.
Say that a homeowner wants to sell their house and contacts your real estate agency to help with the sale. As part of preparing the house for sale, you need to update the Opportunity information within Salesforce to keep track of the various steps involved, one of which is putting out the “For Sale” sign. Prospective home buyers who are interested in the house need to be able to get information about it. However simply putting an NFC tag on a For Sale sign won’t do, right?
You need a way for your teams to internally write to the NFC tag with the home specifications, so that the specs are available to potential home buyers who are scanning the NFC tag on the For Sale sign.
Enter NFCService! Using the NFCService API, you can take many actions with an NFC tag, including:
- Writing to an NFC tag
- Reading from an NFC tag
- Deleting data from an NFC tag
Note: Write and delete actions only work on writeable NFC tags, not on read-only NFC tags.
So, back to our example. You can use NFCService to write to the NFC tag that is newly generated and use it to do things like transfer the Opportunity record information from Salesforce directly to the NFC tag via LWC on mobile.
Let’s take a look at how we can do all of this.
Configure the NFCService API
The NFCService API allows us to interact with NFC tags in the vicinity via LWC. This can be done through two steps:
- Configure your LWC HTML template to include the initiator, which calls NFCService from the user interface, such as a
lightning-buttonbase component. This will be used to prompt the user for an NFC scan. - Configure the LWC JavaScript using the NFCService API to invoke Read, Write, and Delete methods.
Note: To use NFCService, the end user looking to use the functionality on a mobile device must have an NFC-supported device on hand.
Step 1: Configure your LWC HTML template
We will need to get the HTML corresponding to the preferred LWC interface we are trying to build. As noted previously, NFCService comes with three capabilities, which include reading, writing, and deleting from NFC tags.
For our Dreamhouse example, we will need all three as the folks writing data to the NFC tag will also need a way to delete any incorrect data from it as well, and also test that the final data from the NFC tag is being properly read.
To query each of these capabilities, we will add a lightning-button base component for each event: read, write, and delete. Each of these three buttons queries three different event handlers in their onclick function.
Once these are added, the LWC interface for the above HTML code will look similar to the image below once each action has been completed.
Once the read, write, and erase actions take place, the LWC can also be prompted to show responses saying whether the action has successfully been completed or not. In addition, when writing to an NFC tag, you will also be able to see the JSON payload of the contents that you are writing to the NFC tag in the user interface, like below.
Now that we’ve seen what the interface can look like, let’s dive into the JavaScript API calls behind the scenes that are necessary to make these happen.
Step 2: Configure the NFCService API to invoke read, write, and delete methods
In Step 1, we configured three onclick event handlers on NFCService in the HTML file, each corresponding to read, write, and erase functions. Here we will need to connect that method to the NFCService API that we import via mobileCapabilities.
You can use the following API calls to interface with NFCService.
| API Call | Params | Response | Description |
getNFCService |
None | NFCService |
Initializes NFCService in your JavaScript class after importing the module from the lightning/MobileCapabilities module. |
isAvailable |
None | true / false |
Allows you to check whether the mobile device has NFC capabilities available on device to invoke. Reference our Compatibility & Requirements for more details and a list of supported devices. |
read() |
Options – Object
Reference NFCServiceOptions |
Success/Fail – Reference Returns | Allows you to read the contents of the NFC tag. |
write() |
payloads – array[] Options – ObjectReference Parameters |
Success/Fail – Reference Returns | Allows you to write contents to the NFC tag. |
erase() |
Options – Object
Reference NFCServiceOptions |
Success/Fail – Reference Returns | Allows you to erase contents to the NFC tag. |
createTextRecord() |
payload – Object
Reference Parameters |
Success/Fail – Reference Returns | Allows you to take a given text payload and create a properly formatted NFCRecord that is to be written to an NFC tag. |
createURIRecord() |
payload – String
Reference Parameters |
Success/Fail – Reference Returns | Allows you to take a given URI string payload and create a properly formatted NFCRecord that is to be written to an NFC tag. |
When using these APIs in your JavaScript LWC code, it would look like this:
Important Notes
- In NFCService, you can configure the response text for NFC tag actions using the NFCService data types we provide. This means that you can configure your LWC to show instructional text to end users on how to position the NFC Scanner, or provide custom success and error case text to alert your end user on the LWC. Reference NFCService Data Types for more details.
Erasure of NFC tags:
- ⚠️ [VERY IMPORTANT‼️] Erasing an NFC tag is a destructive action, and deleted data from an NFC tag cannot be restored. We recommend adding a confirmation window within the LWC flow before erasure takes place, so that users trying to delete data are 100% sure of this action and its ramifications before going through with it.
- You cannot erase read-only NFC tags. You can only erase write-only tags.
NFCService compatibility
NFCService is available in the Spring ’24 release across the Salesforce Mobile App, Salesforce Mobile App Plus, and Salesforce Field Services offerings. See the Mobile Capabilities Compatibility Summary to stay up to date with its availability across our Salesforce mobile apps.
Conclusion
We hope that you’ve enjoyed this blog post and that you are looking forward to using the NFC scanning capabilities on your LWC for mobile. To get started:
- Dive in! Take a look at our example LWCs to get familiar with the plugin.
- Personalize it! Take NFCService capabilities and expand on them to customize them for your business needs.
- Reach out! If you have any questions, comments, or ideas, you can connect with us in the Salesforce Mobile Trailblazer Community.
- Explore! While this example was in the context of the Dreamhouse app, that’s not the only use case for NFC! There are even more scenarios across industries in our daily lives, such as scanning medical devices for patient monitoring or tracking your retail inventory via NFC scan.
To learn more about Salesforce’s mobile offerings, check out the Mobile and Offline Developer Guide.
About the author
Ashwin Nair is a Product Manager at Salesforce focused on Salesforce Mobile. He is currently working on mobile platform experiences and has been in the web and mobile development space for over seven years. Follow him on LinkedIn.