Use client scripts to auto-populate fields based on user input | Online Help | Qntrl

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 using Qntrl. Helen’s requirement is to display fields relevant to users based on their occupation—student, working professional, or entrepreneur.
 
Students are entitled to discounts whereas other working professionals are given an option to either purchase the product as an individual or for their whole organization. Helen is looking to automate this process of auto-populating fields using Qntrl.

Solution

Fields can be auto-populated in Qntrl using Client Scripts.
  1. Helen creates a form and adds a drop-down field to record the new user’s occupation.
  2. Based on the option selected by the user, relevant fields are populated and displayed using client scripts. 

Sample Configuration   

Step 1: Create a board

Create a new board—User Signup Board—and add all the fields to be displayed when users choose different occupations.
  1. Add a Drop-down field—User occupation—and add Student , Working Professional , and I run my own business as drop-down options.
  2. Create a Single-Line field to obtain Name of your school or college and a Radio Button field to display Would you like to avail a discount? . These fields can be displayed when the user selects Student as the occupation.
  3. Create 2 Single-Line fields to obtain Name of your company and Your designation in the organization . These fields can be displayed when the user selects Working Professional as the occupation.
  4. Create a Single-Line field to obtain Name of the organization and Would you like to purchase Qntrl for your org? . These fields can be displayed when the user selects I run my own business as the occupation.


Once the form is created, proceed to design the blueprint, set permissions, and publish the board.

Step 2: Code client scripts

Helen’s process requires 2 client scripts—one for hiding all the fields initially until the user makes a selection and the other script to display relevant fields when the user makes a selection.
 

Script 1: Hide fields initially in user signup

  1. Create a new script and enter a name—Hide fields in user signup.
  2. Choose User Signup 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 onLoad as the Execution Trigger to allow the script to hide specific fields right when the form loads.
  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 onLoad(forpage) {
   current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
   current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
   current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
   current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
   current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
   current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
    return;
} 


Script 2: Auto-populate fields in user signup

  1. Create a new script and enter a name—Auto-populate fields in user signup.
  2. Choose User Signup 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 auto-populate fields when the User occupation is filled. 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 val = current.Job.getValue(current.Layout.Fields.<select-User-occupation-parameter-here>.id);
    if ("Student" === val.value.display_name)
    {
        current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.show();
        current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.show();
        current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
        current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
        current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
        current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
 
    }
    else if ("Working Professional" === val.value.display_name)
    { 
        current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
        current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
        current.Layout.Fields.<select-Name-of-your-company-parameter-here>.show();
        current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.show();
        current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.hide();
        current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.hide();
 
    }
    else if ("I run my own business" === val.value.display_name)
    {
        current.Layout.Fields.<select-Name-of-your-school-or-college-parameter-here>.hide();
        current.Layout.Fields.<select-Would-you-like-to-avail-a-discount-parameter-here>.hide();
        current.Layout.Fields.<select-Name-of-your-company-parameter-here>.hide();
        current.Layout.Fields.<select-Your-designation-in-the-company-parameter-here>.hide();
        current.Layout.Fields.<select-Name-of-your-organization-parameter-here>.show();
        current.Layout.Fields.<select-Would-you-like-to-purchase-Qntrl-for-your-org-parameter-here>.show();
    }
} 


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 User Signup Board from the Board drop-down.
  4. Select the User occupation from the drop-down.
  5. On selecting Student , you will be displayed the below options:
     
  6. On selecting Working Professional , you will be displayed the below options:
     
  7. On selecting I run my own business , you will be displayed the below options:
     

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

    • Conditional Fields

      This feature is open only on request. If you would like to try it, email our support team at support@qntrl.com. In specific business scenarios, we would want certain fields or sections of the form to be displayed based on the input a user enters in ...

    • Advanced Fields

      Lookups Lookups are fields used to obtain a subset of options from available values in fields, tables, webhook API responses, or database query responses. Existing data available in the organization can be reused using lookups. Lookups usually return ...

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

    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.