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!


    • Recent Topics

    • Calendar Events Issues

      Not able to view scheduled events on my calendar

    • Extensions 101 webinar series: Build, integrate, and monetize with extensions

      Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

    • Custom Related List Inside Zoho Books

      Hello, We can create the Related list inside the zoho books by the deluge code, I am sharing the reference code Please have a look may be it will help you. //..........Get Org Details organizationID = organization.get("organization_id"); Recordid = cm_g_a_data.get("module_record_id");

    • Where are recordings stored?

      I have hosted a couple of test meeting, used the "record" button to start and stop the recording but I am unable to find where are those recordings saved?  Can anybody help? Thanks

    • Zoho Desk's integration with Microsoft PowerBI delivers advanced analytics insights

      Hello everyone, Gaining advanced insights through reports and dashboards is one of the critical requirements of every business. In addition to key metrics tracked in Zoho Desk, such as agent performance, SLA adherence, and ticket lifecycle, businesses

    • 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

    • IMAP error message in Zoho mail

      I cannot send emails today. Everything fine for years until today. Get a message: "You are yet to enable IMAP for your account. Please contact your administrator". Does anyone know how to correct this?

    • Enhancements to Zoho Map integration tasks

      Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to

    • IMAP stopped working today

      Hello! I've been a paid customer for more than 10 years, IMAP was always working fine. But today this is the error I've got on my iPhone: I've tried toggling the IMAP for my account (Mail -> Settings -> Mail accounts) off and on again, but that did not

    • Duplicating report but custom layout does not

      Dear Zoho Creator, I need to duplicate a report into 10 copies, but unfortunately the custom layout (detail view) doesn’t copy along with it. I tried exporting and importing the custom layout, but the field mappings are incorrect. I believe everyone are

    • Are custom portals accessible on the Zoho learn smartphone app?

      In other words, can users external to my organisation, once signed up, use the app in the same way as internal users? Thanks

    • Zoho Books/Inventory - Update Marketplace Sales Order via API

      Hi everyone, Does anyone know if there is a way to update Sales Orders created from a marketplace intigration (Shopify in this case) via API? I'm trying to cover a scenario where an order is changed on the Shopify end and the changes must be reflected

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Multiple columns in a form

      I am evaluating Zoho Creator. However, I am seeing almost no layout control on a form.  Just a basic 1 or 2 column format that is then imposed on the entire form.  That's not going to work for many, many real world cases. We need multiple columns per line, and we need each line/section to occupy a single column or be able to span the columns.   Someone please tell me that I'm missing something and the capability is actually there.  

    • Global search

      Hi! I think it would be great to have a global search that would give you results from all records of a database, no only for a single field of a single form as we have now. Thanks!

    • Any insights about API/v2? Having problem for a while.

      I don't know why it is throwing a 404 error, my report name is correct. Has someone had this issue and how you fix it?

    • Edit QR code with redirect to form

      Guten morgen, wir haben ein Formular Reklamation_erstellen. Dort soll ein QR Code erstellt werden, der im Lieferschein angezeigt wird. Beim Scannen auf dem soll das jeweilige Formular zum BEARBEITEN geöffnet werden. Leider bekomme ich es nur so hin, dass

    • Getting all the ingredients together for baking an app

      Good day everyone. After reading a lot of the help docs and watching videos, I now started on my app. To prevent hours and hours wasted on going down the wrong track, I would like some clarification on the following. But first some background: I have

    • Help Needed with Configuring ZC Microservice

      I'm attempting to create a simple microservice, but am running into problems with scope and auth. Using Custom API Builder, here's my setup: 1. Method: GET 2. Auth: OAuth2 3. User Scope: All users 4. Response: Standard 5. Function: A function that returns

    • Creator Simplified #10: Predefine Form Field Values and Make Them Read-Only for Users

      Hey Creators, Ready for this week's tip in the Creator Simplified series? Today, we will explore how to have read only fields in a form. Use Case: Assume a scenario where the default value for a Department field needs to be English Literature, but you

    • To Assign a genrated pdf to a file upload field using delug

      content = "<html><body>HTML Content on page One <div style='page-break-after:always'></div> HTML Content on page Two </body></html>"; file = zoho.file.convertToPDF(content); file.setFileName("Name of the file"); <variableName> = <FormLinkName>[ID == input.ID];

    • Zoho Mail : Email Outgoing Blocked

      I suddenly received the following message yesterday. I cannot send any mail. Please resolve as soon as possible, I cannot work without sending email. Dear User, We regret to inform you that your email outgoing has been blocked and you will not be able

    • Creator and Tables

      Good day. I am trying to create my first application. I have imported my data into Tables and am creating my app in Creator. I do not see my tables and cannot see how to write forms data to a table. Even the Workflow just uses the form. In one of the

    • Calendar week view: Today + 6

      Is there anyway to have the calendar change dynamically based on the date? Due to the amount of events, we only display a week at a time, but towards the end of the week, we can no longer see ahead to next week (without changing it manually every time).

    • customer Name and address details

      i created one application there is no customer details in that . how to add customer details and

    • Recalculate every row in the subform

      Hello, Can anyone help me with a script, please? I have an issue. Sometimes it happens, that in a multi row subform one of the rows show an incorrect row total value. Not really understand how it can happen, if I have a 20 row subform, 19 rows show correct

    • Creating Repeat Forms that remove redundancies

      I wanted to understand if you can make multi-layer forms that reduce the need for users to input information in again and again. We want a form that our suppliers fill out per ingredient they sell, and the end result should have the Ingredient (Section

    • What is the difference between the free plan and the mail lite plan?

      What is the difference between the free plan and the mail lite plan? How many emails can I send per day?

    • Unblock email

      Hi The outgoing mail from a client of me is blocked. I already made tickets and tickets are send to the EU desk but nobody is responding. The problem is already 4 days! There is absolutely no help from the support. I am really not satisfied at all! Can

    • Domain verification failure

      Hello Zoho Support, I purchased my domain directly through Zoho Mail, but the domain verification keeps failing with the message “TXT verification failed.” I’ve already waited and retried several times, but it still won’t verify. Could you please manually

    • Unable to send message;Reason:554 5.1.8 Email Outgoing Blocked.

      My email account is unable to send emails, and I urgently need to use it. How can I resolve this?If there is anything we have done wrong, please let us know in advance so we can actively cooperate to improve. User ID: 850482493

    • URGENT: Email stopped workin - can't access admin panel

      For some reason email sending stopped working. When I try to send an email it fails with "Unable to send message;Reason:451 4.7.1 Temporary system error" I can receive email just fine I see in my notifications some errors about the MX records, however

    • Can I associate an invoice to a Project after the fact?

      We have generated an invoice but would like to assoicate it to a Zoho Project after the fact.  Is there any way to accomplish that? Thanks, Scott

    • Emails I send as a cc or bcc NEVER GO THROUGH TO THA RECEIVER !!

      every time i send a cc or bcc copy of an email to anyone when I’m using my zohomail.com email - no one ever gets the cc of bcc copy if the email: why???? And i triple check that the email addresses are correct; then i get back an email message (EVERYTIME)

    • Cannot see correct DNS config for mail after moving domain to another provider

      I have moved my domain from one provider to another and after that zoho mail stopped working (expected). Problem is, zoho mail admin panel still shows (10 hours after move) that all records are correct while I haven't changed anything in my domain DNS

    • Add Support for Authenticator App MFA in Zoho Desk Help Center

      Hello Zoho Desk Team, We hope you are doing well. We would like to request an enhancement related to security for the Zoho Desk Help Center (customer portal). Currently, the Help Center supports MFA for portal users via SAML, JWT, SMS authentication,

    • How to unlink a SAML user from the existing Zoho Desk user (domain change case)

      Hi everyone, I’m trying to understand how to handle a situation where a customer changes their company domain. In our setup, users authenticate via SAML, so when the domain changes, the SAML system treats them as a new user. However, in Zoho Desk, I’d

    • Price Managment

      I have been in discussions with Zoho for some time and not getting what I need. Maybe someone can help explain the logic behind this for me as I fail to understand. When creating an item, you input a sales rate and purchase rate. These rates are just

    • Related to zoho survey

      Hi team. I want to know something regarding zoho survey question builder. I have two questions each of dropdown (One answer) - question type. In the first question, there are 16 answer choices and in the second question, there are 3 answer choices. For

    • 60 Days Into Zoho - Tiktok Branding Startup -7 Questions?!

      Wsp Everybody I co-own a TikTok Branding / Consulting Startup & have been using Zoho for the past 60 days - Am now looking to make our overall operations & processes more Efficient & Effective! Curious to know how others are using the platform & what's

    • Next Page