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.
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
nick
Athul P
PJ
Sunderjan Siddharth
Sticky Posts
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 thisKaizen #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 howKaizen #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 areKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
For Each Loop in Zoho Flow
I am using Zoho flow to create rows in an google sheets for every new order in Shopify but the issue is that it is creating one row per order and all line items are comma separated values but I want separate rows for each line item. Is there a way toDebug and Test not receiving updates
Hello, I've been trying to debug two of my simple flows between Zoho Projects and Clockify but it seems like the Debug and Test feature is not working for me. When I click the Play button on any of the flows and then perform the trigger actions nothingAttendance, Reimagined: Smarter Views for Teams and Individuals
Tracking attendance shouldn’t feel like a chore. With the revamped Attendance module UI, Zoho FSM makes it easier than ever to monitor work hours, check-in activity, and team availability—whether you’re managing an entire workforce or just keeping anLogistics Industry: Learn to create amazing appointment scheduling sites
In the logistics industry, the quality of service is something that cannot be shown to others unless they experience it. Sure, there are metrics that show how you fare when compared to your competition, but then, it only communicates little with respect to quality. The usual route which firms in logistics took are advertisements, to which the internet has opened alternatives in today’s digital age like websites and appointment scheduling sites. A great online presence can help you communicate withCustomer Management: # 1 Pick a Convenient Way to Onboard Customer
When Meera opened her bookstore, onboarding customers was effortless. A customer walked in, picked a book and left with a handwritten bill. As the store gained popularity, things changed. " Can I place an order over the phone?" a customer asked one day.Tracking Emails sent through Outlook
All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. ButFetch ALL items from Inventory and send to Google Sheet using Flow
The title says it all -- I want to fetch the Item name, SKU, Purchase rate, and Sales rate for ALL items in Zoho Inventory and have them populate a tab in an existing Google Sheet. I have already successfully made this work for one item, so the flow isWhy Document Integrity Matters at Every Stage of the Contract Lifecycle
Contracts are legal records that must stay authentic and traceable from creation to expiry or termination. In Zoho Contracts, several design decisions focus on protecting the integrity of every document. These measures ensure that no important detailsaffichage pièces jointes impossible
Bonjour, aujourd'hui je n'arrive pas à afficher ni à télécharger les pièces jointes dans ZOHO CRM. J'utilise Chrome, j'ai vidé les caches et les cookies. Mais cela ne change rien. Merci de votre aideReminder to renew subscription.
Whenever I try to add to one of my notes a " renew your subscription" window pops out and won't Close disallowing me to edit. Why should I renew my subscription on an application with at best such bugs and at worse such underhanded ways to force renFields not coming through, not pulling data
Forgive the noviceness of my vocabulary. I am in Zoho flow connecting CRM and Projects. When an opportunity hits a certain stage, it will create the project in Projects, and bring in data from the opportunity. Everything is working, except for two fieldsSmartsheet Integration
Has any in the community been able to integrate Zoho Desk with Smartsheets using Zoho Flow? I am trying to get the Smartsheet Row ID based on ticket data and cannot find documentation on the Get Row function for Smartsheet. It is asking for a Query StringCRM Campaign - how to mass remove contacts?
Does anyone have a solution for removing all contacts from a CRM campaign. Seems that one by one is the only option.Send out follow-up email in the same thread (threaded conversations in individual emails) from Zoho CRM
Hi, I'm new to Zoho. I'm trying to send individual emails to my leads one by one. And I'll send out follow up email if I don't hear back from them later. However, instead of sending a new email, I want to reply in the same email thread so that the recipientsCadence Support in Zoho Vertical Studio
We would like to know whether it is possible to create and configure Cadences in Zoho Vertical Studio, similar to the Cadence feature available in Zoho CRM. Please confirm if Vertical Studio supports creating cadences for modules and users, and whetherRemoving "Products" as mandatory field from Sales Order creation page
Hello, friends According to our workflow, we should: 1) create Sales Order (Stage "New") 2) call and discuss the Products with a customer (Stage "Communication") 3) add the Products to the Sales Order during the call However, "Products" is mandatory toZoho Books says "The customer "Hakimuddin P A Ali" already exists. Please specify a different name.""
One of my transaction is not getting posted from Stripe to Zoho books. I already checked in Zoho books that there is no customer already present in Zoho books with the same name (as the error mentions) I already raised this complaint on Zoho flow portal,Is it possible to automate a file to be directly uploaded to a specific subfolder in Zoho Workdrive?
I am establishing a workflow so that when a new task is marked "complete", the document submitted in the task (under the "Documents" tab) is automatically uploaded to a specific subfolder in the associated WorkDrive for the project. However, the dilemmaSteuerberater der Zoho benutzt in Deutschland
I write in English because the issue is related to German regulations. Wir sind ein Unternehmen, welches aktuell keine Pflicht zur doppelten Buchführung hat. Aktuell bucht unser Steuerberater jeden Beleg, auch unsere Auslagen. Wir würden dies gerne selbstWhy are some folders not showing up as an action trigger in Zoho Flow?
I am currently working on a flow that automates the process of creating a folder in WorkDrive once a Task List is created. When I am selecting a destination for the folder, some projects are not showing up. I intend to create a folder within a specificGetting Date from PostgreSQL error
I am pulling data from PostgreSQL table into a CRM record via FLOW but the field is coming out empty. Need some suggestions: Field Type in CRM: Date/Time Field value in PostgreSQL: 2024-12-05 21:06:32.479 Field value in FLOW "Fetch Row": created : "2024-12-05T21:06:32.479382000",Zoho Flow to SendOwl API error
SendOwl is listed in the apps list of Zoho Flow. When trying to connect through the API with valid key and secret, the error given is: SendOwl says "HTTP Basic: Access denied" It seems Zoho doesn't connect via HTTPS. I've already tried using webhooks,decisions based on content of a ticket
Hi, I need to create a flow that sends automated email based on the content of a ticket in zoho desk. I have certain tickets that are formatted in a particular way, and contain certain keywords. How can I filter (based on decisions) the tickets basedNewline Character "\n" parsing problem in webhooks
Hi there, I am facing an issue in Zoho Flow (maybe a general issue or maybe only in Zoho Flow): I have this function: void sendListWebhook(string url, list array) { for each arrayElement in array { result = invokeurl [ url :url type :POST parameters:arrayElement.toString()One Company, multi branches, multi warehouses and I need to manage this in one organization
Dears, I'm a new user to zoho solutions, however I found a lot of persons giving a nice feedback about it also a lot of good reviews. I though why we try to move to it in our company. I'm not sure if Zoho could give me all what I need or not that's why I'm going to post in this topic most of the things I know about managing our business to let you ,as zoho experts, tell me if Zoho will meet my business requirements or not. First of all we are a flowers and landscaping company we have like 6 toMigration Evernote
Bonjour Apres plus d'une dizaine d'année passer avec evernote j'ai décidé de franchir le pas . J'ai débuté par migrer mes notes vers zoho et depuis la migration est bloquée. Impossible d'avoir un retour du support malgré plusieurs mails et tentative d'appelPushing GCLID info from Gravity Forms to ZohoCRM
We are switching to Gravity Forms from Zoho Forms and I cannot find any good info on how to make sure my GCLID tracking info is pushed through to the CRM through my new forms. There was an article in the documentation about placing something within theOn Zoho Flow, Record deleted trigger from Zoho Creator
On creating flow in Zoho Flow, when we select app Zoho created, it provides 3 trigger options - Record created, Record updated and Record created or updated We need trigger on "Record Delete" as well, We have a use case to fire our system api if recordZoho Flow Switch On Not Working
I have created a flow which is when the mailbox address received the email that meet the condition will auto fetch the contact, account and finally create the ticket by using Zoho Desk. When I do a test and debug on my flow it work well as what I expectMS Teams Flow Integration Question
Where can I find the chat ID for the "Post message to chat" target?Zoho Flow - Access denied to recover recording from call module - OpenAI
Hi, I am trying to build a Flow to recover recoding when a new call is saved in my CRM. I have integrated my CRM with ringcentral and the recordings are saved in the event. Trigger: When new module entry Step 2: Fetch module entry (Zoho CRM says "permissionUnable to send price in big commerce from zoho flow.
I am creating a flow from zoho flow to create a product in zoho inventory and sending this to big commerce. But the problem is like when ever i send the price its getting error. it require decimal format value if i am sending ${trigger.sales_rate} theNot sending mail to new lead in zoho flow
I have created a flow in zoho flow and triggered an action to send email notification when the new lead is created but even after user entering the mail id the email is not going to themAccess query string from incoming webhook URL in Zoho Flow
I have a fairly straightforward use case, but cannot find anything conclusive on this subject. How can I simply access the query string of the incoming webhook request in Zoho Flow? I am attaching the Deal ID to the end of the request like: https://flow.zoho.com/762439902/flow/webhook/incoming?zapikey=1001.0dec2d7dd15080c464a13925275f0129.448c23ee219c545c89f5a178456cfc8b&isdebug=false&dealID=${Deals.DealUnable to access my Zoho forms account
For some days now, I haven't had access to my Zoho Forms account. I keep getting an error that says, "You are an inactive user in your organization" via the mobile app and "You don't have permission to access this organization" via the web. I was removedIdentify Unused Deluge Functions in Zoho CRM
Hello Zoho Support Team, I would like to request a feature that helps administrators identify unused or rarely used Deluge functions in Zoho CRM. Currently, Deluge functions are distributed across different areas, and there is no centralized overviewUser Automation: User based workflow rules & webhooks
User management is an undeniable part of project management and requires adequate monitoring. As teams grow and projects multiply, manual coordination for updating users & permissions becomes difficult and can give way to errors. User automation in ZohoUpdate on V2 API End-of-Life Timeline
Dear Users, Earlier this year, we shared the launch of the V3 APIs and requested users to migrate from the older V2 APIs by December 2025. We have received valuable feedback from our users and partners regarding their migration timelines. We are happyRun a workflow after record merge
Hello, We are wondering if there is a way to trigger a workflow after two records are merged? We have a sms service that use to text back and forth with Prospects and Contacts. To make it easy for our users, we automatically create them in this otherLive webinar | The Evolution of Zoho Show: 2025 Feature Recap
2025 has been a year of exciting updates and features for Zoho Show. From advanced design and formatting tools to smarter presentation delivery, enhanced collaboration, and AI-powered features—along with the launch of our desktop apps, Show has continuedNext Page