How to: Remote Execute With a Calculation Field

This how-to guide combines Calculator and Plug-In 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.

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

   

5. Click Save Component.

Configure the Number Component

Next, use a Number 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 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 $.

   

5. Click Save Component.

6. Save your module.

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

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.

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 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 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 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	(unchecked)

4. In the Outputs table, enter the following:

   #	Source	Formula
   1	insuranceRate	=A*2

   

5. Click Save Component.

Configure the calcCar Calculator Component

This Calculator 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	(unchecked)

4. In the Outputs table, enter the following:

   #	Source	Formula
   1	insuranceRate	=A

   

5. Click Save Component.

Configure the calcBoat Calculator Component

This Calculator 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	(unchecked)

4. In the Outputs table, enter the following:

   #	Source	Formula
   1	insuranceRate	=A*3

   

5. Click Save Component.

Configure the Decisions Component

To trigger the correct Calculator component, you must set up a rule using a Decisions 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

   

6. Click Save Component.

Configure the Initializer Component

Now, you'll add an Initializer 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

   

5. Click Save Component.

6. Save your module.

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

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 component to your Front-End module to handle the remote execute and create each new submission. You'll also add a Button component so your end-user can submit their responses and trigger the Plug-In component.

Configure the Plug-In Component

Your Plug-In 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 {moduleId} 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
   1	insuredAsset	data.insuredAsset
   2	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.

   

7. Click Save Component.

Configure the Button Component

Lastly, you'll add a Button 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.

   

5. Click Save Component.

6. Save your module.

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