Data grid

This guide will take you through how to set up a data grid.

Prerequisite data

No connectors will be used in this example, but data from table steps will be utilized. Please download the file below; it will be used to import into the required table steps

855B

Data grid.csv

Add a data grid

1. Open an existing application or create a new one in an application package and open it in the Designer.

   1. Add a User step.

   2. Add a Table step.

   3. Open the Table step and select Import File.

   4. Choose the semicolon separator and click OK.

   5. Select the "Data grid.csv" file downloaded in the prerequisite section above.

   6. Set the table variable name to "Articles" and click OK.

   7. Change the step name to "Articles". It's good practice to name steps after their content.

   8. Right-click on the "Articles" step, select Add data arrow, and connect it to the User step created in step 1.

1. Open the User step.

   1. Add a Data Grid.

   2. In the Prompt, write "Choose an article".

   3. In the Source, choose the table "Articles".

   4. In the Columns, choose "Edit" to the far right.

1. Choose "Add All Columns".

   1. Article column:

      1. Check the Hidden checkbox.

   2. Name column:

      1. Set the Size to Medium.

      2. In the Cell Color, write "{"GREEN"}".

   3. Description column:

      1. Set the Size Mode to Break.

   4. Cost column:

      1. Edit the Show as to Numeric.

   5. Discount column:

      1. Edit the Show as to Numeric.

      2. Check the Editable-checkbox.

   6. Add a new column, by pressing the + button in the top right corner.

      1. Set Show as to Computed.

      2. Check the Include in Output-checkbox.

      3. Set the Variable to "TotalPrice".

      4. In the Value Template, write "{isNull(Cost,0) - isNull(Discount,0)}"

      Flow engine cannot promise that the Qty-variable is not null. And you cannot multiply with nothing. By adding isNull, we tell the Flow engine what to do if it would be a null value.

      1. Set the Title to "Discounted price".

      2. Set the Cell Color to "{"#8cd3ff"}".

   7. Click OK to go back.

1. Check the Allow add checkbox.

2. Check the Allow Delete checkbox.

3. Set the Row Selection Mode to Single Selection.

4. Under Output, in Target Variable, write "chosenArticle".

5. Click the Play button in the top right-hand corner to run the application in diagnostic mode.

The datagrid shows all articles, columns and the calculated price column. You can add a new row by pressing the + button above the data grid.

Once a row is marked, the Delete Row option becomes available.

Add configuration

When working with tables, connect offers a variety of possibilities to add configuration and style to make it look more suiting for your purpose.

1. Go back to the Designer.

   1. Remove the cell colors from the Name and Total price columns.

   2. Under Appearance, change the Row Height to small.

   3. In the Item Style, open the editor by clicking the arrows to the far right.

   

   1. Add the code below.

   {case
       
       when Cost = 5 then '#65FFFF'
       
       when Cost = 20 then RGB(204,204,255)
       
       when Cost = 30 then 'GREEN'
       
       when Cost = 50 then '#EEA7F6'
       
       when Cost = 75 then RGB(204,255,204)
       
       when Cost = 100 then 'BLUE'
       
       when Cost = 250 then '#FDC096'
       
       else '' 
   
   end}

   1. Run the application in diagnostic mode again.

   

   The colors are now for each row, instead of the columns.

2. Condition to hide

   1. In the Condition To Hide, write “{userId = “your user id”} (the user Id you log in to Connect with)

   2. Run the application in diagnostic mode again.

The data grid is now hidden since the condition is fulfilled.