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 #198: Using Client Script for Custom Validation in Blueprint

        Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

      • Kaizen #226: Using ZRC in Client Script

        Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

      • 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

        • Recent Topics

        • Remove the “One Migration Per User” Limitation in Zoho WorkDrive

          Hi Zoho WorkDrive Team, Hope you are doing well. We would like to raise a critical feature request regarding the Google Drive → Zoho WorkDrive migration process. Current Limitation: Zoho WorkDrive currently enforces a hard limitation: A Zoho WorkDrive

        • Enrich your contact and company details automatically using the Data Enrichment topping

          Greetings, I hope you're all doing well. We're happy to announce the latest topping we've added to Bigin: The Data Enrichment topping, powered by WebAmigo. This topping helps you automatically enhance your contact and company records in Bigin. By leveraging

        • Important Update: Google Ads & YouTube Ads API Migration

          To maintain platform performance and align with Google's newest requirements, we are updating the Google Ads and YouTube Ads integrations by migrating from API v19 to the newer v22, before the official deprecation of v19 on February 11, 2026. Reference:

        • Enhancements for Currencies in Zoho CRM: Automatic exchange rate updates, options to update record exchange rates, and more

          The multi-currency feature helps you track currencies region-wise. This can apply to Sales, CTC, or any other currency-related data. You can record amounts in a customer’s local currency, while the CRM automatically converts them to your home currency

        • validation rules doesn't work in Blueprint when it is validated using function?

          I have tried to create a validation rule in the deal module. it works if I try to create a deal manually or if I try to update the empty field inside a deal. but when I try to update the field via the blueprint mandatory field, it seems the validation

        • Kaizen #228 - Process Large-Scale Migrated Data Using Catalyst Solutions

          Howdy, tech wizards! This week’s Kaizen explores how Catalyst Solutions in the Zoho CRM Developer Hub help import large volumes of data into Zoho CRM while improving data quality and simplifying the migration process. Why Catalyst Solutions? Catalyst

        • Zoho Signatures Missing

          In the past after collecting signatures from two different PDFs I would merge them by calling an api and the signatures would appear in the combined PDF. Recently the signatures have disappeared whenever I combine the PDFs together. Why did this randomly

        • Getting Subform Fields to Display Top to Bottom

          I have a form where the fields are all in one column. I want to insert a subform where the fields are stacked in one column as well. I have built both the form and subform but the subform displays the fields from left to right instead of a stacked column. This will cause a problem displaying the subform correctly on mobile apps. How can I do this please?' Here is my form with subform now. As you can see the subform "Follow Up Activity" is displaying the fields left to right. I need them to go top

        • Zoho Expense Import Reports Won't Work Because Default Accounts Already Exist

          Im trying to import reports from another Zoho expense account to mine and im getting errors that won't allow the import to happen The account name that you've entered 'Ground Transportation' already exists. Enter another name for the account and try again.z

        • Inactive License for free account.

          I recently upgraded my Cliq subscription not my team (on the free version), are unable to login to their accounts. The error message received is Inactive License Looks like you have not been covered under the current free plan of users. Please contact

        • 2026 Product Roadmap and Upcoming Features

          This is your guide to what is coming in Zoho Vertical Studio throughout 2026. We’ll update this post throughout the year as items move from development to release, and as and when new initiatives are added. Once a feature is released, it will be reflected

        • Syncing zoho books into zoho crm

          I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? Thanks

        • Release Notes | January 2026

          We have rolled out a set of powerful new enhancements across Zoho Vertical Studio that bring several long-awaited capabilities to your applications. These updates focus on deeper customization, smarter automation, better reporting, and improved usability

        • Live Chat for user

          Hi everyone, I’m new to Zoho Creator and wanted to ask if it’s possible to add a live chat option for all logged-in portal users so they can chat internally. I’m trying to create a customer portal similar to a service desk, but for vehicle breakdowns,

        • Power up your Kiosk Studio with Real-Time Data Capture, Client Scripts & More!

          Hello Everyone, We’re thrilled to announce a powerful set of enhancements to Kiosk Studio in Zoho CRM. These new updates give you more flexibility, faster record handling, and real-time data capture, making your Kiosk flows smarter and more efficient

        • Announcing new features in Trident for Mac (1.34.0)

          Hello everyone! We’re excited to introduce the latest updates to Trident, which are designed to take workplace communication to the next level. Let’s take a quick look at what’s new. Connect with customers using Zoho Voice integration. You can now easily

        • Massive Zoho Books failure

          We have not received any communication or notification from Zoho, but we have detected that Zoho Books is not working for all our users. We cannot access or use Zoho Books. This is critical. We are trying to contact Zoho on the Spain telephone number,

        • The Social Wall: January 2026

          Hello everyone, We’re back with the first edition of The Social Wall of 2026. There’s a lot planned for the year ahead, and we’re starting with a few useful features and improvements released in January to help you get started. Create a GBP in Social

        • How to block whole domain?

          I am getting at least 50-75sometimes over 100 spams emails a day. I see a lot of the spam is coming from .eu domains. I would like to block /reject all email coming for the .eu domain. I do not have any need for email from .EU domains. Why won't the BlackList

        • How Zoho Contracts Makes Negotiations Clear, Secure, and Transparent

          Negotiation is one of the most critical—and often most chaotic—stages of the contract lifecycle. Multiple stakeholders review the same document, propose changes, debate terms, and exchange feedback. Without the right tools, this collaborative process

        • Error: Invalid Element tax_override_preference

          In both Books and Inventory, we're getting the following error whenever we try to enter any Bill: I think this is a bug. Even cloning an old bill (that obviously was entered just fine), this error occurs.

        • Assign Income to Project Without Invoice

          Hello, Fairly new user here so apologies if there is a really obvious solution here that I am just missing... I have hundreds of small deposits into a bank account that I want to assign to a project but do not want to have to create an invoice every time

        • How to Print the Data Model Zoho CRM

          I have created the data model in Zoho CRM and I want the ability to Print this. How do we do this please? I want the diagram exported to a PDF. There doesnt appear to be an option to do this. Thanks Andrew

        • Please, make writer into a content creation tool

          I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than

        • our customers have difficult to understand the Statements

          our costumers have big problems to understand Zohos Statements. we need a text box after the payment number to explain what the payments are for. Is it possible to develop a version of the Statement with that kind of box and if so whu can do it

        • How to track a list of ALL the items that ONE customer bought?

          Hello, I am interested in getting a list of all the items that only ONE of my customers bought, and the invoices are what show up instead. It's very tedious to go through every single invoice when we sell a lot of items to this customer. Surely there

        • Exchange Rate Updates

          Hi, It would be great that when you work with multiple currencies, the exchange rate updates automagically every day (as seen on Zoho Books) or at least that when you create/update an opportunity the exchange rate could be manually updated, or maybe both!

        • Locked Out of Super Admin Account

          I'm locked out of my Super Admin account and the external e-mail is no longer associated with it. There seems to be a problem during set up, the system ought to ask to assign a new password instead of using Google accounts. Please help me get back access.

        • Emails are going to notification folder and not in inbox

          emails are going to notification folder and not into inbox

        • 550 5.4.6 Unusual sending activity detected. Please try after sometime

          Hi, I am receiving this error message when trying to send my emails. The only reason I can think why this is happening is my previous two emails were bounced back to me due to a non working mailbox error. I have followed the online links for unblocking

        • Projects Home Customization

          Hello! We've been in Zoho One since July of last year, and my team has started providing feedback on what they'd like to do. Their latest wish is that they could have more control over the Projects Home content. For example, they want a card that shows

        • IMAP search support

          Does Zoho Mail support IMAP search? https://www.rfc-editor.org/rfc/rfc9051.html#name-search-command TEXT <string> Messages that contain the specified string in the header (including MIME header fields) or body of the message. Servers are allowed to implement

        • Performance is degrading

          We have used Mail and Cliq for about three years now. I used to use both on the browser. Both have, over the past 6 months, had a severe degradation in performance. I switched to desktop email, which appeared to improve things somewhat, although initial

        • Cannot reorder fields in Page Layout in Expenses and Purchase Requests

          It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order the

        • bouncing emails

          My recurring invoices have bounced back

        • Probable Scam / Phising attempt from email pretending to be Zoho

          I think this is a scam email right? It says "zohCworkplace.com". I'm on the Mail Free plan The link in the CTA button seems to go to a redirect. Just wanted to bring it up to the security team.

        • Email Address Search in "To" Field Search is broken, Zoho refuses to fix it

          Typing a part of the email address string other than the beginning of the string does NOT work, I kindly urge Zoho to fix this. Let's say you remember writing an email so someone called "smith" from company "corp.com", but can't remember their first name,

        • Emails not being received by @hotmail.com, @outlook.com and a few others

          When I try to send emails from zoho mail to people with email addresses ending @outlook.com and @hotmail.com (and a few others), I get a 'delayed' automatic email and then a few hours later, an 'undelivered' automatic email. This has started a few months

        • scroll bar for far left of screen

          I am unable to even see the scroll bar to the right of "inbox" etc on the left; it is stuck at "streams" and I can't get to inbox or anything else. It would help if it could be made a lighter color as the black or dark grey can't bee seen.

        • OUt of office every friday

          Hi, I tryed to configure my out of office, because i'm not working or emailing on fridays. But when i select only friday as unavailable day, the out of office still sets for the whole week. What am I doing wrong?

        • Next Page