X

Smart Advice. Agile. Personalized. Transparent.

How to enable barcode scanning in an Intelligent Advisor mobile interview

Sue Novak
Senior Technical Writer

Introduction

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. 

Walkthrough

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.

Set-up

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). 

Add the custom property

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".

Custom property settings for a barcode input in Oracle Policy Modeling

(This custom property is used by the interview extension via the control.getProperty() method).

Add the custom files

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:

  • barcode.css (this provides the styling for the barcode input field and scan button)
  • barcode.js (this is the Intelligent Advisor interview extension file)
  • quagga.min.js (this is the third-party JavaScript barcode-reader that our interview extension uses to scan the photo of the barcode to turn it into numbers)

In the /interview-theme/resources/images folder, add this file:

  • barcode.svg (this is the barcode image that will be displayed in the Receipt number field in the interview to open the camera)

Deploy the project

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.

Scan a barcode in the mobile app

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.

Barcode button shown in Receipt number field in the My Store App interview on a mobile device

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!

A number shown in the Receipt number field in the My Store App interview on a mobile device

Credits

Quagga JavaScript library: https://serratus.github.io/quaggaJS/  distributed under MIT License

Walkthrough design and implementation: Chris Flemming

Title image: Fiona Guy

Join the discussion

Comments ( 1 )
  • Aaron Houston Thursday, July 30, 2020
    This is a great demonstration of utilizing OIA's javascript extension framework. Fantastic setup and use case!
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.