---
title: "How to: Remote Execute With a Calculation Field"
slug: "how-to-remote-execute-with-a-calculation-field"
description: "Create a Front-End and Back-End module for insurance cost calculations, managing inputs and executing remote calls seamlessly."
updated: 2026-02-02T20:29:31Z
published: 2026-02-03T15:48:58Z
canonical: "docs.unqork.io/how-to-remote-execute-with-a-calculation-field"
---

> ## 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: Remote Execute With a Calculation Field

**UDesigner**

This how-to guide combines [Calculator](/v1/docs/calculator-component) and [Plug-In](/v1/docs/plug-in-component) components to **make a remote execute call**.

In this guide, you'll create the following modules:

- **Front-End Module (1)**: Manages the front-end functions, so your end-user can select inputs for a insurance cost calculation.
- **Back-End Module (2)**: Manages the back-end functions and includes the module ID used by your remote execute.

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

## Module 1 Configuration: Front-End Module

The Front-End module in this example collects details on items that the end-user is insuring. Based on the calculations of the Back-End module, a calculated insurance rate displays in an additional field.

### Configure the Radio Buttons Component

Begin by configuring a [Radio Buttons](/v1/docs/radio-buttons-component) component to ask end-users what they're insuring.

1. In the Module Builder, drag and drop a **Radio Buttons** component onto your canvas.
2. In the **Property ID** field, enter `insuredAsset`.
3. In the **Label Text** field, enter `What do you need to insure?`.
4. In the **Values** table, enter the following:

| # | Label | Value |
| --- | --- | --- |
| 1 | House | house |
| 2 | Car | car |
| 3 | Boat | boat |

![Radio buttons component settings with the Values table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_insuredAsset.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the Number Component

Next, use a [Number](/v1/docs/number-component) component to add a field that asks for the age of the end-user's insured asset.

1. Drag and drop a **Number** component onto your canvas, placing it below your Radio Buttons component.
2. In the **Property ID** field, enter `assetAge`.
3. In the **Label Text** field, enter `How old is your home, vehicle, or boat?`.
4. Click **Save Component**.

### Configure the Text Field Component

Use a [Text Field](/v1/docs/text-field-component) component to display the insurance cost for the asset. And because this field stores a monetary value, you'll set a dollar sign prefix.

1. Drag and drop a **Text Field** component onto your canvas, placing it below your Number component.
2. In the **Property ID** field, enter `insuranceRate`.
3. In the **Label Text** field, enter `Your insurance will cost:`.
4. In the **Prefix** field, enter `$`.

![Text Field component settings with the Prefix field highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_insuranceRate.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.
6. **Save** your module.

Here's how your Front-End module looks in the Module Builder:

![Module Builder for Module 1.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder1.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

## Module 2 Configuration: Back-End Module

Next, create a new **API** module for the Back-End module. This module does not run any APIs, but to keep end-users from accessing the module. The Back-End module stores the data collected in your Front-End module and uses it to calculate the insurance rate.

### Edit Default Components

Because this module is an **API** module, the **Server Side Execution Only** setting is enabled by default. Setting your module to server-side execute, your module becomes inaccessible to anyone without Module Builder access.

> [!TIP]
> The Server Side Execution Only setting enables HTTP status code outputs in API modules. To learn more about HTTP Output, visit our [HTTP Status Codes](/v1/docs/http-status-codes) article.

Before adding components to your Back-End module, you'll remove the default API module components:

1. In your API module, remove the `panelInfo` **Panel** component, and its contents.
2. In the `panelRequest`, `panelConfig`, and `panelResponse` **Panel** components, delete all contents, leaving three empty Panel components.
3. **Save** your module.

### Configure the Hidden Components

First, you'll add [Hidden](/v1/docs/hidden-component) components to store the data from your Front-End module.

1. Drag and drop three **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** field, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | insuredAsset | insuredAsset |
| 2 | assetAge | assetAge |
3. Drag and drop another **Hidden** component inside the `panelResponse` **Panel** component.
4. In the **Property ID** and **Label Text** fields, enter `insuranceRate`.
5. Click **Save Component** for each component as you add it.

### Configure the `calcHouse` Calculator Component

This [Calculator](/v1/docs/calculator-component) component uses the formula to calculate the home insurance rate.

1. Drag and drop a **Calculator** component inside the `panelConfig` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcHouse`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A*2 |

![Calculator component settings with the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calHouse.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the `calcCar` Calculator Component

This [Calculator](/v1/docs/calculator-component) component uses the formula to calculate the car insurance rate.

1. Drag and drop a **Calculator** component onto your canvas, placing it below your `calcHouse` **Calculator** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcCar`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A |

![Calculator component settings with the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calcCar.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the `calcBoat` Calculator Component

This [Calculator](/v1/docs/calculator-component) component stores the formula to calculate your boat insurance rate.

1. Drag and drop a **Calculator** component onto your canvas, placing it below your `calcCar` **Calculator** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcBoat`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A*3 |

![Calculator component settings with the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calcBoat.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the Decisions Component

To trigger the correct [Calculator](/v1/docs/calculator-component) component, you must set up a rule using a [Decisions](/v1/docs/how-to-guide-decisions-component) component. Your `insuredAsset` **Hidden** component works as the input for your Decisions component. So, the value in `insuredAsset` determines which Calculator component is triggered.

1. Drag and drop a **Decisions** component inside your `panelConfig` **Panel** component, above your Calculator components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleCalculator`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Type |
| --- | --- | --- | --- |
| 1 | insuredAsset |  | exact |
4. In the **Outputs** table, enter the following:

| # | Property ID | Type |
| --- | --- | --- |
| 1 | calcHouse | trigger |
| 2 | calcCar | trigger |
| 3 | calcBoat | trigger |
5. In the **Conditionals** table, enter the following:

| # | insuredAsset | calcHouse_trigger | calcCar_trigger | calcBoat_trigger |
| --- | --- | --- | --- | --- |
| 1 | house | GO |  |  |
| 2 | car |  | GO |  |
| 3 | boat |  |  | GO |

![Decisions component settings with Trigger Type, and the Inputs, Outputs, and Conditionals tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ruleCalculator.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
6. Click **Save Component**.

### Configure the Initializer Component

Now, you'll add an [Initializer](/v1/docs/initializer-component) component that triggers the Decisions component.

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

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | ruleCalculator | trigger | GO |

![Initializer component settings with Trigger Type and the Outputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_initNewSubmission.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.
6. **Save** your module.

Here's how your Back-End module looks in the Module Builder:

![Module Builder for Module 2.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder2.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

## Updating the Front-End Module

Now that you have your Back-End module configured, you'll connect the two modules. You'll add a [Plug-In](/v1/docs/plug-in-component) component to your Front-End module to handle the remote execute and create each new submission. You'll also add a [Button](/v1/docs/button-component) component so your end-user can submit their responses and trigger the Plug-In component.

### Configure the Plug-In Component

Your [Plug-In](/v1/docs/plug-in-component) component makes an API call to execute your Back-End module based on your end-user's response.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below your Number component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginRemoteExecute`.
3. From the **Internal Services** drop-down, select **Execute Module**. The Request Type and Data Source URL autopopulate.
4. In the **Data Source URL** field, replace **{****module****Id}** with the module ID of your Back-End module.

> [!NOTE]
> You can retrieve the module ID from the Back-End module’s URL as follows: https://training.unqork.io/#/form/**5d9e06f2b5871a004223b54e**/edit.
5. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | insuredAsset | data.insuredAsset |
| 2 | assetAge | data.assetAge |

> [!NOTE]
> The Property ID column refers to the input fields in your Front-End module. The Mapping column refers to the destination fields in your Back-End module.
6. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | insuredRate | data.resolved.insuranceRate |

> Your Outputs table accepts the insurance rate calculated in your Back-End module. Then, it maps that insurance rate to your Text Field component for your end-user to view.

![Plug-in component settings with Internal Service, Data Source URL, and the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_pluginRemoteExecute(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
7. Click **Save Component**.

### Configure the Button Component

Lastly, you'll add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Plug-In component. This button submits your end-user's response to the application. On button-click, data is sent to your Back-End module. Then, the corresponding Calculator component triggers and returns the insurance rate.

1. Drag and drop a **Button** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** field, enter `btnSubmit`.
3. In the **Label Text** field, enter `Submit`.
4. In the **On Click** field, enter `pluginRemoteExecute`.

![Button component settings with the On Click field highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_btnSubmit.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.
6. **Save** your module.

Here’s how your updated Front-End module looks in the Module Builder:

![Updated Module Builder for Module 1.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder1-2.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

**Classic Designer**

This how-to guide combines [Calculator](/v1/docs/calculator-component) and [Plug-In](/v1/docs/plug-in-component) components to **make a remote execute call**.

In this guide, you'll create the following modules:

- **Front-End Module (1)**: Manages the front-end functions, so your end-user can select inputs for a insurance cost calculation.
- **Back-End Module (2)**: Manages the back-end functions and includes the module ID used by your remote execute.

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

## **Module** 1 Configuration: Front-End **Module**

The Front-End module in this example collects details on items that the end-user is insuring. Based on the calculations of the Back-End module, a calculated insurance rate displays in an additional field.

### Configure the Radio Buttons Component

Begin by configuring a [Radio Buttons](/v1/docs/radio-buttons-component) component to ask end-users what they're insuring.

1. In the **Module Builder**, drag and drop a **Radio Buttons** component onto your canvas.
2. In the **Property ID** field, enter `insuredAsset`.
3. In the **Label Text** field, enter `What do you need to insure?`.
4. In the **Values** table, enter the following:

| # | Option Label | Value to Store in Submission Data |
| --- | --- | --- |
| 1 | House | house |
| 2 | Car | car |
| 3 | Boat | boat |

![Radio Buttons component settings with Values table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_insuredAssetClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.

### Configure the Number Component

Next, use a [Number](/v1/docs/number-component) component to add a field that asks for the age of the end-user's insured asset.

1. Drag and drop a **Number** component onto your canvas, placing it below your Radio Buttons component.
2. In the **Property ID** field, enter `assetAge`.
3. In the **Label Text** field, enter `How old is your home, vehicle, or boat?`.
4. Click **Save & Close**.

### Configure the Text Field Component

Use a [Text Field](/v1/docs/text-field-component) component to display the insurance cost for the asset. And because this field stores a monetary value, you'll set a dollar sign prefix.

1. Drag and drop a **Text Field** component onto your canvas, placing it below your Number component.
2. In the **Property ID** field, enter `insuranceRate`.
3. In the **Label Text** field, enter `Your insurance will cost:`.
4. In the **Prefix** field, enter `$`.

![Text Field component settings with Prefix highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_insuranceRateClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.
6. **Save** your module.

Here's how your Front-End module looks in the Module Builder:

![Module Builder for Module 1.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder1Classic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

## **Module** 2 Configuration: Back-End **Module**

Next, create a new **API** module for the Back-End module. This module does not run any APIs, but to keep end-users from accessing the module. The Back-End module stores the data collected in your Front-End module and uses it to calculate the insurance rate.

### Edit Default Components

Because this module is an **API** module, the **Server Side Execution Only** setting is enabled by default. Setting your module to server-side execute, your module becomes inaccessible to anyone without Module Builder access.

> [!TIP]
> The Server Side Execution Only setting enables HTTP status code outputs in API modules. To learn more about HTTP Output, visit our [HTTP Status Codes](/v1/docs/http-status-codes) article.

Before adding components to your Back-End module, you'll remove the default API module components:

1. Remove the `panelInfo` **Panel** component, and its contents.
2. In the `panelRequest`, `panelConfig`, and `panelResponse` **Panel** components, delete all contents, leaving three empty Panel components.
3. **Save** your module.

### Configure the Hidden Components

First, you'll add [Hidden](/v1/docs/hidden-component) components to store the data from your Front-End module.

1. Drag and drop two **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** field, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | insuredAsset | insuredAsset |
| 2 | assetAge | assetAge |
3. Drag and drop another **Hidden** component inside the `panelResponse` **Panel** component.
4. In the **Property ID** and **Canvas Label Text** fields, enter `insuranceRate`.
5. Click **Save & Close** for each component as you add it.

### Configure the `calcHouse` Calculator Component

This [Calculator](/v1/docs/calculator-component) component uses the formula to calculate the home insurance rate.

1. Drag and drop a **Calculator** component inside the `panelConfig` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcHouse`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A*2 |

![Calculator component settings with the Inputs table and Outputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calcHouseClassic(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.

### Configure the `calcCar` Calculator Component

This [Calculator](/v1/docs/calculator-component) component uses the formula to calculate the home insurance rate.

1. Drag and drop a **Calculator** component onto your canvas, placing it below your `calcHouse` **Calculator** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcCar`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A |

![Calculator component settings with the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calcCarClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.

### Configure the `calcBoat` Calculator Component

This [Calculator](/v1/docs/calculator-component) component stores the formula to calculate your boat insurance rate.

1. Drag and drop a **Calculator** component onto your canvas, placing it below your `calcCar` **Calculator** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `calcBoat`.
3. In the **Inputs** table, enter the following:

| # | Source | Alias | Required |
| --- | --- | --- | --- |
| 1 | assetAge | A | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
4. In the **Outputs** table, enter the following:

| # | Source | Formula |
| --- | --- | --- |
| 1 | insuranceRate | =A*3 |

![Calculator component settings with the Inputs and Outputs tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_calcBoatClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.

### Configure the Decisions Component

To trigger the correct [Calculator](/v1/docs/calculator-component) component, you must set up a rule using a [Decisions](/v1/docs/how-to-guide-decisions-component) component. Your `insuredAsset` **Hidden** component works as the input for your Decisions component. So, the value in `insuredAsset` determines which Calculator component is triggered.

1. Drag and drop a **Decisions** component inside your `panelConfig` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleCalculator`.
3. In the **Inputs** table, enter the following:

| Source | Alias | Type |
| --- | --- | --- |
| insuredAsset |  | exact |
4. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| calcHouse | trigger |
| calcCar | trigger |
| calcBoat | trigger |
5. In the **Micro Decisions** table, enter the following:

| insuredAsset | calcHouse_trigger | calcCar_trigger | calcBoat_trigger |
| --- | --- | --- | --- |
| house | GO |  |  |
| car |  | GO |  |
| boat |  |  | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecute_Calculator_Decisions_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
6. Click **Save**.

### Configure the Initializer Component

Now, you'll add an [Initializer](/v1/docs/initializer-component) component that triggers the Decisions component.

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

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | ruleCalculator | trigger | GO |

![Initializer component settings with Trigger Type and the Outputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_initNewSubmissionClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.
6. **Save** your module.

Here's how your Back End module looks in the Module Builder:

![Module Builder for Module 2.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder2Classic(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

## Updating the Front-End **Module**

Now that you have your Back-End module configured, you'll connect the two modules. You'll add a [Plug-In](/v1/docs/plug-in-component) component to your Front-End module to handle the remote execute and create each new submission. You'll also add a [Button](/v1/docs/button-component) component so your end-user can submit their responses and trigger the Plug-In component.

### Configure the Plug-In Component

Your [Plug-In](/v1/docs/plug-in-component) component makes an API call to execute your Back-End module based on your end-user's response.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below your Number component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginRemoteExecute`.
3. From the **Internal Services** drop-down, select **Execute Module**. The Request Type and Data Source URL autopopulate.
4. In the **Data Source URL**, replace **{****module****Id}** with the module ID of your Back-End module.

> You can retrieve the module ID from the Back-End module’s URL as follows: https://training.unqork.io/#/form/**5d9e06f2b5871a004223b54e**/edit.
5. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| insuredAsset | data.insuredAsset |
| assetAge | data.assetAge |

> The Property ID column refers to the input fields in your Front-End module. The Mapping column refers to the destination fields in your Back-End module.
6. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | insuredRate | data.resolved.insuranceRate |

> Your Outputs table accepts the insurance rate calculated in your Back-End module. Then, it maps that insurance rate to your Text Field component for your end-user to view.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1769009143945.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
7. Click **Save**.

### Configure the Button Component

Lastly, you'll add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Plug-In component. This button submits your end-user's response to the application. On button-click, data is sent to your Back-End module. Then, the corresponding Calculator component triggers and returns the insurance rate.

1. Drag and drop a **Button** component onto your canvas, placing it below your Plug-In component.
2. In the **Property ID** field, enter `btnSubmit`.
3. In the **Label Text** field, enter `Submit`.
4. In the **On Click** field, enter `pluginRemoteExecute`.

![Button component settings with the On Click field highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_btnSubmitClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.
6. **Save** your module.

Here’s how your updated Front-End module looks in the Module Builder:

![Updated Module Builder for Module 1.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/RemoteExecuteCalc_ModuleBuilder1-2Classic(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

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.

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

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

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.

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.

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.

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.

HTTP (Hypertext Transfer Protocol) is an application-layer protocol used to transmit hypermedia documents like HTML.

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 .

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

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