---
alias: tutorials-smart-barcode-advanced-ui-page
glightbox: false
description: "This documentation details a dynamic UI page for filtering and displaying data based on barcode input, utilizing widgets and a"
---

# Advanced UI Page

## Configuration

Now, let’s build a more dynamic example - combining a [[user-guide-uipage-widgets-filter]] widget with a [[user-guide-uipage-widgets-grid]] widget, and connecting them through a [[user-guide-system-tasks-data-sources#query|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 [[user-guide-uipage-widgets-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.

![Filter widget settings to use with barcode scanning](../images/filter_widget_settings_barcode.png)

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 [[user-guide-uipage-widgets-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.

![Grid widget settings to use with barcode scanning](../images/grid_widget_settings_barcode.png)

To connect this UI Page to data, add a [[user-guide-system-tasks-data-sources#query|Query]] task. In the top ribbon, select **Settings**, then go to the **Tasks** tab. Add a query named `MaterialsQuery` as shown below:

![Query task settings to use with barcode scanning](../images/query_task_settings_barcode.png)

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:

=== "Link 1"

    ![Linking query task settings to use with barcode scanning](../images/linking_query_task_settings_barcode.png)

=== "Link 2"

    ![Linking query task settings to use with barcode scanning](../images/linking_query_task_settings_barcode2.png)

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**:

```markdown
AXCookie012
```

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.

![Scenario with an advanced ui page that can be used with smart barcode scanning](../images/advanced_ui_page_barcode.png)

To filter by **Product**, the following string was used:

```markdown
EXCookie-A
```

Here, `EX` corresponds to `Material.Product.Name`, allowing the system to locate all materials with the specified product.

![Scenario with an advanced ui page that can be used with smart barcode scanning](../images/advanced_ui_page_barcode2.png)

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.

<!-- Video filename: barcode_scanning_advanced_ui_page.mp4 -->
{% set video_id = '25d95bae5d13480e022552b8f1dd23a1' %}
{% include-markdown 'includes/cloudflare_stream.md' %}