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.

Smart Barcode Scanning

This widget supports Smart Barcodes.

General Steps#

To use the Sliding Grid widget in a UI Page, follow the steps below:

In any UI Page in Build mode, select the Sliding Grid from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
Enter the Settings section of the widget through the three vertical dots.
In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

Optionally, in the Style tab, you can define a Border Width and Color.
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.
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.
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.
Optionally, define the Inputs.
Define the Links between this widget and other elements of the UI Page.

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:

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

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

Info

For more information, see Smart Barcode Scanning.
Go to the LabelSpecificationField 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.
In this example, the following fields will be used:
In the Low Code menu, navigate to the UI Pages entity and clone the system page StepView_Materials, as shown below.
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.
Select the Edit button from the top ribbon and choose the Settings icon for the Sliding Grid widget, as shown below.
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 NameMaterial TypeMaterial Product

Note

The Barcode Field Name must match with the Target Field defined in the LabelSpecificationField Generic Table and the Barcode Field Value Path must reflect the column's data binding path in the grid.
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.

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.