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 #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 achievedKaizen #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 theKaizen #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.
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
Modular Permission Levels
We need more modular Permissions per module in Books we have 2 use cases that are creating problems We need per module export permission we have a use case where users should be able to view the sales orders but not export it, but they can export otherBlueprint or Validation Rules for Invoices in Zoho Books
Can I implement Blueprint or Validation Rules for Invoices in Zoho Books? Example, use case could be, Agent confirms from client that payment is done, but bank only syncs transactions tomorrow. in this case, Agent can update invoice status to done, andFeature Enhancement Request – Text Formatting Options in Item Description (Zoho Books/Quotes Module)
Dear Zoho Development Team, Greetings from Radiant360 Integrated Technical Services LLC. We would like to bring to your attention a functional limitation we've encountered within the Item Table / Quote Description section of Zoho Books (and Zoho CRM Quotes).Add Option to Mass Dispatch by User
Hello! We are using the dispatch console to dispatch service appointments to our service ressources. Right now, the process is our dispatcher verifies each ressource's route for the day and dispatches it after validation. Sadly, there doesn't seem toBank Receipt Catagorization
Hi, how can I match a bank deposit to multiple customer's invoices ? For e.g. A single person paid to us on behalf of different five customers. I need to keep the separated invoices for each customerPer Level Approval for admins
We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have optionPayment on a past due balance
Scenario: Customer is past due on their account for 4 months. We suspend their billing in Zoho books. Customer finally logs into the portal and enters a new credit card. We associate that cardwith their subscription, which will permit the card to be usedHow to export all line-item descriptions for a specific item in Zoho Books?
I am trying to audit a specific item (“Item X”) that has been invoiced multiple times with different line-level descriptions. Here’s the situation: I am using Zoho Books (Professional). Each invoice may contain the same item but with different descriptionsList of hidden features
Hi Friends, I had another support chat today and low and behold the feature that I wanted just simply needed to be "enabled". I thought I'd share, and maybe see if others had some similar experiences. 1. This one is from 5 ish years ago. I asked if thereHow to change a BAS that has been filed
I have discovered that a group of expense transactions were accidentally placed in a asset account rather than an expense account. As a result I need to adjust the transaction and consequently most of my BAS to correct the error. Because the BAS haveHow to Export PDF with a custom Template
I need to export Sales Order with a Custom Template I have created How can I do it? I see an API to export the PDF but how can I choose which template to choose to generate the PDFCreate custom rollup summary fields in Zoho CRM
Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions wereAssociate email with a potential or project.
I have a pivotal requirement to associate emails from various suppliers (contacts) with different potentials or projects, on an email by email basis as they come in. This question appears to have been raised before but I cannot find a definitive yes "it can be done". Could anyone please tell me, yes or no. If the later I can stop wasting time and look at alternative crm systems. I would love not to have to do this. Thanks in advance.MTA - BAD IP reputation by outlook/hotmail
Messages to Microsoft email servers are bouncing back due to poor reputation. Message: 4.7.650 The mail server [136.143.188.206] has been temporarily rate limited due to IP reputation. For e-mail delivery information see https://postmaster.live.com (S775)Function with Search Records was working until a few weeks ago, around when "Connected Records" was released
I have a custom function that has been running for nearly a year now, which suddenly stopped working around the time Zoho released the "Connected Records" update. The function is no longer finding the record using the searchRecords function. I've changedIs CRM On Premise available
Hi Zoho team, Can you please let me know that CRM Zoho is available for On Premise as well? Thanks, DevashishHow to sync from Zoho Projects into an existing Sprint in Zoho Sprints?
Hi I have managed to integrate Zoho Projects with Zoho Sprints and I can see that the integration works as a project was created in Zoho Sprints. But, what I would like to do is to sync into an existing Zoho Sprints project. Is there a way to make thatOnline Assessment or any aptitude test
This video is really helpful! I have one question — if I share an assessment form link (through email or with the application form on my career page), how does Zoho Recruit evaluate it? Can a candidate use Google or external help while taking the test,Editing the Ticket Properties column
This is going to sound like a dumb question, but I cannot figure out how to configure/edit the sections (and their fields) in this column: For example, we have a custom "Resolution" field, which parked itself in the "Ticket Information" section of thisNeed a way to secure Prefill URLs in Zoho Forms (hide or encrypt prefilled values)
Hi everyone, I often use Zoho Forms with prefilled URLs to simplify the user experience — for example: https://forms.zohopublic.com/.../form?Name=David&Amount=300 However, the problem is that all prefilled values are visible and editable in the link.Incoming Threads Report
From data to decisions: A deep dive into ticketing system reports Customers raise questions and issues through multiple channels, such as email, chat, or tickets. To monitor the number of queries received on a specific day from each channel, leads canConditional layouts - support for multi-select picklists
Hi, The documentation for conditional layouts says the following: "Layout Rules cannot be used on the following field types: Auto Number Lookup Multi Select Lookup User Lookup Formula File Upload Multi Line" I have a custom module with a multi-pick listSamsung Keyboard Issues with Notebook
Dear Users, We're sorry to inform you that some of our users are experiencing certain issues like scrolling, delay/lag, cursor placement especially within the text notes. This occurs mainly due to Samsung Keyboard compatibility with Android 13 and someHow to apply customized Zoho Crm Home Page to all users?
I have tried to study manuals and play with Zoho CRM but haven't found a way how to apply customized Zoho CRM Home Page as a (default) home page for other CRM users.. How that can be done, if possible? - kipi Moderation Update: Currently, each user hasCloudflare Turnstile is now available in Zoho Forms!
Hello form builders! We have added a new layer of protection to help you keep your forms free from bots. Instead of forcing users to prove they are human, Cloudflare Turnstile quietly checks browser signals in the background. Your real users glide through,Power of Automation :: Unique Task & Issue Prefix Format and Sequencing Rule
Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate【Zoho CRM】キャンバス機能のアップデート
ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、キャンバス機能のアップデートをご紹介します。 目次 グリッドについて フォーム表示のタブについて 1. グリッドについて ビジュアルデザインは細部の調整に手間がかかりますが、キャンバスのグリッドを使えば要素を整理し、バランスよく配置できます。 画像やデータなどの要素をグループ化せずに簡単に配置できます。 余白を調整することで、要素間の視覚的なバランスを保つのに役立ちます。 「表示切り替え基準の幅」を設定すると、デザインをレスポンシブに調整できます。Deleting unwanted ticket replies
Hello, In a Zoho Desk Ticket thread, sometimes one of the recipients has auto-reply activated. This creates a new message in the Ticket thread that not only pollutes the thread, but most importantly cannot be replied properly because usually auto-reply e-mails don't do "reply all", so the other recipients are not included. I want to delete such a message in the Ticket thread. I searched the help of Zoho Desk, but only found a way to mark as Spam (https://help.zoho.com/portal/kb/articles/marking-support-tickets-as-spam)Issue: Ticket Export Does Not Include Ticket Threads
Dear Zoho Desk Support Team, I hope you’re doing well. I wanted to bring to your attention that the current ticket export feature in Zoho Desk does not seem to include the ticket threads or conversation history. When exporting tickets, only the summaryAbility to Set Client Name During Portal Invitation
Hi Zoho Team, We would like to suggest an important enhancement to the Zoho Creator Client Portal functionality. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for creatingスマホでキャンペンメールを見ると正しく表示されない
キャンペーンのメール（HTML）を作成しましたが、スマホ表示に切り替えると正しく表示されません（添付参照）過去に作成したキャンペーンでは特に意識してませんでしたが、問題なく表示されていたようです。うまく表示される場合とされない場合の違いは何でしょうか？136.143.188.51 blocked by spamcop
Zoho mailserver seems to be blocked by spamcop. Cant send mail to my customer. Not sure what to do.Zoho Calendar Integrated Into CRM?
I've searched around the forums but couldn't find anything addressing this . . . Is there a plan to integrate Zoho's stand alone calendar solution into Zoho CRM? The CRM calendar does an OK job but is very basic and the Zoho calendar is great, but I've only figured out to subscribe to my CRM calendar within ZCalendar - there is no 2-way sync. My preferred solution would be for ZCal to become the default calendar/event solution within Z CRM. Is this on the roadmap? ThanksCan I Create Different Page Layouts Based on a Specified Module Pick List Field
I am trying to work out how to create different page layouts based on a specified module pick list field value, like the Salesforce feature where you can define multiple record types and then create custom page layouts for each record type. This is a super important feature as for almost all the modules we are using (Leads, Potentials, Accounts) we need to be able only show fields relevant to the record type. E.g. We need a very different page layout for a consumer lead Vs a commercial lead, sameScheduling Tasks in Relation to Project End Date
I use Zoho project to help manage tasks that relate to a number of specific business events that take place. I would like to be able to have my project end date be the date of the event and then work "back" from that date to say... Add a task 2 weeks before the project end date to remind me to XYZ. Does anyone know if there is a way to base task timings back from a project due date rather than a project start date?What formula to use in computing total hrs and decimal hrss
So , my data includes log im column , 2 breaks with 2 columns that says back and lunch and 1 column that says back and logged out. What formula should i use to be able to automatically have my total hours as I input time in each column? ThankyouNotes of Tasks in Zoho CRM
Hello, Is there a way to filter the Notes that appear on a Task to only show the notes related to that specific Task and not display all the Notes of the objects related to that Task (Accounts, Contacts, Deal, etc). In essence, our team struggles to understandPassing the CRM
Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine whenHow to next stage blueprint in Zoho Creator
Hello, I have question, its possible to next stage blueprint? in case, Start - (first stage) Leader 1 (with condition 1) - (second stage) Leader 2 (with condition 2) - (third stage) Leader 3 (with condition 3) - (fourth stage) After first stage, i wantFeature Request: Email Follow-Up Sequences Similar to Zoho CRM
I’m wondering if Zoho Recruit is planning to introduce a feature similar to the Email Automation – Follow-Up Sequences that is available in Zoho CRM. In CRM, this allows users to send a series of timed follow-up emails triggered by specific actions (forNext Page