---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-grid
widgetname: Grid
description: "The Grid widget displays data source results, customizable with columns and linked to UI elements"
---

# Grid

:core-static-widgetgrid-lg:{style="font-size: 100px"}

## Overview

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

![Screenshot showing a Grid example](../chart-widgets/images/uiPageExample5.png)

!!! 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' %}

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

## Widget Customization

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

    ![Screenshot showing the Style tab of the Widget Grid Settings wizard with a border width and color defined.](images/grid_style.png)

2. In the **Setup** tab provide selection mode and actions.

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

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

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

4. Optionally, use the **Inputs** tab to configure additional columns which can be sent by input.

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

5. 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 [[user-guide-uipages-design#action-buttons|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)

6. 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 [[user-guide-uipages-workspaces]].

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:

1. Drag a **Grid** widget to an empty builder panel.

    ![Screenshot showing the Grid widget in an empty builder panel of the UI Page.](images/templates_grid_widget.png)

2. Open the **Grid** widget settings.
3. In the **Columns** tab, select :iot-synchronize-lg: and choose one of the available templates:

    * **Resource**
    * **Step**
    * **Area**
    * **Material**

    ![Screenshot showing the Column tab with the available templates, when the UI Page scope is set to Workspace.](images/templates_grid_widget_column.png)

    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 tab"

        ![create workgroup example](images/templates_grid_widget_autochange1.png)

    === "Columns tab"

        ![create workgroup example](images/templates_grid_widget_autochange2.png)

    === "Links tab"

        ![create workgroup example](images/templates_grid_widget_autochange3.png)

4. Select **Save and Close**.

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

![Screenshot showing the Grid widget template selection in the widget settings.](images/templates_grid_widget_diagram_view.png)

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

![Screenshot showing a real use case overview.](images/image-20210519144059193.png)

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

![Screenshot showing a grid with columns, illustrating the step to configure a column as ReferenceType for entity ID referencing.](images/grid_use_case01.png)

### Entity name column

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

![Screenshot showing an entity name column with multiple rows of data.](images/grid_use_case02.png)

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

![Screenshot showing a data grid with a column, illustrating the importance of configuring its type to DateTime or Date to prevent numeric date representation.](images/grid_use_case03.png)