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

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

Cheers!



    • Sticky Posts

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

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

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

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Introducing Rollup summary in Zoho CRM

      ------------------------------------------Moderated on 5th July'23---------------------------------------------- Rollup summary is now available for all organizations in all the DCs. Hello All, We hope you're well! We're here with an exciting update that

    • Introducing Connected Workflows in Zoho CRM for Everyone : Free Your Teams to Focus on What Matters

      Hello Everyone, We’re thrilled to introduce the next big evolution in Zoho CRM for Everyone -- Connected Workflows. This new feature builds on our commitment to deliver a CRM that’s truly inclusive, adaptable, and designed for consistent collaboration

    • Cooling-off Period Just Got Better: More Coverage, More Control

      We’ve enhanced the Cooling-off Period feature in Zoho Recruit to give you more control over repeat applications and referrals. This helps you maintain a cleaner, more efficient recruitment pipeline. With this enhancement, you can: Prevent duplicate candidate

    • Revenue Management: #7 Revenue Recognition in Construction & Real Estate Industry

      If you are in the construction or real estate business, you are used to long project timelines and progressive invoicing to keep up with your billing. But when does revenue get recognized? Will it happen when the contract gets signed? At different milestones

    • TikTok (and other social platform) Messages and comments of the past

      When I link a social channel, Zoho will show in "Inbox", "Messages" and "Contact" sections the interaction done in the past? (comment, messages...)

    • Restrict Employee mail deletion

      Dear Zoho, Is there a way where i can restrict my employees to delete any mails from their account

    • 554 5.1.8 Email Outgoing Blocked.

      Hi guys, I just singed up for mateusz.nowicki@zoho.com mail and I can't send any mails.. Why? Everytime I try to send something I got error like the one in the screenshot. Please, help me.

    • Zoho IP blocked by SpamHaus

      ERROR CODE :550 - 5.7.0 Your server IP address is in the SpamHaus SBL-XBL database, bye

    • File Upload in Creator's Subfrom

      Hello Sir/Madam, Here is a Problem......... Scenario: In CRM One Custom Module (Payments) have one File Upload Field now we have to Upload that File into Creator's Custom Form (Documents) have one Subform (Documents) in Document Upload Field using Deluge

    • Trigger workflow base on email clic

      Searching the help and forum, I see that there were workflow trigger rules based on email. But now, I can't find this type of trigger when I create a custom workflow. What I'm looking for would be to automate the sending of an email for a new prospect,

    • Bigin Form Acknowledgement

      How to troubleshoot and find out why form acknowledgement is not sending emails after form submission?

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

    • Zoho Mail POP & IMAP Server Details

      Hello all! We have been receiving a number of requests regarding the errors while configuring or using Zoho Mail account in POP/ IMAP clients. The server details vary based on your account type and the Datacenter in which your account is setup. Ensure

    • Ever since the new Android App udpates notifications are not working

      notifications are not working for the app is its closed I followed the tutuorial to the notificaction fixed and everythig seems to be right but notifications are not workig

    • Zoho Analytics & Zoho Desk - but not all desks

      I have several desks in our company and one of those is used by our HR department. I want to bring through the data to the shared Zoho Analytics workspace - except for the HR desk. Can this be excluded at data import stage ?

    • Incoming Emails Not Showing Up in Zoho Inbox

      Hi - I have my Zoho email account set up to forward a copy of all incoming emails to a secondary Gmail address, whilst retaining the original email in the Zoho inbox. However, all my incoming emails are currently not showing up in my Zoho inbox, so I'm

    • Unable to Create Zoho Booking via the Book Appointment API

      Its giving the below error {     "response": {         "errormessage": "Error setting value for the variable:customer_details\n null",         "status": "Error"     } } Request: POST Url: https://www.zohoapis.in/bookings/v1/json/appointment attached Zoho-oauthtoken

    • SHEET - Send email when a cell changes

      I would like to create a custom function for Zoho Sheet that triggers when a paticular cell changes to a specific value. This would result in sending an email to a recipient (this would be an address that remains the same and included in the script). Example: = IF(N4= "Drafted", <>EmailFunction) 1)     Cell N4 changes to "Drafted" 2)    Email is sent to recipient            or alternatively 3)    Post to chat channel I have found the Custom function editor in Sheet. I am not bad at scripting, but

    • 【開催報告】 福岡 ユーザー交流会 2025/8/8（金）

      皆さま、こんにちは。コミュニティチームの中野です。 8/8（金）に、福岡 ユーザー交流会を開催しました。 本投稿では、その様子をお届けします。当日の登壇資料などもこちらに共有しますので、参加できなかった皆さまもご参照ください。 今年初の開催となる福岡 ユーザー交流会では、CreativeStudio樂合同会社 前田さんによるZoho CRM / Sign / Survey の事例セッションのほか、 Zoho社員セッションでは、Zoho Forms の活用法を解説。 さらに、「見込み客・顧客データの管理/活用方法」をテーマに参加者同士でZoho

    • no me llegan los correos a Zoho mail

      No puedo recibir correos pero sí enviarlos, ya hice la modificación de MX y la verificación de teléfonos, qué es lo que ocurre? gracias

    • Error: Invalid login: 535 Authentication Failed

      I have used zoho with nodemailer. const transporter = nodemailer.createTransport({ host: 'smtp.zoho.com', port: 465, secure: true, auth: { user: 'example@example.com', pass: 'password' } }); While sending the mail, it shows the following error: Error:

    • Zoho Renewal

      Hello, If I am not going for zoho email renewal. will i get back my free zoho account? and if yes then is it possible to get back my all free user. how many user get back 10 or 25?

    • Not reciving emails

      Apparently i cannot recive emails on my adress contact@sportperformance.ro I can send, but do not recive. The mail i'm trying to send from mybother adress gets sent and doesn't bounce back... but still doesn't get in my inbox. Please advise

    • Not receiving MailChimp verification e-mail

      It seems that their verification e-mails are blocked. I can receive their other e-mails, but not their verification of domain ownership e-mail. I've checked and double checked how I typed the e-mail, using different e-mails (my personal e-mail can receive it), white listing the domain and all that is left is for the IP's to be white listed, but I don't have that power.  If a staff member could take a look at this -> http://mailchimp.com/about/ips/ And perhaps white list them for me, that would be

    • Creating my 2nd email account

      After creating my first email address, I decided to get another email address. I would like to use this new address as the primary address too. I don't know how to set it up there doesn't seem to be an option for that

    • Cannot - create more email account - Unusual activity detected from this IP. Please try again after some time

      Hello, I come across the error message in Control Panel. Unusual activity detected from this IP. Please try again after some time and i cannot create any more users We are an IT company and we provide service for another company Please unlock us.

    • "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain"

      Good day. When I try to send mail through ZOHO mail I get the following error : "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain" I need help with this. My zohomail is : @eclipseweb.site Thank you,

    • Transfert de domaine pour création des comptes emails

      Bonjour , je ne parviens point à créer des mails avec le domaine 'raeses.org' suite à la souscription du domaine auprès d'un autre hébergeur, dont j'ai fait la demande du code de transfert qui est le suivant : J2[U8-l0]p8[ En somme, attente de l'activation

    • Help! Unable to send message;Reason:554 5.1.8 Email Outgoing Blocked.

      Kindly help me resolved this issue that i am facing here.

    • How are people handling estimates with Zoho inventory?

      We are often using Zoho Books for estimates that then get converted to invoices within Books. We would like the sales team to migrate entirely to Zoho Inventory and no longer need to use Zoho Books so that they are only on one system. How are people managing

    • Relative Date Searches

      Currently in the search options, it has "date", "from date" and "to date". I think it would be great if there were options like "date greater than x days ago" and "date less than x days ago". I realise that as a once off you can just use the existing

    • Performance is degrading

      We have used Mail and Cliq for about three years now. I used to use both on the browser. Both have, over the past 6 months, had a severe degradation in performance. I switched to desktop email, which appeared to improve things somewhat, although initial

    • Ask the Experts 23: Customize, utilize, and personalize with Zoho Desk

      Hello everyone! It's time for the next round of Ask the Experts (ATE). This month is all about giving Zoho Desk a complete makeover and making it truly yours. Rebrand Zoho Desk with your organization’s details, customize ticket settings based on your

    • Dear Zoho CEO: Business Growth is about how you prioritise!

      All of us in business know that when you get your priorities right, your business grows. Zoho CRM and Zoho Books are excellent products, but sadly, Zoho Inventory continues to lag behind. Just this morning, I received yet another one-sided email about

    • Payroll In Canada

      Hi, When can we expect to have payroll in Canada with books 

    • Please review and re-enable outgoing emails for my domain

      Hello Zoho Support, I have recently purchased a new domain and set up email hosting with Zoho. However, my account shows "Outgoing Email Blocked". I am a genuine user and not sending bulk/spam emails. Please review and re-enable outgoing emails for my

    • Payroll without tax integrations (i.e. payroll for international)

      It seems as though Zoho waits to develop integrations with local tax authorities before offering Zoho Payroll to Zoho customers in a country. Please reconsider this approach. We are happy Zoho Books customers, but unhappy that we have to run payroll in

    • goingout e mail block

      info@ozanrade.com.tr

    • Incoming mails blocked

      Zoho User ID : 60005368884 My mail Id is marketing#axisformingtechnology.com .I am getting following message "Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts. Click here to get unblocked." Please

    • Assistance Needed: Ticket Status Not Updating and Sorting by Last Customer Reply in Zoho Desk

      Hello, I’m facing two issues in Zoho Desk that I’d like your guidance on: Ticket Status Not Updating: When a customer replies to a ticket, the status does not change to Reopened. Instead, it remains in Waiting on Customer, even after the customer’s response

    • Next Page