Simple UI Page#

In addition to built-in MES wizards, Smart Barcode Scanning can be extended to UI Pages. This enables custom applications to take full advantage of barcode automation.

Configuration#

Let’s begin with a simple Form-based UI Page. In this scenario, the page includes a form with three reference fields: Material, Product, and Flow.

To enable barcode scanning in this form, you must configure each field with a Barcode Field Name. These names must match the Target Field values that will later be defined in the LabelSpecificationField Generic Table.

Access the Settings of the Form and, in the Fields tab, add the following values:

Name	Value Type	Value Reference Type Name	Barcode Field Name
Material	ReferenceType	Entity Definition	Material.Name
Product	ReferenceType	Entity Definition	Material.Product.Name
Flow	ReferenceType	Entity Definition	Material.Flow.Name

Table: Configuration of barcode field names in the Form widget

You can see this configuration in the UI below:

Settings used in the form widget to enable smart barcode scanning

Once the form fields are set, define the barcode field mappings in the LabelSpecificationField Generic Table as follows:

Label Specification	Field Name	Field Sequence	Field Data Type	Field Prefix	Target Field
GS1	Material Name	1	String	AX	Material.Name
GS1	Material Product	5	String	EX	Material.Product.Name
GS1	Material Flow	7	String	GX	Material.Flow.Name

Table: Example configuration in the LabelSpecificationField table for the form widget

What matters most in this setup is consistency: the Barcode Field Name in the widget must exactly match the Target Field in the LabelSpecificationField Generic Table. This ensures the scanned values are correctly parsed and populated into the form.

The final result should resemble the following:

UI Page of a form that uses smart barcode scanning to fill in the fields

Barcode Scanning in Action#

With the Form widget configured to support Smart Barcode Scanning, you can now scan barcodes to automatically populate the form fields. The example below shows the string used in the video demonstration:

AXCookie012%EXCookie-A%GXCookiesFlow

This barcode includes three segments:

AXCookie012 sets the Material to Cookie012
EXCookie-A sets the Product to Cookie-A
GXCookiesFlow sets the Flow to CookiesFlow

The barcode generated from this string is shown below:

example of the barcode used in the UI Page with a simple form widget

The video below demonstrates how scanning the barcode automatically fills the fields in the UI Page form:

Info

Continue to Advanced UI Page for the last scenario.