---
title: "How to: Rename API Data Fields Using the Rename Field Operator"
slug: "rename-field-operator-renaming-api-data-fields"
updated: 2025-12-23T15:18:07Z
published: 2025-12-23T15:18:07Z
canonical: "docs.unqork.io/rename-field-operator-renaming-api-data-fields"
---

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

# How to: Rename API Data Fields Using the Rename Field Operator

UDesignerClassic Designer

When retrieving API data into your application, field names can be complex and confusing. Many times, they can include long strings of numbers or be irrelevant to your application. To make it easier to view the data, you can rename data fields using the **Rename Field operator** and change field names to something simpler and topical.

## Configuration

In this how-to guide, you'll set up a Plug-In component that retrieves data from an internal API. You'll use various Data Workflows and other components to rename the data fields from the API data set.

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

### Configure the Panel component

You'll begin by adding a [Panel](/v1/docs/panel-component) component to keep your components organized.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelConfig`.
3. Click **Save Component**.

### Configure the First Hidden Component

Next, add a [Hidden](/v1/docs/hidden-component) component to store the API address, which you'll pass to the [Plug-In](/v1/docs/plug-in-component) component you’ll set up next.

1. Drag and drop a **Hidden** component onto your canvas, placing it inside your Panel component.
2. In the **Property ID** and **Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5fdb91e3d923110236e9d574`.

> [!NOTE]
> The **Default Value** you entered is the module ID of our schema module, Professional Configurator Sample Data Module. You'll find this ID in the module’s hyperlink as follows: [https://training.unqork.io/#/form/**5fdb91e3d923110236e9d574**/edit](https://training.unqork.io/#/form/5fdb91e3d923110236e9d574/edit).
4. Click **Save Component**.

### Configure the Plug-In Component

Configure a [Plug-In](/v1/docs/plug-in-component) component to retrieve data from an internal API and store it in a [Data Table](/v1/docs/data-table-component) component.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The **Request Type** and **Data Source URL** autopopulate.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | moduleId | moduleId |
| 2 | 'firstName, lastName, fullName, dateOfBirth, supportingDocuments, documentType' | fields |
| 3 | '-created' | sort |
5. In the **Post Trigger** field, enter `dwfStudents`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(526).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
6. Click **Save Component**.

### Configure the Initializer Component

Add an [Initializer](/v1/docs/initializer-component) component to trigger the [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop an **Initializer** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initOnLoad`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| Source | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(527).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
5. Click **Save Component**.

### Configure the Second Hidden Component

Now, configure another [Hidden](/v1/docs/hidden-component) component to store the data you call using your [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop the second **Hidden** component onto your canvas, placing it below the Initializer component.
2. In the **Property ID** and **Label Text** fields, enter `students`.
3. Click **Save Component**.

### Configure the First Data Workflow Component

Next, let's add a [Data Workflow](/v1/docs/data-workflow-component) component to output the [Plug-In](/v1/docs/plug-in-component) component's data to the `students` **Hidden** component.

1. Drag and drop a **Data Workflow** component on your canvas, placing it under the students **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfStudents`.

#### Configure the 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 | pluginGetSubmissions |
| Required | Yes |
| Source | Default |

#### 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 | students |
| Action | Value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.
4. Click **Save** **Component**.

The fully configured Data Workflow looks like the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(548).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

### Configure the Text Field Component

Then, you'll add a [Text Field](/v1/docs/text-field-component) component so end-users can replace the `dateOfBirth` field in the API data.

1. Drag and drop a **Text Field** component onto your canvas, placing it between your `students` **Hidden** and `dwfStudents` **Data Workflow** components.
2. In the **Property ID** field, enter `renameDateOfBirth`.
3. In the **Label Text** field, enter `New Name for field "dateOfBirth"`.
4. Click **Save Component**.

### Configure the Second Data Workflow Component

Next, you'll set up the second [Data Workflow](/v1/docs/data-workflow-component) component to change the name of your API data field.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfStudents` **Data Workflow** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfRename`.

#### 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 | students |
| Required | Yes |
| Source | Default |

#### Configure the Second Input Operator

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | renameDateofBirth |
| Required | Yes |
| Source | Default |

#### Configure the Rename Field Operator

1. Drag and drop a **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | New DOB |
| Current Name | dateOfBirth |
| Target Name | _arg |

> [!NOTE]
> You'll connect the **Text Field** component to the argument port (top) of the **Rename Field** operator. The connection uses the **Text Field** component’s entry to rename the **Current Name** data field. So, you'll pass the **Text Field** component's argument into the **Target Name**.
3. Connect the output port (right) of the `students` **Input** operator to the input port (left) of the **Rename Field** operator.
4. Connect the output port (right) of the `renameDateOfBirth` **Input** operator to the argument port (top) of the **Rename Field** operator.

#### Configure the First Console Operator

You'll want to add a [Console](/v1/docs/console-operator) operator to view the data in the DevTools Console before it passes to the Rename Field 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 | Before |
3. Connect the output port (right) of the `students` **Input** operator to the input port (left) of the `Before` **Console** operator.

#### Configure the Second Console Operator

Then you'll add another [Console](/v1/docs/console-operator) operator to view the status after the data passes through the Rename Field operator.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After |
3. Connect the output port (right) of the **Rename Field** operator to the input port (left) of the `After` **Console** operator.
4. Click **Save Component**.

The fully configured Data Workflow looks like the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(549).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

### Configure the Button Component

Lastly, add a [Button](/v1/docs/how-to-guide-button-component) to trigger the Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below the `dwfRename` **Data Workflow** component.
2. In the **Property ID** field, enter `btnRename`.
3. In the **Label Text** field, enter `Rename Field`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfRename**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(535).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
6. Click **Save Component**.
7. **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(536).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

Preview your module in Express View and open the DevTools Console. Enter a value you'd like to replace in the `dateOfBirth` field. Then, click the **Rename Field** button to view the results in the Console:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Rename_15.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

When retrieving API data into your application, field names can be complex and confusing. Many times, they can include long strings of numbers or be irrelevant to your application. To make it easier to view the data, you can rename data fields using the **Rename Field operator** and change field names to something simpler and topical.

## Configuration

In this how-to guide, you'll set up a Plug-In component that retrieves data from an internal API. You'll use various Data Workflows and other components to rename the data fields from the API data set.

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

### Configure the Panel component

You'll begin by adding a [Panel](/v1/docs/panel-component) component to keep your components organized.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelConfig`.
3. Click **Save & Close**.

### Configure the First Hidden Component

Next, add a [Hidden](/v1/docs/hidden-component) component to store the API address, which you'll pass to the [Plug-In](/v1/docs/plug-in-component) component you’ll set up next.

1. Drag and drop a **Hidden** component onto your canvas, placing it inside your Panel component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5fdb91e3d923110236e9d574`.

> The **Default Value** you entered is the module ID of our schema module, Professional Configurator Sample Data Module. You'll find this ID in the module’s hyperlink as follows: [https://training.unqork.io/#/form/**5fdb91e3d923110236e9d574**/edit](https://training.unqork.io/#/form/5fdb91e3d923110236e9d574/edit).
4. Click **Save & Close**.

### Configure the Plug-In Component

Configure a [Plug-In](/v1/docs/plug-in-component) component to retrieve data from an internal API and store it in a [Data Table](/v1/docs/data-table-component) component.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. Complete the **Inputs** table as follows:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName, lastName, fullName, dateOfBirth, supportingDocuments, documentType' | fields |
| '-created' | sort |
4. From the **Internal Services** drop-down menu, select **List Submissions for Dashboard**. The **Request Type** and **Data Source URL** will auto-populate.
5. In the **Post Trigger** field, enter `dwfStudents`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(540).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
6. Click **Save**.

### Configure the Initializer Component

Add an [Initializer](/v1/docs/initializer-component) component to trigger the [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop an **Initializer** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initOnLoad`.
3. From the **Trigger Type** drop-down, select `New Submission`.
4. In the **Outputs** table, enter the following:

| Source | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(542).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
5. Click **Save & Close**.

### Configure the Second Hidden Component

Now, configure another [Hidden](/v1/docs/hidden-component) component to store the data you call using your [Plug-In](/v1/docs/plug-in-component) component.

1. Drag and drop the second **Hidden** component onto your canvas, placing it below the Initializer component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `students`.
3. Click **Save & Close**.

### Configure the First Data Workflow Component

Next, let's add a [Data Workflow](/v1/docs/data-workflow-component) component to output the [Plug-In](/v1/docs/plug-in-component) component's data to the `students` **Hidden** component.

1. Drag and drop a **Data Workflow** component on your canvas, placing it below the `students` **Hidden** component.
2. In the **Property Name** and **Canvas Label Text** fields, enter `dwfStudents`.

#### Configure the 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 | pluginGetSubmissions |
| Required | Yes |
| Source | Default |

#### 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 | students |
| Action | Value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.
4. Click **Save**.

The fully configured Data Workflow looks like the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(543).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

### Configure the Text Field Component

Then, you'll add a [Text Field](/v1/docs/text-field-component) component so end-users can replace the `dateOfBirth` field in the API data.

1. Drag and drop a **Text Field** component onto your canvas, placing it between your `students` **Hidden** and `dwfStudents` **Data Workflow** components.
2. In the **Property ID** field, enter `renameDateOfBirth`.
3. In the **Label Text** field, enter `New Name for field "dateOfBirth"`.
4. Click **Save & Close**.

### Configure the Second Data Workflow Component

Next, you'll set up the second [Data Workflow](/v1/docs/data-workflow-component) component to change the name of your API data field.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfStudents` **Data Workflow** component.
2. In the **Property Name** and **Canvas Label Text** fields, enter `dwfRename`.

#### 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 | students |
| Required | Yes |
| Source | Default |

#### Configure the Second Input Operator

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | renameDateofBirth |
| Required | Yes |
| Source | Default |

#### Configure the Rename Field Operator

1. Drag and drop a **Rename Field** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Rename Field |
| Label | New DOB |
| Current Name | dateOfBirth |
| Target Name | _arg |

> [!NOTE]
> You'll connect the **Text Field** component to the argument port (top) of the **Rename Field** operator. The connection uses the **Text Field** component’s entry to rename the **Current Name** data field. So, you'll pass the **Text Field** component's argument into the **Target Name**.
3. Connect the output port (right) of the `students` **Input** operator to the input port (left) of the **Rename Field** operator.
4. Connect the output port (right) of the `renameDateOfBirth` **Input** operator to the argument port (top) of the **Rename Field** operator.

#### Configure the First Console Operator

You'll want to add a [Console](/v1/docs/console-operator) operator to view the data in the DevTools Console before it passes to the Rename Field 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 | Before |
3. Connect the output port (right) of the `students` **Input** operator to the input port (left) of the `Before` **Console** operator.

#### Configure the Second Console Operator

Then you'll add another [Console](/v1/docs/console-operator) operator to view the status after the data passes through the Rename Field operator.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After |
3. Connect the output port (right) of the **Rename Field** operator to the input port (left) of the `After` **Console** operator.
4. Click **Save**.

The fully configured Data Workflow looks like the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(544).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

### Configure the Button Component

Lastly, add a [Button](/v1/docs/how-to-guide-button-component) to trigger the Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below the `dwfRename` **Data Workflow** component.
2. In the **Property ID** field, enter `btnRename`.
3. In the **Label Text** field, enter `Rename Field`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfRename**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(545).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)
6. Click **Save & Close**.
7. **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(546).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

Preview your module in Express View and open the DevTools Console. Enter a value you'd like to replace in the `dateOfBirth` field. Then, click the **Rename Field** button to view the results in the Console:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Rename_15.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A13Z&se=2026-11-08T11%3A18%3A13Z&sr=c&sp=r&sig=5MiLPd6wG4iuhpu8d381oBYoReNpr8GcQ69B1hyi%2FAc%3D)

## 

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Schema is a declarative language that defines the structure, content, and constraints of the data.

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.

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.