Editing Data Grid Items with the Property Grid
- Updated on 24 Jul 2019
- 5 minutes to read
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 .
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:
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, 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.
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.)
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".
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 .
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 theRemove Button value.
Since this example enables the editing of products, under Output Data , change Grid Mode to PropertyGridEdit . Set theData Name field to "EditedProduct", and mark theOptional Outcome Scenarios checkbox.
This completes the form. In the upper left corner, save and close theForm Designer .
Back in theFlow 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 .
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 .
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 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 .
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 theItem 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.
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 nativeGet All component from the Integration > Internal Services > Account Service component category would be used to retrieve users.