---
title: "Create Index Operator"
slug: "create-index-operator"
description: "Transform data access with the Create Index operator, enhancing retrieval and organization of patient entries in your data table efficiently."
updated: 2025-11-12T09:58:47Z
published: 2025-11-12T14:27:26Z
canonical: "docs.unqork.io/create-index-operator"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Index Operator

UDesignerClassic Designer

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1761205725250.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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](https://docs.unqork.io/docs/table-operators) group to the left of the [Data Workflow](https://docs.unqork.io/docs/unqorks-data-workflow-operators) canvas.

## About the Info Window

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, displaying below the 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. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| 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. > [!NOTE] > 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 the 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 example, add new patient rows to the next available row in a [Data Table](https://docs.unqork.io/docs/data-table-component) component. Doing so involves finding the last filled row and inserting a new data row beneath it.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

### Configure the Panel Component

Start by adding a [Panel](/v1/docs/panel-component) 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](https://docs.unqork.io/docs/text-field-component) 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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(186).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save Component**.

### Configure the Text Field Components

Next, configure four [Text Field](/v1/docs/text-field-component) 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](/v1/docs/button-component) 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`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(188).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
6. Click **Save Component.**

### Configure the Hidden Components

Next, configure two [Hidden](https://docs.unqork.io/docs/hidden-component) 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](/v1/docs/decisions-component) 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(190).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
7. Click **Save Component**.

### Configure the Initializer Component

Now set up an [Initializer](/v1/docs/initializer-component) 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(191).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save Component**.

### Configure the Data Table Component

Now, set up a [Data Table](https://docs.unqork.io/docs/data-table-component) 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(192).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save Component**.

### Configure the Data Workflow Component

Now it’s time to add your [Data Workflow](https://docs.unqork.io/docs/using-unqorks-dataworkflow) 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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(194).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save Component**.

### Configure the ViewGrid Component

Lastly, configure a [ViewGrid](/v1/docs/viewgrid-component) 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? |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(195).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
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:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(196).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Create_Index_03.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Create_Index_03(1).gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(199).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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 the 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](https://docs.unqork.io/docs/table-operators) group to the left of the [Data Workflow](https://docs.unqork.io/docs/unqorks-data-workflow-operators) canvas.

## About the Info Window

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, displaying below the 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. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| 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. > [!NOTE] > 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 the 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 example, add new patient rows to the next available row in a [Data Table](https://docs.unqork.io/docs/data-table-component) component. Doing so involves finding the last filled row and inserting a new data row beneath it.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

### Configure the Panel Component

Start by adding a [Panel](/v1/docs/panel-component) 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 **Label Text** fields, enter `panelAddPatients`.
3. Click **Save & Close**.

### Configure the Columns Component

This component holds your [Text Field](https://docs.unqork.io/docs/text-field-component) 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 columns icon.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(200).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save & Close**.

### Configure the Text Field Components

Next, configure four [Text Field](/v1/docs/text-field-component) 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 & Close** for each component as you add it.

### Configure the Button Component

Now, configure a [Button](/v1/docs/button-component) 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`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(201).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
6. Click **Save & Close**.

### Configure the Hidden Components

Next, configure two [Hidden](https://docs.unqork.io/docs/hidden-component) 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 & Close** for each component as you add it.

### Configure the Decisions Component

Next, set up the [Decisions](/v1/docs/decisions-component) 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. Set the **Trigger Type** as **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 **Micro Decisions** table, enter the following:

| buttonClick | dwfAddRow_trigger | initReset_trigger |
| --- | --- | --- |
| addEvent | GO | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(202).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
7. Click **Save & Close**.

### Configure the Initializer Component

Now set up an [Initializer](/v1/docs/initializer-component) 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(203).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save & Close**.

### Configure the Data Table Component

Now, set up a [Data Table](https://docs.unqork.io/docs/data-table-component) 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 **Label** and **Property Name** fields, enter `dtPatients`.
3. In the data table, enter the following:

| firstName | lastName | age | insurance |
| --- | --- | --- | --- |
| =firstName | =lastName | =age | =insurance |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(204).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
4. Click **Save & Close**.

### Configure the Data Workflow Component

Now it’s time to add your [Data Workflow](https://docs.unqork.io/docs/using-unqorks-dataworkflow) 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 **Canvas Label Text** and **Property Name** fields, enter `dwfAddRow`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Create_Index_05.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

#### 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**.

### Configure the ViewGrid Component

Lastly, configure a [ViewGrid](/v1/docs/viewgrid-component) 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 **Label** field, enter `Add Patient`.
3. In the **Property Name** field, enter `gridAdd`.
4. In the **Action** field, enter `null`.
5. In the **Inputs** table, enter the following:

| Source | Required |
| --- | --- |
| patients |  |
6. In the **Outputs** table, enter the following:

| Source | Mapping |
| --- | --- |
| vgIndex | index |
7. In the **Display** table, enter the following:

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(207).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
8. Click **Save**.
9. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(208).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Create_Index_03.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Create_Index_03(1).gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

The location of an element in an array.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

The DevTools Console helps you securely store, build, test, and deploy your software.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others.

The action performed by the button when selected.

DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.

Enter inputs components and actions you want the component to perform..

Enter outputs components and actions you want the component to perform.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The DevTools Console helps you securely store, build, test, and deploy your software.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

## Related

- [Data Workflow Component](/data-workflow-component.md)
- [Data Workflow Operators](/data-workflow-operators.md)
- [Introduction to Data Workflow](/introduction-to-data-workflow.md)