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

        • Microsoft PowerPoint files Extremely slow to save

          I and others on my team have noticed that Microsoft PowerPoint documents are extremely slow to save when using WorkDrive. It always takes over 30 seconds to save a file. Word and Excel files seem to save in a typical length of time, but PowerPoint is

        • How can users unblock their blocked Zoho Mail accounts?

          After the reason for the account block (storage exceeded, spam detection etc.) has been rectified, the user can unblock the account from the UnBlock Me page. Account support@edu2review.com  Edu2Review is an education review platform, we rate the quality

        • Adding additional fields for batch information

          Hello, I am looking at adding additional information into our inventory module. we would like to be able to see up to 8 attributes that will be individual & different for each batch (i.e. batch specific information) but currently I seem to only be able

        • Dynamic Pickup List Values using Deluge and Client Script

          I would like to dynamically show Pickup List Values For example we need to fetch some data from an on premise application and display it so they can choose and pick This can be done in Creator but I didn't find anything for CRM

        • Validation Rule for Controlled Stage Movement in Deals Module (Deluge Script)

          For keeping a control over module stage or status, you can use the below deluge script. The below deluge script defines validation control over deals module stages: // Function to validate allowed stage transitions in the Deals module map validation_rule.LeadStatustValidation1(String

        • Pick List Issues

          I have created a pick list that looks at a table in a sheet, it selects the column I want fine. Various issues have come along. The option to sort the pick list is simplistic, only allows an ascending alphabetical sort. Bad luck if you want it descending.

        • Four types of task dependencies

          "Nothing is particularly hard if you divide it into small jobs."                                                                                                                  - Henry Ford Projects, small or large, are driven by simple work units called tasks. Monitoring standalone tasks might look simple but as the workflow becomes elaborate, tasks may start relying on one another. In project management, this relationship between tasks is termed as "Task Dependencies". Dependency between tasks arise

        • 1099 tracking

          Do zoho books offer feature of tracking for 1099's for contractors, etc? Quick books offers this feature and wondered when/if Zoho books will do same

        • VAT-type Taxes in US Edition?

          I'm located in the US, and I use the Zoho One US edition of Books. We are in the process of registering with Canadian authorities for their GST / HST, which is a VAT-type of scheme. It is not immediately obvious to me how one would deal with input tax

        • Schedule sms to be sent later

          When will you make available an option to send sms's at a later time??? You finaly have this option available on emails, so it will be very useful to have it also with sms. Our sms provider, has already this available but we cannot use it because you

        • Ecommerce integration with prestashop

          Development of campaigns integration with prestahop. When???

        • How to create an article containing images and rich text via the api?

          Hi, I'm trying to migrate our kb articles from our previous helpdesk service, and import them to ZohoDesk. Is there any way to create an article that contains images?  Is it possible to add formatting to articles created via the API? Thanks, Adam.

        • Number of statement execution limit exceeded on deluge scheduled function

          I'm working on a send email functionality in creator that sends out crew work orders at the end of the day each day for the next day. I'm running into the issue that zoho is unable to handle the number of statements that I am doing to be able to successfully

        • Zoho SignForm In Progress But Cannot Be Completed

          If a person starts signing a document (via SignForm), but closes the window before submitting, Zoho marks the document "in progress", but how do they finish signing it?

        • How to show Assemblies AND component items in a report

          Hi Is there any way in Analytics to create a report that shows the Composite Item AND the Component Items with mapped quantity? It seems that the component item is not exposed in any table that I can find. Also, the same question but for Stock on Hand.....this

        • Mandatory Messages for Specific Members in Zoho Cliq Channels

          Hello Zoho Cliq Team, We hope you're doing well. We would like to request a feature enhancement to Zoho Cliq that would allow marking certain messages in a channel as mandatory for specific members — with built-in tracking and reminders. 🎯 Use Case:

        • Admin Access to Message Read Statistics in Zoho Cliq

          Hello Zoho Cliq Team, We hope you're doing well. We would like to request a feature enhancement that would allow admins or channel owners to view read/unread statistics for messages, even if they were not the original sender. 🎯 Use Case: Currently, in

        • Online Member Visibility in Channels (Similar to WhatsApp Group Presence)

          Hello Zoho Cliq Team, We hope you're doing well. We’d like to request an enhancement to Zoho Cliq’s channel experience by introducing online presence indicators for channel members — similar to how WhatsApp shows how many people in a group are currently

        • Show ticket field in Zoho Desk only if that same field is not empty (API‑created records)

          Zoho Team , We have a ticket workflow where every ticket is created via API based on dynamic logic from an external form. That form has complex logic and already decides what’s relevant to ask, and the API only populates fields in Zoho Desk based on that

        • Multiple Products on Ticket

          Good morning. We will classify all tickets based on the product. Users sometimes send different requests on the same ticket, so we are facing some challenges. Is there a way to add more than one product to the ticket, or is there a way to tie the product

        • Não recebo Email de confirmação e validação de cadastro do PagSeguro

          Olá, utilizei uma das minhas contas de email Zoho para criar um cadastro no PagSeguro, contigo o email com o link de confirmação da conta não chega no meu email Zoho (nem.ma caixa de spam, nem na lixeira, e nem em outras pastas). Outros emails do PagSeguro

        • accounts payable and receivable subaccounts

          How to create accounts payable and receivable subaccounts? Being that I have several clients and in my balance sheet have to specify the accounts of each client and not only appear "accounts receivable or accounts payable" ??

        • DUPLICATING WORKFLOWS IN CREATOR

          Hi all, I want to duplicate and slightly amend 3 workflows in Creator so that I don't have to keep typing in all the rules and properties each time. I can see lots of videos on CRM with the 3 dots at the top of the workflow, but nothing like that in Creator.

        • Add SKU to query options in `items` API endpoint

          It would be very useful to be able to pull items by SKU in the API as this is a commonly used unique ID that tends to be consistent across systems.

        • Estimates and invoices being sent from company-wide address, rather than individual

          In our organization, team members send estimates and invoices through Zoho Books by using the "Send Email" function. However, for certain users, the system defaults to sending estimates and invoices from a shared organizational email address (e.g., company@example.com)

        • Need profit margins for books in estimates & invoice

          https://help.zoho.com/portal/en/community/topic/show-my-cost-or-profit-while-creating-estimate

        • Item Level Notifications

          I need to create a custom workflow based on the creation of an estimate that has a SKU/Item name that matches certain criteria. I can have it generated based on a total amount, but not at the item level. Is this possible?

        • Cannot categorize a bank deposit to an income sub-account

          When I go to categorize a bank deposit, I am not able to see any income sub-accounts. If I set up an income account without a parent, then I am able to categorize a transaction into that account, but as soon as I make it a child account, it disappears

        • ZV Extension passkey changes in v5.7.0

          Has there any changes to the how passkeys are managed in ZV - Chrome extensions v5.7.0? Namely, if the passkeys were already implemented/enforced as 2FA on a certain webpage, but ZV does not track them yet. Would that be the issue for my use case?

        • What's New in Zoho Billing - August 2025

          Hello everyone, We are excited to share the latest updates and enhancements made to Zoho Billing in August 2025 to improve your overall billing management experience. Keep reading to learn more. Notify Customers About Subscriptions via WhatsApp Business

        • Why are tasks not showing in Zoho Calendar?

          Hi there, I updated the Zoho calendar preferences for Task records to show on the calendar together with Meetings and Calls - see attached screenshot. Despite of that, Task records still won't show on the calendar. Is there a specific reason why this

        • Zoho Payroll: Product Updates - July 2025

          Over the past month, we've focused on making Zoho Payroll more flexible, compliant, and easier to use—whether you're processing complex payouts, ensuring accurate calculations, or meeting local tax regulations. Here's what's new: One-Time Payments and

        • Discussion for “sub product”, “sub item” or “child products”

          Hello everyone, In some CRM systems, there is the ability to associate products in a hierarchical manner within a quote. For example: Product A: Gold Plan Product B: Setup Product C: Connector Product D: Silver Plan Product B: Setup Product C: Connector

        • Retrieve Accidental Deleted User

          Is there a way to undelete a user who accidentally deleted themselves?

        • Request for Support - CRM Integration Issues

          I’m reaching out to request assistance with the following items: 1. Zoho Forms Integration with Zoho CRM We are currently using Zoho Forms to send the Global Credit Application form to our customers. The intended workflow is for the form submissions to

        • Knowledge Base Module

          How to enable the knowledge base module in zoho crm account. I saw this module in one crm account but unable to find it other zoho crm account. can anyone know about this?

        • Zoho sign changed Indexing of signing_order

          Because I missed this Announcement (is there even one?): when you work with the indexes of actions > signing_order. Previous those started with 0 now starts with 1. Changed somewhere between 15.07 and 23.07

        • 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

        • Zoho CRM Community Digest - June 2025 | Part 2

          Welcome back to the Zoho CRM Community Digest! We’re wrapping up June with more fresh updates, smart discussions, and clever workarounds shared by the community. Product Updates: Struggling to keep track of scattered customer interactions? Zoho CRM's

        • Allow Variable Insertion in Prebuilt "Update Record" Action in Schedules

          Hi Zoho Creator Team, Hope you're doing well. We’d like to submit a feature request based on our experience using Zoho Creator schedules to manage workflows integrated with Zoho Desk. We currently have an app where Zoho Desk tickets create records in

        • Next Page