Kaizen #152 - Client Script Support for the new Canvas Record Forms

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 achieved using Client Scripts support for Canvas Record Forms.

Welcome back to another interesting Kaizen post!  In this post, we can discuss Client Script Support for the new Canvas Record Form. 

In this kaizen post,

1. What is a Canvas Record Form? 
2. Client Script Events for the Canvas record forms
3. Supported ZDKs
4. Use Case 
5. Solution
6. Summary
7. Related Links

1. What is a Canvas Record Form?

Canvas Support for Create, Edit, and Clone Pages is referred to as Canvas Record Forms. With the advent of Canvas Record Forms, you can customize fields and sections of your form and ensure that every interaction with your CRM is efficient. It shifts the paradigm from simple data management to creating a more engaging, intuitive CRM experience. Click here for more details about Canvas Record Forms. Client Script support for these Canvas Record Forms unlocks new customizations like scrolling to a particular section automatically when a product category is selected, display a custom message when an icon or image is clicked, show a flyout or a pop up when a button is clicked in Create/Edit and Clone Pages.

2. Client Script Events available for the record forms

  • Mandatory Fields Form 
  • Canvas button
  • Icon 
  • Text
  • Page
  • Field
Click here for more details on Client Script Events.

3. Supported ZDKs

In addition to the ZDKs available for the Create/Edit/Clone (Standard) Pages, the following list of additional methods can also be used in Create/Clone and Edit(Canvas) Pages .
  • scrollTo() - Make the page scroll to a particular element.
  • highlight() - Highlight an element.
  • setVisibility() - Hide or show an element.
  • addToolTip() - Add tool tip to an element.
  • removeToolTip() - Remove tool tip for an element.
  • addStyle() - Add styles to an element.
  • freeze() - Freeze a particular element.
  • setReadOnly() - Make an element read-only
  • setContent() - Add content to the text element.
  • setImage() - Add an image.
  • setActive() - Make an element active.
For more details about these ZDKs, click here.

4. Use Case

Consider Zylker, a manufacturing organization. Their service agents use the Orders module of their CRM to create and manage orders for their customers. They have used the latest Canvas Record Form view for their Create Page as shown below.



Below are their requirements.

A. When the checkbox "Is shipping address same as billing address?" is checked, the Shipping Address section should not be visible.
B. When the user clicks the "Add Dental Products" button, a pop-up should appear showing the Dental Instruments available in the Products module, and the instrument details selected in this pop-up should get inserted as rows in the sub-form.

5. Solution

To accomplish the above requirements on the Create Page(Canvas),  you need to create the following two Client Scripts.

A. Client Script with field event on field "Is shipping address same as billing address?"

  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.

  • Enter the following script and click Save.
  1. let elem = ZDK.UI.getElementByID('shipping_address');
  2. if (value==true)
  3. {
  4. elem.setVisibility(false);
  5. }

  7. else 
  8. {
  9. elem.setVisibility(true);
  10. }

  • In the above script, "value" will hold the boolean value which hold the user selection of the check box "is-shipping_same_billing". If it is true, then using setVisibility() you can hide the shipping address section. To fetch the ID of the Shipping Address section, you can use ZDK.UI.getElementByID().
  • Here is how the Client Script works.



  • When the user marks "Is shipping address same as billing address" true, you can see that the "Shipping Address" section disappears. 
B. Client Script with button event on canvas button "Add Dental Products"

  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.




Enter the following script and click Save.

  1. let products_list = ZDK.Page.getField('Product_List').getValue();
  2. log(products_list);
  3. if (products_list.length === 1) { // Clear subform if empty row
  4.     !Object.values(products_list[0]).every(value => !!value) && products_list.pop();
  5. }
  6. // Open widget with product category & max. allowed rows based on existing subform data
  7. let selected_products = ZDK.Client.openPopup({
  8.     api_name: 'Choose_Products', type: 'widget', header: 'Choose Products', animation_type: 1, height: '570px', width: '1359px', left: '280px'
  9. }, {
  10.     product_category: "Dental Instruments", max_rows: 25 - products_list.length
  11. });

  13. log("products selected from widget: ", selected_products);

  15. // Update Selected Products from the widget Popup 
  16. if (selected_products.length) {
  17.     
  18.     selected_products.forEach(product => {
  19.         products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
  20.     });
  21.     console.log(products_list);
  22.    ZDK.Page.getField('Product_List').setValue(products_list);
  23. }

  • Whenever the button "Add Dental Products" is clicked, you can open a widget as a pop up using ZDK.Client.openPopup(). The details of user selection in the widget will be fetched in the "selected products" variable. You can iterate and create a list to be populated to the Dental Instruments Section. Then this list of values can be populated with the help of setValue().
  • Here is how the Client Script works.



  • When the user clicks the "Add Dental Products" button, a widget of button type that shows the list of Instruments appears. This gets displayed by the Canvas Button event of Create Page (Canvas) and the selected records get inserted in the Dental Instruments subform.
  • Here, using Client Script, you can instantly add all selected products with a single click, eliminating the need to repeatedly click the "+ Add row" button for each product.

6. Summary

In this post, we have discussed,
  • How to hide a section dynamically using Client Script.
  • How to open a Widget , fetch the content and populate it to a Canvas page.

7. Related Links




Previous Post: Kaizen #151 - Leveraging ZDK CLI with VCS   |     Kaizen Collection: Home


    • Sticky Posts

    • 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

    • 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 achieved

    • Kaizen #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 the

    • Recent Topics

    • Insert Cookie Policy in Zoho Sites

      Hello, i need to insert a banner on my site because i'm in Italy so i have to respect EU laws for Cookie Policy and Privacy Policy. I see that i need to insert a code in <head> section of my site to show a banner/popup with cookie info. How i can do this? Thank you Luca

    • Marketing Tip #1: Optimize item titles for SEO

      Your item title is the first thing both Google and shoppers notice. Instead of a generic “Leather Bag,” go for something detailed like “Handcrafted Leather Laptop Bag – Durable & Stylish.” This helps your items rank better in search results and instantly

    • Customer Parent Account or Sub-Customer Account

      Some of clients as they have 50 to 300 branches, they required separate account statement with outlet name and number; which means we have to open new account for each branch individually. However, the main issue is that, when they make a payment, they

    • Forced Logouts - Daily and More Frequent

      In the last month or so, I've been getting "power logged out" of all of my Zoho apps at least daily, sometimes more frequently. This happens in the same browser session on the same computer, and I need to re-login to each app separately after this happens.

    • ENTER key triggering Submit

      Is it possible to stopped the ENTER key from the mandatory triggering of the Submit button on Creator form? I want forms submitted "ONLY" when the Submit button is pressed. 

    • Is it possible to assign Client user to external task ON PROJECTS' TEMPLATES?

      Is it possible to assign Client user to external task ON TEMPLATES PROJECTS?

    • Cliq does not sync messages after Sleep on Mac

      I'm using the mac app of Cliq. When I open my mac after it was in sleep mode, Cliq does not sync the messages that I received. I always have to reload using cmd + R, which is not what I want when using a chat application.

    • Link to images

      I have added images in pages. I would like to link those images with linked in URL so that they open in new window. There is an option of image -> link but I am not able to use the same to open URL in new window. Please check the attached image. Can you

    • Canvas View - Print

      What is the best way to accomplish a print to PDF of the canvas view?

    • Respond faster and smarter with Zia in your IM Inbox

      You’re in the middle of a busy chat queue. New messages keep popping up. One customer sounds upset. Another is asking a long list of questions. You need context. You need speed. You need help. That’s exactly when Zia Insghts jumps into action. It shows

    • Meeting impossible to use when sharing screen

      he Meeting tool in Brazil is practically unusable when sharing anything, whether it’s a presentation or simple navigation. When accessed via Cliq, the situation gets even worse: even basic calls fail to work properly, constantly freezing. And as you are

    • WARNING : Smart list automatically unsubscribes your contacts.

      I created a smart list of my team members based on the criterion that their email domain was @_____. The list refreshed as expected — but it ended up unsubscribing almost all members of my team. I contacted support, but it took two months to get a reply,

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ (10/31)

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの中野です。 10月開催のZoho ワークアウトについてお知らせします。 今回はZoomにて、オンライン開催します。 参加登録はこちら（無料）：https://us02web.zoom.us/meeting/register/BGYTysOnSqa9LA9eY2IKww ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした

    • Subforms in Stateless Forms

      Stateless Forms are very useful, but we can't build complex data entry pages without Subforms. Can this be implemented? This would make Stateless Forms truly powerful.

    • Custom Function not getting package details when triggered from Workflow Rules.

      I have a custom function for Packages that submits a form in our Creator app that we use to generate custom shipping labels (internal staff complete deliveries so we cannot generate shipping labels straight from Inventory). When the function is executed

    • Billing Preferences per Account

      Hello, We are trying to setup Billing Preferences in Zoho Desk to set up a different pricing per account. We charge different pricing per hour per customer/account. Account A = 100 per hour Account B = 125 per hour In the Billing Preferences in Time Entry

    • Time entry preview for custom time entry templates.

      Our company needed time entries in a specific format to document our client interactions. Since we are using a custom time entry layout, we have lost the "preview" on the time entry tab. Using the default time entry layout, you get a small preview of

    • Able to change project on timelog entries

      Ability to move the timesheet entry from one project to another. When a user adds a wrong entry a manager can change/update the timesheet entry to the correct project.

    • Knowledge base: The nitty-gritty of SEO tags

      A well-optimized knowledge base with great SEO can benefit your company by allowing customers to find help articles and support resources using search engines. This enables customers to quickly and efficiently find the information they need without direct

    • Full Text Customization & Translation in SalesIQ Chat Widget Settings

      Dear Zoho SalesIQ Team, Greetings, We would like to request an important enhancement to the chat widget customization options in Zoho SalesIQ. Current Limitation: At the moment, only some of the text shown in the chat widget is editable or translatable

    • Introducing swipe actions in the Zoho CRM Android app

      Hello everyone, How much time do you spend each day on your list view? Probably quite a lot. Since it's such an important part of your work, wouldn't it be easier if you could take action directly from your list view instead of opening each record one

    • Content Security Policy

      Is there a place in ZOHO CRM to add a Content Security Policy to allow for a call to a google.com map, from inside our current app? Or, how do I resolve the issue below?? jquery.js:1 Refused to load the script 'https://maps.google.com/maps/api/js?v=3.41&libraries=places&sensor=true&key=AIzaSyAyQzKeKSbLci4LwZhn9oXvtCkbUo1Ae4g&callback=map_loader'

    • Option to select location?

      As a business coach, I meet with clients at various public locations. I have two or three pre-determined locations that I meet at. I would like the client to choose the location when booking an appointment. Is there a way to do that with a single service, or is the best way to accomplish this by creating one service for each location offered?

    • Unified WhatsApp Number Management in Zoho Desk and SalesIQ

      Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbers

    • Provide a standard structure to your content using article templates

      Hello everyone, When multiple writers work on different documents, maintaining a standard structure can be challenging as each of the writer follows a different writing style. However, when the structure, tone, and format of every document is different,

    • Accessibility Spotlight Series - 1

      Every user interacts with products differently, what feels intuitive to one may be challenging for another. Addressing this, accessibility is built into Zoho Project's design philosophy. This helps users navigate and perform actions with ease irrespective

    • Projects Tasks Not Showing Dependencies

      I'm clicking on tasks and the popup to add dependencies isn't showing. I can't disconnect the nodes either. For some reason when I slide a task backwards it says it cannot go before a predecessor, even though there is not predecessor. Double clicking

    • Deprecation of C4 endpoint URLs

      Note: This post is only for users who are still using the C4 endpoints. Hello everyone, At Zoho Creator, we're committed to continuously enhancing the security, performance, and capabilities of our platform. As part of this ongoing effort, we'll be deprecating

    • Introducing AWS authentication for connections in Deluge

      Hello everyone, We're incredibly excited to announce the all-new AWS authentication for connections in Deluge! This highly anticipated feature simplifies connecting to Amazon Web Services, opening up a world of possibilities and allowing you to seamlessly

    • Timeline Tracking Support for records updates via module import and bulk write api

      Note: This update is currently available in Early Access and will soon be rolled out across all data centers (DCs) and for all editions of Zoho CRM. The update will be available to all users within your organization, regardless of their profiles or roles.

    • Customize User Invites with Invitation Templates

      Invitation Templates help streamline the invitation process by allowing users to create customized email formats instead of sending a one-size-fits-all email. Different invitation templates can be created for portal users and client users to align with

    • ListObjects is recognized by VBA

      Sub addNewRow() Dim ws As Worksheet ' Set your worksheet name Set ws = ThisWorkbook.Sheets("Invoice") ' Set your table name (change "Table1" to your actual table name) ws.ListObjects("InvItems").ListRows.Add End Sub I am getting Unknown function: Li

    • KPI Widget dashboard select periods

      I have a problem with selecting periods as a user filter. In the beste scenario I would like to have to have a period filter like Google Analytics has of Datastudio (see attachment). In the KPI widget I "Group by "inquiry_date" on week&Year". It selects

    • Need a way to secure Prefill URLs in Zoho Forms (hide or encrypt prefilled values)

      Hi everyone, I often use Zoho Forms with prefilled URLs to simplify the user experience — for example: https://forms.zohopublic.com/.../form?Name=David&Amount=300 However, the problem is that all prefilled values are visible and editable in the link.

    • Can’t send emails from Zoho CRM after adding a new user — verification codes not received

      Hi everyone, We recently added a new user to our Zoho CRM account and purchased an additional license. Since then, we haven’t been able to send any emails from Zoho CRM. Our Zoho Mail accounts are working perfectly, we can send and receive emails directly

    • CRM for email in Outlook: how to ignore addresses?

      We’re using the "Zoho CRM for email" add-in for Outlook. When opening an email, the add-in displays all email addresses from the message and allows me to add them to the CRM or shows if they’re already contacts. However, sometimes people listed in To

    • Scheduling Calls in CommandCenter / Blueprints

      I would love it if you could add a function to schedule a call in the lead's record for a future date. I know you can add a Task by going to Instant Actions > Task and completing the form: These tasks go into the lead's record under Open Actions. But

    • Quickly send emails and sync conversations with custom email addresses in CRM

      Editions: All editions DCs: All DCs Release plan: This enhancement has been released for customers in all DCs except IN and US. We will be enabling it for IN and US DC customers soon. [Update on 22 May 2024] This enhancement has been released for all

    • Zoho製品と生成AIツールの活用について

      いつもありがとうございます。 弊社では、Zoho Oneを契約し、CRMを軸として、見込み客の管理から商談、その後の受注や請求の管理、サポート業務（Desk）、業務データのレポーティング（Analytics）などを行っております。 Zohoサービス自体には、Ziaというツールが搭載されているかと存じますが、それ以外の外部の生成AIツールと連携した活用などもできるのでしょうか？具体的には、CopilotなどがZohoに登録されているデータや情報を見て、対話型で必要なデータを提示してくれたり、商談や蓄積されたメモなどを分析してユーザが知見を得られるような活用ができないか、と考えております。

    • Work with Contacts who use multiple Emails / Manage obsolete Email addresses without loosing Emails in Context

      Hello List Work with Contacts who use multiple Emails Only after 1 week in using Zoho CRM productively we have contacts which randomly use 2 different email addresses. From the concept I've understood that Zoho CRM offers two email fields which are recognized

    • Next Page