Kaizen #71 - Client Script ZDKs for Detail (Canvas) Page

Hello everyone! 

Welcome back to another interesting Kaizen post. In this post, we can discuss Client Script ZDKs support for Detail (Canvas) Page.

What is Detail (Canvas) Page?

A Detail(Canvas) Page allows you to customize the record detail page to your preference by letting you add background color to each field, arrange them in a different order, use custom buttons instead of field names, use different font styles, and a lot more. This view is available in all the modules, including the custom modules.

Canvas is a powerful design platform that aims to transform your Zoho CRM user experience, from a visual as well as functional perspective. To customize a record detail page using Canvas, you can select any pre-designed template from the gallery and customize them according to your requirements, or create your design template from scratch with the help of design tools. 

The following are the ZDK Functions related to the Detail(Canvas) Page in Client Script.

• getBlueprintTransitionByID() - To get blueprint transition by id
• getBlueprintTransitions()  - To get blueprint transitions in page
• addTag() - To add a tag to the page
• removeTag() - To remove a tag from the page
• getTags()  - To get the list of tags in the Page as array of objects
• openMailer() - To open Mailer component
• scrollTo(element_id) - To scroll the page to the given element's location
• highlight(config) - Using this ZDK you can highlight an element
• getElementByID(element_id) - To get the UIElement object.
• mask() - To mask the field value
• initiate() - To initiate a transition in Blueprint
• click() - To initiate link click event
• disable() - To disable the link
• enable() - To enable a link
• setVisibility() - To show or hide an element
• addToolTip(config) - Use this ZDK to add tooltip for an element
• removeToolTip() - Use this ZDK to remove tooltip for an element
• addStyle(config) - To apply CSS styles for an element
• freeze(value) - To freeze a particular element
• setImage(value) - To set image for the image element
• setActive() - To set active tab in a container
• setContent(value) - To set text content for the text element
  

Note: Apart from these ZDKs, you can use all the other ZDK functions which are not tagged.

Use Case

ABC is a hardware manufacturing company. Let us consider that you want to achieve the following using Client Script. The Detail (Canvas) Page has the fields Category, Products, Phone Number and there are two images added to the Detail (Canvas) page currently. One corresponds to Ignition System and the other corresponds to Gauges and Meters. The following is the Detail (Canvas) Page of Orders Module.

1. Based on the Category of the order, display the image.

• If the Category is Ignition System then the image corresponding to Ignition System should be displayed.
• If the Category is "Gauges and Meters" then the image corresponding to "Gauges and Meters" should be displayed.
  

2. The image should have a tooltip.

• The Ignition System image should have the tooltip as "Ignition System".
• Gauges and Meters image should have the tooltip as "Gauges and Meters".
  

3. The Detail (Canvas) page has a text element. The background colour of the text box should be blue and the text should be grey.

4. Create a custom button in the Detail (Canvas) Page. When the user clicks this, ask for confirmation, and open the mailer box.

5. Mask the last 5 digits of the phone number for all profiles other than the administrator.

Solution using Client Script

All the requirements are for the Detail (Canvas) page of Orders module. For the requirements 1, 2, 3  and 5, you need to create a Client Script with onLoad page Event.

For requirement 4, you need to create a Client Script with Canvas Button Event type and onClick Event. So create two scripts as follows.

1. Client script 1 for requirements 1,2,3 and 5.

2. Client script 2 for requirement 4.

1. Client script 1 for requirements 1,2,3 and 5.

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

// Tooltip for images var ignitionImage = ZDK.UI.getElementByID('iImage') ignitionImage.addToolTip({ text: 'Ignition System' }); var guageImage = ZDK.UI.getElementByID('gImage') guageImage.addToolTip({ text: 'Guages and Meters' }); log(category_name); // Visibility of Images if (category_name == "Gauges and meters") {     ignitionImage.setVisibility(false); } else if (category_name == "Ignition system") {     guageImage.setVisibility(false); } // Style textbox var elem = ZDK.UI.getElementByID('Section') elem.addStyle({ 'background-color': 'blue', color: 'white', 'border-radius': '40px' }) //Mask phone Number var user = ZDK.Apps.CRM.Users.fetchById($Crm.user.id); log(user); var field_obj = ZDK.Page.getField('Phone_Number'); log(field_obj.getValue()); log("Profile name of the user is "+ user.profile.name); if(user.profile.name != 'Administrator') {     field_obj.mask({ character: '*', length: 5, reverse: true }); } var category_name = ZDK.Page.getField('Category').getValue();

• $Crm is a constant supported by Client Script, using which you can get the org related information and use it in your script. 
• Here is the impact of Client Script in Detail (Canvas) page for a Standard user.
  

• Here is the impact of Client Script in Detail (Canvas) page for Administrator.
  

• You can see that the Phone Number is partially masked when you view the order canvas page as a Standard User and not masked when you view the order canvas page as an Administrator.
  

2. Client Script 2 for requirement 4

• First, you need to add the button to the Detail(Canvas) page.
• Go to Setup > Customization > Canvas.
• Right click  the Canvas page for Accounts module and click Edit.
• Click Elements, drag and drop the button wherever required and specify a label for the button.
• Right click on the button, select Add Element ID and enter the ID of the button in the pop up that appears.
• Once the button is created, you can configure Client Script in two ways:
• Right click on the button--> Add Client Script--> onClick. The Client Script IDE appears with the event type as Canvas Button Event.                                                (or)
• 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.

var isProceed = ZDK.Client.showConfirmation('Do you want to open the mailer window?','Proceed','Cancel'); if (isProceed) { ZDK.Client.openMailer({ from: '', to: [{ email: '', label: 'ABC Industries' }], cc: [{ email: '', label: 'ABC Industries' }], subject: 'Greetings from ABC Industries!', body: ' ' }); }

• The showConfirmation() function will return a Boolean value based on the user selection. You should get this Boolean value using a variable and write the actions based on the Boolean value returned. Here the variable isProceed will capture the user response and based on that Boolean value, the mailer box will get displayed.
• 
  
  Here is how the Client Script works.
  

We hope you found this post useful. We will meet you next week with another interesting topic!  If you have any questions or if you want a Kaizen post on a particular topic let us know in the comments.

Click here for more details on Client Script in Zoho CRM.

Related Links

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

Cheers!

• Topic Participants

• Maadhari M

  

• nick

• Athul P

• PJ

• Sunderjan Siddharth

  

• 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

• Zoho Sites "pages" management page

  I have 80 plus pages on zoho sites. When I go to the "pages" link to view and edit pages, They are not in any kind of order, so I spend lots of time searching for pages when I need to edit or create new. How can I change the view order of all my pages

• Introducing the all-new email parser!

  Greetings, We are pleased to introduce to you, a brand-new, upgraded version of the Zoho CRM Email Parser, which is packed with fresh features and has been completely redesigned to meet latest customers needs and their business requirements. On that note,

• Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

  Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful

• Zoho Projects - Refine Access to Collaboration Menu

  Hi Projects Team, I noticed that Calendar, Chat and Meeting menu options in the Collaboration section are visible to client users, even when they don't have access to the features. This could be confusing and frustrating, because if it's there you expect

• Zoho Projects - Add Feed to Project Tabs

  Hi Projects Team, I'm working on a lightweight communications requirement for one of my customers in relation to communicating with their client users via Zoho Projects. I noticed that the Feed is only available in the Collaboration section, but you can

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

• Connecting zoho creator to zoho writer to send prefilled documents

  i will paste the worflow below // Get user's submitted data from the form userSalary = input.Current_Salary; userCIBIL = input.CIBIL_Score; userEmail = input.Email; userName = input.Name; // You need to get the Document ID from the URL of your Zoho Writer

• Extracting Images from a Zoho Creator Report into a Pages

  If you’ve uploaded images in a form and can see them in your report, you might also want to display those same images inside a Page (custom HTML page). This is useful for dashboards, profile pages, or any place where images should be visible dynamically

• Zoho is blocking emails I subscribe to from one sender

  About 4 months ago I stopped receiving newsletters that I subscribe to from @thedispatch.com. They tell me that zoho's server is blocking them. I've added them to my contacts list, but they're not even reaching my inbox. I don't know how to troubleshoot

• Introducing Formula Fields for performing dynamic calculations

  Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

• Inactive Items - Make Less Prominent by Default

  Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

• Items should display under specific warehouse

  I have configured the multi warehouse but it show all the items under all warehouse which is not correct according to our business logic, so i want that items should only display under that specific warehouse not under all the warehouses not even with zero quantity. Some items should be common but not all so is there any option for that purpose so i can specific the items to its warehouse. Regards

• How to calculate GST based on "Ship To Address"

  We into the interior designing work, providing "Works Contract Services" to our clients across India. We are registered under GST in Maharashtra state. For works contract services as per the GST rule, we need to decide place of supply based on "Ship to

• I NEED TO NUMBER TO TEXT NO HERE

  =NUMBERTEXT NEEED

• Auto-fill New Row with Previous Row Values

  rowsize = input.Order_Items.count(); for each row1 in input.Order_Items { rowsize = rowsize - 1; if(rowsize == 1) { row.Door_Model = row1.Door_Model; row.Door_Color = row1.Door_Color; row.Materials = row1.Materials;

• When I click on PDF/PRINT it makes the invoice half size

  When I click PDF / Print for my invoice in Zoho Books, the generated PDF appears at half size — everything is scaled down, including the logo, text, and layout. The content does not fill the page as it should. Could someone advise what causes Zoho Books

• Python - code studio

  Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics already

• API question - adding a thread to an existing ticket

  Hi Is there an API function for the customer to add to an existing ticket thread? example, customer puts in new support ticket. support replies and ask for more details. customer replies with more details -what api function is used for this (will add record append to same ticket number?) Thanks

• search and Smart Bar both missing in Mail

  One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?

• Why is Zoho Meeting quality so poor?

  I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

• Items Below Reorder Point Report?

  Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something s

• Qwen as the default open source Generative AI model for Zia

  Hello everyone, Zia Generative AI is transitioning from Llama (8B parameters) to Qwen (30B parameters) as the default model. This means that users who were using Llama as a GenAI service will now use Qwen. This upgrade was made with a vision to enhance

• Calendar week view: Today + 6

  Is there anyway to have the calendar change dynamically based on the date? Due to the amount of events, we only display a week at a time, but towards the end of the week, we can no longer see ahead to next week (without changing it manually every time).

• How to restrict user/portal user change canvas view

  Hi , I would like to restrict user / portal user change their canvas view because I hide some sensitive field for them. I dont want my user switch the canvas view that do not belong to them But seems Zoho do not provide this setting?

• E-Invoicing in Belgium with Zoho Inventory

  Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. Invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing Works

• Introducing parent-child ticketing in Zoho Desk [Early access]

  Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

• How to add to Subforms via Zapier with Zoho Writer?

  I have the following layout for a Zoho Writer Document. As you can see there is a repeating subform taking in "Items". I am trying to make a Zapier integration with it, and I can see there is 1 field saying: "Items", but it does not specify how I'm supposed

• Contrôles administratifs granulaires : un atout pour la sécurité des e-mails

  La moindre erreur dans votre système de messagerie peut coûter très cher à votre entreprise, tant en argent qu’en conformité et en image de marque. Pour beaucoup d’organisations, ce risque est bien réel. Les e-mails véhiculent quotidiennement des informations

• ZeptoMail API Request

  We tried to send mail using ZeptoMail using Django. Following is my payload {'from': {'address': 'abc@abc.com'}, 'to': [{'email_address': {'address': 'xyz@xyz.in', 'name': 'Bhavik'}}], 'subject': 'Report Name', 'htmlbody': '<p>Test</p>'} Following is

• Marketer's Space: Why mobile optimization deserves a place in your email strategy

  Hello Marketers, Welcome back to Marketer's Space! Today, we'll talk about the importance of creating mobile-friendly email designs. While mobile phones were once used only to make phone calls, today they're used for almost everything, including texting,

• Collections Management: #6 Realign Customers who gets back In-Term

  Arun stared at the subscription list on his dashboard. Another account had just been moved to Cancelled status after completing the whole dunning process. Nothing unusual, just that payment failures happen, retries fail, and cancellation is the expected

• Zoho Mail IP Blacklist

  I need problems with send mails: Error: junk mail rejected - sender4-op-o10.zoho.com 136.143.188.10, is in RBL. Spamcop. Please remove FQDN for blacklist. Regards.

• I can receive but not send emails

  Hello, I've been not able to send emails for almost a year now. I been using alternate email to do this. I want to know how to fix this so I can use my zoho account normally again.

• Setting checkbox value on template in Sign from Creator

  Good day, Please help me understand how do I set a tick from a checkbox in Creator into a checkbox on a Sign template. Below is the only values on the Sign template and the code from Creator, "field_boolean_data": {}, "field_date_data": {}, "field_radio_data":

• The challenge of 24/7 connectivity: Being present and meeting customer expectations

  Before television entered our homes, radio was our window to the world. We had to tune carefully to catch voices from distant places. When television arrived, the world began to grow smaller. We can watch rocket launches, see the goal that wins our favorite

• How to download all attachments from inbox, send, other folders in one go

  Hi All, Appreciate if anyone could help me with steps for below requirement. How to download all attachments from inbox, send, other folders in one go. Even mapping to new folder will help me. Thanks in advance.

• Cannot connect mail accounts to Thunderbird

  Hi Support - I'm attempting to add my mail accounts to Thunderbird but I'm getting an unable to login to server error. I tried to use the password associated with my account I received the unable to login error. So I went into Zoho Accounts and generate

• Alias Email Id already exists

  Hi, I just verified my domain sesque (dot) com and now I am trying to create the admin account using admin (at) sesque (dot) com, but I am getting an error saying "Alias Email Id already exists". I used to have another Zoho account with this email address,

• Unable to connect to smtp server, connection timed out

  Hi Team, I am facing below issue, while sending out emails from thunderbird client. It used to work, facing this issue from morning. Error: Sending of the message failed. The message could not be sent because the connection to Outgoing server (SMTP) smtp.zoho.com

• javax.mail.authenticationfailedexception 535 authentication failed

  Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

• Next Page