How to: Write Data to a Uniform Grid

Overview

Setting up a Uniform Grid component for data entry is simple and straight-forward. But what about writing data to a Uniform Grid? With the help of some logic components, it's easy to read data from one location and write it to your Uniform Grid. Thanks to grid referencing syntax, it's also possible to write data to specific parts of the Uniform Grid. For example, updating one row of the grid or even updating a single cell.

Grid referencing syntax is currently supported in the following components, collectively referred to as logic components: Calculator, Data Workflow, Decisions, Initializer, and Plug-In.

To learn more about using grid referencing syntax with the Uniform Grid component, see the Uniform Grid and Freeform Grid: Logic and Referencing Syntax article.

Here's how the completed configuration looks in the Module Builder:

Here's how the completed configuration works in Express View:

What You'll Learn

In this how-to guide, you'll learn how to use grid referencing syntax to write data to a Uniform Grid at the grid, row, and cell level.

What You Need

To write data to your Uniform Grid, you need:

• 1 Uniform Grid component
• 1 Text Field component
• 1 Number
• 1 Dropdown component
• 1 Columns component
• 2 Data Table components
• 1 Calculator component
• 3 Button components
• 1 Initializer component
• 1 Data Workflow component

To set up your Data Workflow, you need:

• 1 Input operator
• 1 Get operator
• 1 Output operator

Setting Up the Uniform Grid

Before you can learn how to write data to a Uniform Grid, you need to set up a Uniform Grid to write data to. The Uniform Grid contains 3 fields: Name, Age, and Country.

Configure the Uniform Grid Component

For this configuration, the Uniform Grid mainly uses the default settings. The only thing to configure is the Property ID and Title, as well as where the nested components' labels show.

1.

Drag and drop a Uniform Grid component onto the canvas.

2.

In the Property ID field, enter uniformGrid.

3.

In the Title field, enter Uniform Grid.

4.

Under Labels, select the Show inline radio button.

5.

Click Save.

Configure the Text Field Component

1.

Drag and drop a Text Field component onto the canvas, placing it inside the Uniform Grid component.

2.

In the Property ID field, enter name.

3.

In the Label Text field, enter Name.

4.

Click Save.

Configure the Number Component

1.

Drag and drop a Number component onto the canvas, placing it inside the Uniform Grid component, below the Text Field.

2.

In the Property ID field, enter age.

3.

In the Label Text field, enter Age.

4.

Click Save.

Configure the Dropdown Component

1.

Drag and drop a Dropdown component onto the canvas, placing it inside the Uniform Grid component, below the Number component.

2.

In the Property ID field, enter country.

3.

In the Label Text field, enter Country.

4.

Complete the Values table as follows:

5.

Click Save.

Writing Data to the Entire Grid

Start with writing data to the entire Uniform Grid. The data source is a Data Table component, and a Calculator component runs the logic of writing the Data Table's data to the Uniform Grid. Because a Uniform Grid stores data as an array of row objects, it's simple to map table-based data (also an array of row objects) directly to the Uniform Grid.

Configure the Columns Component

For organizational purposes, add a Columns component. This helps group together the components involved in writing data to the Uniform Grid at various levels. The first column contains the components involved in writing to the Uniform Grid at the grid level.

1.

Drag and drop a Columns component onto your canvas, placing it below the Uniform Grid component.

2.

In the Property ID field, enter col1.

3.

Under Column Layout, select the icon displaying 3 evenly-spaced columns.

4.

Click Save.

Configure the Data Table Component

The Data Table is the source of the data the Calculator writes to the grid. Note that the Data Table's column headers match the Property IDs of the fields in the Uniform Grid. Similarly, every value in the country column matches one of the possible Data Source Values configured in the country Dropdown component.

1.

Drag and drop a Data Table component onto your canvas. Place your Data Table in column 1 of the Columns component.

2.

In the Label and Property Name fields, enter dtPeopleGrid.

3.

Complete the data table as follows:

4.

Click Save.

Configure the Calculator Component

The formula used in this Calculator is simple: the input equals the output. In other words, map the input (the Data Table) directly to the output (the Uniform Grid).

1.

Drag and drop a Calculator component onto your canvas. Place your Calculator in column 1 of the Columns component, below the Data Table.

2.

In the Canvas Label Text and Property ID fields, enter calcGrid.

3.

Complete the Inputs table as follows:

4.

Complete the Outputs table as follows:

5.

Click Save.

Configure the Button Component

Finally, add a Button component to trigger the Calculator component.

1.

Drag and drop a Button component onto your canvas. Place your Button component in column 1 of the Columns component, below the Calculator.

2.

In the Property ID field, enter btnGrid.

3.

In the Label Text field, enter Write to Grid.

4.

Under Button Action Type, select Event.

5.

In the Trigger on Click field, enter calcGrid.

6.

Click Save.

Writing Data to a Row

Next, look at writing data to a single row in the grid. Again a Data Table is the data source, this time with one row of data. In this configuration, though, a Data Workflow helps get the correct data structure to write to the grid. One row of the Uniform Grid is one row object in an array of row objects. So, to write data to a single row of the grid, you need to map row object to row object.

The Data Workflow uses a Get operator to pull a row object from the Data Table's array of row objects, then outputs the row object directly to row index 0 of the Uniform Grid. To target a single row of the Uniform Grid, the Decisions component uses the following grid referencing syntax structure: {gridPropertyID}.row({rowIndex}).

Configure the Data Table Component

This Data Table contains a single row of data, but note that again the Data Table's column headers match the Property IDs of the fields in the Uniform Grid.

1.

Drag and drop a Data Table component onto your canvas. Place your Data Table in column 2 of the Columns component.

2.

In the Label and Property Name fields, enter dtPeopleRow.

3.

Complete the data table as follows:

4.

Click Save.

Configure the Data Workflow Component

Next, set up the Data Workflow, which pulls the first row object from the Data Table and outputs it to the Hidden component.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow in column 2 of the Columns component, below the Hidden component.

2.

In the Canvas Label Text and Property Name fields, enter dwfRow.

Configure the Input Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Get Operator

1.

Drag and drop a Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (left) of the Input operator to the input port (right) of the Get operator.

Configure the Output Operator

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (left) of the Get operator to the input port (right) of the Output operator.

Configure the Button Component

Finally, add a Button component to trigger the Data Workflow component.

1.

Drag and drop a Button component onto your canvas. Place your Button component in column 2 of the Columns component, below the Decisions component.

2.

In the Property ID field, enter btnRow.

3.

In the Label Text field, enter Write to Row.

4.

Under Button Action Type, select Event.

5.

In the Trigger on Click field, enter dwfRow.

6.

Click Save.

Writing Data to a Cell

At the most granular level of grid referencing syntax, look at writing data to a single cell of the Uniform Grid. Writing data to a cell means updating a specific field in a single row of the grid. A single field in a single row is simply a key/value pair in the array of row objects. So, you can output a value directly from your logic component (in this case, an Initializer). To target a single cell of the Uniform Grid, the Initializer component uses the following grid referencing syntax structure: {gridPropertyID}.col({columnPropertyID}).row({rowIndex}).

Configure the Initializer Component

This Initializer has no inputs. Instead, you define what value to write to the output using the Outputs table.

1.

Drag and drop an Initializer component onto your canvas. Place your Initializer in column 3 of the Columns component.

2.

In the Canvas Label Text and Property ID fields, enter initCell.

3.

From the Trigger Type options, select New Submission.

4.

Complete the Outputs table as follows:

5.

Click Save.

Configure the Button Component

Finally, add a Button component to trigger the Initializer.

1.

Drag and drop a Button component onto your canvas. Place your Button component in column 3 of the Columns component, below the Initializer component.

2.

In the Property ID field, enter btnCell.

3.

In the Label Text field, enter Write to Cell.

4.

Under Button Action Type, select Event.

5.

In the Trigger on Click field, enter initCell.

6.

Click Save.

7.

Save your module.

You're now ready to test out your configuration. Click Preview Module to open your module in Express View. The completed configuration works like this in Express View:

Resources

• Uniform Grid Component
• Uniform Grid and Freeform Grid: Logic and Referencing Syntax