---
alias: tutorials-smart-barcode-simple-ui-page
glightbox: false
description: "Extend UI pages with barcode scanning for automated data entry and form population consistency"
---

# 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 [[user-guide-uipage-widgets-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-gt]] 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](../images/form_barcode_field.png)

Once the form fields are set, define the barcode field mappings in the [[labelspecificationfield-gt]] 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-gt]] 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](../images/uipage_barcode_field.png)

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

```markdown
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](../images/form_barcode.png)

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

<!-- Video filename: barcode_scanning_simple_ui_page.mp4 -->
{% set video_id = '578a03f53c1ed8052014422eca4100c9' %}
{% include-markdown 'includes/cloudflare_stream.md' %}

!!! info
    Continue to [[tutorials-smart-barcode-advanced-ui-page]] for the last scenario.