Grid

Usage

The Grid component is used to organise data into rows and columns to make it easier to see relationships and to make it easier to understand the data being presented. The grid allows the user to compare and check different information aspects without losing the big picture.

Example of usage

You can use the Grid component to create an app that shows a list of your customers. In this example: + Users can edit the Country code column. + Users can add rows. + Users can import or export the data in Excel.

Note: The Grid component follows the WCAG 2.0 AA accessibility guidelines.

Behaviour

The Grid component supports:

• Viewing and filtering presented data
• Editing data
• Adding and deleting rows
• Importing and exporting data

Configuration example

This example shows how to configure the List of customers app (see Example of usage) Follow these steps to configure it:

• Drag the Grid component to a previously added Layout component in the canvas.

• Select the Grid component in the canvas and go to the Properties panel.

• Open the Main menu and configure:

  • Template ID: Enter a meaningful name and select the Save button.
  • Grid data: Import data from your resources using Liquid. For example {{res1}}. The Liquid reference must be an array.

  Note: You must edit all your resources in the Resource tab. For more information see Resources and also read the Properties section below.

  • Select the checkboxes of the properties you want to enable in your grid. This example allows editing so the Country code column can be edited. We also want to enable data import and export, and skip the first header row.

  

• Open the Styles menu and configure:

  • Grid height: Choose the size of your grid. The data that does not fit, is accessible by scrolling.
  • Select Show filter row checkbox to display the filter functionality.

  
  

• Open the Columns menu. Three columns are available by default. Open each Column's menu and configure:

  • Column ID: Enter a meaningful name and select the Save button.

  • Column data: Choose the field that you want the column to display from the previously imported array in Grid data. You can:

    • Enter it using Liquid. For example {{customerId}}
    • Select the Plus (+) button and choose from the available fields. Only arrays are available. In this example we call the Customer Id field in the first column, the Customer name in the second column and the Country code in the third column.

    

  • Width: Select stretch in each column to have the columns occupy all the space, as in this example.

  • Datatype: Select the type of data for each column. Select text from the dropdown in all the columns if the data displayed is going to be text as in this example.
  • Select the checkboxes of the properties you want to enable in your grid. In this example we select Read only with no rules for the first and second column and nothing in the third column so it can be edited.

Note: Only the relevant properties to the example are explained.

Properties

The following Grid component properties are available:

Main

Property	Description
Template ID	Enter a unique name for the Grid component.
Grid data	Enter the resource to return the data for the grid. You can select the Plus (+) button to display a dropdown with the available arrays or enter the text in using Liquid. For example {{res1}} Note: You must edit the Resource in the Resources tab
Allow editing	Select the checkbox to make the grid editable. If selected, the end-user app presents: A Three dots menu with the options Add row and Reset Grid Changes. A trash-can icon next to rows to allow them to be deleted.
Enable data import	Select the checkbox to enable data to be imported into the grid from an Excel file. If selected, the Import Data option is added to the end-user app's Three dots menu and an Import rows icon is displayed in the grid.
Skip first header row	Select the checkbox and when importing data, the first row of the Excel file is treated as the header and not imported.
Enable data export	Select the checkbox to enable data to be exported from the grid as an Excel file. If selected, the Export Data option is added to the end-user app's Three dots menu.

Styles

Property	Description
Grid height	Select the height of the grid.
Show filter row	Select the checkbox to activate the filter functionality. A filter row is displayed to allow filtering on the various columns.

Column

Property	Description
Column ID	Enter a unique name for the column. This unique identifier is used to reference the component in Liquid. See use data from the Grid component Liquid arrays start at 0.
Title	Enter the column title.
Column data	Enter the data that you want the column to display. Typically, this is a column from the previously imported array in Grid data. You can choose an option from the Plus (+) button or write the text using Liquid in the text editor. For example {{name}}
Default value	Enter the value that is displayed in this column when you add a new row. You can either stablish it from other columns in the grid (using Liquid syntax) or enter a fixed value.
Width	Choose the width of the column.
Datatype	Choose what kind of data that is displayed in the column.
Decimals	Enter how many decimals are allowed. Only available when number datatype is selected.
Hidden	Select the checkbox to hide the column. You can set rules to hide the column using Liquid. See add rules to trigger properties for more details.
Read only	Select the checkbox to set the column to read only. You can set rules to allow editing using Liquid. Checkbox only available when Allow editing checkbox is selected in the Main menu. See add rules to trigger properties for more details.
Disable filter	Select the checkbox to disable filtering in this column.
Disable move	Select the checkbox to lock the column in place.
Disable resize	Select the checkbox to set a fixed width for the column and disable resizing.
Disable sort	Select the checkbox to prevent sorting within this column.

Interactions

Property	Description
Hidden	Select the checkbox to hide the grid in the end-user app. You can set rules to hide the grid using Liquid. See add rules to trigger properties for more details.