Mobile Framework

Use Bar Codes for Search and Data Entry on Mobile Forms

Example Views:
Solutions Template / Controls / Search with Bar Code
Solutions Template / Controls / Prompt / Multi-key Bar Code

You may wish to include the capability for users to complete field by scanning a bar code with the camera feature of their mobile device. On the form, fields that can accept bar code values will include a bar code icon so that the user is aware that they can complete the field by scanning.

bar_code_search.png

Bar code scans can populate these types of fields:

  • free text field
  • validated field (if invalid data, the system returns a message)
  • location field
  • search field

Bar code fields are found on these types of forms:

  • data entry forms - Each field on a form that can accept bar code values (e.g. Equipment Code) has a bar code icon beside it that invokes the "Scan Bar code" action.
  • search forms - Search forms can have a "Search with Bar Code" icon, near the regular search entry control and button.

Multi-part bar codes

Companies may label assets both using one-key bar codes or multi-key bar codes, depending on the asset. For example containers may be labeled with a bar code that provides only the container code, while rooms may be labeled with bar codes that store the building, floor, and room information. Thus, when employees involved in field work scan a label, they are not aware whether they are scanning a single key bar code or a multiple key bar code; the employee just needs to identify that asset or room. The bar code control provide a seamlessly way of scanning both single-key and multi-key values.

The bar code control can separate multiple key values (such as HQ-18-101 or Marketing-Administrative) into separate fields. The system will parse the scanned result into the associated field values.

Searching by multiple keys is not be limited to the room scenario. Other types of assets, such as parts of equipment may use bar codes that have multiple keys (ex. parent equipment code and actual part code). For example, the bar code can contain data for the eq_id and eq_std fields so the configured format would be eq_id|eq_std.

Common.control.field.Barcode configures the fields used to search and the field delimiter.

searchFields: { delimiter: '|', fields:['bl_id','fl_id','rm_id']}

Common.control.field.Barcode calls Common.device.Barcode#scanAndDecode . It has the configurable property barcodeFormat .

For example, if a form has Building, Floor, and Room Codes, the form will have a single "Scan Bar Code" icon beside the Room Code. The scanning action parses the bar code value using the delimiter value from application parameter BarcodeHierarchyDelimiter , e.g. "|". For instance, "HQ|17|101" would be parsed into three values. If the scanning action finds three values, it places them in the Building Code, Floor Code, and Room Code fields. If it finds one value, it places it in the Room Code field.

Initiating a bar code scan

  • Use the Common.device.Barcode#scanAndDecode(barcodeFormat) function to initiate the bar code scan and store each of the multi-part values in separate fields. This has one parameter: config . This returns a promise with the result object.
  • When a barcodeFormat object is not provided, the Common.device.Barcode#scan function is called.

Config is an array of objects that can have the following properties:

Object Optional? Description
fields [mandatory] array of field names
useDelimiter [optional] boolean value that when it is true indicates that scanned value should be parsed in order to obtain the values for specified fields
delimiter [optional] string value used for parsing the scanned value if useDelimiter is true. Multiple delimiters can be defined, separated by semicolon ( ; )

For example:

[ { useDelimiter: true, fields: ['bl_id', 'fl_id', 'rm_id'] }, // use the delimiter set as application parameter { useDelimiter: true, delimiter: '-', fields:['container_cat','container_type', 'container_code'] }, // use a custom delimiter, different than the delimiter set as application parameter { fields: ['status', 'quantity'] } // one-key fields; equivalent with { useDelimiter: false, fields: ['status', 'quantity'] } ]

The result object contains properties:

code the value that was scanned
fields

object containing fields from config object and the decoded value, such as:

{ bl_id: "HQ", fl_id: "01", rm_id: "105", status: "HQ|01|105", quantity: "HQ|01|105" }

This result.fields would be obtained for a scanned value "HQ|01|105" and the config array described above.

Searches and prompts

Class Common.control.Search calls Common.device.Barcode#scanAndDecode

Class Common.control.field.Prompt includes the following configurable properties. Using these properties at the app level determines if a bar code icon should be displayed for the prompt field and how to parse the scanned value.

  • enableBarcodeScanning
  • barcodeFormat

Bar code delimiters

The MobileAppsBarcodeDelimiter application parameter controls the delimiter used in multi-part bar codes.

For example a room bar code that stores Building Code, Floor Code and Room Code can be delimited by the pipe character (|) such as: BOSOFF|01|49A.

Supported bar code fonts

Android

  • QR_CODE
  • DATA_MATRIX
  • UPC_E
  • UPC_A
  • EAN_8
  • EAN_13
  • CODE_128
  • CODE_39
  • CODE_93
  • CODABAR
  • ITF
  • RSS14
  • PDF417
  • RSS_EXPANDED

iOS

  • AZTEC
  • CODABAR
  • CODE_39
  • CODE_93
  • CODE_128
  • DATA_MATRIX
  • EAN_8
  • EAN_13
  • ITF
  • MAXICODE
  • PDF_417
  • QR_CODE
  • RSS_14
  • RSS_EXPANDED
  • UPC_A
  • UPC_E
  • UPC_EAN_EXTENSION