Barcode data to component property

I am creating an app that requires barcode scans via mobile device camera on multiple different pages of the project. For my record look up page, I have a button that allows the user to scan the barcode. In an ideal world, I want the scanned barcode text to populate a text input field's text property called "MasterListSearchBar" on my view "OP10MasterList", but something seems to be wrong with my process. Any guidance?

Barcode Scanner Button Event:

Barcode Session Event:

system.gui functions are Vision only, not Perspective. You need to emit a message (system.perspective.sendMessage) to go from your onBarcodeDataReceived back to your active Perspective session context.

1 Like

I am a bit new to ignition so I am not too sure how I would go about doing that in application. Can you demonstrate?

It's annoyingly indirect.

Basically:
In your barcode handling event, send out a message using
system.perspective.sendMessage. That message will have a scope and handler name associated with it. You 'broadcast' a message that says "a barcode scan related to MasterListSearch happened.

Then, in your component, you configure a message handler that listens for the 'type' of message you just broadcast, read the new value out of the "payload" of that message, and assign it to the text field.

See this video for more details:

2 Likes

You can also write the barcode string to a tag and bind your component's text value to the tag. Useful if you need to reference in more than one place, or if you want to setup a history of the barcodes scanned, or just view what the last scan was by inspecting the tag in designer/gateway.

2 Likes

Don't do this if multiple clients will be working simultaneously....

Perhaps write to a session custom prop.

2 Likes

This is my new process. I am still getting nothing populated in the text input field.
Barcode Scan Button:


Session Barcode Event:

Text Input Field Message Handler:

Potentially two things -
1 -

Look at the red underline and the red mark on the right hand side, circled. These indicate there is a syntax error that will prevent this code from compiling or running. The issue here is your line 3 should be indented. You always have to indent after a if statement.

2 (Potentially) -
image

I think this should be session. Right now it's checked to Page so it's only listening for messages from 'MasterListSearch' from other components on the page, but you are sending it from a Session event, so I think this listen scope may need to change to session.

The indentation was incorrect but even when fixed it still doesn't run ^^

Look at my second comment about listen scopes. Also check your gateway logs to see if some error is being thrown.

I changed the session scope and I see no errors being thrown as well. Is there a syntax issue with how I am referencing the text property?

Oh I should have caught this.

Take a look a how the payload is in the documentation system.perspective.sendMessage | Ignition User Manual - it's a dictionary.
So sending the payload should be like {'barcode':data.text} and on the recieving end self.props.text = payload['barcode']

I will say data.text seems odd though if data is a list as per the param documentation
image
Are you sure that is grabbing things appropriately? Never hurts to use a loggers if you want to keep track of what is happening.

Changed the code to this below:



I don't see anything being printed in the console when I scan anything, let alone the text field populating. Does that mean my condition is incorrect?

Yes I would print out the context variable before any if statement see what that looks like see if your condition is correct.

Got rid of all conditions to test it yet still nothing. Is the methodology in which I am sending the message incorrect? Maybe the message isn't being received by the component? This is my third day on ignition so this is all new to me haha.

Try this in the onBarcodeDataReceived -

    logger = system.util.getLogger("Barcode Logger")
    logger.info("Barcode receieved!")

And then scan a barcode and check your logs

Also make sure you are saving your project after change.

Also I highly recommend going through https://inductiveuniversity.com/

1 Like


This is my most recently updated code. Nothing shows up in my session log.

It would be in your gateway logs, not the browser console.