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.