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!

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Maadhari M
nick
Athul P
PJ
Sunderjan Siddharth

Sticky Posts
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select