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.
-
Helen creates a form and adds a dropdown field to record the new user’s occupation.
-
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.
-
Add a Dropdown field—User occupation—and add
Student
,
Working Professional
, and
I run my own business
as dropdown options.
-
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.
-
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.
-
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
-
Create a new script and enter a name—Hide fields in user signup.
-
Choose
User
Signup Orchestration
in the
Form
dropdown.
-
Choose
Add new card
as the
Execution
Location
to execute the script when a new card is added.
-
Choose
onLoad
as the
Execution
Trigger
to allow the script to hide specific fields right when the form loads.
-
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 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
-
Create a new script and enter a name—Auto-populate fields in user signup.
-
Choose
User Signup 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 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.
-
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 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.
-
Navigate to Cards and click
Add Card
.
-
Select
User Signup Orchestration
from the Form dropdown.
-
Select the
User occupation
from the dropdown.
-
On selecting Student , you will be displayed the below options:
-
On selecting Working Professional , you will be displayed the below options:
-
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Bigin?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
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 ...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 ...Business case 1: Populate read recipients list for a card using Server Scripts (On Load)
Managers find it useful to know which employees have viewed a new card or comment, like a read receipts list. It helps managers know if an employee has viewed his assigned task and evaluate how informed employees are about new updates in the ...Business case 2: Fetch data from third party websites using Server Scripts (Before Create)
We might sometimes want to fetch external data from other applications or websites like weather details, stock rates, or flight status related to the card, when we create a card. Server scripts can be used to fetch such data and display it in Qntrl. ...