Getting started with the grid component

This tutorial demonstrates how you can create your first grid visualization.

Expected duration: 5 minutes.

Tip

See also:

• Using the Template Editor
• Kata #16: Introducing grid components on DataMiner Dojo

Note

This tutorial uses DataMiner version 10.4.1.

Prerequisites

• A DataMiner System using DataMiner 10.4.1 or higher.
• The Style a table tutorial has been completed.

Overview

• Step 1: Create a query

• Step 2: Add a grid component

• Step 3: Style the grid blocks

• Step 4: Tweak the grid layout

Step 1: Create a query

You can now create the query using the Orders.json file as the data source.

Note

The Orders.json file should have been created while following the Style a table tutorial.

1. Create a new low-code app. See Creating low-code applications.

2. In the data pane, expand Queries.

3. Click the + icon to add a new query.

4. Provide the necessary information:

   1. Give the query a name, e.g. "Orders".

   2. Open the selection box, and select Get ad hoc data.

   3. Open the Data source selection box, and select JSON Reader.

   4. Open the File selection box, select Orders.json.

      

Step 2: Add a grid component

1. Drag the created query onto an empty section of the low-code app page.

2. Hover the mouse pointer over the component, and click the icon.

3. Choose the grid visualization. The grid will be populated with a block for every order in the orders dataset.

   

Step 3: Style the blocks

The default grid blocks look quite basic and do not provide a lot of information. If required, you can change their style.

Note

For more information about the Template Editor, see Using the Template Editor

1. Make sure the grid component is selected, and go to Layout > Item templates.

2. Click Edit to open the Template Editor.

3. Use the Template Editor to style the grid blocks.

   

Step 4: Tweak the grid layout

Change the way the blocks are positioned. The goal is to have a row of four blocks.

1. Make sure the grid component is selected, and go to Layout > Advanced.

2. Locate the Grid template section. There you can change the way the grid blocks are positioned.

3. Set the number of columns to 4, and ensure that Scaling is applied.

4. For the rows, opt for 1 row, and apply Scaling.

   

Applying these settings will make sure your grid has 4 columns, 1 row and a button to navigate to the next items.