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.
- Client Script for Create Page (Wizard)
- 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
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Cameron McEvenue
Ishwarya SG
Ernesto Pena
Jeganprabhu S
Sticky Posts
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! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
New to Zoho TeamInbox?
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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Lookup fields can't be used for anything important
Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?How do you map a user picklist field to another user picklist field.
In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn'tIs it possible to add HTML or a button on email templates in Zoho Desk?
Hello team, I am working on getting the best use out of Zoho Desk. I have noticed that when you hit 'reply' on a ticket, it comes with a small 'survey' to the recipient saying something like 'how would you rate your experience with us?'... so my question,Is it possible to add buttons on email replies to internal team members?
Hello everyone, I am currently trying to set up some workflow rules to trigger when a ticket is created. I have noticed there is a button that can be added to email templates when sending email alerts from workflow rules, for example ${Cases.SUPPORT_PORTAL_BUTTON}.Widget function call not working – need help
Hi everyone, I'm building a widget for Zoho CRM and trying to call a Deluge function from it using ZOHO.CRM.FUNCTIONS.execute, but it's not working. Here’s what I did: I created a Standalone function in Deluge. I'm calling it inside ZOHO.embeddedApp.on("PageLoad",Announcing New Features in Trident for macOS (v.1.19.0)
Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication. Let's take a quick look at them. View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data StorageIntroducing the Zoho CRM Lead Magnet plugin for Wordpress
In this digital era, websites are the most important source of leads. That means your CRM system should be well integrated with your website to contextually capture each and every visitor to turn them into a lead. Introducing the Zoho CRM Lead Magnet plugin for WordPress. The plugin lets you to: Create webforms using Zoho CRM forms/ Contact form 7 plugin Embed them in your website hosted using Wordpress Automatically capture leads into Zoho CRM with zero attenuation. Not only is the integrationItem bulk update
Why is there no "pruchase rate" to select in the field selection ? We have far more purchase increases than we have selling price amendments !Learning how to customize templates via code and best practices
Hi! Our developers team want to learn how to edit our template files safely. The last time we messed with these files our site went down for a day and we had to reconfigure it from scratch. What are the best practices to do this? How can we get a templateCan't lock timezone in new Zoho Bookings
Hi, since the new Zoho Bookings has been changed, I cannot seem to lock the timezone in for the meetings. I have set the working hours and location, but when I got on the link, it automatically gives me slots in my timezone. I want to lock it for an in-personHow to import subform data - SOLUTION
To all trying to import subform data, I might have a solution for you. First of all, for this solution to work, the subform data needs to be an independent form (not ad hoc created on the main form). Furthermore, this approach uses Excel sheets - it might not work using CSV/TSV. If this is true, then follow these steps: Import the subform records Then export these records once more including their ID Now prepare an import file for the main form that needs to contain the subform records Within thisCan we customize the default client-facing icons?
Is there any way to customize the client-facing icons that display in the Zoho Bookings UI? For example, I'm using the Default page theme and would like to modify the default icon that is shown beside "Service." The icon currently being shown looks like a baseball hat to me (see attached screenshot) which has no relevance to my business or clients. It would be great if Zoho could provide a different, more generic icon (perhaps a bell icon to represent service?) or better yet allow the icons toreCAPTCHA
Is the Bookings form protected by reCAPTCHA, or some mechanism to ensure submission of the appointment request form is made by a human vs. bot?Zoho Books | Product updates | May 2025
Hello users, We’ve rolled out new features and enhancements to elevate your accounting experience. From configuring approval at the module level to allocating landed costs to multiple bills, these updates are designed to help you stay on top of your financesZoho Notebook suddenly running very slow on long notes
I have been a longtime user of Zoho Notebook. Historically, it has run quite well, but I've noticed over the last few days that it has begun to run unbearably slow when typing in large notes, to the point where I can type four words and have to wait forMultiple team members to access one office PC
Hello, We have a high-performance PC in our office that we use for resource-intensive tasks. All team members need to remotely access this PC from time to time. However, when I enable remote access for myself through Zoho Assist, the PC does not appearZoho Bookings API, timezone is not recognized when passed
Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recentCan I view a gallery of attachments related to an Account, Contact, or Subscription
It is often useful to review photos related to an account or contact by service type. It would be nice to be able to see the photos collected through workorders or appointments all associated.View Kanban tasks in "Status" layout for all projects
Hi I'm testing Zoho Projects Express to see if it is suitable for my business. So far it looks great and seems to do everything we want (except critical path on the Gantt charts), but one thing I can't seem to figure out is this: If I go into a project, and choose "Kanban", I can select the "Status" layout which is great. I can see the status of all of the tasks in that project, and who is working on what. However, if I go to: Home > My Tasks > Kanban, then the "Status" layout isn't an option - onlyUnsubscribe Page
Where in Zoho Campaigns can I go to customize the design and copy on the unsubscribe page and follow-up "thank you" page? I am not seeing it under Settings.Ability to modify what displays in calendar invite?
I am a long time calendly user and want to make the switch to bookings. I understand that there is not currently a meets/hangouts integration, is one on the roadmap? Is there anyway I can modify the calendar invite to include the meet link? I can add it to the emails no problem, but I would also like it to display on their calendar. Is there some work around I can do to get it on the calendar? Also am I able to modify the calendar event title?Bookings page very slow to load
I recently switched to Zoho bookings from calendly and yesterday I switched back. Zoho Bookings page was taking 7-23 seconds to load. We were losing paid clicks from Google because they had to wait too long. Does anyone have any suggestions?Zoho Bookings: How to set a limit for maximum bookings per day?
Let's say I have 1 hour slots OPEN for an entire day. What if I want all of the OPEN slots to turn OFF if/when I hit a certain number of total bookings for that day? I usually only want a total of 5 appointments to be booked but I'm not sure of the exactZoho Booking API to update service for Assigned Agent
Hi there, I have been testing and looking at the Zoho booking API for the Assigned Agent update from Zoho CRM for a long time. There is only a Fetch service request, but no updated Assigned Agent options. Does anyone know how to do that? PS: I can useZoho Accounts and Book Keeping candidate required
Urgently required data operator who can do following tasks: Purchase Bill Entry Sale Bill Entry Bank Entries Cash Book entries 40-75 entries per daysCancellation waiting list - Zoho Bookings
Is it possible to have a waiting list in case I got a cancellation it can be filled automatically with people on this list?Zoho Bookings Integration with Make.com
Dear Zoho Bookings Support Team, We are writing to request a new integration between Zoho Bookings and Make.com, a leading automation platform widely used by Zoho users. Current Integration: We acknowledge the existing integration with Zapier, anotherDifferent Page Numbering
I want the page numbers not just 1,2,3... but i,ii,iii,iv,... or even I,II,III,IV.... How can I do this?Leads Should Support Business-Centric Structure for B2B Use
We’re a B2B company that generates leads for other businesses and often engage with multiple contacts within the same company. For years, we’ve struggled with Zoho CRM’s limitation of requiring a Last Name field for leads. For example, if we’re pursuingCurrency Data Type Issue
Hi, I'm running into an issue with the currency data type conversion with the pipeline tool inside Zoho Analytics. Basically, when the table is added to the pipeline, the columns with currency data type will be converted to text type. I assume it's becauseZoho AI Translate – No Support for Hebrew?
I want to use Zoho AI Translate, but I see that it does not support Hebrew. Since Zoho supports multiple languages, I was hoping this function would also work with Hebrew. Is there any plan to add Hebrew support in the near future? Or is there an alternativeExclude Segment from Campaign Recipients
I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.Equivalent domains
Need a settings feature for adding/modifying/deleting domains that use the same login service. The feature can also suggest some popular sites that use shared credentials to access domains under their control. For example: amazon.com and its local variations like amazon.in. For example: gmail.com and google.com. LastPass has this feature.Can't verify DKIM key?
So basically I just wanted to verify the email on my domain so it doesn't showup as spam in other people's inboxes. So I did what Zoho told me to do, it was to verify a DKIM key. I created the key with the address, added the correct information to the TXT file in my domain's DNS settings, tried to verify it and it keeps saying 'Verification failed'. I tried it more then once, I reset the DKIM key, and for some reason it just won't verify. Either it's me being impatient or this thing isn't working.Forecast performance analysis
Last modified on 15/05/2023: Performance analysis in forecasts is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of May 10, 2023, it is rolled out for all Zoho CRM accounts. FindAudio/video quality issues with Zoho Meeting – Any roadmap for improvement?
Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially withClone a Module??
I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of VendorsDeleting Records Older Than 14 Days
I have a form called vacancies that contains a field "status_date". I need to create a schedule that runs once a week and if the status date is > 14 days it deletes that record. I would appreciate anyones help. -AaronI need open my email in Zoho from oulook account
Hi Can you help me to solved this First, I’m unable to access my email account via Outlook. Second, when I send any email from my Zoho account, it doesn’t reach Gmail inboxes. Thank you for your supportDefault value for Subject field in Case module
I would like to add a default value to the Subject field in a custom module based on the Case module. Since this field is mandatory, I can't use a workflow rule that adds a default subject if the field is left empty. So I would like to display a defaultNext Page