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 #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

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

    • Recent Topics

    • Tracking Non-Inventory Items

      We have several business locations and currently use zoho inventory to track retail items (sales and purchase orders). We were hoping to use zoho inventory to track our non-inventory items as well (toilet paper, paper towels, etc). I understand that we

    • 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

    • Set Warehouse based on Vendor

      Greetings. I would like to set automaticaly the Warehouse based on the Vendor. Context: I am working on an adaptation of a Purchase Order to be used as a Quotation. I have defined that when a user has to raise a quote the Vendor will be "PROCUREMENT" I would like to set the Warehouse to a predefined value when "PROCUREMENT" is set as Vendor. I have tried to do with the Automation feature using the Field Update option, but Warehouse does not is listed as a field. Can you help? Thanks in advance.

    • How to add interviews through API

      I'm trying to add an interview without much luck. The documentation gives examples of adding just about everything except an interview. However, the issue might be the way I'm formatting it, because the documentation is unclear to me. It seems as if the xml should be passed in the url, which seems unusual. I've tried the data as both plain and character escaped, but nothing seems to work, nor do I even get an error response. https://recruit.zoho.com/recruit/private/xml/Interviews/addRecords?authtoken=***&scope=recruitapi&version=2&xmlData=<Interviews> <row

    • Deprecation of the Zoho OAuth connector

      Hello everyone, At Zoho, we continuously evaluate our integrations to ensure they meet the highest standards of security, reliability, and compliance. As part of these ongoing efforts, we've made the decision to deprecate the Zoho OAuth default connector

    • Auto tagging

      Some of the articles I enter into Notebook get there when I enter them in Raindrop.io and IFTTT copies the articles in Notebook. When this happens the notes are tagged but instead of useful one word tags with topic the tag pertains to the specific article

    • Work Order wont mark as Completed

      I have a couple of work orders that won't mark as completed even when I've marked the Service Appointments as completed fully.

    • 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

    • How do I save audio files to my PC that I record into Zoho Notebook from my phone?

      I was thinking of using Zoho Notebook as a way to store composition ideas, as well as for other things if it can handle this. For this to be useful for me though, I need to be able to have an easy way to download those audio files to my PC, either individually

    • Introducing Radio Buttons and Numeric Range Sliders in Zoho CRM

      Release update: Currently out for CN, JP, AU and CA DCs (Free and standard editions). For other DCs, this will be released by mid-March. Hello everyone, We are pleased to share with you that Zoho CRM's Layout Editor now includes two new field formats—

    • How to filter subform report based upon main form report in dashboard

      Hi Team, I am creating a dashboard in Zoho Analytics. I want to have a main form report and below I want to show subform report of main form. If I filter the main form with date then I want to show subform records based upon main form. how can I achieve

    • Search mails in shared mailbox

      Hi everyone, is there a way to search mails in shared mailbox's? Search in streams or mail doesn't return anything from mails in shared mailboxes. Thanks! Rafal

    • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

      Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

    • Kaizen #186 : Client Script Support for Subforms

      Hello everyone! Welcome back to another exciting Kaizen post on Client Script! In this edition, we’re taking a closer look at Client Script Support for Subforms with the help of the following scenario. " Zylker, a manufacturing company, uses the "Orders"

    • Change eMail Template for Event-Invitations

      Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, Juerg

    • Changes to the send mail Deluge task in Zoho CRM

      Hello everyone, At Zoho, we continuously enhance our security measures to ensure a safer experience for all users. As part of our ongoing security enhancements, we're making an important update on using the send mail Deluge task in Zoho CRM. What's changing?

    • Fail to send Email by deluge

      Hi， today I gonna update some email include details in deluge, while this msg pops up and restrict me to save but my rules has run for one year. can you tell me how to use one of our admin account or super admin account to send the email? I tried to update

    • Writing SQL Queries - After Comma Auto Suggesting Column

      When writing SQL Queries, does anyone else get super annoyed that after you type a comma and try to return to a new line it is automatically suggest a new column, so hitting return just inputs this suggested column instead of going to a new line? Anyone

    • Introducing Multiple Sandbox Types and Support for Module's Data Population

      Register here for the upcoming Focus Group webinar on Multiple Sandbox | Help documentation to learn more about the new enhancements Hello everyone,  Sandbox in CRM is a testing environment for users to create and test new configurations like workflow

    • Is It Possible to Convert a Custom Module to a Quote?

      I recently created a custom module in our CRM environment for RFQs so that our sales team can submit quote requests directly in Zoho rather than by email/phone. This allows for a cleaner overall process, minimizing potential errors and potentially encouraging

    • Convert invoice from zoho to xml with all details

      How to convert an Invoice to XML format with all details

    • Importing into the 'file upload' field

      Can you import attachments into the file upload field. I would expect it to work the same way as attachments do, But can't seem to get it to work.

    • Sync your Products Module for better context.

      In customer support, context is everything. The integration between Zoho Desk and Zoho CRM helps your sales and support teams function as one, delivering better customer experiences. With the latest update to this integration, you can now sync the Product module in your Zoho CRM with your Zoho Desk portal. This feature enables products from Zoho CRM to reflect in the "product" field in Zoho Desk. This can save your support team valuable time and effort.    Some things to note when syncing the two:

    • Where is the desktop app for Zoho Projects???

      As a project manager, I need a desktop app for the projects I manage. Yes, there's the web app, which is AWESOME for cross browser and platform compatibility... but I need a real desktop app for Projects that allow me to enter offline information where

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • CRM verify details pop-up

      Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it

    • Does Zoho Writer have Dropdowns

      I want to add a drop down field in Zoho writer. Is this possible?

    • Custom Button to convert a Deal to a Custom Module?

      Hello Community I am in process of building out a custom CRM for my team and part of this is looking at building out a Custom Button or function of some sort where when a Deal is marked Closed Won the system will allow for a "Convert to Job" option to

    • How can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?

      Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems like

    • Transitions do not update fields until the record moves to next stage

      We have a blueprint where a couple of stages have multiple transitions. If only some of the transitions are completed, but not all, Zoho does not update any of the fields impacted by the completed transitions. Is there any way Zoho can udate the fields

    • Blueprint enhancements - Parallel and multiple transitions, and more

      Last modified on Sep 4, 2023: All Zoho CRM users can now access these enhancements. Initially, these features were available only on an early access basis and by request. However, as of August 2, 2023, they have been made available to all users in all

    • Optimum CRM setup for new B2B business

      Can some advise the most common way to setup Zoho CRM to handle sales for a B2B company? Specifically in how to handle inbound/outbound emails. I have spent hours researching online and can't seem to find an accepted approach, or even a tutorial. I have

    • using the Client script on the load of the form if service no is empty means then i want to make issue relate to is Service

      using the Client script on the load of the form if service no is empty means then i want to make issue relate to field is Service if Purchae no is empty means then i want to make issue relate to is Purchase

    • Multiple header in the quote table???

      Hello, Is it possible in Zoho CRM to add multiple headers or sections within the Quote product table, so that when the quote is printed it shows separate sections (for example “Products” and “Services”)? To clarify, I’m asking because: This does not appear

    • using the Client script I want to Hide Show the Fields

      if Related to service means some of the field like service no want to shoe and hide Amc no , purchase no how i achive this let issu = ZDK.Page.getField('Issue_Related_To').getValue(); if (issu == 'Service') { var field_obj = ZDK.Page.getField('Warranty_Cases');

    • openUrl in blueprints

      My customer wants to open a URL at the end of a blueprint transition. Seems this isn't possible right now but it would be very useful. In this thread, https://help.zoho.com/portal/en/community/topic/openurl-not-working the Zoho agent said that it's logically

    • Dropshipping Address - Does Not Show on Invoice Correctly

      When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being

    • Prepayment of a sales order

      How does everyone handle this common (at least it is common for us!) situation? We require all our orders to be fully prepaid before shipment since we manufacture made to order, custom products. Since ZOHO does not allow a sales order to be prepaid, we are forced to create an invoice at the time an order is placed to allow the customer to pay it. Our sales category is therefore skewed, since the sale was actually booked at the time an order was placed, rather then at the time it is shipped, which

    • Access to Specific Zoho Desk layout for external parties

      Hi, We have a partner who handles for us sales requests from specific markets. He is not a Zoho Desk user. But we want him to b part of a specific Zoho Desk layout to handle inquiries.  How to achieve it in the easiest way possible?

    • Deposit on a Sales Order

      Good day, 100% of my business is preorders, no inventory. I am trying to run away from QB for one of my businesses, but I require two options that I don't seem to find with Zoho Books. 1 - If there is a way to apply a deposit on a sales order, as with

    • Next Page