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!






        • Recent Topics

        • Using multiple languages in template

          I wanted to add the company name in the template in arabic. I found a way through the header and footer option, except when i print the quotation the arabic disappears both in the top and bottom of the page. I have attached pictures of the before and

        • ADDING 5% VAT TO PURCHASE ORDERS GENERATED ON ZOHO BOOKS UAE

          Please guide on how to add 5% VAT to Purchase Orders generated on ZOHO Books UAE edition.

        • Import from /csv file, some items fail with the error "Specify Tax Or Tax Exemption".

          Hello! I am trying to import a csv file of all of my expenses for a complete financial year. I get errors for some items with the error message "Specifiy Tax or Tax Exemption". These errors only occur on lines where I have "Postage" as the expense account.

        • About maximum number of requests per minute

          Hi, Our company has integrated Zoho inventory and we're using the shipping order creation and update functions and so on. Currently we're receiving "For security reasons you have been blocked for some time as you have exceeded the maximum number of requests

        • Approval - Report/Views

          Hi, On Zoho Desk - Is there a way to report on pending approvals, or a view or similar?

        • "Zoho CRM Integration" option is missing in Zoho Social Settings

          I am trying to integrate my Zoho Social account with my Zoho CRM account. I am on the Professional Trial plan and my user role is "Brand Admin". However, I cannot find the "Zoho CRM Integration" or "Lead Generation" option anywhere in my Zoho Social settings.

        • Error 553

          Não estou conseguindo enviar ou receber e-mail, sempre dando o erro 553, sendo que há mais de um mês o domínio está pago e liberado. Preciso de um suporte urgente

        • Automate insurance document workflows with Zoho Writer

          Insurance companies have to deal with creating and managing complex documents and forms, such as policy applications, explanation of benefits documents, brochures, renewals, and claim forms. Handling all of this manually is hugely time and effort intensive,

        • Create PDFs with Text so that we can copy from a generated PDF

          Currently, any information that a user enters into a field cannot be highlighted and copied from the PDF that Zoho Sign renders. For example, if someone were to provide a phone number in a Zoho Sign text field, you would not be able to copy the phone

        • How To Insert Data into Zoho Table using Api

          Hi Community, I have created a table inside zoho tables. How do I insert data into table using API. Please tell the exact endpoint and payload , I just have to insert data into table columns. Also tell how to find tableid, viewid, baseid etc. which are

        • How do I delete a folder in Marketing Automation?

          Folders are used across contact lists and segments, and email templates. How do I delete a folder once it's been created?

        • Portal Approval Process

          Hi Zoho team and fellow users, I am seeking a method to establish a multi-step approval process between a Zoho user and a portal user (Custom Portal) to review and approve requests through the Custom Portal. For instance, within this setup, one of the

        • Narrative 8: Intelligent in-app support that's instantly available anytime and anywhere

          Behind the scenes of a successful ticketing system - BTS Series Narrative 8: Intelligent in-app support that's instantly available anytime and anywhere The App Support Across Platforms (ASAP) add-on for Zoho Desk is an independent application that integrates

        • Navigation issue — unable to return to Customer page after opening Receipt from Transactions

          Steps to reproduce: Open a Customer record. Go to Transactions tab and open a Receipt by clicking its receipt number. After viewing the receipt, clicking browser Back or closing the receipt does not reliably return me to the original Customer record (I

        • Thermal Printer Option Needed for Delivery Challan Templates

          Currently in Zoho Books, the Delivery Challan template only supports A4 and A5 page sizes. However, in many businesses (especially retail and hardware), we use thermal printers (like 3-inch or 4-inch rolls) to print delivery challans. It would be very

        • Separate Default Payment Modes for Receipts vs. Payments

          Right now, when I set a default Payment Mode via a customer invoice or Payments Received screen, that same mode shows up for vendor payments (Purchases → Payments Made). 🔹 Request: We need different default modes for: Customer receipts (e.g., default

        • Update/Change GSTIN in GST Settings of zohobooks

          We are trying to update our GSTIN under the GST settings section of our Zohobooks account Initially, we had entered a dummy GSTIN (123456789123456) to generate a sample invoice before obtaining our official GST registration. After receiving our actual

        • Link Payment Mode and Paid Through Accounts

          For most users, it's very difficult for them to understand that the Payment Mode is totally independent of the Paid Through account when paying bills. It seems (and is) redundant for them to have to select what is basically the same thing twice. The current

        • Lets enable business to choose the default payment mode

          Lets enable business to choose the default payment mode so that we do not have choose payment mode again and again for each and every transsctions

        • Add Attachment Support to Zoho Flow Mailhook / Email Trigger Module

          Dear Zoho Support Team, We hope you are well. We would like to kindly request a feature enhancement for the Mailhook module in Zoho Flow. Currently, the email trigger in Zoho Flow provides access to the message body, subject, from address, and to address,

        • South African Payment Gateways

          Since the "Demise" of Wave many South African users have moved over to Zoho and yet for years users have been requesting Integration with a South African Payment Gateway to no avail. Payfast was the most commonly requested gateway as it supports recurring

        • Has anyone verified if Zoho is PCI compliant?

          We are planning on using Zoho to process payments via Authorize.net. We have everything set up and are attempting to complete the PCI DSS SAQ-A requirement for our merchant account. This requires us to prove Zoho has completed the SAQ-D for Service Providers. We need a way to verify compliance, or a copy of an attestation of compliance signed by the appropriate officer at Zoho. I assume I'm not the first person to use Zoho to process payment, and therefore not the first to require this information

        • Bigin Plugin for Outlook

          Could we get this added? The Gmail version already exists, and I would like to avoid having to make a switch.

        • Date does not fit the field

          Hi There. I am having fun learning zoho sign API. Today I noticed the "Signed Date" field does not fit, or alternatively the font is to large for the auto field space. See screenshot below. The signed date field is created by putting {{Signdate}} on the

        • Tip of the Week #69 – Automate your Zoho TeamInbox tasks with n8n integration.

          Don’t waste time repeating the same tasks—like sending follow-up emails or adding new contacts. Let automation save the day. With n8n, an open-source automation tool, you can connect your favorite apps and let them handle the busywork for you. You don’t

        • Multi Page/Step Forms in creator

          Greetings i was wondering if it's possible to create multipage/step forms on creator similar to what we have on zoho forms. is that possbile? Thanks

        • Package Geometry

          how can i add the dimensions and weight capacity of the available boxes to be default in the system everytime we use it ?

        • How to create a Master Kanban Board that syncs with Child Projects?

          Hello, We're currently using Zoho Sprints for managing our interdepartmental teams, and we're looking to enhance our workflow using Kanban boards as part of a company-wide productivity improvement initiative. Our goal is to implement a project structure

        • Writer.. Broken?

          Hello,  Writer has been really good to me during the months I've used it, up until now.  I usually launch the app by tapping the icon and I could immediately pick up where I left off.  Now I'm greeted by a loading circle not reaching 100% and I only have the option to create a new account.  By pressing that button it now switches to a login screen and I can access my account. However, it seems (only speculating ofc) to be stuck in cell-phone mode? everything looks scrambled.  I can't access any of

        • How to access Recruit Variables in a Deluge function?

          I have set up Recruit Variables in Zoho Recruit, and I would like to know how to retrieve these variables from within a Recruit custom function (Deluge). Could someone please explain the correct way to access them? I tried the following code, but it did

        • Upon De activate a user what name doe sthe contacts candidates go under?

          When deactivating a user, does the user name remain the same, as the candidate owner? If not what/who, does it change to? Do I need to change the user name in contacts and candidates before I deactivate the user?

        • Weekly Tips: Customize alerts from your Priority Users

          You might receive hundreds of emails daily, but messages from your manager, clients, or team leads often require immediate attention, as they may contain urgent requests or critical updates. How would you ensure you never miss important messages from

        • Maximum 100 records in Sheet View is limiting. How can I increase this?

          Thanks in advance for any help with this. There was a similar post that showed answered but it did not help with increasing the number of records you see in a Sheet View. Editing in the Sheet View is fast and efficient but I have 3500 records and I need

        • Revenue Management: #3 Revenue Recognition Simplified

          In continuation of the previous post on how to compute revenue recognition, let's explore a solution that helps businesses handle real-world complexities. While the Accounting Standards provide a clear framework for recognizing revenue, the real challenge

        • Tip #40- Strengthen Remote Support with IP-based Restrictions in Zoho Assist– ‘Insider Insights’

          Protecting sensitive data and preventing unauthorized access is a top priority for any organization. With IP-based restrictions in Zoho Assist, you can ensure that only users from trusted networks can initiate remote support sessions. Say your IT team

        • Push Invoices to Xero Manually

          Hi guys, I'm wondering if anyone has wanted to do this and has a workaround or knows of an app that may be able to help with this. I sell B2B and B2C. The customers can purchase on our website or through marketplace, all of which send sales to zoho. The

        • OpenAI error code: 1010 in a Zobot

          Please see short linked screen recording. Insights welcome. Please and thank you! https://workdrive.zohoexternal.com/external/f3247ba9c872639157b707700c0300c433c7664aea924a034f4da3c3ad2e355f

        • Ability to Create Sub-Modules in Zoho CRM

          We believe there needs to be a better, more native way to manage related records in Zoho CRM without creating clutter. Ideally, Zoho would support "sub-modules" that we can create and associate under a parent module. Our use case: We have a custom module

        • Installing EMAIL Setup in New Domain

          Respected Support team, I'm facing an issue with cloudflare in Pakistan, I want to setup Zoho Mail Setup but I Don't know how to enable Zoho mail setup without cloudflare. My Website https://stumbleguymod.com/ is using CF, and I want a different Zoho

        • Signature change

          I cannot see how to change signature or out of office details easily now in the new format.

        • Next Page