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
Kaizen #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 achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over theKaizen #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.
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
Preview an upload PDF or File
I have a form where the customer has to upload a file (normally PDF - never jpeg) When in report view I want to be able to preview the uploaded file without having to download it. If I click on the upload it downloads to my computer, I want to be ableHow to filter emails by Reply-to field?
I receive a very particular newsletter from an association A registered on a website W (that is used by many associations), and the emails fields are not great: the From just contains the generic website's W's email, while A is only mentioned in the Reply-toHow to sync from Zoho Projects into an existing Sprint in Zoho Sprints?
Hi I have managed to integrate Zoho Projects with Zoho Sprints and I can see that the integration works as a project was created in Zoho Sprints. But, what I would like to do is to sync into an existing Zoho Sprints project. Is there a way to make thatHow to invite friends on other social media platforms to one of my group chats in arattai?
Hello, I have formed chat groups in arattai. I want to invite my friends on other social media platforms like WhatsApp/ FB to one of my groups. Different friends would be invited to different groups. How to share an invite link of one of my groups toLine spacing
I coudn't decrease the line spacing to space smaller then a single line. There is too much space between the lines that make the document look ugly. Please fix that. Liran. fonarCliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsGoogle Fonts Integration in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google FontsControl Position of “X” (Close) Button in Popup Editor
Hello Zoho PageSense Team, We hope you're doing well. We would like to request a customization improvement in the PageSense popup editor. Current Limitation: Currently, the position of the “X” (close) button is fixed and cannot be customized in the popupAdd Standalone “Save” Button in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We would like to request an important usability improvement in the Pagesense popup editor. Current Limitation: There is currently no dedicated Save button while building a popup. The only way to saveText Direction Control in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to add text direction control in the Pagesense popup editor. Current Limitation: Currently, the popup editor does not provide native support for RTL (Right-to-Left)Autosave in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance the Pagesense editor with an autosave functionality. Current Limitation: Currently, changes made in the Pagesense editor must be manually saved. InBilling frequency is not displayed correctly.
Hello There is an issue while displaying the billing frequency on a subscription quote. I am able to activate the subscription details and get this lovely overview: If I am adding a Plan which I charge quarterly, first of all it should be possible toCreating Secret via Vault API
Hi I am trying to create a secret through vault api. This is the response I get. One thing I am not sure is how to decrypt the secretdata, how to get the secrettypeid? { "operation": { "result": { "error_code": "", "message": "Sorry, we are unable to process your request.",Zoho CRM custom fields not showing in zoho creator
Hi Team, I have created a Products form with Zoho CRM integration and connected it to Products module of CRM. But when I see the reports of Products in Zoho creator then I am not able to see custom fields of Products module. Only standard fields of ProductsAuto-sync field of lookup value
This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.Contact's title in "Contact Role Mapping"
When I'm creating a deal, I'd like to see the contacts title in the listing. Right now, I only see this: How can I get the contact's title in there?Is It Possible to Hide Menu Option from Main Navigation?
Is it possible to hide a menu option, e.g. Admin, from the Main Navigation based on some criteria, e.g. login = zoho.adminuserUnleash the power of detail, with Table View.
What use is context that's not available where you need it? With this in mind, we bring you the Table View. This feature will add more power to the way you organize and work through your ticket load. Table View comes in handy when you want more control over the ticket information you see. This is a nifty tool for users who find themselves limited in terms of the level of information that is being offered in the Classic View and Compact View. With an upper limit of 15 columns, agents can glean mostKaizen #126 - Circuits in Zoho CRM - Part 1
Hello everyone! Welcome back to another week of Kaizen! Today, we will discuss an exciting topic—Circuits in Zoho CRM. For starters, we will discuss what Circuits are, how beneficial they are for businesses, different views of a Circuit, and the differentDynamic Signature - Record owner
Hi everyone, I’m using Zoho Writer merge templates from Zoho CRM and have two questions: Owner signature: How can I automatically insert the CRM record owner’s signature in the merged document? I’m not sure where this signature is stored or how to referenceIn arattai received message can't be deleted
The issue has been noticed in following: arattai app (Android) arattai app (Window) arattai web While the message posted by me may be deleted, the ones received from others can't be. The item <Delete> change to <Report> when the message is a received'Statement of Accounts does not exist' error received, when creating PO using api in Zoho Inventory
Here is request json -- JSONString = { "date": "2019-09-24", "purchaseorder_number": "PO-6-1", "delivery_date": null, "delivery_org_address_id": 36221200000056XXX, "vendor_id": 362212000000564XXX, "attention": "Testing", "line_items": [{ "unit": "Pieces", "account_id": 36221200000003XXX, "quantity": 1, "item_id": 362212000000049XXX, "tax_type": "", "tax_name": "", "name": "One HD", "purchase_rate": 85, "tax_percentage": 0, "item_total": 85.00, "tax_id": "", "warehouse_id": 362212000000564XXX }] }Multiple clients in one project
Hi team, What is the possibility to have more than one client to be linked for one project in the Zoho Books? Our business model is to have a project, and this project have expenses/bills, as well, we issue invoices for this same project to several customers.Option to Customize Career Site URL Without “/jobs/Careers”
Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving toPreserve Ticket Issue Mapping When Migrating from Jira to Zoho Projects
Hello Zoho Projects Team, We hope you are doing well. We are currently exploring a full migration from Jira to Zoho Projects, and we identified a critical limitation during the migration process involving Zoho Desk integration. Current Situation: We useEmpowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM
Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individualsIntroducing Configure, Price, Quote (CPQ) in Zoho CRM | Public early access 2023
Greetings Customers! We're excited to announce that the CPQ feature will soon be available in Zoho CRM and accessible to all accounts using the Professional, Enterprise, and Ultimate editions. We've opened this feature to select customers, and it'll beSupport Bots and Automations in External Channels
Hello Zoho Cliq Team, How are you? We actively use Zoho Cliq for collaboration, including with our external developers. For this purpose, external channels are a key tool since they work seamlessly within the same interface as all of our other channelsWorkdrive on Android - Gallery Photo Backups
Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. EmmaHow many clients can be added to Zoho Practice?
How many clients can be added to Zoho Practice without having their zoho app?Need more details on API Usage Dashboard
Hi Team, We have implemented Zoho Expense for a client and has done some integrations with well known third party ERP via api. Recently we have noticed a huge spike in the API consumption. But we couldn't get the root cause for the same. I accept thereZoho Sheet for Desktop
Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?Global Search placement in the new UI
Having a hard time with the global search placement in the UI redesign. Surely I can't be the only one. Previously global search placement was perfect. A bar at the top/center of the page. Exactly where you would expect it to be. Since the new UI hasEdit item custom fields
Getting this error : Transactions have been created with the custom field. Hence it cannot be deleted. Not trying to delete it, just trying to change which modules to show in or to not show at all in transactions !Rendering PDF to view on page
My company upload lots of PDF files onto Zoho. But every time we open it, it downloads the file instead of viewing it on the web page. Does Zoho allow uploaded PDF files to be rendered to view on web page yet? I've been trying to use <embed> or <object> but it cannot be loaded. (similar thread: https://help.zoho.com/portal/community/topic/how-to-open-a-pdf-file-of-a-view-in-preview-mode)Dynamically Fetching Lookup Field Display Value
I have an audit trail form, Audit_Changes, that tracks old vs new values across different forms. For lookup fields, the old/new value is the ID, but I also need the display value. What's a best practice for dynamically fetching the display value of theCreate folder is fetch fails
coming from zapier... zapier has a google drive task that searches for a specific folder in google drive, and if it fails to find the folder it will create a folder based on the search criteria, and contine along the singluar path of the flow. TryingWorkflow workdrive rollout
Hi! When will workflow be rolled out to all users? Thanks.Workdrive and ChatGPT Team Synced Connectors
Hi, we want to be able to integrate Zoho Workdrive with OpenAI’s ChatGPT Team plan. Google Drive and OneDrive both offer this, zoho please catch up asap. We dont want to have to put our company files in google drive, we want to allow chatgpt Team editionInvokeURL butchering JSON for OpenAI API calls
My organization works with mostly educational institutions. We have a custom module called "Schools", which is the user-entered school name they put when using our service (which they enter along with their state and zip code). We want to map this toNext Page