Client Script support for Canvas Forms

Client Script support for Canvas 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


    • Recent Topics

    • Incoming Gmail Email Not Coming Into Zoho

      My outbound email from Zoho is working, but when people respond to the email, it's not coming back into Zoho. I can see it when I'm in Gmail, but it's not in Zoho.

    • Não foi possível enviar a mensagem;Razão:554 5.1.8 Email Outgoing Blocked.

      Preciso de ajuda não consigo enviar emails,conta recen criada

    • Average Costing / Weighted Average Costing

      Hello fellow maadirs. I understand Zoho Books uses FIFO method of dealing with inventory costing, but do you guys have any plans to introduce average costing? We indians need average costing. It's part of our culture. Please. I beg thee. Thanks.

    • Credit note

      By mistake I issued credit note in Jan 2025 for the invoice related to Dec 2024. Now I want to delete this credit note but anable to do so. Need help in this

    • CRM formula field help

      Hello! i was hoping to get some help with a formula i'm creating within a module. I'm looking to make a formula that changes based on a date field but based upon the present date. This is the formula i have so far: If(Now() < ${Instructors.Start Date},

    • Change to copy/paste functionality in Deluge code editor

      Recently there was a change to the Deluge code etidor where it now inserts backslashes into strings automatically when copying/pasting strings with double quotes, it's a nightmare to have to go delete all these. Is it possible to toggle this on or off?

    • BANK FEED - MAYBANK , provider from YODLEE IS NOT WORKING

      As per topic, the provider YODLEE is not working for the BANK FEED. It have been reported since 2023 Q3, and second report on 2023 Q4. now almost end of 2024 Q1, and coming to 2024 Q2. Malaysia Bank Maybank is NOT working. can anyone check on this issue?

    • Canadian payroll

      Hello ZOHO, is any updates on when payroll for Canada will be available?

    • Default reminders on Emails

      I have seen that it is possible to set, for each email, a reminder when the email remains unresponded for some time. This is very useful, so useful that I would like to set it for all my emails, by default. Because an unanswered email usually requires

    • in zoho assist I would like to temporarliy go into view only mode

      During a zoho assist remote support / remote control session, I would like an option to turn off control, and go into view only mode. Then later, turn back on control, all within the same session. (Many other remote login apps have this feature.) For

    • Zoho notes list issue

      Hi team, Suddenly my extension is not working and I could not find the extension in my marketplace list anymore. Extension version deprecated This version of the extension is no longer in use. Please update the extension and try again.

    • Assignment Rule: Immediate Ticket Assignment to Agents Upon Shift Start

      Dear Zoho Desk Team, I hope this message finds you well. Currently, when the option to assign tickets to offline agents is turned off, agents who come online during their shift have to wait for about 30 minutes before any tickets from the queue are assigned

    • Change email template depending on answer from form

      Is it possible to set up the following in Zoho Desk: When a user submits a ticket via the Zoho Help Center's form, they can select an answer from a dropdown field. In this example, the dropdown options are 'Option A' and 'Option B.' If a user selects

    • Kaizen #171: FAQs on COQL API

      Hello all!! Welcome back to another post in the Kaizen series! In this post, we will address some of the most frequently asked questions about Zoho CRM's COQL API from the Zoho CRM Developer Community Forum. COQL API Query API lets you query for records

    • Issue with Date Placeholder Formatting in Ticket ID Customization

      Hello Support Team, I'm experiencing an issue with the date placeholder formatting in Zoho Desk's Ticket ID customization. Specifically, when using the `{{DD}}` placeholder for the day in the prefix or suffix, the output displays the day as a single digit

    • Time Field

      Good Day, I have a question, when I save a draft and reload it. Why does the time field format keeps goes from hh:mm to hh:mm:ss? Is there a way I can force it to load to hh:mm only? I have tried example = totime(input.TimeField, "hh:mm") in the -created

    • Feature Req - See imap emails in Timeline tab of a deal

      In many other CRMs such as pipedrive and hubspot, when you are looking at the timeline of a deal you can also see snippets of emails that have been sent or received and then click to view the full message. This gives users a fast way to catch up on EVERYTHING

    • HOW TO: Searching a thread (email body/text) with a custom function, allowing filtering and specific actions

      We are still trialing out Zoho at this time, but have found a major expected feature to be missing - the ability to search within the text of an email for automation/workflows. NOTE: You need to create a connection for zohodesk under settings -> Developer

    • Partnership Proposal for Supporting Number Porting Services in Singapore

      Dear Zoho Representative’s, I hope this message finds you well. My name is Honelito Gilos, and I represent Borderless Hub Pte Ltd (Singapore). We are a Telco here in Singapore specialising in providing seamless number porting services, and I’m reaching

    • Tip #2: Prefill forms automatically with existing Zoho CRM data

      How to automatically prefill a form with existing Zoho CRM data? Prefilled forms can be useful when you want your prospects to view and confirm their data, and in a wide range of other situations. In Zoho Forms, we prefill the fields with the values from Zoho CRM using the Zoho CRM field. What is a Zoho CRM field? A Zoho CRM field acts as a two-way communication channel, by sending data to Zoho CRM from forms and fetching information from CRM into Forms. The field will look up data from your CRM

    • Transform Your Customer Support with AI-Powered Chatbots in Zoho SalesIQ

      Ever wondered how some companies seem to have superhuman customer support? Let's uncover their secret! In the digital age, customer expectations are skyrocketing. Did you know that according to McKinsey, 75% of consumers expect a response within five

    • Quickbooks conversion and Internet sales

      Hello, we are considering converting from Quickbooks enterprise to Zoho Books and using MonotorZ for our mrp needs. Today we import Internet sales under a single customer with multiple ship to addresses. We want to maintain the detail in CRM for marketing

    • How to add two columns in Zoho forms

      I would like to have two columns in Zoho forms. How can i enable two columns?

    • When creating Sales Order / Estimate via API, the line item Tax Code does not get pulled in.

      I'm creating Sales Orders via API from CRM but it does not pull in the "Tax Code" I've read within the forums that this should be done automatically but it's not happening. Not sure if it's a bug or by design? Anybody else know? Should we be adding the

    • Chart showing schedule

      I want to be able to create a chart for everyday to check and which of which driver is available on the timeframe. Here's my table Name City Day Start Time End Time Driver1 Medicine Hat Monday 11:45 AM 4:45 PM Driver 2 Medicine Hat Tuesday 11:00 AM 7:00

    • Quais são os maiores desafios que você enfrenta ao implementar o Zoho CRM?

      Olá, pessoal da comunidade Zoho Brasil! Sou parceiro autorizado da Zoho e, ao longo do tempo, tenho notado que cada implementação de CRM traz desafios únicos, dependendo do segmento de negócio, das metas da empresa e até da familiaridade da equipe com

    • 2025 Just Got More Exciting for Developers!

      Hello, Greetings to the Zoho Books Community! As we step into the New Year, we're thrilled to roll out something truly special for our Zoho Finance enthusiasts – the "Zoho Finance Developer" Community! This is your exclusive space to connect with fellow

    • Error in executing On user input script

      I'm having problems with this  this script : ; Tipo_list=List(); Tipo_rec = Tabla_factores[Periodo == input.Periodo_anos.toLong()]; Tipo_list.addAll(Tipo_rec.Clase_credito.getall()); for each Clase_credito in Tipo_list { Tipo_credito:ui.add(Clase_credito) } Error in executing On User Input script of Periodo en años. Error. Error in executing Fetch Record task. Unable to fetch Tabla_factores and update variable Tipo_rec. Error in evaluating the criteria : Error. Error evaluating NUMERIC expression

    • sync data from outside of zoho plateform

      hii team , i am creating a platform using zoho platform, i want to sync the data from out side of the platform like people-soft, but i am not able to sync the data , if it is possible , then suggest me how can i do it , i want to sync data from other

    • How to add a Data Updated As Of: dynamically in text?

      I need to add a "Data Updated As Of" in the dashboard to show when was the last date the data was updated. I tried to create a widget but it does not look really good, see below. Is there a way I can do this through the text widget and update it automatically

    • Automate search in customer list and easilly initiate email

      Hello and happy new year ! I have a customer list with name, telephone, emails and some criterias like location, type of customer, etc. I want to search that form to extract part of it, for example all customers that have a location of "Québec city" and

    • "Select All" item in the context menu

      In the Client on Android, there is a “Select all” item in the note’s context menu. There is no such item in the PC client. Can it be added in future versions of the client?

    • Syncing Leave Calendar With Shared Google Calendar Does Not Remove Canceled Leaves

      Our organization has each employee sync their Leaves calendar with a shared Google calendar, but am I right that if an employee cancels a Leave in Zoho that it will not be removed automatically from the shared Google calendar through the same sync m

    • Is it possible to display formulas in cells instead of calculated results?

      I want to export my Zoho sheet as tab separated text without losing the formulas. In excel, I would use the settings Options - Advanced - show formulas in cells instead of their calculated results then save as tab separated values. How do I do this in

    • Creator Simplified #11: Create a custom button to download files

      Hey there! This time, let's see how to create custom buttons to download the files uploaded in the file upload field. Sample use-case A training app has a module that provides the materials for all the available courses. Students can click on the corresponding

    • Batch Tracking Enhancements In Zoho Inventory

      Hello users, We’re excited to announce that we’ve taken batch tracking to a whole new level in Zoho Inventory! We’ve made it more accessible and easier to use than ever. Here’s a quick look at the improvements: 1) A New Way To Create or Modify Batches

    • Zoho Desk Mobile App Year-End Roundup - 2024

      Hello Everyone, Greetings! As you gear up for the festive season, we are excited to share a quick journey into all that is released in 2024! Availability of each feature in iOS and Android released in 2024 are as follows: For more information on the above

    • Task Completion vs Estimated Time

      I need to represent the Estimated Date vs Actual Completion Date for multiple Tasks. How Can I Do this in Zoho Analytics.

    • Upload Field - cannot be checked in rules configuration.

      We wanted to create a process to verify whether the upload fields are empty or not. If empty, then it should deny during submission. We don't want to use the mandatory field setting because in a 10 pager form, some upload field located in page 1 will

    • Chat function not working properly

      Ever since upgrading to plus, the chat is all messed up. it is coming up behind the web page so that I cannot see what I'm typing and cannot read replies. I can only see the bottom of the text box at the bottom of the page, and then it is blocked. I've

    • Next Page