Kaizen #70 - Client Script Support for Wizards

Kaizen #70 - Client Script Support for Wizards

Hello everyone! 
Welcome back to another interesting Kaizen post. In this post, we can discuss the recently added Client Script Support for Wizards.

What is a Wizard?
A Wizard in Zoho CRM helps you divide a long form into a series of screens. You can also have dynamic changes to your forms based on the input in Wizard using Conditional Rules in Wizard. This type of step-wise approach reduces the chances of erroneous data entry, as the partially completed form can be saved as a draft and submitted later. 

What is Client Script?
Client Script gives you a seamless platform for achieving and extending your business cases in Zoho CRM by allowing Java Script code execution in your browser. To know more about the feautres of Client Script, click here.

Need for Client Script in Wizards
Client Script support for Wizard enables you to customize and extend your business cases with respect to Wizards, beyond Conditional Rules. 
For example,
  • Auto-populate field data while creating or editing a record using Wizard.
  • Apply advanced formula computation to the fields in a Wizard.
  • Achieve field validation, auto-correction, and data enrichment in Wizard.
  • Display custom error messages for a specific set of users or fields in a Wizard.
Events for Wizards in Client Script
      You can trigger a Client Script using the Events available for create/edit pages of Wizard.
  • whenever a wizard loads - onLoad Wizard Event
  • when you click on the save button in  a Wizard - onBeforeSave Wizard Event
  • when you navigate from one screen to another - onTransition Wizard Event
  • before navigating from one screen to another screen - onBeforeTransition Wizard Event
  • when you update any of the fields - onChange Wizard Event
  • when you update a specific field - onChange Field Event.


ZDK Client Function

Description
setVisibility()


Show or Hide a button or text component of a Wizard

setContent(value)

Set text content for the text element.

getElementByID(element_id)

Get the UIElement object.
transitionTo(api_name)

Makes the transition to the specified screen
getComponent(record-create-wizard) 
 To fetch the component details like screen information of a Wizard. record-create-wizard - is the default value of the Wizard component name.

Note
Apart from these functions, you can use all the other ZDK functions which are not tagged as canvas.

Use Case
Med-X is a Health Care Company that uses Zoho CRM.  For order creation, let us consider that there is an existing Wizard with three screens. The first screen has the product details, the second screen consists of fields related to payment using credit/debit card and the third screen consists of the address fields. The company wants to achieve the following validations and requirements using Client Script in both create and edit pages of the Wizard in Orders module.

1. The minimum quantity for the Category - Masks is 1000. If the user enters a lesser value, display the error message " Minimum quantity should be 1000". The minimum quantity for the Category Surgical Instruments is 100. If the user enters a lesser value, display the error message " Minimum quantity should be 100".

2. If the field Is shipping address same as billing address? is true , then copy and populate the Shipping Address value in the field Billing Address.

3. If the payment method in screen 1 is selected as Credit/Debit card in screen 3, then the Wizard should transit to screen 2.

4. If the country selected in the field Select the Country is India then display the below text, 
Your order will be shipped using the FedEx courier service. Track your order using  the link https://www.fedex.com/en-us/home.html.
If the country selected is the US, then display the below message,
Your order will be shipped using the Blue Dart courier service. Track your order using this link https://www.bluedart.com/tracking.  

Solution using Client Script
The requirements are for create and edit pages of the Orders Wizard. So create two scripts as follows.
  1. Client Script for Create Page (Wizard)
  2. Client Script for Edit Page (Wizard)

1. Client script for Create Page (Wizard)
  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.

  • The Client Script should run as and when the fields are updated with values. So create a Client Script with Wizard Event Type and onChange Event.
  • Enter the following script and click Save.
      
switch (field_name) {
case 'Quantity':
        var qty = ZDK.Page.getField("Quantity");
        if ((ZDK.Page.getField("Choose_the_category").getValue() == "Surgical Instruments") && (qty.getValue() < 100)) {
                qty.showError("Minimum order quanity should be 100 pieces");
            }
            else if ((ZDK.Page.getField("Choose_the_category").getValue() == "Masks") && (qty.getValue() < 1000)){
                qty.showError("Minimum order quanity should be 1000 pieces");
            }
        break;
 case 'Is_the_shipping_address_same_as_thbilling_address':
        var billAdd = ZDK.Page.getField("Billing_Address");
        var shipAdd = ZDK.Page.getField("Shipping_Address");
        shipAdd.setValue(billAdd.getValue());
        break;
    case 'Payment_Method':
        var payment = ZDK.Page.getField("Payment_Method");
        if (payment.getValue() != "COD") {
            log(ZDK.Page.getComponent('record-create-wizard'));
            ZDK.Page.getComponent("record-create-wizard").transitionTo("Screen_2");
            break;
        }
case 'Select_the_Country':
        var Text1 = ZDK.UI.getElementByID('Text_1');
        if (ZDK.Page.getField("Select_the_Country").getValue() == 'India') {
            Text1.setContent("Your order will be shipped using Blue Dart courier service. Track your orders using this link.");
        }
        else if (ZDK.Page.getField("Select_the_Country").getValue() == 'US') {
            Text1.setContent("Your order will be shipped using FedEx courier service. Track your orders using this link");
        }
break;
}


  • Here, the field name is the event argument that will hold the value of the field that is being changed by the user in the Wizard. With the help of this argument (field_name), you can check which field is being updated by the user using switch...case or if.. else statement. To display the error message, you can use showError(error), to change the content in the text component use setContent(), to jump to a different screen use ZDK.Page.getComponent("record-create-wizard").transitionTo("Screen_X");  and to copy the content to another field use setValue(). Here, the name record-create-wizard is constant for create and edit Wizard pages.
  • Here is how the Client Script works in a Wizard,




2. Client Script for Edit Page (Wizard)
      To achieve the solution for the edit page of Orders Wizard, you need to create another Client Script and select the Page as Edit Page (Wizard) as shown below.


  • Use the same code and click Save.

Note
Using transitionTo(api_name), you can transit only to previous screens in Create Page (Wizard).

We hope you found this post useful. We will meet you next week with another interesting topic! Get in touch with us at support@zohocrm.com if you have any questions, or let us know in the comments.


Cheers!


    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Searching customer field

      Hello, When entering a receipt, we select customer information. The customer information is synced with Zoho CRM. However, we can't find the customer information because it searches for words that begin with the entered value. It needs to search for words

    • How I set default email addresses for Sales Orders and Invoices

      I have customers that have different departments that handle Sales Orders and Invoices. How can i set a default email for Sales Orders that's different than the default email for Invoices? Is there a way I can automate this using the Contact Persons Departments

    • Modular Permission Levels

      We need more modular Permissions per module in Books we have 2 use cases that are creating problems We need per module export permission we have a use case where users should be able to view the sales orders but not export it, but they can export other

    • Kaizen #157: Flyouts in Client Script

      Hello everyone! Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client Script

    • How get stock name from other column ?

      How get stock name from other column ? e.g. =STOCK(C12;"price") where C12 is the code of the stock

    • Adding a developer for editing the client application with a single user license

      Hi, I want to know that I as a developer I developed one application and handed over to the customer who is using the application on a single user license. Now after6 months customer came back to me and needs some changes in the application. Can a customer

    • Download an email template in html code

      Hello everyone, I have created an email template and I want to download it as html. How can i do that? I know you can do it via the campaigns-first create a campaign add the template and download it as html from there. But what if i don't want to create

    • Attachment is not included in e-mails sent through Wordpress

      I have a Wordpress site with Zeptomail Wordpress plugin installed and configured. E-mails are sent ok through Zeptomail but without the included attachment (.pdf file) Zeptomail is used to send tickets to customers through Zeptomail. E-Mails are generated

    • Upcoming Changes to the Timesheet Module

      The Timesheet module will undergo a significant change in the upcoming weeks. To start with, we will be renaming Timesheet module to Time Logs. This update will go live early next week. Significance of this change This change will facilitate our next

    • Best way to schedule bill payments to vendors

      I've integrated Forte so that I can convert POs to bills and make payments to my vendors all through Books. Is there a way to schedule the bill payments as some of my vendors are net 30, net 60 and even net 90 days. If I can't get this to work, I'll have

    • Cant update image field after uploading image to ZFS

      Hello i recently made an application in zoho creator for customer service where customers could upload their complaints every field has been mapped from creator into crm and works fine except for the image upload field i have tried every method to make

    • Billing Management: #4 Negate Risk Free with Advances

      In the last post, we explored how unbilled charges accumulate before being invoiced. But what happens when businesses need money before service begins? Picture this: A construction company takes on a $500,000 commercial building project expected to last

    • Is there an equivalent to the radius search in RECRUIT available in the CRM

      We have a need to find all Leads and/or Contacts within a given radius of a given location (most likely postcode) but also possibly an address. I was wondering whether anyone has found a way to achieve this in the CRM much as the radius search in RECRUIT

    • Zoho CRM Inventory Management

      What’s the difference between Zoho CRM’s inventory management features and Zoho Inventory? When is it better to use each one?

    • Cannot Enable Picklist Field Dependency in Products or Custom Modules – Real Estate Setup

      Hello Zoho Support, I am configuring Zoho CRM for real estate property management and need picklist field dependency: What I’ve tried: I started by customizing the Products module (Setup > Modules & Fields) to create “Property Type” (Housing, Land, Commercial)

    • Get Workflow Metadata via API

      Is there a way to get metadata on workflows and/or custom functions via API? I would like to automatically pull this information. I couldn't find it in the documentations, but I'm curious if there is an undocumented endpoint that could do this. Moderation

    • Zoho Projects - Q2 Updates | 2025

      Hello Users, With this year's second quarter behind us, Zoho Projects is marching towards expanding its usability with a user-centered, more collaborative, customizable, and automated attribute. But before we chart out plans for what’s next, it’s worth

    • FSM setup

      So we have been tinkering with FSM to see if it is going to be for us. Now is the time to bite the bullet and link it to our zoho books and zoho crm. The help guides are good but it would really help if they were a bit more in depth on the intergrations.

    • Upcoming Updates to the Employees Module in Zoho Payroll (US)

      We've made a couple of updates to the Employees module in Zoho Payroll (latest version of the US edition). These changes will go live today. While creating an employee Currently, the Compensation Details section is part of the Basic Details step, where

    • Possible to Turn Off Automatic Notifications for Approvals?

      Hello, This is another question regarding the approval process. First a bit of background: Each of our accounts is assigned a rank based on potential sales. In Zoho, the account rank field is a drop-down with the 5 rank levels and is located on the account

    • ZOHO Creator subform link

      Dear Community Support, I am looking for some guidance on how to add a clickable link within a Zoho Creator subform. The goal is for this link to redirect users to another Creator form where they can edit the data related to the specific row they clicked

    • Allow Resource to Accept or Reject an Appointment

      I have heard that this can be done, is there any documentation on how?

    • Create new Account with contact

      Hi I can create a new Account and, as part of that process, add a primary contact (First name, last name) and Email. But THIS contact does NOT appear in Contacts. How can I make sure the Contact added when creating an Account is also listed as a Contact?

    • Custom Fonts in Zoho CRM Template Builder

      Hi, I am currently creating a new template for our quotes using the Zoho CRM template builder. However, I noticed that there is no option to add custom fonts to the template builder. It would greatly enhance the flexibility and branding capabilities if

    • Python - code studio

      Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics already

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • How To Insert Data into Zoho CRM Organization

      Hi Team I have this organization - https://crm.zoho.com/crm/org83259xxxx/tab/Leads I want to insert data into this Leads module, what is the correct endpoint for doing so ? Also I have using ZohoCRM.modules.ALL scope and generated necessary tokens.

    • Where can I get Equation Editor por Zoho Writer?

      I need to use Math Formulas in my document. Thank you.

    • How can I get base64 string from filecontent in widget

      Hi, I have a react js widget which has the signature pad. Now, I am saving the signature in signature field in zoho creator form. If I open the edit report record in widget then I want to display the Signature back in signature field. I am using readFile

    • Creator roadmap for the rest of 2022

      Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancements

    • Filtering repport for portal users

      Salut, I have a weird problem that I just cannot figure out : When I enter information as administrator on behalf of a "supplier" portal user (in his "inventory" in a shared inventory system), I can see it, "customer" portal users can see it, but the

    • Zoho Inventory. Preventing Negative Stock in Sales Orders – Best Practices?

      Dear Zoho Inventory Community, We’re a small business using Zoho Inventory with a team of sales managers. Unfortunately, some employees occasionally overlook stock levels during order processing, leading to negative inventory issues. Is there a way to

    • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

      Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias

    • Zoho One - Syncing Merchants and Vendors Between Zoho Expense and Zoho Books

      Hi, I'm exploring the features of Zoho One under the trial subscription and have encountered an issue with syncing Merchant information between Zoho Expense and Zoho Books. While utilizing Zoho Expense to capture receipts, I noticed that when I submit

    • Is Zoho Sheet available for Linux ?

      Is Zoho Sheet available for Linux ?

    • Zoho Sheet for Desktop

      Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

    • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

      Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

    • BUTTONS SHOWN AS AN ICON ON A REPORT

      Hi Is there any way to create an action button but show it as an icon on a report please? As per the attached example? So if the user clicks the icon, it triggers an action?

    • Dropshipping Address - Does Not Show on Invoice Correctly

      When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being

    • RFQ MODEL

      A Request for quotation model is used for Purchase Inquiries to multiple vendors. The Item is Created and then selected to send it to various vendors , once the Prices are received , a comparative chart is made for the user. this will help Zoho books

    • Next Page