Create Index Operator

Overview

There are a few ways you can use the Create Index operator. One example is when you want to add a number to each row of a Data Table. Adding numbers can help you organize a large table of information. Another example is when you want to add new rows to a table. You can do this in a couple of different ways. One way is to set up the operator to add new entries to the top row. Each new entry will add to the top row and push others down a position. Another is to add new entries to the next available row at the bottom of your table. In this article, you'll add patient information to the next available row of a Data Table.

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

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Create Index operator looks like, along with its Info window:

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

Setting Description

Category

Grayed out and non-adjustable setting indicating the operation type.

Label

Sets the label for your operator. The label you enter here shows beneath your operator on your Data Workflow canvas.

This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows.

Index Name

Sets the name of the index you'll see in the DevTools Console. If you want to add a number to each row of your Data Table, you could use row number as the Index Name.

Starting Index

A numeric value used with the Index Name. This value increases by 1 for each row indexed. For example, [0] references the first row of your table, [1] the second, and so on.

You can start with any number. Your first row doesn't have to be [0].

Keys

Used to group content in specified columns. For example, showing name, location in the Keys field creates "groupings" on the names and locations in those columns. The index counter resets to 0 each time the counter hits a new "grouping." The index counter increases by 1 for each row in the same "grouping."

Adding a Create Index Operator

In this use case, you'll add new rows of patients to the next available row at the bottom of your table.

Here's how the completed use case will look in the Module Builder:

Here's how the completed use case will work in Express View, including a peek at the DevTools Console:

What You'll Need

To set up this use case, you’ll need:

  • 1 Panel component

  • 1 Columns component

  • 4 Text Field components

  • 1 Button component

  • 2 Hidden components

  • 1 Decisions component

  • 1 Initializer component

  • 1 Data Table component

  • 1 Data Workflow component

  • 1 ViewGrid component

To set up your Data Workflow, you’ll need:

  • 2 Input operators

  • 1 Append operator

  • 1 Create Index operator

  • 1 Output operator

  • 1 Console operator

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

Configure the Panel Component

This Panel component will house your entire configuration.

1. In the Module Builder, drag and drop a Panel component onto your canvas.
2. Enter panelAddPatients in the Property ID field.
3. Click Save.

Configure the Columns Component

This component will hold your Text Field components in 4 evenly-spaced columns.

1. Drag and drop a Columns component onto your canvas, placing it in your Panel.
2. Enter colAddPatients in the Property ID field.
3. Under Column Layout, click on the icon displaying 4 evenly-spaced columns.

4. Click Save.

Configure the Text Field Components

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

1. Drag and drop 4 Text Field components onto your canvas, placing one inside each column.
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. Save each component as you add it.

Configure the Button Component

To trigger the Data Workflow, you'll need a Button component. You'll set up the Data Workflow in a bit.

1. Drag and drop a Button component onto your canvas, placing it below your Columns.
2. Enter btnAddPatient in the Property ID field.
3. Enter Add Patient in the Label Text field.
4. Select Event as the Action Type.
5. Enter addEvent in the Event ID field.

6. Click Save.

Configure the Hidden Components

In the first Hidden component, you'll store your table data. In the second, you'll store the added, indexed entries made in Express View.

1. Drag and drop 2 Hidden components onto your canvas, placing them one on top of the other below your Button.
2. Enter the Property ID and Canvas Label Text as follows:
Property ID Canvas Label Text

patients

patients

vgIndex

vgIndex

3. Save each component as you add it.

Configure the Decisions Component

You'll set up the Decisions component to control your Button. It'll add patients and clear your Text Fields with a single button-click. Resetting the Text Fields makes it easier to add multiple patients. We'll set up the reset Initializer next.

1. Drag and drop a Decisions component onto your canvas, placing it below your Hidden components.
2. Enter ruleButton in the Property ID and Canvas Label Text fields.
3. Select Watch as the Trigger Type.
4. In the Inputs table, enter the following:
a. Property ID: enter buttonClick.
b. Type: enter exact.
5. In the Outputs table, enter the following:
Property ID Type

dwfAddRow

trigger

initReset

trigger

6. In the Micro Decisions table, enter the following:
buttonClick dwfAddRow_trigger initReset_trigger

addEvent

GO

GO

7. Click Save.

Configure the Initializer Component

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

1. Drag and drop an Initializer component onto your canvas, placing it below your Decisions component.
2. Enter initReset in the Property ID and Canvas Label Text fields.
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.

Configure the Data Table Component

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

1. Drag and drop a Data Table component onto your canvas, placing it below your Initializer.
2. Enter dtPatients in the Label and Property Name fields.
3. In the data table, enter the following:
firstName lastName age insurance

=firstName

=lastName

=age

=insurance

4. Click Save.

Configure the Data Workflow Component

It's time to add your Data Workflow. 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. Place your Data Workflow below your Columns component.
2. Enter dwfAddRow in the Canvas Label Text and Property Name fields.

Configure the First Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the Input 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 Input 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 Append 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 operator.
4. Connect the output port (right) of the dtPatients Input operator to the lower input port (left) of the Append operator.

Configure the Create Index Operator

1. Drag and drop a Create Index operator onto your Data Workflow canvas.
2. Configure the Create Index 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 operator to the input port (left) of the Create Index 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:
Setting Value

Category

Output

Component

patients

Action

value

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

Configure the Console Operator

1. Drag and drop a Console operator onto your Data Workflow canvas.
2. Configure the Console operator's Info window as follows:
Setting Value

Category

Console

Label

Add Patients

3. Connect the output port (right) of the Create Index operator to the input port (left) of the Console operator.
4. Click Save.

Configure the ViewGrid Component

Next, you'll bring in a ViewGrid component so your end-user can add and display new patient entries.

1. Drag and drop a ViewGrid component onto the canvas, placing it below your Data Workflow.
2. Enter Add Patient in the Label field.
3. Enter gridAdd in the Property Name field.
4. Enter null in the Action field.
5. Enter patients in the ID column of the Inputs table.
6. In the Outputs table, enter the following:
a. ID: enter vgIndex.
b. Mapping: enter index.
7. In the Display table, enter the following:
ID Formula Heading

firstName

 

First Name

lastName

 

Last Name

age

 

Age

insurance

 

Insurance?

8. Click Save.
9. Save your module.

Now you can test out your Data Workflow. Open up the DevTools Console and enter a new patient in your table. Click Add Patient and you'll see your information add to the bottom of the table. Each new addition will continue to add to a new patient information in the next available row.

Changing a Create Index Operator's Settings

You can revisit and make changes to this operator.

1. Click the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator to open its Info Window.
4. Make changes to the operator's settings as needed.
5. Click Save.
6. Save your module.

Copying a Create Index Operator

You can make a copy of your operator using familiar keyboard settings. You can copy and paste an exact copy of your operator, matching all settings.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to duplicate.
4. On your keyboard, press Command + C (Mac OS) or Ctrl + C (Windows/Linux) to copy the operator.

You can copy more than one operator at a time. Hold Command or Ctrl on your keyboard and click all the operators you want to copy. Follow the rest of the steps as usual.

5. On your keyboard, press Command + V (Mac OS) or Ctrl + V (Windows/Linux) to paste the copied operator(s) to the Data Workflow canvas.
6. Click Save.
7. Save your module.

Did you know you can copy an operator and paste it into a different Data Workflow? You'll use the same steps outlined above.

Removing a Create Index Operator

Lastly, you can delete this operator from your Data Workflow canvas. You can also use these same steps to delete a connection between two operators.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to delete.
4. On your keyboard, press Delete.

Once you delete this operator, make sure to connect your remaining operators. If your Data Workflow path doesn't end with an Output or Console operator, your Data Workflow won't work. So, once you delete an operator, make sure to update any remaining paths to end at an Output or Console operator.

5. Click Save.
6. Save your module.

Lab

You can view this complete use case here: https://training.unqork.io/#/form/60365c1f9752112f9856d04f/edit.