This lesson will cover the following topics:

02 | Use Case
05 | Preview

01 Getting Started

 This tutorial covers how to use the Barcode Generator to generate barcodes, and the Barcode Reader to scan them.

Narcode widget options

02 Use Case

 To demonstrate how to use these widgets, we will use an event registration form, that will collect information from the user, when they click submit a Salesforce action will run to store all the information in Salesforce and redirect the user to a second page in the project.

On the second page, we want a QR code to be generated for the newly created contact.

screenshot showing an example of a barcode generator page

03 Barcode Generator

In the Content tab, you can choose between two types: QR code and Barcode 128.

barcode generator settings screen

When the second page loads, we want a Salesforce Action to run and pull the newly created contact record. This will be used to generate the contact's record QR code.

04 Barcode Reader

In a separate project that will be used to validate each contact’s barcode, the barcode reader will indicate whether the barcode is valid.

screenshot of an example project

1. Navigate to the Barcode Reader Settings menu and click the Interactivity tab.

2. Click the On Scan Action button.

screenshot showing how to navigate to the on scan action button

3. Click the Start + icon and choose Salesforce Action. Here we will configure an action to run and pull a Contact record. The barcode generator in our other project will be used to hold the Contact ID.

screenshot showing salesforce action as the selected node.

When configuring the Salesforce Get, it is important to create a condition that the Contact ID must equal the Barcode Reader Value.

screenshot showing the configured contact ID condition

Under the Mapping tab map your project elements are mapped to the corresponding Salesforce field. In addition, add a mapping of the Total Rows to a corresponding variable (in this use case we called the variable total_results).

After the Salesforce action, we added a condition that evaluates the total_results variable if equals 1.

creating a condition node

On the previous Condition node, an Affected Element action was added to set the status value to Valid and set a green color to it. A similar action has been added to the Else condition this time setting Invalid status.

affected element config

 At the end, the On Click Action screen should look as follows:


screenshot of the on click action screen example

05 Preview

Now a user can enter their details in the Registration project and click Submit. After clicking Submit they will be taken to the next page on which the QR code is generated.

A screenshot showing how the QR code is generated after a user submits

To verify that their registration is valid, the user will navigate to the second project where the Barcode Scanner will check the QR code to determine if it is valid or not.

screenshot showing how the barcode reader works

06 Got Feedback?

Additional Resources