Business Scenario

Solution

1. Helen creates a form and adds a dropdown 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 an orchestration

1. Add a Dropdown field—User occupation—and add Student , Working Professional , and I run my own business as dropdown 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.
   

Step 2: Code client scripts

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 Orchestration  in the Form  dropdown.
   
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 Orchestration  in the Form  dropdown.
   
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 dropdown 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

1. Navigate to Cards and click Add Card .
   
2. Select User Signup Orchestration  from the Form dropdown.
   
3. Select the User occupation from the dropdown.
   
4. On selecting Student , you will be displayed the below options:
   
    
   
5. On selecting Working Professional , you will be displayed the below options:
   
    
   
6. On selecting I run my own business , you will be displayed the below options: