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!


    Access your files securely from anywhere

        All-in-one knowledge management and training platform for your employees and customers.







                              Zoho Developer Community




                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts



                                                              • Sticky Posts

                                                              • 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.
                                                              • Kaizen #226: Using ZRC in Client Script

                                                                Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this
                                                              • Kaizen #222 - Client Script Support for Notes Related List

                                                                Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how
                                                              • Kaizen #217 - Actions APIs : Tasks

                                                                Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.
                                                              • Kaizen #216 - Actions APIs : Email Notifications

                                                                Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are


                                                              Manage your brands on social media



                                                                    Zoho TeamInbox Resources



                                                                        Zoho CRM Plus Resources

                                                                          Zoho Books Resources


                                                                            Zoho Subscriptions Resources

                                                                              Zoho Projects Resources


                                                                                Zoho Sprints Resources


                                                                                  Qntrl Resources


                                                                                    Zoho Creator Resources



                                                                                        Zoho CRM Resources

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner









                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

                                                                                                Writer is a powerful online word processor, designed for collaborative work.

                                                                                                  Zoho CRM コンテンツ




                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方




                                                                                                                • Recent Topics

                                                                                                                • Adding multiple Attendee email addresses when adding a Zoho Calendar event in Zoho Flow

                                                                                                                  I am trying to integrate Notion and Zoho Calendar via Zoho Flow. However, the Attendee email address supported by Zoho Calendar - Create event only supports one email address, so I am having difficulty implementing automation to automatically register
                                                                                                                • Graceful Handling of Exceeded Option Limits

                                                                                                                  Hi Zoho SalesIQ team. I would like to submit a feature request to deal with a bug in salesIQ Current Behavior (Bug): When a dynamic list passed to the Single Select Option Card contains more than 20 options, the Zobot stops responding (freezes/hangs)
                                                                                                                • System default SLA descriptions can't be modified

                                                                                                                  The system default SLAs have identical descriptions for all SLA levels, but their settings differ. However, I am facing an issue where I cannot modify these descriptions and save the changes. The content of the description box can be edited but the changes
                                                                                                                • Adding non-Indian billing address for my Zoho subscription

                                                                                                                  Hey Need help with adding a non-Indian billing address for my Zoho subscription, trying to edit the address to my Singapore registered company. Won't let me change the country. Would appreciate the help. Regards, Rishabh
                                                                                                                • How to create one ZohoCRM organisation out of a multi-organization?

                                                                                                                  Hi, we have a multi-org including two different Zoho CRM organizations for two companies using respectively EUR and USD as default currency. I was wondering if there is any easy way to merge the two organizations into just one, so that users may access
                                                                                                                • Gray screen while signing documents

                                                                                                                  We are all getting a "gray" screen when trying to sign documents in Zoho sign. Anyone else having issues?
                                                                                                                • Projects custom colors replaced by default orange

                                                                                                                  Since yesterday, projects uploaded to Zoho, to which I had assigned a custom color, have lost the customization and reverted to the default color (orange). Has anyone else had the same problem? If so, how did you resolve it?
                                                                                                                • Interview booked through Invite but no Notifications

                                                                                                                  We have a workflow that was developed through a developer/partner that was tested and worked. Today, we pushed a candidate through the process and invited them to an in-office interview. They were sent the booking link (as usual and as tested before successfully)
                                                                                                                • WebDAV support

                                                                                                                  I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?
                                                                                                                • Automatiser la gestion des SLA dans Zoho Desk avec Zoho Contracts

                                                                                                                  Les équipes du service client s’efforcent d’assurer un support rapide, régulier et fiable pour garantir la satisfaction de chaque client. Les accords de niveau de service (SLA) permettent de clarifier les engagements en définissant les termes et conditions
                                                                                                                • iOS App doesn't refresh for Document Creation

                                                                                                                  Hello Zoho team, I have created a workflow to be used on a mobile iOS device which starts in Zoho Creater and ends with a murge and store function that then opens the newly created document within the Zoho Writer app. This process is working great however
                                                                                                                • Uploading a signed template from Sign to Creator

                                                                                                                  Good day, Please help me on how to load a signed document back into Creator after the process has been completed in Sign. Below is the code that I am trying, pdfFile = response.toFile("SignedDocument_4901354000000372029.pdf"); info pdfFile; // Attach
                                                                                                                • Zoho DataPrep and File Pattern configuration

                                                                                                                  I'm using Zoho data prep to ingest data from One Drive into Zoho Analytics... The pipeline is super simple but I can't any way to get all the files that I need. Basically I need to bring all the files with a certain pattern and for that I'm using a regex
                                                                                                                • Assistance needed: Activation of a domain

                                                                                                                  Hello Zoho Support, I purchased the .com domain "primesolva.com" via Zoho 6 days ago. The domain is still pending, and I cannot access the DNS panel to add the TXT verification for domain ownership. Please confirm the registration status and help me activate
                                                                                                                • Operation not permitted

                                                                                                                  I am trying to add an email address to the list of user but I am getting error Operation not permitted
                                                                                                                • Request to Permanently Delete Email User (info@mehbobgulf.com ) from Old Organization

                                                                                                                  Please permanently delete the user email info@mehbobgulf.com It is still associated with my old Zoho organization. I cannot delete it because it shows ‘You cannot delete email. Zoho host’. I need to use this email in a new Zoho account.”
                                                                                                                • Client host [89.36.170.5] blocked using Spamhaus

                                                                                                                  Hello please make make actions for delist ..... "Client host [89.36.170.5] blocked using Spamhaus"
                                                                                                                • Suggestion: Option to Re-run a migration

                                                                                                                  As I'm going through a migration process, I like the IMAP migration tool, but it would be better if there were an option to re-run the same migration as configured. There's not even an option to copy/edit one that's already there. Just run if it hasn't
                                                                                                                • Issue with "Add Your Mobile Number"

                                                                                                                  Hello, I am trying to sign up for email service for a domain name, and I cannot finish the authentication. When I enter my mobile number, I receive the message "We’re unable to send OTP to this mobile number. Please contact support-as@zohocorp.com". I
                                                                                                                • zoho mail non vérifié

                                                                                                                  Bonjour, Il y'a un jour que j'ai acheté un domaine et toute les tentatives pour l'associé a mon compte shopify son vaine. j'ai essayé TXT sans suite après, j'ai essayer avec CNAME sans suite. j'aurais besoin de votre assistance pour associé mon mail.
                                                                                                                • Unable to send message;Reason:553 Relaying disallowed. Invalid Domain

                                                                                                                  i have facing the issue "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain" if i verify domain evertthing i did but still face the same error.
                                                                                                                • ZohoMail is so close to being Perfect BUT

                                                                                                                  Why don’t you have HILIGHTING???!! I've been trying to find a substitute for Edison Mail but I want & need hilighting (preferably in more than just yellow)! Is this even on your To Do list? I’m so disappointed. 🙄
                                                                                                                • Override Auto Number field?

                                                                                                                  We are preparing to migrate from Salesforce. In Salesforce, we auto-generate a unique number on our Opportunities (Potentials). If the Opportunity results in a contract, we use that unique number as the Contract number. There are some situations where
                                                                                                                • Using a third party service provider want to move directly with Zoho

                                                                                                                  Hi good day I’m currently using Zoho but I’m using a third party service provider I want to move directly with you guys I’m using Zoho email and invoices and my domain please let me know if it’s possible to move away from the third party provider my email
                                                                                                                • Request for Assistance Regarding Email Sending Issue (554 5.1.8 - Email Outgoing Blocked)

                                                                                                                  Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance with an issue we are currently facing regarding our Zoho Mail account. Our email account, admin@tuyensinhcanuoc.com, is encountering the following error when
                                                                                                                • Zoho Mail API returns empty inbox (0 messages) but webmail shows 37 unread emails

                                                                                                                  Hello, I'm experiencing a discrepancy between Zoho Webmail and the Mail API (EU region). **Setup:** - Account: EU datacenter (mail.zoho.eu) - API: Self Client OAuth2 via api-console.zoho.eu - Scopes: ZohoMail.messages.READ, ZohoMail.messages.UPDATE, ZohoMail.folders.READ,
                                                                                                                • ShipStation and Zoho Inventory

                                                                                                                  Hello, I am looking to sync zoho inventory with shipstation ZOHO INVENTORY           SHIP STATION Sales Order  ==>  create ORDERS INVOICE  <==    Shipments What exactly does BETA mean on the Shipstation connector?  This is required for me to sign-on in the next month. Thanks in advance for your efforts
                                                                                                                • E

                                                                                                                  We are trying to add our Zoho Form embed in our Elementor Page Builder. After adding Zoho Forms widget in elementor page builder it’s displaying in backend page builder but it’s giving 403 error while trying to save, as it’s not reflecting in front end.
                                                                                                                • Connecting Zoho Inventory to ShipStation

                                                                                                                  we are looking for someone to help connect via API shipStation with Zoho inventory. Any ideas? Thanks. Uri
                                                                                                                • custom module import.

                                                                                                                  Is there a way to import data into a custom module? Thanks Rudy
                                                                                                                • HEIC File Type Viewer

                                                                                                                  Hi, It would be nice to be able to click on the images in the All Entries/Reports Tables which are HEIC the same as JPG, PNG, etc. so they open in a viewer from Zoho or the Attachment Service, today HEIC requires you to download each image and open it
                                                                                                                • How to dynamically pass IDs from one API response to a second API call in Zoho DataPrep?

                                                                                                                  Hi Team, I am setting up a global consolidated reporting pipeline in Zoho Analytics (India) using Zoho DataPrep as the ETL engine. I am pulling data from multiple Zoho Books Data Centers (US, Singapore, India) thats why i used the URL Source (OAuth 2.0)
                                                                                                                • Building Toppings #4 - Setting up and using connections in Bigin toppings

                                                                                                                  When building a topping to extend Bigin's functionality and connect it with third-party applications, creating and handling connections is an important step. Connections provide a secure way for your topping to authenticate and communicate with other
                                                                                                                • Need code format to specify default values

                                                                                                                  Can someone please direct me to the code syntax or the proper translation per the instructions circled below. These instructions don't seem correct.
                                                                                                                • AI Interview Insights: Turn Recorded Interviews into Quick Transcripts & Summaries

                                                                                                                  Evaluating interviews shouldn’t require replaying long recordings or taking manual notes. With AI Interview Insights, you can now review complete transcripts and AI-generated summaries of your One-way (Recorded) interviews right inside Zoho Recruit. This
                                                                                                                • Record payment: Payment Mode vs. Deposit To and how to "connect" them!?

                                                                                                                  How do we set up that when we choose:  "Payment Mode"= Cash, then "Deposit to" is automatically set to Petty Cash, and if we choose  "Payment Mode"= Check, then "Deposit to" is automatically set to Undeposited Checks, and if we choose  "Payment Mode"=
                                                                                                                • Grouping Undeposited Funds to Move to other accounts

                                                                                                                  In the bank option it would be nice to check what transactions in undeposited funds I want to move to other accounts. Then while checking this it can accumulate totals and created whats essentially a deposit slip. Once the transaction is moved it should
                                                                                                                • Depositing funds to account

                                                                                                                  Hello, I have been using Quickbooks for many years but am considering moving to Zoho Books so I am currently running through various workflows and am working on the Invoicing aspect. In QB, the process is to create an invoice, receive payment and then
                                                                                                                • Facing email delivery issues? Verify your domain's DNS records

                                                                                                                  Have you ever wondered why your legitimate emails are landing in the recipient’s spam folder? Or been surprised to see emails sent from your registered domain getting rejected by recipient email servers? Why does this happen? In most cases, this happens
                                                                                                                • Order of Departments in Help Desk

                                                                                                                  In the end user portal, , the departments are sorted by the date of creation of the department (or perhaps their id). Is there a way to choose the display order of the departments or at least to be able to sort them alphabetically?
                                                                                                                • Next Page