Editing Data Grid Items Inline

Overview

The Data Grid Form component is used to display a list of data objects in a grid, with the option to manipulate the data in the same Form session without continuing the Flow. 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 navigate to the Output Data category, then set Grid Mode to InlineEdit. This example also shows how the information is updated in the database.

Example

The example Form will show a list of Accounts within a data grid. To edit an account property, the user will locate the row for that account and double-click on the cell representing the account to edit. There is a button on the main Form (outside of the data grid) that will continue the Flow when selected. Below is a downloadable example to import into Decisions.

In a Designer Folder, select the CREATE FLOW button from the bottom Action Bar. Choose the default template and select CREATE. Name the Flow, then select CREATE again.

In the Steps tab, navigate to Integrations > Internal Services  > Account Service. Locate the Get All step from this list and drag it into the workspace, then connect the outcome path of the Start step to it. 

Locate the Favorite Steps section and add a Show Form step to the Flow. Connect the outcome path of the Get All step to the Show Form step. Select the Show Form step and choose the option to Pick or Create Flow from the top of the Properties tab. 

When the window appears, provide a name for a new Flow and select CREATE. In the Form Designer, navigate to the List section of the Form Controls tab and move a Data Grid component into a large area of the Form space. Locate the Button component from the Favorites section and add it to a smaller space in the Form.

Select the Data Grid as it appears in the Form workspace and when the properties populate, provide a Data Name and keep the PickTypes selection to PickType. Use the Type dropdown and the All/Search... function to find and select the Account data type, then select OK. To simplify the appearance and hide columns that should not be edited by the user, use the "x" icon to clear the Columns list.

Locate the Output Data section and change Grid Mode to InlineEdit. Set the Data Name field to Edited Accounts then save and close the Form Designer.

Back in the Flow Designer, select the Show Form step icon so the properties for this step populate. Under the Inputs section, select Unknown next to Accounts and choose Select From Flow from the list. Use GetAll_Output of the Get All Accounts step to define the Accounts input on the Form.

From the Steps panel, expand the Flow Management section and drag a ForEach step into the workspace, then connect the outcome of the Form to this step. Map the Edited Accounts output from the Form to the Collection input on the ForEach step. Connect the Done path of the ForEach step to the End step.

To be sure the changes made when the Accounts are edited, add a Save step. In the Steps panel expand Integrations > Internal Services  > Account Service. Select the Save step and add it after the ForEach step in the Flow, then connect the Next outcome to it. Connect the Done outcome of the Save step back to the ForEach step. 

Select the Debug button from the top Action Bar in the Flow Designer, then select the FULL button. The Flow starts by receiving the accounts and sending that data to the Data Grid, then the Form is shown to the end-user. Account information can be edited inline during the same Form session without continuing the Flow. Selecting the outcome action of the main Form is what actually continues the Flow to finish the process. Re-run the Debugger to view that the changes made to the Account saved properly.