Reading Cell Values From a Data Grid Component

You can read the cell values from a Data Grid component. For example, you will learn how to dynamically sum all values in a Data Grid column. For any new item, the Total Quantity field displays the new total value.

Tutorial

To use this feature:

1. Add the Create Form activity to your workflow.
2. Open the Form Designer from the Create Form activity.
3. Drag and drop a Data Grid component.
4. Inside the Data Grid component, drag and drop one Text Field component to store the item name (label it as Item).
5. Inside the Data Grid component, drag and drop one Number component to store the item quantity (label it as Quantity).
6. Outside of the Data Grid component, drag and drop a Text Field component, to display the total quantity of all items in the Data Grid. This requires an advanced logic.

   1. Label the component as Total Quantity.

   2. Select the Disabled checkbox on the component Display tab. This makes the field read-only.

   3. On the Logic tab, click Add Logic to configure the trigger and the action to sum up the values.

   4. In the Trigger section > Logic Name field, enter a name for your logic.

   5. Select the trigger Type as Simple. Leave the rest of the fields empty, so the logic triggers for any Data Grid change.

   6. In the Actions section > Action Name field, enter a name for your action. In this case, the triggered action is to update the total value, so we used updateValue as the action name.

   7. Select the Value action type, and enter the following script in the Value (Javascript) section:

      var result = 0;
      for (var i = 0; i < data.dataGrid.length; i++) {
        result += +(data.dataGrid[i].number);
      }
      return result;

      The code snippet above iterates through the existing values in the Data Grid and sums them up. Any new value restarts the iteration, thus updating the total value.

   8. Save the action and the logic.

   9. Save the Text Field component.

7. Save the form.
8. At runtime, when you add a new item to the grid, notice the Total Quantity value being updated.

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example