Advanced UI Page#
Configuration#
Now, let’s build a more dynamic example - combining a Filter widget with a Grid widget, and connecting them through a Query task. This setup allows you to scan a barcode and instantly filter and display results in a data table.
Start by creating a new UI Page and adding a Filter widget. For more information, see Filter.
In the Setup tab of the widget, set the Entity Type to Material. In the Filters tab, configure the fields below with matching Barcode Field Name entries:
| Field | Operator | Barcode Field Name |
|---|---|---|
| SystemState | IsEqualTo | Material.SystemState |
| Product | IsEqualTo | Material.Product.Name |
| Flow | IsEqualTo | Material.Flow.Name |
| Name | Contains | Material.Name |
Table: Filter widget configuration with barcode field names
In the image below, you can see the configuration described the table.
Next, add a Grid widget as a inner widget of the Filter. Select the three vertical dots to access the settings of the widget. For more information, see Grid.
In the Setup tab of the widget, set the Selection Mode as Multiple. In the Columns tab, add the following column details:
| Name | Path | Barcode Field Name | Barcode Field Value Path | Type | Value Reference Type | Value Entity Type |
|---|---|---|---|---|---|---|
| Material | Id | Material.Name | Name | ReferenceType | Entity Definition | Material |
| System State | SystemState | Material.SystemState | SystemState | ReferenceType | Enum | Cmf.Navigo.BusinessObjects.MaterialSystemState |
| Primary Quantity | PrimaryQuantity | Material.PrimaryQuantity | PrimaryQuantity | Integer | ||
| Primary Units | PrimaryUnits | Material.PrimaryUnits | PrimaryUnits | String | ||
| Product | Product | Material.Product.Name | Product.Name | ReferenceType | Entity Definition | Product |
| Flow | Flow | Material.Flow.Name | Flow.Name | ReferenceType | Entity Definition | Flow |
| Step | Step | Material.Step.Name | Step.Name | ReferenceType | Entity Definition | Step |
Table: Grid widget configuration for barcode-ready columns
In the image below, you can see the configuration described the table.
To connect this UI Page to data, add a Query task. In the top ribbon, select Settings, then go to the Tasks tab. Add a query named MaterialsQuery as shown below:
The MaterialsQuery is a simple MES query with Entity Type set to Material, returning the same fields defined in the Grid.
Finally, connect the Filter to the Grid using the Links tab in the UI Page settings. Add the links configurations shown here:
The first link connects the query data source to the Grid, while the second link connects the Filter to the query, ensuring that the results displayed reflect the filter criteria.
Barcode Scanning in Action#
With the advanced UI Page configured using a Filter, a Grid, and a Query Task, you can use Smart Barcode Scanning to quickly filter and display materials based on barcode input.
For example, the following string was used to filter by Material Name:
This barcode includes the prefix AX for Material.Name, which is defined in the filter configuration. Upon scanning, the Filter widget applies the condition and updates the Grid accordingly.
To filter by Product, the following string was used:
Here, EX corresponds to Material.Product.Name, allowing the system to locate all materials with the specified product.
You can also use this feature in the Step View or Resource View. When there is an exact match, the system will automatically select the matching item. This behavior does not occur when there is a partial match or more than one match.
The video below demonstrates how barcode scanning interacts in the advanced scenario.