---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-assemble-widget
widgetname: Assemble
description: "This documentation details how to create and configure an Assemble widget"
---

# Assemble

:mes-static-assemble-lg:{style="font-size: 100px"}

## Overview

The **Assemble** widget enables users to assemble consumable **Materials** during assembly operations. **Materials** can be identified through barcode scanning, camera-based scanning, or manual entry, allowing users to record **Material** consumption and provide any required **BOM** information.

The widget also provides real-time visibility into **Material** consumption status throughout the assembly process. While it is used to perform Assemble operations, it displays the current state of **Materials** based on assembly-related activities, including Assemble, Disassemble, and Replace Assembled operations.

## General

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

![Assemble Widget - General tab](images/assemble_widget_general.png)

## Style

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

![Assemble Widget - Style tab](images/assemble_widget_style.png)

## Links

In the **Links** tab, define the links between this widget and other elements of the UI Page.

![Assemble Widget - Links tab](images/assemble_widget_link.png)

You can also configure these links in the **Links** tab of the UI page.

![Assemble Widget - Links viewed in the UI pages Links tab](images/assemble_widget_link_02.png)

Select **Save and Close** to apply the configuration. The widget will be changed accordingly.

## Real Use Case

The Assemble widget is intended for assembly processes in  which **Materials** are consumed progressively throughout the execution of a production **Step** rather than in a single operation.

A common scenario is a long-running assembly process in which users assemble consumable **Materials** as they become available or as assembly work progresses. To support this workflow, the widget operates on an active **BOM** Instance created from either a **BOM** configured for an `Explicit Long Running` assembly context or a **BOM** with **Assembly Type** set to `Mixed` and **Mixed Assembly Type** set to `Explicit Long Running`.

The **BOM** Instance acts as the runtime record of the assembly process and allows users to perform incremental assembly operations while maintaining visibility into the current assembly progress and **Material** consumption.

### Preconditions

For the Assemble widget to function correctly in this use case:

* Configure an entry in the [[bomcontext-st]] smart table with the **Assembly Type** set to `Explicit Long Running` or `Mixed`, according to the **BOM** configuration.

* If the **Assembly Type** is set to `Mixed`:

    * Enable **Use Mixed Assembly** - Enables Mixed Assembly mode on the **BOM**, allowing some **BOM** Items to be assembled manually, while others are handled automatically by the system.

    * Set **Mixed Assembly Type** to `Explicit Long Running` - Defines the manual assembly behavior within the Mixed Assembly. This mode allows assembling quantities progressively rather than all at once.

### Widget Linking

The Assemble widget can be linked to other UI Page elements to receive the **BOM** Instance information it requires. In this example, two input links pass the **BOM** Instance identifier and entity type to the widget's `GetBomInstance` service call.

These links are defined in the **Links** tab of the UI Page settings.

![Screenshot showing the setup in the Links tab of the UI Page Settings wizard.](images/assemble_widget_links_tab_ui_page.png)

### Steps

1. Add the **Assemble** widget to the UI Page.

2. Fill in the **General** and **Style** tabs.

3. In the **Links** tab, configure the following inputs:

    * Source - Select the source service call (in this case, `GetBomInstance`).
    * Output - Choose the expected output (in this example, `output$Instance`).
    * Target - Select `Assemble`.
    * Input - Choose `BOM Instance`.

    ![Screenshot showing the Links tab configuration as an example.](images/assemble_widget_link.png)

4. After saving and closing the widget, select **Preview** from the action bar, and enter a **BOM** Instance ID.

    ![Screenshot showing the wizard to insert a BOM Instance ID.](images/assemble_widget_use_case01.png)

5. The widget displays the **Products** and **Materials** associated with the selected **BOM** Instance.

    ![Screenshot showing the Assemble widget with the BOM Instance ID loaded.](images/assemble_widget_use_case02.png)

6. Scan the **Material** barcode using a physical barcode scanner. Alternatively, select the :material-camera: to scan the barcode, or manually enter the **Material** name in the input field.

    ![Screenshot showing the camera icon and barcode to assign the Material.](images/assemble_widget_use_case03.png)

    !!! note "Auto Consume Max. Quantity"

        If the Auto Consume Max. Quantity checkbox is enabled, the system automatically consumes the maximum quantity required when a Material is scanned and skips the quantity entry step. For example, if a Product has a quantity of 1/10, it requires 9 additional units. If a Material with 50 available units is scanned, the system automatically consumes 9 units from that Material.
        
        If the Auto Consume Max. Quantity checkbox is disabled, the Assemble Item dialog opens after the scan, allowing the user to manually specify the quantity to consume.

7. If the Assemble Item dialog is displayed after scanning a **Material**, define the quantity to consume. In some conditions, additional information or quantity is required. In these cases, use the dialog to:

    * Select the appropriate **Material**.
    * Enter the exact consumed quantity.
    * Fill out additional information (if configured in the **BOM** item).
    * Select Advanced Details to provide extra information, such as recording **Material** losses or specifying locations.

    ![Screenshot showing the popup widget to enter the Material name](images/assemble_widget_use_case04.png)

    Continue scanning **Materials** until the required quantity is consumed.

8. The Assemble widget provides real-time status updates for assembled and disassembled **Materials**.

    ![Screenshot showing the Consumable Assemble panel with different states](images/assemble_widget_use_case05.png)

!!! info
    The color indicators show how the assembled quantity compares to the required quantity:

    * **Red** - The current quantity does not meet the required quantity and is outside the accepted minimum and maximum range.
    * **Yellow** - The current quantity does not exactly match the required quantity but is within the accepted minimum or maximum range.
    * **Green** - The current quantity matches the required quantity.

The Assemble widget panel can also reflect assembly-related operations performed on the **Materials**, such as **Disassemble** and **Replace Assemble**.

=== "Disassemble"

    When a **Disassemble** operation is performed, the corresponding **Material** is displayed with its operation icon and with a negative quantity indicator (`-qty`).

    ![Screenshot showing the disassembled icon in the Assemble widget panel.](images/assemble_disassemble.png)

=== "Replace Assembled"

    When a **Replace Assembled** operation is performed, the corresponding **Material** is displayed with the respective operation icon.

    ![Screenshot showing the replaced assembled icon in the Assemble widget panel.](images/assemble_replace_assembled.png)