Grid#

Overview#

The Grid Widget displays the results of the execution of a data source. Below there is an example with a Grid UI Page.

Smart Barcode Scanning

This widget supports Smart Barcodes.

General Steps#

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

In any UI Page in Build mode, select the 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 tab provide selection mode and actions.
In the Columns tab, define the columns to display data on the Grid component. It is necessary to define the header for the column, a path (a string that represents a path to a property of an object, e.g.: Material.Product.Name) and, optionally the type.
Optionally, use the Inputs tab to configure additional columns which can be sent by input.
Define the Links between this widget and other elements of the UI Page. As this widget requires a task, it must be added as a link.

When connecting the Grid selection to an Action Button, match the selection mode to its input: Single selection requires an input for one entity, while Multiple selection requires an input for a collection. If you change the selection mode, update the existing link and converter to match.

![Screenshot showing the Links tab of the Widget Grid Settings wizard.](images/grid_links.png)

Select Save and Close to complete the widget configuration.

Using Templates#

When you configure a Grid widget on a UI Page with the Workspace scope defined, you can use a template to apply a predefined grid configuration. For more information on this UI Page scope, see Workspace Scope.

Templates simplify Workspace configuration by automatically applying the required grid columns, data source, and links between the UI Page parameters, data source, and Grid widget. Workspaces receive a Workgroup as a parameter.

The available templates provide Grid configurations for information related to that Workgroup, such as Resources, Steps, Areas, and Materials.

To use a template:

Drag a Grid widget to an empty builder panel.
Open the Grid widget settings.
In the Columns tab, select and choose one of the available templates:
- Resource
- Step
- Area
- Material
After you select a template, the settings on the General, Columns, and Links tabs are configured automatically. For example, selecting the Resource template configures the widget name, columns details, links properties, and the required data source. A confirmation message identifies the template that was applied.

Info

Applying a template replaces the existing columns and other settings managed by that template. Review the updated configuration before saving.

General tabColumns tabLinks tab
Select Save and Close.

The Grid widget is configured automatically and is ready to display the data for the selected Workgroup context.

Real Use Case#

You should configure the Columns tab of the Grid wizard once the grid is setup and linked to a task (in this case a Query for the ScheduleJob Entity), a number of columns can be added. Depending on how the columns are built, they can have different functions and appearances.

Note

The path property of each column is always relative to the entity of the Query. If the property to display is a direct property of the same Entity Type, the property name needs to be input. If it is a property of a linked property, the path has to be build in fashion LinkedEntity.LinkedProperty. Examples can be seen below:

Hyperlink entity column#

For a column to display a hyperlink to an entity, the path must reference the entity's ID, and the column must be configured as type ReferenceType for the same entity to which the ID refers.

Entity name column#

To accomplish this simply have the column setup for the Name property of the entity:

Date column#

If the column is representing a date it has to be configured for type DateTime or Date to prevent simply representing the numeric representation of the date. In this case also the PlannedStartDate is a direct property of the ScheduleJobs entity and thus the path is the property itself.