Use client scripts to fetch data from third party applications or websites | Online Help | Qntrl

Business case 3: Use client scripts to fetch data from third party applications or websites

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

Create a new board—Booking Request Board—and add fields to record the client’s request.
  1. Add a Drop-down field— Choose a travel destination —and add drop-down values of states like Alabama, Alaska, California, Florida, and so on.
  2. 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 board.

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.
  1. Create a new script and enter a name—Weather update.
  2. Choose Booking Request Board in the Board drop-down.
  3. Choose Add new card  as the Execution Location to execute the script when a new card is added.
  4. 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 drop-down will be displayed in the right panel, where you can choose the fields whose update must trigger the script.
  5. Copy paste the below script into your script editor and replace the parameter names.
    1. You can use the ? Icon at the top-right corner of the script editor to refer to parameter names.
  6. Once the script is ready, Publish it. 
Sample Script

async function onChange(forpage,oldVal,newVal,executeOnLoad){
    if(executeOnLoad){
        return;
    }
var weatherdata = ZDK.HTTP.GET(' https://api.openweathermap.org/data/2.5/weather?q='  + newVal.display_name + ',US&APPID=86ed5346f446a2975cb8f16e9eec2417');
 
    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.
  1. Navigate to Boards and select a board from the left panel.
  2. Click Add Card.
  3. Select Booking Request Board from the Board drop-down.
  4. Enter the travel destination.
    1. The destination’s weather and temperature gets displayed automatically.



    • Related Articles

    • Manage Client Scripts

      Client Scripts are used to incorporate additional validations to business data while they are recorded in Qntrl. In client scripts, you can code using JavaScript and run the code on the end-user’s browser while they are creating a new card or ...

    • Business case 1: Use client scripts to perform mathematical calculations and validations on data

      While designing forms to replicate finance related documents like purchase order, invoice, or reimbursement bills, our workflows might require the calculation of total cost or sum of expenses incurred. To automate such mathematical calculations and ...

    • Qntrl Marketplace - An Overview

      Qntrl Marketplace is an online store with solutions for specific business requirements while working with Qntrl. This is the perfect platform to search for any Qntrl extensions or showcase the extension you have built, which extends the capabilities ...

    • Business case 2: Use client scripts to auto-populate fields based on user input

      While designing forms, we would sometimes require to display different sets of fields for different user responses. Such automatic field population can be handled using client scripts. Business Scenario Helen creates a sign-up form for her product ...

    • Manage Webhooks

      Webhooks Overview Webhooks facilitate automated HTTP notifications. Notifications are triggered in third-party applications as per the business requirements when a predefined action is performed by the user in the organization. Business Use Cases of ...

    You are currently viewing the help articles of Qntrl 3.0. If you are still using our older version and require guidance with it, Click here.