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

    • Zoho calendar not working in browser

      Hello, I am new to Zoho. I have two accounts for two separate businesses. In one of them, calendar loads in a browser no problem. However, if I use this account (sairfeetmusic.co.uk) calendar does not load. I also cannot add it to my Thunderbird Lightening

    • Paid Support Plans with Automated Billing

      We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

    • Authentication Failure when adding POP3 accounts

      Hi everyone, I am a new user currently migrating from Gmail to Zoho Mail. I decided to make the switch following Google's decision to discontinue POP3 fetching. I previously used Gmail as my primary mail hub, and Zoho seems like the perfect alternative

    • Using Zoho answer bot across departments (help center articles from another department)

      Hi Zoho Community, I’ve run into a major issue and hope someone here has experience with this setup. We currently have a Help Center in the department A where all of our knowledge base articles are maintained. However, we would like to use a Zoho Answer

    • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

      Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

    • Trident Application Folder

      Hi, How to choose installation folder for Trident, by default it gets installed in C drive. How to change drive?

    • How exactly does "Reply assistance" work in Zoho Desk? What context is sent to the LLM?

      Hi, Im trying to better understand the technical behavior of the feature "Reply assistance" in Zoho Desk, and I couldn’t find detailed information in the current documentation. Specifically, I have questions about what data is actually being sent to the

    • Email disappeared to specific contact

      Good afternoon, this morning I emailed somebody. This email isn’t showing up in my sent folder. They sent me a response which I clicked on and it disappeared immediately. Why could this be?

    • Deletion Workflows

      Hello, Unless I missed it, we can't create deletion workflows. My usecase is to auto-delete junk leads. We have field called lead status, and an agent qualify all our new leads. When it's a junk lead she chose the correspondant value in the picklist. My goal is that the system delete them automatically. Is that possible? Planed ?

    • How Do Mutliple Sales People Prospect in the "LEADS" module without calling the same leads?

      We have 4 sales reps and the Leads module does not have real time intuitive knowlodge to make the sales rteps dont call the same people at the same time. How can we crate a fluent prospecting sytem where the salres reps can go out bound without calling

    • Zoho Desk Partners with Microsoft's M365 Copilot for seamless customer service experiences

      Hello Zoho Desk users, We are happy to announce that Zoho Desk has partnered with Microsoft's M365 to empower customer service teams with enhanced capabilities and seamless experiences for agents. Microsoft announced their partnership during their keynote

    • How to Invoice Based on Timesheet Hours Logged on a Zoho FSM Work Order

      Hi everyone, We’re working on optimizing our invoicing process in Zoho FSM, and we’ve run into a bit of a roadblock. Here’s our goal: We want to invoice based on the actual number of hours logged by our technicians on a job, specifically using the timesheets

    • Create an Eye-Catching Announcement Widget for Your Help Center

      Hello Everyone! In this week’s edition, let’s explore how to keep your customers updated with exciting news in the Help Center. See how ZylkerMobile wowed their customers by bringing updates right to their portal. ZylkerMobile, the renowned brand for

    • Enable Free External Collaboration on Notecards in Zoho Notebook

      Hi Zoho Notebook Team, I would like to suggest a feature enhancement regarding external collaboration in Zoho Notebook. Currently, we can share notes with external users, and they are able to view the content without any issue. However, when these external

    • Updating records through Zoho Sheets View doesn't update timeline or trigger workflow rules

      I have noticed that when i update a series of record with the zoho sheets view (see here http://d.pr/i/ahnR) it doesn't update timeline history or trigger workflow rules. I am using it in the Deals module. Looking forward for some more info. Denis

    • How do I change the account bank charges are charged to?

      I want bank charges charged to my Credit Card Fees account. Is there a way to do this?

    • ZOHO.CRM.UI.Record.open not working properly

      I have a Zoho CRM Widget and in it I have a block where it will open the blocks Meeting like below block.addEventListener("click", () => { ZOHO.CRM.UI.Record.open({ Entity: "Events", RecordID: meeting.id }).catch(err => { console.error("Open record failed:",

    • Mail Search should allow grouping by conversation like Gmail.

      Having switched from gmail I have found the search function hard to use. Mostly because mail is not grouped by conversation in search. If I search for a word when looking for a conversation had with someone then sometimes 10 emails will come up from the

    • Ability to CC on a mass email

      Ability to CC someone on a mass email.

    • Updation of Old Browsers Versions for Zoho CRM

      We have upgraded the default browser version for CRM to facilitate features like widgets and scripts that are often implemented aside from advanced functionalities for various business requirements. The latest version is aimed to provide better performance

    • Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP

      While working with customers across different industries, we have identified a few functional questions and gaps that commonly arise—especially for project-based and service-oriented businesses. Many organizations, such as those in shipping, construction,

    • Doubt about maximum email reach

      Good morning, greetings. This is Bramdon García from EDULABS S.A.S ESP, located in Colombia. I'm writing to inquire about the possibility of sending an email to 35,000 people simultaneously. Our company has a Zoho account, but we'd like to know if there's

    • Zoho Desk domain Mapping not Working Showing CNAME Error

      I have created the subdomain and created the Cname as well as its instracted on the Zoho website  but when i try add the domain on help desk its showing error msg : Make sure you've mapped the CNAME entry and linked it to desk.cs.zohohost.com.au on your

    • Founders using Zoho — are you leveraging Zoho Campaigns + Zoho Social for thought leadership… or just sending emails?

      I’ve noticed something interesting in the Zoho ecosystem. Many founders use Zoho Campaigns and Zoho Social for basic marketing—newsletters, scheduled posts, and announcements. But very few are using these tools strategically to: • Position themselves

    • I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation only for item type goods ,

      I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation . Stock Check Validation only for item type goods , not for item type service . For the

    • IMAP stopped working after enabling 2 factor authentication

      IMAP stopped working after enabling 2 factor authentication. Is there any solution for this?

    • Rename Service Report

      Some of our customers are requesting the name of the service report PDF to be in a specific format, for example, instead of REP-001.PDF some are requesting to include their name like customername.pdf. is that possible?

    • Approvals in Zoho Creator

      Hi, This is Surya, in one of  my creator application I have a form called job posting, and I created an approval process for that form. When a user submits that form the record directly adding to that form's report, even it is in the review for approval.

    • Outgoing emails rejected due to SpamCop RBL listing (IP 136.143.188.12)

      Hi All, I am writing to report a deliverability issue affecting outgoing emails from my Zoho Mail account. Recently, several messages sent from my domain (example.com) to external recipients have been rejected with the following error message (redacted

    • Introducing Workqueue: your all-in-one view to manage daily work

      Hello all, We’re excited to introduce a major productivity boost to your CRM experience: Workqueue, a dynamic, all-in-one workspace that brings every important sales activity, approval, and follow-up right to your fingertips. What is Workqueue? Sales

    • Inclusion is the new engagement

      When in a very challenging situation, you may have peers or friends around you saying, “Everything will be okay.” They speak to you in a way that they are connected or in a language or tone that feels close. But your inner voice comes to you in a truly

    • What's new in Zoho Sheet: Simplify data entry and collaboration

      Hello, Zoho Sheet community! Last year, our team was focused on research and development so we could deliver updates that enhance your spreadsheet experience. This year, we’re excited to deliver those enhancements—but we'll be rolling them out incrementally

    • Windows Desktop App - request to add minimization/startup options

      Support Team, Can you submit the following request to your development team? Here is what would be optimal in my opinion from UX perspective: 1) In the "Application Menu", add a menu item to Exit the app, as well as an alt-key shortcut for these menus

    • Share Record Ownership in Zoho Recruit

      We’re introducing User Fields in Zoho Recruit designed to make collaboration easier when multiple team members need to work on the same record. With User Fields, you can extend record ownership beyond a single user and enable smoother teamwork across

    • Recherche d'un développeur

      Bonjour, j'ai un projet de SAAS sur une base de zoho créator et zoho CRM et je recherche un développeur qualifié français pour créer l'application créator (fonctionnel et graphique) et les workflow et blueprint de CRM

    • Display actual mileage on an invoice

      My users are creating expenses in Zoho expense. For example, they expense 10 miles and get paid 7 dollars (10 miles * IRS rate of .70). If I look at the expenses in Zoho Books, it does show them at 10 miles at .70 cent When I add these expense to an invoice

    • Customer Parent Account or Sub-Customer Account

      Some of clients as they have 50 to 300 branches, they required separate account statement with outlet name and number; which means we have to open new account for each branch individually. However, the main issue is that, when they make a payment, they

    • Cloning a Pick List

      I have an existing Pick List in my Contacts that I want to drop into my Leads.  Is there a way to copy or clone the field with it's accompanying Pick List?  Thanks for your time.

    • How do I link my invoice to an estimate?

      There has been instances where I have created estimates, however, invoices for the same estimate were created independently. The status of these estimates hasn't converted to 'invoiced'. 

    • I wish to upload 40000 Resumes in Zoho Recruit Database. Can I do this in batch of 1000 Resumes ?

      I would like to upload thousand or few hundred of resumes in Zoho Recruit in one go. Please let me know how can I do this Or migrate my 40000 resumes from previous ATS to Zoho Recruit.

    • Next Page