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!

Access your files securely from anywhere

Zoho Developer Community

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
Serge Piskarev

Sticky Posts
Kaizen#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 provide
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! Commands
Extension 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 API
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
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