Kaizen #89 - Color Coding using Client Script

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.




 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.
  1. Lead Status is "Pre-Qualified" , foreground color is set to green and background color is set to light yellow.
  2. Lead Status is "Lost Lead/Junk Lead" and foreground color is set to red.
  3. 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.

 
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.

Happy Client Scripting!

    • Sticky Posts

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • 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.

    • Recent Topics

    • Best Practice for Penny Rounding & FX Adjustments in Zoho Books

      Hi everyone, I’m just looking for some clarity on the correct way to handle very small rounding differences in Zoho Books when dealing with foreign-currency payments. What I’m currently doing: • I enter the supplier bill exactly as shown. • When paying

    • Is there a problem with sharing workdrive files with links since last night?

      As per title, we can't access folders/files through share links since last night. I created ticket but we need quick solution and didn't hear back from the support yet. The files are still accessible by the main account but all zoho files that we are

    • Enable Screen Recording in Zoho WorkDrive Mobile Apps (Android & iOS)

      Hi Zoho WorkDrive Team, How are you? We are enthusiastic Zoho One users and rely heavily on Zoho WorkDrive for internal collaboration and content sharing. The screen-recording feature in the WorkDrive web app (similar to Loom) is extremely useful- however,

    • Production Management Tool (MRP / BOM)

      Hi Guys, is there any recommended App available that works with zoho and covers the needed applications for a production? What we need is a system that covers the BOM (bill of materials), MRP (material ressources planning), MRP II (manufacturing ressources

    • Bug in Zoho Cliq Signup Flow – "%s" Placeholder Visible Instead of Product Name

      Hi Zoho Team, I would like to report a UI bug in the Zoho Cliq signup/enable flow. During the step where Cliq asks to enable the product for the company, the following text appears: Great! Your company is already available in Zoho, so you just have to

    • Exporting tickets

      I went to Setup -> Organization -> Import/Export in order to export tickets but found 2 issues: 1. The email body never gets exported. 2. There are some large numbers (like 5.57E+16) under certain columns of the exported CSV file. I could not find any export options. Please can you help with this?

    • Copy field information to clipboard

      I need to be able to transfer some field information in to the clipboard, so that I can then paste it in to our helpdesk system. Is there a way I could add a button to a detail report that does this?

    • Issuing reconciling a bank statement

      HELP! I'm trying to reconcile a bank statement. The prior month reconciled perfectly. Beginning balance is correct yet I'm off by the same amount each time. Both myself and my office manager, separately and together, have tried to complete this reconciliation

    • Detect and ignore bots in visitors

      The SalesIQ visitor numbers are basically useless to us because there is no bot detection. We get the same bots coming in from the same countries looking at the same pages every day. It can't be that difficult to tell the difference between an actual

    • Add Real-Time Microphone Audio-Level Indicator During Screen Recording

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement to the Zoho WorkDrive screen-recording experience. Current Limitation: During a recording session, there is no visual indication that the microphone is

    • Zero Personalization of the File Sharing Experience

      By now (2025) this is the maximum level of personalization available for a Zoho sharing link. We gently asked Zoho if we could modify at least the background, and they replied that it cannot be customized. We're truly disappointed – and surprised every

    • Request for Solution to Reverse $500,000+ FY2024 Inventory/COGS Discrepancy in Zoho

      Dear Zoho Support Team, I hope you are doing well. We are contacting you regarding a significant discrepancy in our financial data within Zoho Books/Inventory, and we urgently need your guidance on how to correct and reverse these issues. After reviewing

    • Adding bank details to the contact through API

      How to add bank-related information to the contact while creating it using API? The account number needs to be encrypted before sending it through API but not sure how to encrypt and get those values. Please guide me in this.

    • Two factor authentication for helpdesk users

      The company i work for wants use the helpdesk site in Zoho desk, as a place for their distribution partners to ask question and look for information about our product. The things there is suppose to go up there is somewhat confidential between my company

    • Kiosk can't merge picklist or multiselect

      There is no ability to load a multiselect or picklikst field into a kiosk with the values that have been previously selected. So, I essentially have 3 unacceptable options: 1.)Load the value into a text string and include instructions like this: "Picklist

    • AGE field from DATE OF BIRTH Field.

      HI! I have a field called date of birth in my CRM (LEADS, CONTACT etc…)     How can I know the AGE today   I would like to create a field AGE. I now how to create a field but I don´t which calculation (CUSTOM FUCTION) to make ¿ANY HELP?

    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

    • Announcing new features in Trident for Windows (v.1.34.4.0)

      Hello Community! Trident for Windows just got better! With this update we have features that make your daily work easier and more efficient. We've added some features that are exclusive to our app and we're sure you'll find them useful. Let’s dive into

    • Report Hover Setting

      Would be great if we will able to show information to the user while hovering a record in a report.

    • Vertical images displayed as horizontal

      Some pictures that originally are in vertical position are displayed in horizontal after the upload. It seems that system rotates them by 90 degrees. How can I fix this issue?

    • Zoho Desk iOS app update: Saved filters and sort options

      Hello everyone! Saved filters created on the web(desk.zoho.com) for tickets are now accessible on the Zoho Desk iOS app. You can easily rename, delete, or clear filters on the go. We have also introduced Sort options on the ticket listing screen, allowing

    • Big Things Just Dropped in the SalesIQ Universe: Top Upgrades You’ll Love in Nova’25

      Nova'25 has landed, and it’s packed with meaningful upgrades to help you engage smarter, work faster, and scale with ease. Whether you're into proactive messaging, smarter automation, or better admin control, there's something here for everyone. Here's

    • Time Entries in Analytics

      I am trying to import a zoho sheet into zoho analytics. In my sheets one of the columns has "time Entries" in this "format HH:MM am/pm" example 11:00 PM. After import, i noticed that analytics converted the time to "00 Jan 1900 23:00:00".. how do i maintain

    • Amazon invoice in Zoho Books

      I have just made my first few sales on Amazon India. Amazon Seller account generates invoices for the sales made on Amazon. These invoices are sent to customers also. Now when I was only making offline sales, I used to create Invoices in Zoho Book. Now

    • Zoho Creator Upcoming Updates - November 2025

      Hello everyone, Welcome to your monthly roundup of new features and enhancements! We hope you've already taken a look at Release Projection 2—it details the features coming your way for the rest of the year. And this month, we're excited to start rolling

    • Zoho Webinar + HubSpot : Simplifiez la gestion de vos données de webinaires

      Les webinaires sont aujourd’hui essentiels pour interagir avec vos prospects et vos clients. Cependant, la gestion des données entre plusieurs plateformes peut vite devenir complexe. Grâce à la nouvelle intégration entre Zoho Webinar et HubSpot, vos outils

    • I am trying to give access to one of our educators access to 3 forms in Zoho and she is not able to view the data - Access issue

      Hi Team, When I try to provide read access to one of our educators on Zoho for Pre-training , post training and Impact survey forms submit form access which also allows them to read , it does not show them data

    • How to book GST paid in zoho books

      hi, i am a new user to Zoho books and not able to book GST paid in books, kindly suggest how i can book it in books. thanks, siddharth

    • PUNJAB NATIONAL BANK (CORPORATE) INDIA - NOT AVAILABLE IN BANKING

      Dear sir, Kindly fix it. PUNJAB NATIONAL BANK (INDIA) is available but PUNJAB NATIONAL BANK (CORPORATE) is not available. Kindly enable this banking since we need to categorize the entries. Regards, Sanjay Jena email id/ user id : travewithmerchant@

    • Is it possible to create a word cloud chart in ZoHo Analystics?

      Hi there, I have a volume of transaction text that I would like to analyse using word cloud (or other approcah to detect and present word frequency in a dataset). For example, I have 50,000 records describing menu items in restaurants. I want to be able

    • Unable to Delete Items – No Visible Transactions but Error “Items which are a part of other transactions cannot be deleted…”

      Hello Community, We are using Zoho Inventory for our business and encountered a persistent issue that is preventing us from deleting certain items. The message shown is: “Items which are a part of other transactions cannot be deleted. Instead, mark them

    • 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

    • Facturation électronique 2026 - obligation dès le 1er septembre 2026

      Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,

    • Your bot just got smarter: AI-Powered routing that reads between the lines

      What if your bot could tell the difference? Between a visitor who just needs a quick answer, someone actively comparing options, and a frustrated customer one click away from leaving? Most bots can't. They deliver the same response to everyone, missing

    • Weekly Tips : Master Keyboard Shortcuts in Zoho Mail

      If you spend a lot of time managing emails, switching between your mouse and keyboard can slow you down. Whether you are replying to clients, organizing your inbox, or searching for messages, every second counts. So, how can you streamline your email

    • Introducing custom lookup fields in the Tickets, Contacts, and Accounts modules

      Hello all, We are excited to announce a new enhancement that will empower you to further customize the Tickets, Contacts, and Accounts modules. Now, you will be able to create custom lookup fields in your Tickets, Contacts, and Accounts layouts for more

    • DKIM cannot be enabled for the domain as no verified default selector present

      Can't get the DKIM working. May you please check my account (nksy.us) to see what's wrong?

    • Collections Management: #3 Tackling Payment Failures

      Sam refreshed the dashboard. "Payment failed". Same customer. Same subscription. This is happening for the third time. He sends a usual email: "Your renewal payment failed again. Could you please check and retry?" A couple of days passed, and there was

    • How do I increase the email attachment size in Zoho CRM ?

      It looks like I'm limited to 10MB when sending an attachment using the email widget on a record in Zoho CRM. Is there a way to increase the size? Or can I use some other tool? From what I'm reading online, I'm maxed out at 10MB. Any insight would be greatly

    • Problem : Auto redirect from zoho flow to zoho creator

      Hi there, I've been waiting for zoho team to get back on this for last couple of days. Anyone else have the problem to access zoho flow? everytime I click on zoho flow it redirects me to zoho creator. I tried incognito mode but it still direct me to zoho

    • Next Page