---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-sliding-grid
widgetname: Sliding Grid
description: "This documentation details configuring a sliding grid widget for hierarchical data representation, including customization options and barcode integration"
---

# Sliding Grid

![sliding Grid][sliding Grid]

## Overview

The Sliding Grid allows you to configure all the levels and columns in the Sliding Window via the widget settings. The widget allows for a fast representation of hierarchical data. The look and feel of a Sliding Grid is shown below.

![slidingGridExample][slidingGridExample]

!!! smart-barcode "Smart Barcode Scanning"
    This widget supports [[smart-barcode-scanning|Smart Barcodes]].

## General Steps

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

![Sliding GridGeneral](images/sliding_grid_general.png)

## Widget Customization

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

    ![Sliding Grid style](images/sliding_grid_style.png)

2. In the **Setup** provide the following details:

    * **Title** - Set the title of the Sliding Grid.
    * **Lazy Load** - Set to `true` by default, this option determines whether the grid uses lazy loading.
    * **Show Header Counter On Paginated** - Set to `true` by default, this option displays the header counter when the grid is paginated.
    * **Show Only Total Items In Smaller Widths** - Set to `true` by default, this option shows the total item count only on smaller screens.

    ![Sliding Grid setup](images/sliding_grid_setup.png)

3. In the **Columns** tab, you should configure the different Levels of the Sliding Grid and the Columns to be displayed for each level. To configure the Levels details, you should provide:

    * **Selection Mode** - Choose from None, Single, or Multiple selection modes.
    * **Double Click Action** - Define the system action to be triggered when an item is double-clicked.
    * **Slide Right Template Classes** - Specify the CSS classes for the slide-right template.
    * **Has Children Path** - Set the path that indicates whether an item has children.
    * **Child Path Count** - Set the path that indicates the number of children for each item.

    ![Sliding Grid columns](images/sliding_grid_columns.png)

    To configure the Columns details, you should specify:

    * **Name** - The name of the column.
    * **Path** - The data property path for the column.
    * **View Priority** - Determines the priority of the column's visibility: Always Visible In Desktop, High, Medium, or Low.
    * **Is Visible By Default** - Set to `true` by default, this option determines whether the column is shown by default.
    * **Barcode Field Name** - The unique identifier of the field when using the [[smart-barcode-scanning]] feature.
    * **Barcode Field Path** - The path defined when using the [[smart-barcode-scanning]] feature.
    * **Custom Type** - Set to false by default. If set to true, it indicates that the column is a custom type, and you will be able to input a Custom Type Template.
    * **Type** - The type of data the column will display (for example, Boolean, Entity Type, Integer, JSON, ReferenceType). If ReferenceType is selected, you must also specify the Value Reference Type, such as Entity, Entity Type, Lookup Table, or Query. If Entity Type is chosen, you will need to select the specific entity.

    ![Sliding Grid columns](images/sliding_grid_columns_2.png)

4. Optionally, define the **Inputs**.

    ![Sliding Grid inputs](images/sliding_grid_inputs.png)

5. Define the **Links** between this widget and other elements of the UI Page.

    ![Sliding Grid links](images/sliding_grid_links.png)

    When you add a new level, it appears in the Sliding Grid outputs for the various levels. In this case, you have 3 levels (Change Level (0), Change Level (1), and Change Level (2)) where you link the information you want to display:

    ![sliding grid levels](images/sliding_grid_levels.png)

    In the next example, the Change Level (1) from above was connected to a Query that was created. This Query needs a parameter to filter the information, and the needed parameter is sent with the converter:

    ![sliding grid converter](images/sliding_grid_converter.png)

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

## Barcode Real Use Case

The following scenario demonstrates how to create a UI Page that allows you to search through a list of Materials using a Filter and a Sliding Grid using a barcode scanner.

1. In the **Administration** menu, navigate to the **Configuration** entity and configure the value in the `/Cmf/Guis/Configuration/Common/BarcodeInputLabelSpecification/` configuration entry to `GS1`.

    ![Edit Barcode Configuration Entry](../../../../general/images/barcode_input_config_entry.png)

    !!! info
        For more information, see [[smart-barcode-scanning]].

2. Go to the [[labelspecificationfield-gt]] Generic Table and add the fields that should be extracted from the barcode. Each field must reference a label prefix and the corresponding MES Target Field.

    ![Screenshot showing Generic Table with fields for extracting barcode data.](images/add_label_specification_values.png)

3. In this example, the following fields will be used:

    ![Screenshot showing a barcode with various label specification values displayed.](images/label_specification_values.png)

4. In the **Low Code** menu, navigate to the **UI Pages** entity and clone the system page `StepView_Materials`, as shown below.

    ![Screenshot showing a cloned system page with a barcode sliding grid.](images/barcode_sliding_grid_clone.png)

5. When you open the cloned UI Page, the system will request a Step Id. Enter the Id of the target Step. In this example, we will use the Baking Step with Id `2504302105230000003`.

    ![Screenshot showing a barcode scanning interface with a sliding grid and input field for entering a Step ID.](images/barcode_sliding_grid_step_id.png)

6. Select the **Edit** button from the top ribbon and choose the **Settings** icon for the Sliding Grid widget, as shown below.

    ![Screenshot showing the Sliding Grid widget's Settings icon in the top ribbon.](images/barcode_sliding_grid_settings.png)

7. In the **Columns** tab of the Sliding Grid Settings, identify the columns that should support barcode scanning. For this example, we will enable scanning for Material Name, Material Type, and Material Product. For each of these columns, configure both the Barcode Field Name and the Barcode Field Value Path as displayed below:

    === "Material Name"

        ![Screenshot showing a Sliding Grid Settings page with Columns tab highlighted, illustrating the step to enable barcode scanning for "Mat…".](images/barcode_sliding_grid_columns_name.png)

    === "Material Type"

        ![Screenshot showing Sliding Grid Settings with Columns tab, highlighting column settings for barcode scanning.](images/barcode_sliding_grid_columns_type.png)

    === "Material Product"

        ![Screenshot showing a Sliding Grid Settings page with Columns tab highlighted, demonstrating how to enable barcode scanning for specific products.](images/barcode_sliding_grid_columns_product.png)

    !!! note
        The Barcode Field Name must match with the Target Field defined in the [[labelspecificationfield-gt]] Generic Table and the Barcode Field Value Path must reflect the column's data binding path in the grid.

8. Once the configuration is complete, scan a barcode containing one or more of the configured values. The Sliding Grid will automatically filter the list based on the matching fields.

    ![Barcode Real Use Case — 8. Once the configuration is complete, scan a barcode containing one or more of the configured values. The Sliding Grid will automatically filter the list based… (Screenshot shows: Bow)](images/barcode_sliding_grid_example.png)

    !!! warning
        Keep in mind that while this configuration enables barcode scanning and filtering, the results may vary depending on how data is populated for each row in the Sliding Grid. Ensure that the values bound to each column are consistent with the paths defined in the Barcode Field Value Path. If data is loaded or transformed dynamically, scanning results might not match the expected values.

[sliding Grid]: images/uiSlidingGrid.png
[slidingGridExample]: images/uiSlidingGridExample.png