Editing Data Grid Items Inline

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. 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.  For assistance Integrating with a Database table refer to this article: Integrating an External Database with a Flow
 
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.
 
 
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. 
 
 
2017-01-17_092036
 
 
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.
 
 
2016-12-20_155900
 
 
Next, drag a Button component from the Actions category to the workspace. Set the Outcome Name to OK.
 
 
2016-12-20_160008
 
 

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

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

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.

 

2016-12-20_160412

 

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 Edit Input Mapping link at the top of the Properties panel, or from the form’s Action menu.
 
 
2016-12-20_160535
 

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.

 

2016-12-20_163519

 
 
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.
 
 
2016-12-20_163607
 
 
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 ForEach Step into the workspace following the form. Connect the OK path from the form to the ForEach Step.
 
Open the Mapping Editor on the ForEach step. Map the output from the form, EditedProduct, to Collection. Click OK.
 
 
2016-12-20_162125
 
 
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.
 
 
2016-12-20_162226
 
 
Map Item to the Item 0 value.
 
 
2016-12-20_162321
 
 
 
Click OK
 
Connect the rest of the output paths as follows:
 
 
2016-12-20_163644
 
 
 
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.
 

Additional Resources