Barcode Reader Widget

Business Background

Let your customers scan barcodes and update Salesforce records with the information.

Titan Solution

Titan Web lets you add a barcode reader to your projects. Customers using desktop devices can upload a barcode image. Customers using mobile devices will be able to take a photo of the barcode and upload the data.

Add any conditional logic to the barcode reader. For instance, a user can scan the barcode of a product and get information from the ProductID (for instance, the warranty) from Salesforce in real time. The user can push information to Salesforce or trigger any other action that suits your business needs.

How to Video

Coming soon.

How to Guide

You can configure the barcode reader for desktop devices or mobile devices. The configuration process is the same.

  1. Click on the + icon to add an element.
  2. Under Widgets, drag the Barcode Reader widget to the canvas.
Barcode Reader widget
Barcode Reader widget
  1. Click on the Gear icon to open the BarcodeReader Settings.
  2. Under Interactivity, click on the On Scan Action button. The On Click Action screen opens.
On Scan Action button
On Scan Action button
  1. Click on the + icon to open the Add node screen. You can add any logic you may need here using the Barcode Reader/Value.

The Titan attribute Barcode Reader/Value is the barcode’s numeric value retained after the scan is completed, for example:

This image has an empty alt attribute; its file name is image-902.png

Once this value has been populated in Titan, you can use it to do multiple actions:

  • Salesforce Get
  • Salesforce Push
  • Action Flows, etc.

In our example, a message is added to the “on scan complete” of the barcode reader.

  1. Under Layout Actions, click on the Show message option. The Add Node/Show message screen opens.
  2. Type a message in the body field.
  3. Use the All Element drop-down list to add the Barcode Reader/Value. This will return the numeric value of the barcode.
Add Node/Show message screen
Add Node/Show message screen
  1. Click on the Next button.
Next button
Next button
  1. Add a tag if necessary and click on the Insert button.
  2. Click on the Apply button on the On Click Action screen.
  3. Save and Preview the project for the following:

Desktop devices

  1. Click on the Barcode Reader. The standard Open screen opens.
  2. Browse to and click on the barcode image.
Barcode example
Barcode example

For this example, the following message will be shown:

Scan message example
Scan message example

The value on the barcode has been scanned and can be pushed to Salesforce.

You can also see the numeric value on the Debug window:

  1. Make sure the debug option is on: Project Settings > Tools > Debug Mode toggle switch.
  2. Click on the Debug option on the webpage (bottom right of the screen).
  3. Search for “barcode”.

This image has an empty alt attribute; its file name is image-904-1024x636.png

Hidden Title

Need more help?