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
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
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! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #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 DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho Campaigns 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
550 5.4.6 Unusual sending activity detected. Please try after sometime. <a href=https://www.zoho.com/mail/help/usage-policy.html target=_blank>Learn more.</a>
Please help me with this. Sending of mails is blocked.The Social Wall: November 2024
Hey everyone, As we move into December, we're excited to share all the updates that went live in Social during November. View, monitor, and respond to your WhatsApp and Telegram messages from Inbox Take your communication a step further by integratingSegmenting Contacts Based on Product Purchased
I am trying to organize our main Marketing Automation email list in a way that segments contacts based on products they have purchased (for example in this case it is 3 different products). To my knowledge, this would require the sync from Zoho CRM toUrgent Assistance Needed with DKIM Verification
Hi, I have been trying to verify the DKIM for the past month using your instructions as well as other resources. Unfortunately, I have not been able to resolve the issue, and it remains persistent. I need to address this problem as soon as possible soHow do I attach tasks from one task to other tasks in the same project
How do I attach tasks from one task to other tasks in the same projectIncorrect Handling of XLSX data
Trying to import an XLSX schedule of bills into Zoho Books I ran across the problem of date formatting. To replicate: Build a CSV file with bill dates in whatever format you like and import it - this should work if you match the "dd/MM/yyy" etc. formatZoho Books Invoice Salesperson: requires ID but there is no "Fetch salesperson" action
Hi, I am trying to attach a Salesperson to a Zoho Books invoice. In Zoho Flow, the salesperson field required an ID. However, I only have the salesperson name, I need to fetch salesperson by name and then provide the ID. There is no option to fetch salesperson...Change format of quantity format
Hi, I would like to change the qunatity format from 1,00 to 1. Is this possible? thanks!Ticket Views: filter criteria -> dynamic date values in relation to the current date
Hello all, It would be very helpful if you could build custom views in such a way that you do not have to adjust the criteria daily or at whatever interval in order to change the fixed date value as needed. For example, I would like to create a view that,Captchas: No support for Google reCAPTCHA or similar
Hi all, The current captcha integrated into Creator is very basic, and often near-impossible to read. I'm building an app for a charity which includes a couple of public-facing forms, and this is a real issue for people with dyslexia and related conditions - it's effectively excluding them if you want any form of spam protection at all on your published forms (and that being said, the current captcha doesn't even seem very effective - bots can often read it more easily than humans). I've raised thisMaintain consistency in ticket responses with shared snippets
Hello everyone! We are excited to announce that our highly anticipated snippet sharing feature is now available to all users. As you know, snippets are pre-defined message templates, or canned messages, that help agents respond to tickets with efficiency.Tickets - Zoho Desk
Hi Team, My Clients need to see their tickets created and the status of the ticket in the Zoho Support Desk itself. How can I do this? My Client doesn't have a Zoho Account. They need to access the ticket by the provided link without signing in.Automatically assign Contacts to Account owners
Hi, I have a finite number of accounts set up in the CRM, and each new contact that comes in is automatically assigned to an Account according to a rule I set up. I want the Contact owner in the Contacts module to be assigned to the relevant Account owner.Making Copies/Duplicates of Zoho Forms (Shared)
Question to the community: is there a way to take a 'shared form' , make a duplicate copy and save under My Forms, so that i can use that which was already created as a template to make updates to and use as a test form and be able to have full access,Using IMAP configuration for shared email inboxes
Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configureCan you help us creating a customised form with payment link?
I would like to create a customised Transport form where the user will be asked to make payment basis the drop/ pick up they select.Deleting or disabeling predefined ticket list views
Is it possible to delete or disable predefined views or is this still not possible? For instance, we are not using the chat function and therefore have no use for the "Missed Chats" view. Thanks!Email an Invoice from API
When calling the API to email an invoice, it seems it does not actually send it. Below is a screen shot where I used an API call for the bottom record, and it updated its' status to "Due Today", but no email was actually sent. The top record, I hit theUnable to load your extension. Please check your plugin-manifest or Resources.json.
Hi Team, I am using the config module with multiple fields of different types, such as checkboxes and picklists. However, I am encountering the following issues: Error Message: When loading the extension, I get the error: "Unable to load your extension.Layout Rules / Quick create
Hello, is there a way to create a layout rule for quick create option? Regards, KatarzynaIssue with Create Note Button and Popup Form in Leads Module
Hello Zoho Community, I am trying to implement a "Create Note" button in the Leads module with the following functionality: 1. When the button is clicked, a form should pop up with fields to add notes. 2. After filling out the form and clicking Send,Finding draft ticket replies
Is there a way to see all tickets which have draft replies?Guidance on Making Zoho Desk Connections Available for All Data Centers
Hi Team, I’m currently developing an application using Zoho Desk connections to manage OAuth for my third-party products. Could you please advise on the steps required to make it available across all data centers? Looking forward to your thoughts onAble to change project on timelog entries
Ability to move the timesheet entry from one project to another. When a user adds a wrong entry a manager can change/update the timesheet entry to the correct project.Caso de Uso | Menos trámites, más salud: Clínicum optimiza sus recursos con Zoho One
"La automatización del proceso de solicitud de bajas y su trazabilidad a través de Zoho nos ha supuesto una mejora en el ROI." - Carol Rodríguez, Responsable de Experiencia del Cliente interno y externo en Clínicum ¡Hola a todos! Estamos emocionados deHow do I stop getting notified about upgrading to Upgrade now and save big!
How do I stop getting notified about upgrading to Upgrade now and save big! There is no way to clear this notification, and EVERY Day I get alerted to upgrade, but there is no permanent way to dismiss this alert! How can I permanently dismiss this aDouble opt-in notifications and customizable confirmation messages for your webforms
Dear CRM Community, We are excited to announce a major upgrade to our Webforms feature. You can now customize the confirmation message shown to your users who double opt-in from your webform and also customize your confirmation emails when they submitBulk create tasks - Zoho Projects API
Hi Zoho/Community, I am trying to create multiple tasks in a single API call, is there a way we can combine multiple request bodies into one single payload? The issue I am facing is the rate limiting on the API, I wanted to create certain amount of tasksTask Due dates and Reminder Date & Time
I like to have a reminder on many tasks in Zoho Recruit. I find the process cumbersome in that each task requires the following: 1. click and select due date 2. Click the reminder box 3. Click on (Reminder) Start Date 4. Click on (Reminder )Time If oneUnable to Access Admin Console and Email Sending Issues
Hello Zoho Support Team and Community, I hope this post finds you well. I am currently facing two significant issues with Zoho services: Admin Console Access Issue: Every time I try to access the Zoho Admin Console, it gets stuck on the loading screenTracking new lead response time
Hi, I have a team of Sales Development Reps, who have a KPI of responding to a lead within 20 mins or less once it hits the system. I seem to recall that Zoho CRM had the capability to track this in a previous version, but don't see it anywhere. It'sGetting The Following Error.. 550 5.4.6 Unusual sending activity detected
I just launched a marketing campaign and I got this error. Everything was working fine previously. This is a big launch so need to fix it asap. Can anyone help?Printing on 80mm bluetooth Pos Printer
Hello. I am trying to print receipts and invoices using my 80mm bluetooth connectivity Pos printer. I have configured the Templates to Retail so that it matches the paper width of the Pos printer. However, when I click Print in zoho, first it opens theTrying to integrate gmail but google keeps blocking Zoho access for integration??
hi i am trying to integrate a gmail account so can track/access business emails this way. I have followed the instructions but after selecting my email account it gets re-routed to this message (screengrab below) Can anyone advise a way around this orWhich attribute in Zoho books invoice api represent branch attached to the invoice?
Hi Zoho Team, We have done the integration with Zoho Books API. While fetching data from Invoice API we want to get branch value attached to the invoice. We could not figure out which field in "Get an Invoice" api represents branch value attribute. ThanksHow to Billed from two different GST Numbers
How to Billed from two different GST Numbers. Suppose ABC & Co had GST registration in Delhi and Haryana and Zoho account is created with Delhi GST Registration number. Now i also want to issue invoice from Haryana GST Registration number. How can i proceed ?How to hide Predefined views
Hi, I would like to know how to hide: Predefined views and Recent views or some records from this list. If I'm using it form iPad I have to scroll to see User created views. Or maybe it's possibility to move User created views on the top. All the best,Deleting Views
How do you delete views? Please sydFixed Assets
Where would I manage my fixed assetsReport on Assets
Hi, Is it possible to report purchased assets on a specific year? The Balance Sheet shows everything up to the current date, and the expense reports will not show purchased assets because they are assets not expenses. If it is not possible, then is it possible to setup an API connection with Books to extract data from to another Reporting application?Next Page