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

• 年内最後のユーザー向けイベント：5名限定！ 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ (12/18)

  ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 12月開催のZoho ワークアウトについてお知らせします。 今回はZoomにて、オンライン開催します。 参加登録はこちら（無料） https://us02web.zoom.us/meeting/register/QHn6kJAcRs-znJ1l5jk0ww ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho ワークアウト」を開催します。

• How do I get my account id?

  Hello, I followed the instructions to get a list of accounts of the currently authenticated user (which is me, and I am logged in). But when I follow the below instructions I get the following error: ERROR: {"data":{"errorCode":"INVALID_TICKET","moreInfo":"Invalid ticket"},"status":{"code":400,"description":"Invalid Input"}} Instructions that I am following: GET - User account details Purpose The API retrieves the list of accounts of the currently authenticated user.  Request URL  http://mail.zoho.com/api/accounts

• This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

  I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

• Related list Mobile Device

  Hello, We use an the Zoho creator application to make reports linked to Accounts. On the computer: it's easy to go the Account and see all the created reports in the related list below On iPad/Phone ZOHO CRM APP: we cannot see the reports on those accounts

• Zoho Quartz Screen Recording

  Hello, can we get access to Quartz, please, as a standalone solution? It would be great for creating training videos for current and future staff on how to use Zoho software according to our company requirements. Thank you

• auto close automated alert tickets which are similar

  Hello ZOHO Community, we are using ZOHO Desk to process automated monitoring alerts. Scenario: Our monitoring system creates a ticket when a threshold is exceeded, e.g. Subject: Computer 1 – CPU usage 100% – Error A few minutes later, once the issue resolves

• Maintain knowledge base integrity by moderating article comments

  Hello everyone, A knowledge base provides a self-service platform where customers can refer to articles, user manuals, and other resources to learn about the company's products or services and troubleshoot problems. Often, readers leave a comment on the

• Making another calendar your default calendar

  I am trying to make another calendar my default calendar when I add events to it. It keep going to a single calendar, I need it to go to my google calendar by default, as this is linked to other services / websites. I cannot find an option to make it

• Customer ticket creation via Microsoft Teams

  Hi all, I'm looking to see if someone could point me in the right direction. I'd love to make it so my customers/ end users can make tickets, see responses and respond within microsoft teams. As Admin and an Agent i've installed the zoho assist app within

• Option to Delete Chats in IM

  Currently, there is no option to delete any chats in IM, regardless of their source.

• Restrict Users access to login into CRM?

  I’m wanting my employees to be able to utilize the Zoho CRM Lookup field within Zoho Forms. For them to use lookup field in Zoho Forms it is my understanding that they need to be licensed for Forms and the CRM. However, I don’t want them to be able to

• Shifts in Zoho People vs Zoho Shifts?

  Hello Zoho People Team, We hope you are doing well. We are evaluating the Shifts functionality within Zoho People and comparing it to the standalone Zoho Shifts product. We’ve encountered comments and discussions suggesting that the Shifts feature inside

• Referencing a cell from another sheet

  My workbook has multiple sheets. Each sheet has some calcluated totals in certain cells. The front master sheet has a list of everything that is detailed on the other sheets, with the totals. These could change at any time, so the totals need to be references to the other cell's value, not a fixed number. So on the master sheet, I put in =, then go the other sheet and choose the cell and hit Enter. In regular Excel, this works. But in the Zoho sheet, it doesn't work. I have to edit the result by

• Group mail for external email addresses

  Hello, I was just wondering if the Group mail feature works with external email addresses - e.g. gmail.com or a completely different domain? it seems only internal addresses (hosted with Zoho) receive the mail. Thanks, Oliver

• Is Zoho Shifts included in the Zoho One plan?

  In case the answer is no: there's any plan to make it available via One? Thank you

• Marketing Automation Requirements Questions

  I would like to set up a multi-email drip campaign- please see the structure below and confirm if I can achieve this set up in Zoho marketing automation. Where applicable, highlight gaps and workarounds. Thanks Drip email campaign- Can I create one drip

• The email address you have entered belongs to a different deployment/region.

  Hi, I am trying to create the user - mprust@crombiecomputers.co.uk but keep getting the message below -  The email address you have entered belongs to a different deployment/region. Please contact support@zohoaccounts.com for assistance. Look forward

• Use Zoho Flow Credits for CRM ‘Actions by Zoho Flow’

  Hello Team, We would like to submit a feature request regarding credit usage for “Actions by Zoho Flow” in Zoho CRM. Use Case: We are Zoho One users and actively use Zoho Flow, where our organization has 52,000 Flow tasks per month. In Zoho CRM, we use

• Unusual activity detected from this IP. Please try again after some time.

  Hello Zoho admin and IT team We are a registered website in Eloctronic services and we been trying to add our users to the zoho system but this issue faced us ,, hope you unlocked us please.

• Alert if a field is ticked.

  Hi There, We have two modules named Opportunities (Deals) and End Users (CustomModule1), as per the image below. Within Opportunities, we have a lookup field that looks up from the End Users Module. We are looking to get an alert either via email or another

• CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

  Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

• Syncing with Google calendar, Tasks and Events

  Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planning

• Zoho CRM Analytics - Allow To Reorder Dashboards

  I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go

• Plans to allow more columns of monitoring, and monitoring not only your own channels?

  Are their any plans to allow more columns of monitoring, and monitoring not only your own channels? Here's why - I'm sure I'm not alone in that we sell other brands products, so not only am I interested in my own brand social channels, but also the social

• Managing functions

  Can someone let me know if there are any plans to improve the features for managing functions in CRM? I have lots of functions and finding them is hard. The search only works on the function name and the filter only works on function type. I have created

• Kaizen #194 : Trigger Client Script via Custom buttons

  Hello everyone! Welcome back to another interesting and useful Kaizen post. We know that Client Scripts can be triggered with Canvas buttons and we discussed this with a use case in Kaizen#180. Today, let us discuss how to trigger Client Script when a

• Adding Choices in a Sub-Form Dropdown

  Hi, Has anybody tried Adding Choices to a Dropdown in a Zoho Creator Sub-Form programmatically? My Deluge code adds rows to a subform with 2 fields A and B. A - text field. B - dropdown. My Deluge script adds the row and displays A successfully. For the

• Zoho CRM Email Templates 100% Width No Background How?

  Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this? 

• Checking client unsubscribe details

  Hi team, Can you please let me know where we can check if a client has unsubscribed, along with the date and time it was done? If this information is not available at our end, please help confirm the unsubscribe date for the below email ID from the backend:

• Email forwarding setup fails

  I'm trying to set up email forwarding from my Zoho email to my gmail address. I followed the directions to set up email forwarding here: https://www.zoho.com/mail/help/email-forwarding.html. I did only steps 1-6. After doing this, rather than setting

• Integration with...

  Dear Zoho Commerce team, Please could you consider the integration within Zoho Commerce / Inventory and Qapla'? (https://www.qapla.it/en/) This app is better than Aftership in many ways: - Aftership integration require PRO plan and price start from more

• Scan and Fill CRM Lookup Field

  Not sure if there is a reason why this isn't possible or if I'm just missing it. But I would like to be able to use the scan and fill feature on the mobile app to prefill the CRM lookup field and fetch the rest of the data in the form.

• Customer Management: #2 Organize Customers to Enhance Efficiency

  When Ankit started his digital services firm, things felt simple. A client would call, ask for a website or a one-time consultation, Ankit would send an invoice, get paid, and move on. "Just one client, one invoice. Easy.", he thought. Fast forward a

• Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails

  How do i setup Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails

• Attachments between Zoho and Clickup, using Flow.

  Olá suporte Flow, tudo bem ? Estamos usando o flow para integrar Zoho Desk com o clickup. Não localizamos a opção de integrar anexos entre do zoho Desk para o clickup. Gostaríamos de saber se migrando para o plano pago, teremos suporte para fazer a integração

• Adding an Account on Zoho Mail Trigger in Zoho Flow

  I'm trying to create a flow using the zoho mail trigger "Email Receive". My problem is that when I select this trigger, it only shows one account from the account dropdown. I'm planning to assign it on a different email. How can I add other email ad

• Linnworks

  Unless I am missing something, the Linnworks integration is very basic and limited. I have reached out to support but the first response was completely useless and trying to get a reply in a timely manner is very difficult. Surely I should be able to

• Test data won't load

  I am using a Flow to receive orders from WooCommerce and add them to a Zoho Creator app. I recently received an order which failed, and when attempting to test the order I found that it just shows a loading animation and shows up in the history as "queued."

• AddHour resets the time to 00:00:00 before adding the hour.

  Based on the documentation here: https://www.zoho.com/deluge/help/functions/datetime/addhour.html Here's my custom function: string ConvertDateFormat(string inputDate) { // Extract only the date-time part (before the timezone) dateTimePart = inputDate.subString(0,19);

• WhatsApp Report in Bigin CRM

  Reporting feature for Bigin CRM’s integrated WhatsApp that provides insights such as: Number of WhatsApp conversations closed Number of messages sent and received Number of conversations replied to Response and closure metrics for WhatsApp chats More

• Next Page