Create Index Operator

The Create Index operator improves data access and manipulation by transforming a collection of objects into an indexed lookup structure. This transformation proves particularly advantageous when there is a frequent need to retrieve specific items from an array based on a unique property.

Use Create Index Operator to:

• Add a number to each row of a data table, which helps organize a large table of information.

• Add new rows to a table in two ways. One is to set up the operator to add new entries to the top row, pushing existing rows down. Another way is to add new entries to the next available row at the bottom of your table.

You'll find the Create Index operator under the Table group to the left of the Data Workflow canvas.

About the Info Window

Here's a breakdown of each setting in the Info window:

Adding a Create Index Operator

In this example, add new patient rows to the next available row in a Data Table component. Doing so involves finding the last filled row and inserting a new data row beneath it.

These instructions assume you have a new module open, saved, and with a title.

Configure the Panel Component

Start by adding a Panel component that contains the component configuration.

1. In the Module Builder, drag and drop a Panel component onto your canvas.

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

3. Click Save Component.

Configure the Columns Component

This component holds your Text Field components in four evenly spaced columns.

1. Drag and drop a Columns component onto your canvas, placing it in your panelAddPatients Panel component.

2. In the Property ID field, enter colAddPatients.

3. In the Display section, select the four evenly spaced columns icon.

   

4. Click Save Component.

Configure the Text Field Components

Next, configure four Text Field components for new patient information. You'll place a Text Field component in each column of the Columns component, from left to right.

1. Drag and drop four Text Field components onto your canvas, placing one inside each column of the colAddPatients Columns component.

2. Enter the Property ID and Label Text as follows:

   Property ID	Label Text
   firstName	First Name
   lastName	Last Name
   age	Age
   insurance	Insurance?

3. Click Save Component for each Text Field component as you add it.

Configure the Button Component

Now, configure a Button component that you can click in Express View to trigger your Data Workflow.

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

2. In the Property ID field, enter btnAddPatient.

3. In the Label Text field, enter Add Patient.

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

5. In the Event ID field, enter addEvent.

   

6. Click Save Component.

Configure the Hidden Components

Next, configure two Hidden components, one to store your table data and the other to store the added, indexed entries made in Express View.

1. Drag and drop two Hidden components onto your canvas, placing them below your btnAddPatient Button component.

2. Enter the Property ID and Label Text as follows:

   Property ID	Label Text
   patients	patients
   vgIndex	vgIndex

3. Click Save Component for each Hidden component as you add it.

Configure the Decisions Component

Next, set up the Decisions component to control your button. It'll add patients and clear your Text Field components with a single button click. Resetting the Text Field components makes it easier to add multiple patients.

1. Drag and drop a Decisions component onto your canvas, placing it below your Hidden components.

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

3. From the Trigger Type drop-down, select Watch.

4. In the Inputs table, enter the following:

   Property ID	Alias	Type	Required	Silent
   buttonClick		exact

5. In the Outputs table, enter the following:

   Property ID	Type
   dwfAddRow	trigger
   initReset	trigger

6. In the Conditionals table, enter the following:

   buttonClick	dwfAddRow_trigger	initReset_trigger
   addEvent	GO	GO

   

7. Click Save Component.

Configure the Initializer Component

Now set up an Initializer component to reset your Text Field components after each new entry. You'll configure the Initializer component to trigger when you click your button in Express View.

1. Drag and drop an Initializer component onto your canvas, placing it below your ruleButton Decisions component.

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

3. In the Outputs table, set the following:

   Property ID	Type	Value
   firstName	multi	clear,reset
   lastName	multi	clear,reset
   age	multi	clear,reset
   insurance	multi	clear,reset
   vgIndex	multi	clear,reset

   

4. Click Save Component.

Configure the Data Table Component

Now, set up a Data Table component for the new patient entries. You'll configure the Data Table component to add the information entered into your Text Field components.

1. Drag and drop a Data Table component onto your canvas, placing it below your initReset Initializer component.

2. In the Property ID field, enter dtPatients.

3. In the data table, enter the following:

   firstName	lastName	age	insurance
   =firstName	=lastName	=age	=insurance

   

4. Click Save Component.

Configure the Data Workflow Component

Now it’s time to add your Data Workflow component. You'll set up your Create Index operator to add new patient entries to your dashboard. By default, the operator adds each new entry to the top row of your table. The top row has an index of [0]. To add to the next available row, you'll enter a starting index of _arg+1. This starting index will let your end-user add new entries to the next available row. You'll also add a Console operator so you can see the index for each entry.

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

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

Configure the First Input Operator

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	patients
   Required	No
   Source	Default

Configure the Second Input Operator

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	dtPatients
   Required	No
   Source	Binded Table

Configure the Append Operator

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

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

   Setting	Value
   Category	Append
   Label	Append Patients

3. Connect the output port (right) of the patients Input operator to the upper input port (left) of the Append Patients Append operator.

4. Connect the output port (right) of the dtPatients Input operator to the lower input port (left) of the Append Patients Append operator.

Configure the Create Index Operator

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	Add Patients
   Index Name	index
   Starting Index	_arg+1
   Keys

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

Configure the Output Operator

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	patients
   Action	value

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

Configure the Console Operator

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

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

   Setting	Value
   Category	Console
   Label	Add Patients

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

   

4. Click Save Component.

Configure the ViewGrid Component

Lastly, configure a ViewGrid component so that your end-user can add and display new patient entries.

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

2. In the Property ID field, enter gridAdd.

3. In the Canvas Label Text field, enter Add Patient.

4. In the Inputs table, enter the following:

   Source	Required
   patients

5. In the Outputs table, enter the following:

   Source	Mapping
   vgIndex	index

6. In the Display table, enter the following:

   ID	Formula	Heading
   firstName		First Name
   lastName		Last Name
   age		Age
   insurance		Insurance?

   

7. In the Action field, enter null.

8. Click Save Component.

9. Save your module.

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

Here's how the completed example works in Express View, including a peek at the DevTools Console:

Preview your module and open up the DevTools Console. Enter the required information to add a new patient to your table. Click Add Patient, and you'll see your information added to the bottom of the table. Each new addition will continue to add to the new patient information in the next available row.