---
title: "Data Mapper Component"
slug: "data-mapper-component"
updated: 2025-12-04T19:34:15Z
published: 2025-12-04T19:34:15Z
canonical: "docs.unqork.io/data-mapper-component"
---

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

# Data Mapper Component

UDesignerClassic Designer

The **Data Mapper component** is a Centauri (v1.0) component that manipulates submission data captured from other [components](/v1/docs/module-builder-component-library) using [Excel formulas](/v1/docs/excel-formulas) and [Lodash functions](https://lodash.com/).

Data Mapper component configurations commonly use statements. IF statements let you make logical decisions based on an input value using the following format: `=IF(condition, valueIfTrue, valueIfFalse)`.

A few scenarios lend themselves particularly for using the Data Mapper component:

- Organizing top-level fields into a key/value pair array and manipulating that data.
- Iterating an existing array as defined in the **Watch Field** setting. For example, the output of an [Advanced DataGrid](/v1/docs/advanced-datagrid-component) component.

You can find the Data Mapper component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Data Settings

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
| **Restrict Search to Array** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper component only iterates through the array defined in the Watch Field setting. When set to (OFF), the Data Mapper component iterates through the defined array and any other fields in your module. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Include All Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (ON), the Data Mapper component adds all columns defined by the Data Mapper table into the Data Mapper array. When enabled, this setting also includes fields that do not contain any data. For example, if a given row contains no data in the valueB column, the array will include "valueB":"" in that row's object. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the Data Mapper component omits empty cells from the Data Mapper array. So, the valueB key/value pair does not appear in that row's object. By default, this is setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Wrap in Table** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper array saves in the submission data as an HTML table. The table's column headers are represented as Data Element and Values. The table populates with the Data Mapper array's key/value pairs. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the Data Mapper array saves in the submission data as an array. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Traverse Array Bottom to Top** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper component searches arrays from bottom to top. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |

### [![A static image displaying the Data Mapper component's data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_400_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(13).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) Data Mapper

| Setting | Description |
| --- | --- |
| Data Mapper Table | The Data Mapper table is where you'll enter the logic for the Data Mapper component. The first column (skipping cell A1) is where you add your inclusion logic for the row. As long as the logic equals TRUE, the row attaches. For example, `=TRUE`, or `=IF(age>18, TRUE, FALSE)`. The first row (skipping cell A1) is where you define your keys. Treat this row like column headers in an Excel spreadsheet. |

## Actions Settings

### Actions

[![A static image dispalying the DataMapper component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_400_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions(8).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

| Setting | Description |
| --- | --- |
| **Trigger Type** | This setting provides the following options: - **Manual**: The component fires when triggered by another component. For example, when using a [Button](/v1/docs/button-component) or [Initializer](/v1/docs/initializer-component) component to trigger a [Plug-In](/v1/docs/plug-in-component) component. By default, this Trigger Type is selected. - **Watch**: The component fires when there's any action taken on the input listed in the Inputs table. Actions include entering a new value, editing, or overwriting a saved value. If there are multiple inputs, use the Required setting to specify what inputs must be present before firing. |
| **Watch Field** | Enter the Property ID of the component you want the Data Mapper component to watch. The Data Mapper component refreshes on each new entry in the Watch Field. By default, the Data Mapper component watches all fields. Leave this field blank to continue with default settings. |

## Advanced Settings

[![A static image displaying the Data Mapper's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_400_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(16).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

| Setting | Description |
| --- | --- |
| **Disable Execution** | If Disable Execution is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the logic tied to this component does not execute. Use this to keep the component's settings, but disable the operations it performs. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Prevent Execution While Loading Data** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, stops the end-user from saving data until the component fully loads. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the end-user can save data before the component fully loads. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |

## Adding a Data Mapper Component

In this example, configure a Data Mapper component to create an array with a single row of data based on an end-user's name and salary. In the DevTools Console, you'll see an extra data point stored in the array. That data point, based on the salary input, determines if the end-user qualifies for a program.

### Configure the First Text Field Component

Configure a [Text Field](/v1/docs/text-field-component) component so your end-user can enter their first name.

1. In the Module Builder, drag and drop a **T****ext Field** component onto your canvas.
2. 2.In the Property ID field, enter **firstName**.
3. In the Label Text field, enter `First Name`.
4. Navigate to the **Validation** settings.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
6. Click **Save Component**.

### Configure the Second Text Field Component

Configure a second [Text Field](/v1/docs/text-field-component) component so your end-user can enter their last name.

1. Drag and drop a second **T****ext Field** component onto your canvas, placing it below the **firstName** **T****ext Field** component.
2. 2.In the Property ID field, enter **lastName**.
3. In the Label Text field, enter `Last Name`.
4. Navigate to the **Validation** settings.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)****.**
6. Click **Save Component**.

### Configure the Number Component

The [Number](/v1/docs/number-component) component is where your end-user enters their salary. Depending on the end-user's input, the system records them as qualified or not.

1. Drag and drop a **N****umber** component onto the canvas, placing it below the **lastName** **T****ext Field** component.
2. 2.In the Property ID field, enter **salary**.
3. In the Label Text field, enter `Your Salary`.
4. In the **Prefix** field, enter `$`.
5. Navigate to the **Validation** settings.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)****.**
7. Click **Save Component**.

### Configure the Data Mapper Component

Lastly, configure the Data Mapper component to create the logic that maps data to the database.

1. Drag and drop a **D****ata Mapper** component onto the canvas, placing it below the **salary** **N****umber** component.
2. In the Property ID and Canvas Label Text fields, enter `dmQualified`.
3. In the Data Mapper configuration table, enter the following:

|  | A | B | C | D | E |
| --- | --- | --- | --- | --- | --- |
| 1 |  | firstName | lastName | salary | qualified |
| 2 | =TRUE | firstName | lastName | salary | =IF(salary>50000, "yes", "no") |

> [!NOTE]
> the salary value is over $50,000, the system records "qualified":"yes". If the salary value is less than $50,000, the system records "qualified":"no".

[![A static image displaying the Data Mapper component's Actions settings. The Trigger type is set to watch, and the Data Mapper table is filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleDataMapper_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleDataMapper.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
4. Navigate to the **Actions** settings.
5. From the **Trigger Type** drop-down, select Watch.
6. Click **Save Component**.
7. **Save** your module.

Preview your module in Express View and enter values in the fields. Open the DevTools Console and use the Angular command to view the submission data. Expand the **dmQualified** key to view your Data Mapper array. In the image below, the salary is less than $50,000. So, the **D****ata Mapper** component records "qualified":"no".

[![A static image displaying the module in Express View. The DataMapper data displays using the Angular command.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

The **Data Mapper component** is a Centauri (v1.0) component that manipulates submission data captured from other [components](/v1/docs/module-builder-component-library) using [Excel formulas](/v1/docs/excel-formulas) and [Lodash functions](https://lodash.com/).

Data Mapper component configurations commonly use statements. IF statements let you make logical decisions based on an input value using the following format: `=IF(condition, valueIfTrue, valueIfFalse)`.

A few scenarios lend themselves particularly for using the Data Mapper component:

- Organizing top-level fields into a key/value pair array and manipulating that data.
- Iterating an existing array as defined in the **Watch Field** setting. For example, the output of an [Advanced DataGrid](/v1/docs/advanced-datagrid-component) component.

You can find the Data Mapper component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the DataMapper component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

| Setting | Description |
| --- | --- |
| **Canvas Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

## Data Panel

[![A static image displaying the Data Mapper component's data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |

## Actions Panel

[![A static image dispalying the DataMapper component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Actions

| Setting | Description |
| --- | --- |
| **Trigger Type** | This setting provides the following options: - **Manual**: The component fires when triggered by another component. For example, when using a [Button](/v1/docs/button-component) or [Initializer](/v1/docs/initializer-component) component to trigger a [Plug-In](/v1/docs/plug-in-component) component. By default, this Trigger Type is selected. - **Watch**: The component fires when there's any action taken on the input listed in the Inputs table. Actions include entering a new value, editing, or overwriting a saved value. If there are multiple inputs, use the Required setting to specify what inputs must be present before firing. |
| **Watch Field** | Enter the Property ID of the component you want the Data Mapper component to watch. The Data Mapper component refreshes on each new entry in the Watch Field. By default, the Data Mapper component watches all fields. Leave this field blank to continue with default settings. |

### Data Mapper

| Setting | Description |
| --- | --- |
| Data Mapper Table | The Data Mapper table is where you'll enter the logic for the Data Mapper component. The first column (skipping cell A1) is where you add your inclusion logic for the row. As long as the logic equals TRUE, the row attaches. For example, `=TRUE,` or` =IF(age>18, TRUE, FALSE)`. The first row (skipping cell A1) is where you define your keys. Treat this row like column headers in an Excel spreadsheet. |

## Advanced Panel

[![A static image displaying the Data Mapper's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Set Execution

| Setting | Description |
| --- | --- |
| **Disable Execution** | If Disable Execution is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the logic tied to this component does not execute. Use this to keep the component's settings, but disable the operations it performs. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |
| **Prevent Execution While Loading Data** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, stops the end-user from saving data until the component fully loads. When set to (OFF), the end-user can save data before the component fully loads. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |

### Additional Data Options

| Setting | Description |
| --- | --- |
| **Restrict Search to Array** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper component only iterates through the array defined in the Watch Field setting. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the Data Mapper component iterates through the defined array and any other fields in your module. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |
| **Include All Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper component adds all columns defined by the Data Mapper table into the Data Mapper array. When enabled, this setting also includes fields that do not contain any data. For example, if a given row contains no data in the valueB column, the array will include "valueB":"" in that row's object. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the Data Mapper component omits empty cells from the Data Mapper array. So, the valueB key/value pair does not appear in that row's object. By default, this is setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |
| **Wrap in Table** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper array saves in the submission data as an HTML table. The table's column headers are represented as Data Element and Values. The table populates with the Data Mapper array's key/value pairs. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the Data Mapper array saves in the submission data as an array. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |
| **Traverse Array Bottom to Top** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the Data Mapper component searches arrays from bottom to top. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)****.** |

## Adding a Data Mapper Component

In this example, configure a Data Mapper component to create an array with a single row of data based on an end-user's name and salary. In the DevTools Console, you'll see an extra data point stored in the array. That data point, based on the salary input, determines if the end-user qualifies for a program.

### Configure the First Text Field Component

Configure a [Text Field](/v1/docs/text-field-component) component so your end-user can enter their first name.

1. In the Module Builder, drag and drop a **T****ext Field** component onto your canvas.
2. In the Property ID field, enter **firstName**.
3. In the Label Text field, enter `First Name`.
4. To the left of the component's configuration window, click **Validation**.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)****.**
6. Click **Save & Close**.

### Configure the Second Text Field Component

Configure a second [Text Field](/v1/docs/text-field-component) component so your end-user can enter their last name.

1. Drag and drop a second **T****ext Field** component onto your canvas, placing it below the **firstName** **T****ext Field** component.
2. In the Property ID field, enter **lastName**.
3. In the Label Text field, enter `Last Name`.
4. To the left of the component's configuration window, click **Validation**.
5. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
6. Click **Save & Close**.

### Configure the Number Component

The [Number](/v1/docs/number-component) component is where your end-user enters their salary. Depending on the end-user's input, the system records them as qualified or not.

1. 1.Drag and drop a **N****umber** component onto the canvas, placing it below the **lastName** **T****ext Field** component.
2. In the Property ID field, enter **salary**.
3. In the Label Text field, enter `Your Salary`.
4. In the **Prefix** field, enter `$`.
5. To the left of the component's configuration window, click **Validation**.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (ON).
7. Click **Save & Close**.

### Configure the Data Mapper Component

Lastly, configure the Data Mapper component to create the logic that maps data to the database.

1. Drag and drop a **D****ata Mapper** component onto the canvas, placing it below the **salary** **N****umber** component.
2. In the Property ID and **Canvas Label Text** fields, enter **dmQualified**.
3. To the left of the component's configuration window, click **Actions**.
4. From the **Trigger Type** drop-down, select `Watch`.
5. In the **Data Mapper** table, enter the following:

|  | A | B | C | D | E |
| --- | --- | --- | --- | --- | --- |
| 1 |  | firstName | lastName | salary | qualified |
| 2 | =TRUE | firstName | lastName | salary | =IF(salary>50000, "yes", "no") |

> [!NOTE]
> the salary value is over $50,000, the system records "qualified":"yes". If the salary value is less than $50,000, the system records "qualified":"no".

[![A static image displaying the Data Mapper component's Actions settings. The Trigger type is set to watch, and the Data Mapper table is filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_ExampleDataMapper_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20ExampleDataMapper.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
6. Click **Save & Close**.
7. **Save** your module.

Preview your module in Express View and enter values in the fields. Open the DevTools Console and use the Angular command to view the submission data. Expand the **dmQualified** key to view your Data Mapper array. In the image below, the salary is less than $50,000. So, the **D****ata Mapper** component records "qualified":"no".

[![A static image displaying the module in Express View. The DataMapper data displays using the Angular command.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Data Structure of a Data Mapper Component

The Data Mapper component's data stores in an array. In the above example, the **dmQualified** **D****ata Mapper** component stores the **firstName** **T****ext Field**, **lastName** **T****ext Field**, and **salary** **N****umber** components in the first row (**0**) of the array. The Data Mapper component's logic creates the **qualified** key/value pair that validates if the end-user makes more than $50,000 based on the value in the **salary** **N****umber** component.

[![A static image displaying the data structure of a DataMapper component that contains three other components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DataMapper%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Resources

- [Modify the Data Mapper component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Find more formulas to use in the Data Mapper component](/v1/docs/supported-formulas).
- [Discover more about the Data Mapper component in the Community Hub](https://community.unqork.com/search?q=Datamapper).
- [View the latest enhancements and bug fixes for the Data Mapper component](https://community.unqork.com/feature-history-41/datamapper-component-resources-enhancements-bug-fixes-and-updates-13344).

The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

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

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.

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.

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

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 .

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.

The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission