Displaying Lists of Objects in a Data Grid

Last Updated: 03/28/2018 Introduced in Version: 2.0

 

The Data Grid form component displays a list of data objects in a grid. Each row in the grid represents an object, and each column represents an object property – much like a spreadsheet.

To use the Data Grid component in the Form Designer, drag it from the Toolbox panel, under the category List, to the workspace and configure the required properties in the Properties panel.

Example

Our example form will display a list of products from the Northwind database within a data grid. This examples requires integrating the Northwind database with the Portal and generating database steps.  To follow our example you can download Northwind here.

 
Another example for using the Data Grid is to populate the grid with user accounts from the Portal, therefore not requiring the integration step upon which the Data Grid in this example depends. In this scenario, the Data Grid data type would be Account and the native Get All component from the Integration > Internal Services > Account Service component category would be used to retrieve users.
 
 result
 

Navigate to a Designer Projects folder, and create a new flow.

First, the Get all from dbo_Products component will be introduced. In the Flow Designer’s startup window, expand Integrations > All Integrations >  Database > [Database Name] > dbo_Products. Select the Get all from dbo_Products component and click Add to add it to the workspace. 
 
capture 
 
Next, introduce the form to display the product list. From the Toolbox panel, expand the Forms [Interaction] category and drag a [Pick or Create Form] component to the workspace.
 data-grid-drag

To edit the form, click the Pick or Create Form link at the top of the Properties panel.

In the resulting Pick or Create Form pop-up, name the new form “Display Products” and click OK to open it in the Form Designer.

capture1

The first form component for the form is a Data Grid. In the Toolbox panel, search and drag a Data Grid component to the workspace. Expand the size, so it takes up most of the form.
capture2 
Next, drag a Button component from the Actions category to the workspace. Set the Outcome Name to OK.
  new

Next, configure the data grid. With the grid selected, in the Properties panel, under the Input Data section, click the Type selector.

In the resulting Select Entity pop-up, search for and select [Database name_dbo_Products] and click OK.
 
capture3

Back in the Properties panel, under the Input Data section, fill in Data Name with AllProducts. Since this example simply displays products, the InfoOnly grid mode selection is sufficient.

 

 capture4

This completes the form, so save it and close the Form Designer.

Back in the Flow Designer, connect the Done path of the Get Products step to the form. With the form selected, click the Show Mapping Editor link at the top of the Properties panel, or from the form’s Action menu.
capture5 
 

In the Mapping Editor, map the Get Product step’s output – Products_Result – to the form step’s input – AllProducts. Click OK to close the Mapping Editor.

 

 product-results
Connect the Failed path from the Get Products step, and the OK path from the form, to the End step. This completes the flow. Save and close the flow.
connectFinalSteps
 
 

Back in the portal, test our example flow by selecting the flow’s thumbnail and clicking the Action link. In the Action menu, select Run > Run Flow.

In the resulting pop-up, we’re presented with the data grid showing the products list. The table looks much like a spreadsheet with rows representing objects and columns representing object properties.

Additional Resources