While designing forms, we might sometimes want to display data from other websites or applications like stock rates, flight status, freight details, weather updates, and so on. To fetch such information from third party websites or applications and display it in fields while creating cards, client scripts can be used.
Business Scenario
Ryan runs a holiday agency. He uses Qntrl to automate booking requests of his customers. Ryan wishes to display the weather forecast of the holiday destination when a client books the holiday package. He also wants the forecast to be updated automatically if a client changes the destination.
Solution
To achieve this, Ryan can make use of any weather forecast website’s API in Qntrl’s client script and display the weather and temperature when the user selects a destination.
Sample Configuration
Step 1: Create an orchestration
Create a new orchestration—Booking Request Orchestration—and add fields to record the client’s request.
-
Add a Dropdown field—
Choose a travel destination
—and add dropdown values of states like Alabama, Alaska, California, Florida, and so on.
-
Create 2 Single-Line fields to record
Destination’s weather
and
Destination’s temperature
.
Once the form is created, proceed to design the blueprint, set permissions, and publish the orchestration.
Step 2: Code client scripts
Before scripting, select a website or application from which you’d like to receive the data. We’ve used openweathermap.org’s API in the sample code.
-
Create a new script and enter a name—Weather update.
-
Choose
Booking Request Orchestration
in the
Form
dropdown.
-
Choose
Add new card
as the
Execution
Location
to execute the script when a new card is added.
-
Choose
onChange
as the
Execution
Trigger
to allow the script to display the weather forecast when the
destination
is chosen. On selecting this option, a
Fields
dropdown will be displayed in the right panel, where you can choose the fields whose update must trigger the script.
-
Copy paste the below script into your script editor and replace the parameter names.
-
You can use the ? Icon at the top-right corner of the script editor to refer to parameter names.
-
Once the script is ready,
Publish
it.
Sample Script
async function onChange(forpage,oldVal,newVal,executeOnLoad){
if(executeOnLoad){
return;
}
var msg = weatherdata.weather[0].description;
current.Job.setValue(current.Layout.Fields.<select-Destination-weather-parameter-here>.id, msg);
var temp = weatherdata.main.temp - 270;
var str_a = temp.toString();
var result = Number(str_a.slice(0, 5));
var tempmsg = result + " Degree Celsius";
current.Job.setValue(current.Layout.Fields.<select-Destination-temperature-parameter-here>.id, tempmsg);
}
Step 3: Add card
Once the form, blueprint, and client scripts are ready, we can test the script by creating a new card.
-
Navigate to Cards and click
Add
Card
.
-
Select
Booking
Request Orchestration
from the Form dropdown.
-
Enter the travel destination.
-
The destination’s weather and temperature gets displayed automatically.