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

Create a new orchestration—User Signup Orchestration—and add all the fields to be displayed when users choose different occupations.
  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.


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

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

Once the form, blueprint, and client scripts are ready, we can test the script by creating a new 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:
     

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION





                        Still can't find what you're looking for?

                        Write to us:  support@zohoforms.com


                              



                            



                          Manage your brands on social media




                              Zoho Marketing Automation

                                Zoho Sheet Resources

                                 




                                    Zoho Forms Resources


                                      Secure your business
                                      communication with Zoho Mail


                                      Mail on the move with
                                      Zoho Mail mobile application

                                        Stay on top of your schedule
                                        at all times


                                        Carry your calendar with you
                                        Anytime, anywhere




                                              Zoho Sign Resources

                                                Sign, Paperless!

                                                Sign and send business documents on the go!

                                                Get Started Now




                                                        Zoho TeamInbox Resources



                                                                Zoho DataPrep Resources



                                                                  Zoho DataPrep Demo

                                                                  Get a personalized demo or POC

                                                                  REGISTER NOW


                                                                    Design. Discuss. Deliver.

                                                                    Create visually engaging stories with Zoho Show.

                                                                    Get Started Now










                                                                                          Wherever you are is as good as
                                                                                          your workplace

                                                                                            Resources

                                                                                            Videos

                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                            eBooks

                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                            Webinars

                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                            CRM Tips

                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                              Zoho Show Resources