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.
Select Save and Close to complete the widget configuration.

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.