Last Updated: 12/07/2015Introduced in Verision: 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. Editing objects within a data grid is done in one of two ways: inline or within a pop-up window containing a property grid.
To enable inline editing in the data grid, go to the Properties panel and, under the Output Data category, set Grid Mode to InlineEdit. This example also shows the updating of the information in the database.
Example
Our example form will display a list of products from the Northwind data base within a data grid. This did require integrating the Northwind database with the Portal and generating database steps against this free data source. To edit a product property, the user will locate the row for that product and double-click on the cell representing the property to edit. Underneath the data grid will be a button that will end the flow.
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.
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.
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.
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.
The first form component for the form is a Data Grid. In the Toolbox panel, expand the List category and drag a Data Grid component to the workspace. Expand the size so it takes up most of the form.
Next, drag a Button component from the Actions category to the workspace. Set the Outcome Name to OK.
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.
Back in the Properties panel, under the Input Data section, fill in Data Name with AllProducts. Also, to simplify the appearance and hide columns so they cannot be edited by the user, remove columns from the Columns list. Go to the Properties panel and locate the Column Information section. Select the undesired properties from the Columns list, and click the Delete button. For this example, we will delete the Discontinued and ReorderLevel columns.
Since this example enables the editing of products, under Output Data, change Grid Mode to InlineEdit. Set the Data Name field to EditedProduct, and mark the Optional Outcome Scenarios checkbox.
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.
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.
Connect the Failed path from the Get Products step to the End step.
Next, to commit the edit(s) to the database, an update step is needed. Expand the category Integration > Databases > Database > [Database Name] > dbo_Products. Drag the Update dbo_Products component to the workspace following the form.
Connect the form outcome path to this update step.
Click on the Update dbo_Products step and select View Step Data.
Notice the output from the form is an array; the Update dbo_Products step only accepts singlular data. Therefore, it is necessary to use the For Each looping component to iterate the array of changed products to hand each individually into the Update dbo_Products step. Click Close. Delete the OK path from the form to the Update dbo_Products step.
From the Toolbox, expand Flow Management and drag a ForEachStep into the workspace following the form. Connect the OK path from the form to the ForEachStep.
Open the Mapping Editor on the ForEach step. Map the output from the form, EditedProduct, to Collection. Click OK.
Connect the Next step out of the ForEach step to the Update dbo_Products step. Connect the Done path to the End step.
Click on the Update dbo_Products step and open the Mapping Editor. For Updated Objects, change Unknown to Build Array.
Map Item to the Item 0 value.
Click OK.
Connect the rest of the output paths as follows:
This completes the flow. Save and close the flow.
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. Notice the products edited are updated in the database.
All cells in this grid are editable, which is why, in a real world scenario, we would want to validate this form’s input after submission.
