Editing Data Grid Items with the Property Grid

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

Overview

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: 1) within a pop-up window (called a property grid) or 2) inline.

This example will demonstrate #1 – the property grid.

To enable the editing of data grid items within a property grid, open the data grid control’s Properties panel in the Form Designer and, under the Output Data category, set Grid Mode to PropertyGridEdit.

Example

In this example, we will create a form that will pull a list of products from a sample database (the Northwind database) and display these products within a data grid.
 
This example assumes the Northwind database has been integrated with the Portal and that flow steps have been generated against this data source. For your own purposes, you can use your default Decisions database or you can integrate with another database. For more information on integrating a database, see Integrating an External Database with a Flow.
 
In this example, the user will be able to edit properties on the products displayed in the grid. To do this they will simply double click on the cell representing the property they wish to edit. The form with editable data grid will look like this:
 
 
result

 

To begin, navigate open a Designer Folder (or create a new one) and click Create Flow. (For more information on creating a new Designer Folder, see Creating a Designer Folder.)

In the new flow, we will first add the Get all from dbo_Products step. To do this, click the arrow on the Done path on the green start step. In the Quick Add for Step dialog, 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_094529
 
 
Next, introduce the form to display the product list. From the Steps tab on the right, under Favorite Steps, click the Show Form step and drag it into your workspace.

To edit the form, double click the step and click Pick or Create Form.

At the bottom of the left panel, click Create.

In the resulting dialog, name the new form “Display Products” and click OK to open it in the Form Designer.

In the Form Controls tab on the right, under the List category, click and drag a Data Grid to the workspace. Expand the size so it takes up most of the form. (Note, if your form already has a grid applied to it you may need to delete the existing grid or reconfigure its borders to make space for the data grid.)
 
 
2016-12-20_155900
 
 
Next, from the Form Controls tab on the right, under Favorite Components drag a Button component to the workspace. Set the Action Outcome Name to “OK”.
 
 
 
2016-12-20_160008
 
 
 
Next, add two more buttons: Data Grid Add Button and Data Grid Remove Button.

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.
 
 
2016-12-20_160147
 
 

Back in the Properties panel, under the Input Data section, fill in Data Name with “AllProducts” as shown below.

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.

Under Input Data, select Add for the Add Button field value, and Remove for the Remove Button value.

Since this example enables the editing of products, under Output Data, change Grid Mode to PropertyGridEdit. Set the Data Name field to “EditedProduct”, and mark the Optional Outcome Scenarios checkbox.

 

2017-01-04_161502

 

This completes the form. In the upper left corner, save and close the Form Designer.

Back in the Flow Designer, connect the Done path of the Get Products step to the form. Double click the Form to open its editor. Click Edit Input Mapping.
 
 
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_162125

 

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 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.
 
 
2016-12-21_100118
 
 
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:
 
 
 
 
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.
 
An alternate example for using a data grid is to populate the grid with user accounts from the Decisions 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.
 
 

Additional Resources