---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-barcode-actions-widget
widgetname: Barcode Actions
description: "This documentation details a widget for scanning barcodes and associating them with system objects"
---

# Barcode Actions

![Screenshot showing a barcode with its corresponding ID displayed.](images/barcode_ID.png){width=75}

## Overview

The Barcode Actions widget provides a simple way for you to scan barcodes (line or QR codes) that match specific objects within the system. The available objects that can be matched are:

* Material
* Resource
* Container

![Screenshot showing a barcode widget.](images/barcode_widget.png)

For more information on how the system uses barcodes, see [[barcode-identification-index]].

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![Screenshot showing barcode settings.](images/barcode_settings.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![Diagram showing a widget customization interface with a border width and color setting.](images/barcode_style.png)

2. In the **Entities** tab, provide the Entity Type and the property that should be matched when the barcode is read.

    ![Screenshot showing a configuration screen for the Barcode Actions widget with fields labeled "Entities" and "Actions".](images/barcode_entities.png)

3. In the **Actions** tab, you can add as many properties as desired by selecting the :material-plus: button. Properties can be removed by pressing the :material-trash-can: button. For each property, you need to specify the following:

    * **System Action Button** - Select the action that the button will perform.
    * **System Action** - Automatically determined based on the chosen system action button.
    * **Reset Entities on Success** - Indicate whether to reset the entities upon successful completion.
    * **Text** - The text to display on the action button.
    * **Icon** - The icon to use for the action button.
    * **Security Feature** - A security feature that restricts access to users without the specified feature. This is a free text entry but must exist in the system. For more information, see [[user-guide-security-features]].

    ![Screenshot showing configuration options for the Barcode Actions widget, including entities and actions.](images/barcode_actions.png)

4. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Screenshot showing settings for linking widget to other elements on the UI page.](images/barcode_links.png)

5. Select **Save and Close** to complete the widget configuration.

## Real Use Case

To help you take full advantage of the Barcode Actions widget, the following scenario demonstrates how to connect a Barcode Actions widget and a [[user-guide-uipage-widgets-form]] widget with a [[user-guide-system-tasks-data-sources#barcode|Barcode]] task.

1. Configure the Barcode Actions widget, namely defining the Entities and the Actions to be performed, as shown below.

    === "Entities"

        ![Screenshot showing a configuration screen for the Barcode Actions widget with fields labeled "Entities" and "Actions".](images/barcode_entities.png)

    === "Actions"

        ![Screenshot showing configuration options for the Barcode Actions widget, including entities and actions.](images/barcode_actions.png)

2. Next, configure the Barcode task. For more information, see [[user-guide-system-tasks-data-sources#barcode]].

    ![Data Source Barcode Settings](../../system-tasks/images/data_source_barcode_settings.png)
  
3. Configure the Form widget by adjusting the General Settings and defining the Fields as displayed below. For more information on this widget, see [[user-guide-uipage-widgets-form]].

    === "General"

        ![formGeneral](images/form_general.png)

    === "Fields"

        ![formFields](images/form_fields.png)

4. Connect the widgets and tasks using the Links diagram as shown below. For more information on using the Links diagram, see [[user-guide-uipages-design]].

    ![formFields](images/use_case_barcode_widget_links.png)

5. The final result should look like this.

    ![formFields](images/use_case_barcode_widget.png)