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

    • How to create estimates/Invoices with sub-totals

      Every other accounting package can create estimates and invoices with Sub-totals. How can I do that in ZohoBooks?

    • 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

    • Discount on the transaction level in POS

      "Is it possible to apply a discount on the total bill before tax in Zoho POS?" I want to apply a discount on the total transaction amount in Zoho POS, but the discount should be calculated before the taxes are applied. Is there an option to do this in

    • Create Tasklist with Tasklist Template using API v3

      In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way to

    • Send Automated WhatsApp Messages and Leverage the Improved WhatsApp Templates

      Greetings, I hope all of you are doing well. We're excited to announce a major upgrade to Bigin's WhatsApp integration that brings more flexibility, interactivity, and automation to your customer messaging. WhatsApp message automation You can now use

    • Jobs at multiple locations

      Hi A lot of times we have same job open at multiple locations. So I would like an option where we can create a job and choose multiple locations. Currently we have to create individual jobs for each location. If we can create one job and mention multiple

    • From Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View

      Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world with

    • Tag Adding Option in Kanban Card Customization Bigin CRM Mobile App

      I would like to request an option to add and display tags on Kanban cards in the Bigin CRM mobile app. This feature would make it easier to categorize deals and quickly identify priorities while working on the go.

    • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

      Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals

    • Associating a Candidate to a Job Listing

      Hello, I am trying to use Zoho Forms embedded on my website for candidates to apply for a job opening. I want the form then to tie directly with zoho recruit and have the candidate be automatically inputed into Recruit as well as associated with the specific

    • WhatsApp Voice Message Sending Option in Bigin CRM

      I would like to request a feature that allows users to send WhatsApp voice messages directly from Bigin CRM. This would help improve communication efficiency and make it easier for teams to respond quickly to customer inquiries.

    • CRM: hosting a single html file in Zoho and displaying it as a widget

      I have seen that CRM offers the option of uploading a web project to Zoho itself and displaying it as a widget in CRM. The instructions then talk about setting a development environment with Node and developing an application to upload to Zoho. But I

    • How to change position button transtition of Blueprint?

      Hi Everyone, Look at my screenshoot, it is possible move the reject button to the right? I couldn't find that setting in the blueprint. Thank you.

    • Multi file upload

      Hi, I just wonder if one could upload multiple files in one shot, say between one and three files, without adding multiple File Upload fields? Thanks, Alalbany

    • Sorting Descending in a lookup

      I have a case number lookup on multiple forms. I need the most recent added to appear at the top of the lookup or as the list of cases grom it's too much to scroll. Is there a way to have a look up sort descending?

    • Auto-upload Creator Files to WorkDrive

      Hi everyone, I’m working on a workflow that uploads files from Zoho Creator to specific subfolders in Zoho WorkDrive, as illustrated in the attached diagram. My Creator application form has two multi-file upload fields, and I want—on successful form submission—to

    • Asap Widget 2.0

      Where's the documentation for the new ASAP widget? https://www.zoho.com/desk/developers/asap/#introduction this one is outdated How can we dynamically navigate between different views? How can we prefill ticket forms using ASAP 2.0?

    • Can the Trigger be changed?

      I'm afraid I already know the answer, but here goes... After activating a workflow (under Campaigns > Automations), Then later choosing to Edit the workflow, Can the Workflow's Trigger be changed? Currently the entire Trigger section + options are gone

    • Marketer's Space: Proven tips to improve open rates – Part I

      Hello Marketers! Welcome back to another post in Marketer's Space! In this week's post, we'll discuss the ever-important concept of open rates. This will be a multi-part series, as we have a range of topics to cover. Open rates—which measure the percentage

    • Can't send nor receive emails on my external email accounts since this morning

      Greetings, I have two external accounts integrated into Zoho mail through POP3 + SMTP. These accounts have always worked normally since the day I've set them up. Starting 10:30 AM this morning (Western European Time) both suddenly stopped sending and

    • Creating Custom PDF Template from Form

      I am trying to create a custom PDF from form submissions. I have the standard subscription and it indicates that PDF forms are included. I cannot find anywhere to create PDF forms. I try to follow the instructions from here: https://help.zoho.com/portal/en/kb/forms/form-settings/pdf-settings/pdf-editor/articles/creating-your-own-pdf-template#Creating_your_template_from_the_scratch

    • Cannot connect to imap.zoho.eu on iOS26

      Hey, I recently migrated to another iPhone and since then use iOS26. Every since then, I was not able to connect to "imap.zoho.eu" from Apple Mail. I tried deleting the account and adding it again, did not work. I tried creating an app password, didn't

    • Important Update: Facebook Metrics Deprecation & Impact on Zoho Analytics

      Dear Zoho Analytics users, Facebook has deprecated a set of metrics from the Facebook Pages Insights API, effective November 15, 2025. As a result, these changes will affect any reports and dashboards in Zoho Analytics that rely on Facebook Pages data.

    • Quick Copy Column Name

      Please add the ability to quickly copy the name of a column in a Table or Query View. When you right-click the column there should be an option to copy the name, or if you left-click the column and use the Ctrl+C keyboard shortcut it should copy the

    • Conditional Field Visibility in Bigin CRM

      I would like to request support for conditional field visibility within Bigin CRM. This feature should allow administrators to configure show/hide rules for fields based on predefined criteria (e.g., field values, picklist selections, stage changes,

    • Introducing Zoho MCP for Bigin

      Hello Biginners! We're excited to introduce Zoho MCP for Bigin, a completely new way of interacting with Bigin data using AI. With Zoho MCP, you can securely connect your Bigin account with popular AI agents like Claude, Cursor, Windsurf, and VS Code,

    • MCP > Creator connection failing with Claude

      I'm trying to get claude to access any of my Zoho Creator apps and it keeps failing. I have enabled all tools for creator and ensured in claude settings that everything is authorised. Here is what claude says : Unfortunately, the error messages I'm receiving

    • Is it possible to sync data every 5–10 minutes in Zoho Analytics (CRM or Excel imports)?

      Hello Team, I want to know if Zoho Analytics supports near real-time syncing of data from different sources. My requirements: I am importing data from Zoho CRM → Zoho Analytics I also have some datasets maintained in Excel/CSV I want both data sources

    • Feature Request: Dynamic Dimension Control for zc_LoadIn Popups

      As detailed in this community discussion, Zoho Creator's zc_LoadIn parameter is a vital tool for opening components (forms, reports, or pages) in modal dialogs via HTML snippets, Notes, or Rich Text Fields. While powerful, this feature suffers from a

    • Subforms in stateless forms

      I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. Basically

    • Text wrap column headers in reports?

      Is it possible to auto wrap column headers so that a longer multi-word header displays as two lines when the column is narrower than the width of the header title?

    • Request to Permanently Delete Email User (info@mehboobgulf.com ) from Old Organization

      “Please permanently delete the user email info@mehboobgulf.com It is still associated with my old Zoho organization. I cannot delete it because it shows ‘You cannot delete email. Zoho host’. I need to use this email in a new Zoho account.” I shell very

    • Request to Permanently Delete Email User (info@mehbobgulf.com ) from Old Organization

      Please permanently delete the user email info@mehbobgulf.com It is still associated with my old Zoho organization. I cannot delete it because it shows ‘You cannot delete email. Zoho host’. I need to use this email in a new Zoho account.”

    • What’s New in Zoho Inventory — Latest Features, Integrations & Updates | December 2025

      Zoho Inventory has evolved significantly over the past months, bringing you smarter, faster, and more connected tools to streamline your operations. Whether you’re managing multichannel sales, complex fulfillment workflows, or fast-moving stock, our newest

    • Marketer’s Space - Multi-Channel Campaigns for the Biggest Shopping Week with Zoho Marketing Automation

      Hello marketers, Welcome back to another post in Marketers Space! The biggest shopping week of the year is almost here, and it’s your moment to shine without the stress. With Black Friday and Cyber Monday just around the corner, being present across email,

    • Client host [89.36.170.5] blocked using Spamhaus

      Hello please make make actions for delist ..... "Client host [89.36.170.5] blocked using Spamhaus"

    • Pricing Strategies: #5 Stay local, Price & Sell Global

      Arun had always dreamed of taking his handmade craft business beyond his hometown. For years, he sold locally. Most of his customers are familiar faces, in our usual currency and with the exact expectations. But one day, a traveller visited his workshop

    • 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

    • What is the easiest way to move Hotmail emails to an IMAP server?

      The easiest way to move Hotmail (Outlook.com) emails to an IMAP server is to add your Hotmail account directly to any email client that supports IMAP, then copy the messages across. This avoids paid tools and keeps the process simple. Fastest free method:

    • No feedback from Zoho Books regarding Yodlee feeds for Investec

      I reported on 6 Feb 2025 that the Bank Feeds for Investec bank via Yodlee are not working. To date there has been no resolution. You are charging us for a suite of products where the functionality does not work. Please advise how you will refund me for

    • Next Page