How to: Build an Inline ViewGrid Using Data Workflows

Configuration

First, let's set up the fields where end-users can enter values to display in the dashboard. You'll use two Text Field components and one Number component to collect the end-user's first name, last name, and age.

Configure the Text Field Components

These two Text Field components are the inputs for the end-user's first and last names.

1. In the Module Builder, drag and drop two Text Field components onto your canvas.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	firstName	First Name
   2	lastName	Last Name

3. Click Save Component for each component after adding it.

Configure the Number Component

Configure the Hidden Components

Now, let’s create the dashboard to display the data and Data Workflows to populate it. Add two Hidden components to store values you'll reference in other components. The data Hidden component stores the data displayed in the ViewGrid component. The selectedRow Hidden component stores the index of the selected row in the dashboard.

1. Drag and drop two Hidden components onto your canvas, placing them below the age Number component.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	data	data
   2	selectedRow	selectedRow

3. Click Save Component for each component after adding it.

Configure the First Data Workflow Component

Next, configure a Data Workflow component that creates an empty data table and stores it in your data Hidden component. You’ll populate this empty data table using a second Data Workflow.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your selectedRow Hidden component.

2. In the Property ID and Canvas Label Text, enter dwfInit.

Configure the Create Table Operator

This Create Table operator creates an empty data table as an array with no rows. The Data Workflow component you’ll set up later appends one row to the table each time an end-user submits information.

1. Drag and drop a Create Table operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Create Table
   Label
   Create Index	No
   Number of Rows	0

Configure the Output Operator

Here, you'll set up an Output operator to store the table you just created in the data Hidden component.

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

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	data
   Action	value

3. Connect the output port (right) of the Create Table operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Configure the Initializer Component

Next, you'll set up an Initializer component to trigger the dwfInit Data Workflow component on page load. Doing so ensures there's always an empty table ready to store values for the First Name, Last Name, and Age fields.

1. Drag and drop an Initializer component onto your canvas, placing it above the firstName Text Field component.

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

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   ID	Type	Value
   dwfInit	trigger	GO

   

5. Click Save Component.

Configure the Second Data Workflow Component

Next, you’ll set up a second Data Workflow component to achieve the following tasks:

• Create a single-row data table.

• Retrieve values entered in the First Name, Last Name, and Age fields. These values add to a single row in the data table.

• Append the single row with firstName, lastName, and age values to the empty data table created in the dwfInit Data Workflow.

• Set the index of the newly appended row in your table to 0. Any subsequent rows appended to the array will have index numbers that increase by 1.

• Send the updated table to the data Hidden component.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your data Hidden component.

2. In the Property ID and Canvas Label Text, enter dwfAdd.

Configure the Create Table Operator

Add a Create Table operator to create a data table with a single row. Doing so creates a space for the Data Workflow to add your input values. Later, you'll append this row to the existing empty table created by the dwfInit Data Workflow component.

1. Drag and drop a Create Table operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Create Table
   Label
   Create Index	No
   Number of Rows	1

Configure the Input Operators

These Input operators retrieve the values from your First Name, Last Name, and Age fields into the Data Workflow component.

1. Drag and drop three Input operators onto your Data Workflow canvas.

2. Configure the first Input operator’s Info window as follows:

   Setting	Value
   Category	Input
   Component	firstName
   Required	Yes
   Source	Default

3. Configure the second Input operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	lastName
   Required	Yes
   Source	Default

4. Configure the third Input operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	age
   Required	Yes
   Source	Default

Configure the Create Field Operators

Next, you'll add three Create Field operators, one for each of your inputs. These Create Field operators add each input to the single row you created.

1. Drag and drop three Create Field operators onto your Data Workflow canvas.

2. Configure the first Create Field operator's Info window as follows:

   Setting	Value
   Category	Formula
   Label	firstName
   Do Not Sanitize Formula	(unchecked)
   Field 1	firstName = _arg

3. Connect the output port (right) of the Create Table operator to the input port (left) of the firstName Create Field operator.

4. Connect the output port (right) of the firstName Input operator to the argument port (top) of the firstName Create Field operator.

5. Configure the second Create Field operator's Info window as follows:

   Setting	Value
   Category	Formula
   Label	lastName
   Do Not Sanitize Formula	(unchecked)
   Field 1	lastName = _arg

6. Connect the output port (right) of the firstName Create Field operator to the input port (left) of the lastName Create Field operator.

7. Connect the output port (right) of the lastName Input operator to the argument port (top) of the lastName Create Field operator.

8. Configure the third Create Field operator's Info window as follows:

   Setting	Value
   Category	Formula
   Label	age
   Do Not Sanitize Formula	(unchecked)
   Field 1	age = _arg

9. Connect the output port (right) of the lastName Create Field operator to the input port (left) of the age Create Field operator.

10. Connect the output port (right) of the age Input operator to the argument port (top) of the age Create Field operator.

Configure the Fourth Input Operator

This Input operator connects the data table stored in the data Hidden component and your dwfAdd Data Workflow component.

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

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	data
   Required	Yes
   Source	Default

Configure the Append Operator

Now you'll use an Append operator to add rows from your single-row table to the table stored in the data Hidden component.

1. Drag and drop an Append operator onto your Data Workflow canvas. No additional configuration of the operator is necessary.

2. Connect the output port (right) of the data Input operator to the upper input port (left) of the Append operator.

3. Connect the output port (right) of the age Create Field operator to the lower input port (left) of the Append operator.

Configure the Create Index Operator

The Create Index operator assigns an index number to each row of your table, starting at 0. Adding a unique identifier to each table row lets you edit or remove a specific row.

1. Drag and drop a Create Index operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Create Index
   Label
   Index Name	index
   Starting Index	0
   Keys

3. Connect the output port (right) of the Append operator to the input port (left) of the Create Index operator.

Configure the Output Operator

Lastly, you’ll create an Output operator to send the newly appended table to the data Hidden component. Doing so overwrites the earlier version of the table stored in the Hidden component. That way, the data Hidden component always stores the latest version, with any newly appended and indexed rows.

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

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	data
   Action	value

3. Connect the output port (right) of the Create Index operator to the input port (left) of the data Output operator.

   

4. Click Save Component.

Configure the Button Component

This Button component triggers the dwfAdd Data Workflow component. After end-users enter their name and age, the dwfAdd Data Workflow component adds these rows to the table stored in the data Hidden component.

1. Drag and drop a Button component onto your canvas, placing it below the age Number component.

2. In the Property ID, enter btnSubmit.

3. In the Label Text, enter Submit.

4. From the Action Type drop-down, select Event.

5. From the On Click drop-down, select dwfAdd.

   

6. Click Save Component.

Configure the ViewGrid Component

Next, set up your ViewGrid component to display the details stored in the data Hidden component. You'll also add custom Edit and Remove buttons to edit and remove submissions from the dashboard.

1. Drag and drop a ViewGrid component onto your canvas, placing it below the btnSubmit Button component.

2. In the Property ID and Label Text fields, enter gridInline.

3. Set Sort by Columns to (ON).

4. In the Inputs table, in the ID column, enter data.

5. In the Outputs table, enter the following:

   ID	Mapping
   selectedRow	firstName

6. In the Display table, enter the following:

   ID	Heading	Button
   firstName	First Name	(unchecked)
   lastName	Last Name	(unchecked)
   age	Age	(unchecked)
   edit	Edit	(checked)
   remove	Remove	(checked)

7. In the Action field, enter null. Doing so removes the default Submit button from your ViewGrid component.

   

8. Click Save Component.

Configure the Third Data Workflow Component

Next, you’ll set up your third Data Workflow component so you can edit a specific row in your dashboard. Later, you'll set up a Decisions component to connect this Data Workflow to the Edit button on your dashboard.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your dwfAdd Data Workflow component.

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

Configure the Input Operators

Here, you'll set up a connection between the dwfEdit Data Workflow Component and your data and selectedRow Hidden components.

1. Drag and drop two Input operators onto your Data Workflow canvas.

2. Configure the first Input operator’s Info window as follows:

   Setting	Value
   Category	Input
   Component	data
   Required	Yes
   Source	Default

3. Configure the second Input operator’s Info window as follows:

   Setting	Value
   Category	Input
   Component	selectedRow
   Required	Yes
   Source	Default

Configure the Filter Operator

The Filter operator lets you retrieve a specific row of data from the table stored in the data Hidden component. Connecting the selectedRow Input operator to the Filter component's argument port sets which row to retrieve.

1. Drag and drop a Filter operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Filter
   Label
   Do Not Sanitize Formula	(unchecked)
   Expression	firstName = _arg

3. Connect the output port (right) of the data Input operator to the input port (left) of the Filter operator.

4. Connect the output port (right) of the selectedRow Input operator to the argument port (top) of the Filter operator.

Configure the Get Operators

These Get operators retrieve each value (firstName, lastName, and age) from the selected row of the table. In the next step, you'll output these three values to the corresponding input fields in your module.

1. Drag and drop three Get operators onto your Data Workflow canvas.

2. Configure the first Get operator’s Info window as follows:

   Setting	Value
   Category	Get
   Label	firstName
   Path	[0].firstName

3. Connect the upper output port (right) of the Filter operator to the input port (left) of the firstName Get operator.

4. Configure the second Get operator’s Info window as follows:

   Setting	Value
   Category	Get
   Label	lastName
   Path	[0].lastName

5. Connect the upper output port (right) of the Filter operator to the input port (left) of the lastName Get operator.

6. Configure the third Get operator’s Info window as follows:

   Setting	Value
   Category	Get
   Label	age
   Path	[0].age

7. Connect the upper output port (right) of the Filter operator to the input port (left) of the age Get operator.

Configure the First Three Output Operators

These Output operators send the firstName, lastName, and age values to the module's input fields. Your end-user can then edit these fields before clicking the Submit button.

1. Drag and drop three Output operators onto your Data Workflow canvas.

2. Configure the first Output operator’s Info window as follows:

   Setting	Value
   Category	Output
   Label	firstName
   Action	value

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

4. Configure the second Output operator’s Info window as follows:

   Setting	Value
   Category	Output
   Label	lastName
   Action	value

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

6. Configure the third Output operator’s Info window as follows:

   Setting	Value
   Category	Output
   Label	age
   Action	value

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

Configure the Fourth Output Operator

Lastly, you’ll create a final Output operator to send the data table back to the data Hidden component without the filtered row, overwriting the previous table. Because your end-user must click the Submit button again to save their edits, the dwfAdd Data Workflow adds the edited row to the data table.

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

2. Configure the operator’s Info window as follows:

   Setting	Value
   Category	Output
   Label	data
   Action	value

3. Connect the lower output port (right) of the Filter operator to the input port (left) of the data Output operator.

4. Click Save Component.

Configure the Fourth Data Workflow Component

Next, you’ll set up a final Data Workflow component that lets you remove a specific row from your dashboard. You'll later set up a Decisions component to connect this Data Workflow to the Remove button on your dashboard.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your dwfEdit Data Workflow component.

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

Configure the Input Operators

1. Drag and drop two Input operators onto your Data Workflow canvas.

2. Configure the first Input operator’s Info window as follows:

   Setting	Value
   Category	Input
   Component	data
   Required	Yes
   Source	Default

3. Configure the second Input operator’s Info window as follows:

   Setting	Value
   Category	Input
   Component	selectedRow
   Required	Yes
   Source	Default

Configure the Filter Operator

This Filter operator lets you retrieve a specific row from the data table stored in the data Hidden component. Connecting the selectedRow Input operator to the Filter operator's argument port specifies which row to retrieve.

1. Drag and drop a Filter operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Filter
   Label
   Do Not Sanitize Formula	(unchecked)
   Expression	firstName = _arg

3. Connect the output port (right) of the data Input operator to the input port (left) of the Filter operator.

4. Connect the output port (right) of the selectedRow Input operator to the argument port (top) of the Filter operator.

Configure the Output Operator

This Output operator sends the data table back to the data Hidden component without the filtered row, overwriting the previous table.

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

2. Configure the operator’s Info window as follows:

   Setting	Value
   Category	Output
   Label	data
   Action	value

3. Connect the lower output port (right) of the Filter operator to the input port (left) of the data Output operator.

   

4. Click Save Component.

Configure the Decisions Component

Lastly, you'll add a Decisions component that establishes the following rules:

• Clicking the dashboard’s Edit button triggers the dwfEdit Data Workflow component.

• Clicking the dashboard’s Remove button triggers the dwfRemove Data Workflow component.

1. Drag and drop a Decisions component onto your canvas.

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

3. Set the Trigger Type as Watch. That way, the Decisions component watches for a button-click event before executing.

4. In the Inputs table, enter the following:

   Source	Alias	Type	Required	Silent
   buttonClick		contains	(unchecked)	(unchecked)

5. Complete the Outputs table as follows:

   Source	Type
   dwfEdit	trigger
   dwfRemove	trigger

6. Complete the Micro Decisions table as follows:

   buttonClick	dwfEdit_trigger	dwfRemove_trigger
   Edit	GO
   Remove		GO

   

7. Click Save Component.

8. Save your module.

Here’s how the completed example looks in the Module Builder:

Here’s how the completed example works in Express View: