Kaizen #89 - Color Coding using Client Script

Hello everyone!

Welcome back to another exciting Kaizen post. Today let us see how you can apply color codes to the List and Detail Pages of Zoho CRM using Client Script.

Need for color code in Zoho CRM

When you mark things with different colors as a means of identification, it not only enhances the visual clarity but also enables the user to make efficient prioritization by quickly identifying the key information. This gives a user-friendly interface and will contribute to enhanced productivity.

Here are some common scenarios where color coding proves beneficial.

Enhance data integrity by highlighting discrepancies or errors using color coding.
Quickly identify the orders which are overdue by marking those records in a color, say red.
Recognize closed deals instantly, by making those records green in the List page.
Customize the text colour based on your preference.

Using Client Script, you can achieve color coding in List and Detail pages of Zoho CRM.

Use Case

Consider a scenario where you are using Leads Module of Zoho CRM and you want to color code the rows in the List Page and Detail Page (Standard) based on the "Lead Status" as follows.

If the Lead Status is "Pre-Qualified", then those rows should have the text color as green.
If The Lead Status is "Lost Lead/Junk Lead", then the status should be in red.
If The Lead Status is "Attempted to contact", then the status should be in orange.

In addition to this, the background color of "Pre-Qualified" rows should be light yellow on the List Page. Other values in Lead Status need not have color coding.

For this requirement, you need to create two Client Scripts.

Client Script for color coding in List Page
Client Script for color coding in Detail Page(Standard)

1. Client Script for color coding in List Page

Go to Setup > Developer Space > Client Script. Click +New Script.
Specify the details to create a script and click Next.

Enter the following script in the Client Script IDE and click save.

ZDK.Page.getList().style(

{

record: { backgroundColor: '#e9fbf4' },

field: { Lead_Status: { backgroundColor: '#e9fbf4', foregroundColor: '#008000', fontWeight: 'bold' } }

"((Lead_Status:equals:Pre-Qualified))"

);

ZDK.Page.getList().style(

{

field: { Lead_Status: { foregroundColor: '#ff6666', fontWeight: 'bold' } }

"((Lead_Status:equals:Lost Lead)or(Lead_Status:equals:Junk Lead))"

);

ZDK.Page.getList().style(

{

field: { Lead_Status: { foregroundColor: '#FFA500', fontWeight: 'bold' } }

"((Lead_Status:equals:Attempted to Contact))"

);

Here the style ZDK is used three times, as there are three criteria based on which different color coding has to be accomplished.

Lead Status is "Pre-Qualified" , foreground color is set to green and background color is set to light yellow.
Lead Status is "Lost Lead/Junk Lead" and foreground color is set to red.
Lead Status is "Attempted to Contact" and foreground color is set to orange.

Syntax for ZDK

ZDK.Page.getList().style(

{

record: {backgroundColor: 'color code'},

field: {field_name: {foregroundColor: 'color code', fontWeight: 'bold'}}

"(criteria)"

);

Parameters:

style_config(Object) - style_config to be added to the records
record(Object) - To add record level styling. Supported options - backgroundColor
field(Object) - To add field level styling. Supported options - backgroundColor, fontWeight, foregroundColor
criteria(String) - criteria based on which records should be selected. For more details click here.

Here is how the Client Script works on List Page (Standard).

2. Client Script for color coding in Detail Page

Go to Setup > Developer Space > Client Script. Click +New Script.
Specify the details to create a script and click Next.

Enter the following script in the Client Script IDE and click save.

var field_obj = ZDK.Page.getField('Lead_Status');

if (field_obj.getValue() == 'Pre-Qualified') {

field_obj.addStyle({ foregroundColor: '#008000', borderColor: '#008000'});

}

else if( (field_obj.getValue() == 'Lost Lead') || (field_obj.getValue() == 'Junk Lead') ){

field_obj.addStyle({foregroundColor: '#ff6666', borderColor: '#ff6666'});

}

else if(field_obj.getValue() == 'Attempted to Contact') {

field_obj.addStyle({ foregroundColor: '#FFA500', borderColor: '#FFA500' });

}

In the above code, the value of the lead status is captured and based on this value, different colors are being assigned.

Syntax

field_obj.addStyle({ backgroundColor: 'color code', foregroundColor: 'color code', borderColor: 'color code' });)

Here is how the Client Script works on Detail Page (Standard).

Note:

For color coding in Detail Page (Canvas), you can use the following ZDK.

elementid.addStyle({'background-color': 'red', color: 'white', 'border-radius': '40px'})

We hope you found this post useful. We will meet you next week with another interesting topic!

If you have any questions let us know in the comment section.

Click here for more details on Client Script in Zoho CRM.

Related Links

Client Script Overview

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

Happy Client Scripting!

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

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