This blog will walk you through enhancing an Intelligent Advisor mobile interview to add a barcode scanner input. This may be used on a mobile interview to scan student IDs, product return barcodes, visa applications, or any other service or HCM use case where the requirement is to scan a barcode to input a number field.
For this example, we are going to add the ability to scan a barcode from the Receipt number field on the Returns Declaration screen in the My Store App example policy model. We're going to do this using an interview extension.
We are using the v12.2.18 Intelligent Advisor mobile app and 12.2.18 Policy Modeling, which includes the My Store App example project (under Projects | Example Projects).
In the My Store App policy model, add a custom property to the Receipt number input control. The custom property has the settings: Key "barcode" and Value "true".
(This custom property is used by the interview extension via the control.getProperty() method).
Next, there are 4 custom files we need to add to the project. These files are contained in this ZIP.
In the /interview-theme/resources folder for your project, add these 3 files:
In the /interview-theme/resources/images folder, add this file:
Deploy the policy model to your Hub. In the Hub, activate the deployment on the Mobile channel and ensure that you have the Mobile role assigned to you for the workspace that the deployment belongs to.
Connect your mobile app to your Hub. Start a new assessment using your My Store App policy model. On the Returns Declaration screen you will see that the Receipt number field now has an image of a barcode on the right side.
Tap the barcode image. The camera on the mobile device opens. Take a photo of your barcode. To ensure that your barcode is readable, the photo of it should be in close and in focus.
The numbers from the barcode are automatically extracted from the photo and added to the field!
Walkthrough design and implementation: Chris Flemming
Title image: Fiona Guy