Rename Field Operator: Renaming API Data Fields

Overview

Sometimes you'll need to rename data fields when configuring APIs (application programming interface). When pulling API data into your application, field names can be complex. They could be long strings of numbers or be off-topic to your application. With the Rename Field operator, you can change field names to something simpler and topical.

In this use case, you'll set up a Plug-In that gets data from an internal API. You'll use Data Workflows and a number of other components to rename the data fields from the API data set.

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

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

What You'll Learn

In this article, you'll learn how to rename API data fields.

What You'll Need

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

  • 1 Panel component

  • 2 Hidden components

  • 1 Plug-In component

  • 1 Initializer component

  • 1 Text Field component

  • 2 Data Workflow components

  • 1 Button component

To set up your first Data Workflow, you'll need:

  • 1 Input operator

  • 1 Output operator

To set up your second Data Workflow, you'll need:

  • 2 Input operators

  • 1 Rename Field operator

  • 2 Console operators

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

Configuration

Configure the Panel component

You'll start by adding a Panel component to keep everything organized.

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

Configure the First Hidden Component

Then you'll add a Hidden component. This component will hold the API address, which you'll pass into your Plug-In.

1. Drag and drop a Hidden component onto your canvas, placing it inside your Panel.
2. Enter moduleId in the Canvas Label Text and Property ID fields
3. Set the Default Value to 5fdb91e3d923110236e9d574.

The Default Value you entered is the Module ID of our Schema: Professional Configurator Sample Data Module. You'll find this ID in the module's hyperlink as follows: https://training.unqork.io/#/form/5fdb91e3d923110236e9d574/edit.

4. Click Save.

Configure the Plug-In Component

Next, you'll need a Plug-In component. Your Plug-In will call the data you want from an internal API and you'll put it into a Data Table.

1. Drag and drop a Plug-In component onto your canvas, placing it under the moduleId Hidden component.
2. Enter pluginGetSubmissions in the Canvas Label Text and Property ID fields.
3. Enter dwfStudents in the Post Trigger field.
4. Complete the Inputs table as follows: 

Property ID

Mapping

moduleId

moduleId

'firstName, lastName, fullName, dateOfBirth, supportingDocuments, documentType'

fields

'-created'

sort

5. Select List Submissions from Dashboard from the Internal Services drop-down menu. The Request Type and Data Source URL auto-populate.

6. Click Save.

Configure the Initializer Component

You'll only want your Plug-In to trigger once when you load the page. You'll use an Initializer component to handle that.

1. Drag and drop an Initializer component onto your canvas, placing it under your Plug-In component.
2. Enter initOnLoad in the Canvas Label Text and Property ID fields.
3. Select New Submission as the Trigger Type.
4. Enter the following in the Outputs table: 
a. Property ID: enter pluginGetSubmissions.
b. Type: enter trigger.
c. Value: enter GO.

5. Click Save.

Configure the Second Hidden Component

Now, you'll need a place to store the data you call into your application. Add a second Hidden component to hold your Plug-In data.

1. Drag and drop the second Hidden component onto your canvas, placing it under the Initializer component.
2. Enter students in the Canvas Label Text and Property ID fields.
3. Click Save.

Configure the First Data Workflow Component

Next, let's add a Data Workflow component to store your Plug-In 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. Enter dwfStudents in the Canvas Label Text and Property Name fields.

Configure the Input Operator

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

Setting

Value

Category

Input

Component

pluginGetSubmissions

Required

Yes

Source

Default

Configure the Output Operator

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

Setting

Value

Category

Output

Component

students

Action

Value
3. Connect the output port (right) of the Input operator to the input port (left) of the Output operator.
4. Save the Data Workflow.

Configure the Text Field Component

Then, you'll add a place for end-users to enter their new field name. The field name you want to replace in the API data is "dateOfBirth."

1. Drag and drop a Text Field component onto your canvas. Place it between your students Hidden and dwfStudents Data Workflow components.
2. Enter renameDateOfBirth in the Property ID field.
3. Enter New Name for field "dateOfBirth" in the Label Text field.
4. Click Save.

Configure the Second Data Workflow Component

Next, you'll set up the second Data Workflow. This Data Workflow makes the name change to your API data field.

1. Drag and drop a Data Workflow component onto your canvas, placing it under your dwfStudents Data Workflow component.
2. Enter dwfRename in the Canvas Label Text and Property Name fields.

Configure the First Input Operator

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

Category

Input

Component

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 Input 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 Rename Field operator's Info window as follows:
Setting Value

Category

Rename Field

Label

New DOB

Current Name

dateOfBirth

Target Name

_arg

You'll connect the Text Field to the argument port (top) of the Rename Field operator. The connection uses the Text Field entries to rename the Current Name data field. To do this, you'll pass the Text Field's argument into 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 operator next. The Console shows your Data Workflow's progress before the Rename Field operator fires. You can see the progress on the DevTools Console.

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

Category

Console

Label

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 operator. Same as before, you'll use this operator to see your Data Workflow's progress. This Console operator will show you the status after the Rename Field operator fires.

1. Drag and drop another Console operator onto your Data Workflow canvas.
2. Configure the Console 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. Save the Data Workflow.

Configure the Button Component

Finally, to trigger the Data Workflow, you'll add a Button component.

1. Drag and drop a Button component onto your canvas, placing it under the dwfRename Data Workflow component.
2. Enter btnRename in the Property ID field.
3. Enter Rename Field in the Label Text field.
4. Select Event as the Action Type.
5. Enter dwfRename in the Trigger on Click field.

6. Click Save.
7. Save your module.

Just like that, you're done! Let's take a peek at your Data Workflow. First, preview your module in Express View and open the DevTools Console. Enter a name you'd like to replace the dateOfBirth field name with. Then, click the Rename Field button. It should look something like this:

Lab

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