Displaying Lists of Objects in a Data Grid
  • Updated on 09 May 2013
  • 3 minutes to read
  • Print
  • Dark
    Light

Displaying Lists of Objects in a Data Grid

  • Print
  • Dark
    Light

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 nativeGet All component from the Integration > Internal Services > Account Service component category would be used to retrieve users.

result5.png

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 , expandIntegrations > 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.png

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

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

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

Next, drag a Button component from the Actions category to the workspace. Set the Outcome Name to OK .
new.png

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

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-1.png

This completes the form, so save it and close theForm Designer .
Back in theFlow 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 theProperties panel, or from the form's Action menu.
Capture5.png

In theMapping 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.png

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

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.

Was this article helpful?