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

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

      Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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

    • Recent Topics

    • How to disable automatic ticket closure emails for specific outgoing communications?

      Is there a way to disable the automatic "Ticket Closed" email notification for specific tickets or outgoing emails? Currently, every time we send an email to a customer, the system automatically sends a "Ticket Created" email, followed by a "Ticket Closed"

    • Sharing View Only Portal

      Im looking at Youtube videos on how to share a view only link to my projects. Everyone has the screen with Manage Users. I don't have it. Is that an old version or new version? I can't see how to send a view only link to clients. There is a Profiles and

    • Unable to export reports despite enabled report export permissions

      Hi Zoho Community, We are unable to export reports in Zoho CRM. When attempting an export, we receive the following error: “Cannot Export Report — You do not have permission to export one or more modules used in this report. Please contact your administrator.”

    • Allow widgets to be placed between native sections in the Ticket Properties panel

      One of our biggest frustrations with the Tickets module is how rigid the Ticket Properties panel is. Every section there is built only from native Zoho Desk fields. We can add sections, rearrange fields, and pick layouts, but we can’t put anything custom

    • What does "Tickets for Review" do?

      What is the purpose of the va nilla view " Tickets for Review?"

    • Zoho Desk training for administrators in EU and US region

      Hello Everyone, Get ready for the certified Virtual Classroom training for our Zoho Desk users in Europe and the US. Our in-house Zoho Desk expert, @Dheeraj | Zoho Desk, will conduct the virtual classroom training. This training focuses on simplifying

    • Set same ticket Threshold for Agent-Level Thresholds

      I am creating Agent-Level Thresholds for agents to auto-assign tickets in a Load-based Round Robin rule. I am unable to set the same number of Open tickets for agents when setting their Thresholds. For exampel: Agent 1 = 10 Agent 2 = 25 Agent 3 = SHOULD

    • Zoho Mail MCP connector

      Issue: Zoho Mail MCP connector (https://mail-organization-930963415.zohomcp.com/mcp/.../message) — OAuth authorization completes successfully in-browser ("Authentication successful"), but the issued token is rejected when the MCP client reconnects to

    • Zoho Books | Product updates | October 2026

      Hello users, October brings a range of new features and enhancements to Zoho Books, designed to simplify compliance, streamline accounting workflows, and improve inventory management. From the launch of the Nigeria Edition and France’s e-invoicing capabilities

    • Multiple criteria in searchRecords

      Hi, is it possible to search with multiple criteria in zoho.crm.searchRecords? I have tried several variations of the following without much success. CustomerRecord = zoho.crm.searchRecords("Contacts", "(First Name|=| lee)" && "(Last Name|=| spencer)"); Thanks. Chris

    • Plans to make "Generate Presentation with Zia AI" available as API endpoint?

      This 'Generate Presentation with Zia' feature has great potential, and we would like to be able to trigger it automatically from a workflow. https://show.zoho.com/home/ziaai/generate Is there already a way to trigger this via API? If not, is there any

    • How to setup noreply@ example.com

      How do I setup noreply@example.com so the mail never gets delivered. I currently have a catchall setup aswell.

    • Pleas unblock E-Mail-Adress service@montana-energie.de / kontakt@montana-energie.de

      Dear Zoho Support, Could you please unblock service@montana-energie.de / kontakt@montana-energie.de which belongs to a regular customer with whom we are having frequent business-related conversations. Thank you very much in advance, Erdem Kar homewise

    • Unable to change alias in the from field on the ZOHO mac app

      I have 1 main mail address, and 3 alias's. on the web mailbox when I create a new email, I can select the alias's from the dropdown in the from field. On the app no dropdown is available.

    • Zmail mobile application

      ho do i remove people from this app

    • My allies email (info@xxxx.com) was been deleted by system, and I can not build the same info allies email now

      Dear Zoho Mail Support Team, I am the super administrator of the Zoho organization 【Organization Name, as shown in Admin Console】. I am writing to report an urgent issue with two of our custom-domain email addresses and to request your help restoring

    • Cannot create mail account

      Hi, i have a problem, i can't create a mail account every time i try the error massage like this Oops! Something went wrong during mailbox creation. Please try again please help

    • Amazon.it always ends up in spam

      Emails from amazon.it always end up in the spam folder, even though I have added the domain and the various individual Amazon addresses for shipping, payments, and other matters to the trusted lists at the user administrator level. What should I che

    • Your Authenticate email domain (SPF, DKIM, DMARC) is bad to say the least

      How about actual instructions rather than vague generalities? There is no way to complete this with what is provided. Please provide specific verifiable steps.

    • Generate a Zoho Sign link

      From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.

    • ChatGPT Plugin / MCP Server auth error

      Hi all I'm trying to connect the ChatGPT plugin for Zoho CRM but after username stage of the auth process, I get this error from the URL https://mcp.zoho.eu/mcp-client/ {"error_description":"Invalid request url, Request is not as per defined in oauth

    • Zeptomail in the blacklists

      Hello, I noticed some hard bounces while sending emails, and upon checking the details, I see that we have been added to the blacklists of certain spam lists: Bounce category: Policy failure Reason: ip-issues Message: 5.7.1 Service unavailable; client

    • Possible to reorder Pipelines position?

      I have multiple Pipelines and want to reorder their positions, so that in the Deals module record for the Pipeline field, I have them ordered in a certain way. Is there a way to reorder the position of the Pipelines without deleting existing Pipelines

    • Categorize Items with Item Headers

      Hello customers, Did you ever want to classify items based on specific categories to help your customers understand your invoice better? With the new Item Header feature, you can easily categorize items in your invoices and estimates and give them a common title.  Item Headers are available in the Invoices, the Recurring Invoices and the Estimates module. It can be carried forward from estimates to invoices at the time of converting the estimates.  To add an item header: Go to the Estimates, Invoices

    • Gettting "You are Offline" Messages all the time

      Al of a sudden, a few days ago, I suddenly began getting a message on the bottom left side of the Mail App saying "You are Offline". Why? Does it mean I'm not getting incoming mails now? why is has started?

    • Zoho CRM Quotes – Subform and PDF/Writer Limitations

      Hello, I am encountering the following limitations in Zoho CRM Quotes: Custom product images cannot be uploaded in the subform – the image upload field cannot be added; only the file upload field is available. File upload placeholders cannot be used in

    • Invoice Only Shipped Items

      Dear Zoho, We are a company that deals with sales orders with 600-1000 lines We need to be able to do partial invoicing based on shipped items Right now when we click convert to invoice we can not only select items that have een shipped It takes hours

    • Alias Email Id already exists

      Hi, I just verified my domain sesque (dot) com and now I am trying to create the admin account using admin (at) sesque (dot) com, but I am getting an error saying "Alias Email Id already exists". I used to have another Zoho account with this email address,

    • Show backordered items on packing slip

      We send out a lot of large orders, and often there are one or two things backordered. How can I fix the packing slips to show quantity ordered  & quantity packed There should also be the ability to "ship" 0 of an item so the receiver knows that things

    • Deleted Module

      I accidentally deleted a module and its fields. Im trying to get it back. Thanks to Youtubers flooding the internet with out of date videos I can't find how to get deleted modules back. The Recycle Bin doesn't have modules. Anyone know how to do thi

    • Set department automatically for incoming calls

      Is it possible, when receiving an incoming call through Zoho Desk (using Twilio integration), for the department to be auto-selected based on the phone line being called? Currently, we have to manually select the department from the dropdown menu when

    • Make better hiring decisions with Compare Applications and Zia Insights (Beta)

      When multiple candidates apply for different job openings, evaluating each application against the right job requirements can take time. Reviewing resumes, candidate details, and interview feedback separately can make it harder to assess role fit and

    • Support Plan: Recuring Issue

      Hi Zoho Team, Could you please look into this recurring alert and provide clarification on why this restriction is still in place? This issue has become a bottleneck in our workflow, significantly limiting our automation capabilities. We are unable to

    • mail sent to gmail goes directly to spam

      Hi TKIM and SPF are configured and verified. E-mails coming from zoho to my personal gmail account are going directly to the spam folder. How can I solve this? I can send you guys the headers privately if you need to.

    • Creating packages according to actual shipping processes

      Hi community. I would like to ask a question to see if there's a better method or workflow for the creation of packages in Zoho Inventory. There is a little confusion in some of Zoho's language relating to the use of term Packing Slip when connected to

    • mail

      We want our tracked links in campaign and journey emails to use our own domain instead of the shared maillist-manage.net domain. We have already created the CNAME links.rexven.com → customer-campaign.zoho.com (DNS only). Does our plan support a custom

    • Zoho Webinar - Sharing System Audio (NOT AVAILABLE)

      Hi, We are having a serious problem with Zoho Webinar. In the webinars we run, we very often share the audio from a video we are streaming directly from YouTube or other applications. Until recently we were using Zoom, but as we use other Zoho applications

    • Ad-hoc approvals are now available in CRM approval processes

      Released for all DCs. Hello everyone, We've introduced ad-hoc approvals in CRM approval processes. This enhancement lets approvers add additional approvers when needed, without changing the configured approval workflow. How the approval process works

    • Introducing PRM: Build, manage, and scale your partner ecosystem

      Growing a partner ecosystem is a good problem to have. What starts as a handful of partners can quickly turn into a maze of spreadsheets, emails, and disconnected processes. More partners mean more opportunities, greater reach, and new ways to grow

    • Data Subject Requests in Zoho Mail: Retrieve and export email data for legal and compliance needs

      Organizations are often required to retrieve specific email communication data in response to legal investigations or compliance audits. The Data Subject Requests (DSR) feature in the Zoho Mail Admin Console allows administrators to search for all email

    • Next Page