NFC Javascript HELP

App Building
#1

I'm hoping someone can help me, I am extremely new to this and am hoping to use Retool to build an app to go along with my website.

I am trying to scan an NFC tag and initially display the data on the tag with a view to later use this data to pull information from a website using an API.

I was hoping someone could suggest some sample code to display the NFC tag data to ensure it is correctly scanning.

#2

Hi @Lee_Foster!

The nfcReader component will store the data in an array (.data)

You could use a text component with {{JSON.stringify(nfcReader3.data)}} for testing purposes to display the data in your app

You could also use {{nfcReader3.data.length}} to simply ensure some data was scanned

#3

Do I need to configure anything on the nfcReader button to pass the value to the text box?

#4

Hi @Lee_Foster,

Nope! Anything in {{}} is going to be dynamic, so if the nfc reader value gets updated, it will reflect in the text component

#5

Thanks @Tess, it appears my text tag was blank.

I've now added a URL, how would I show just that in the textbox?

#6

Hi @Lee_Foster

Do you have a screenshot of what it looks like currently?

Is it something like [{url: "www.url-here.com"}]?

#7

It's

[{"tnf":"WELL_KNOWN","rtd":"URI","payload":"www.url-here.com"}]

#8

Since it's wrapped in {{}}, you can use pretty much any Javascript to manipulate the value or key into the specific value you want to display.

To display only www.url-here.com, you'd use {{nfcReaderName.data[0].payload}} where nfcReaderName is replaced by the name of your component.

See screenshot for the text component setting & how it would look on your mobile device:

#9

@Tess thanks, that did the trick.

Now to sort out the API on my website and connect it that way.

1 Like