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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Marketing Tip #26: Optimize product images for SEO

        Product images can do more than make your store look good. They can also help customers discover your products through search. Since search engines can’t "see" images, they rely on text signals to understand what an image is about. Two small actions make
      • Bulk upload images and specifications to products

        Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.
      • Allow rejected records (Approval process) to re-enter Blueprints

        Cannot seem to get my head around the key differences between the Blueprints and the Approval Process. For me it seems like different flavours of more or less the same thing - especially now that we have the option of Record Locking. Have a quote to sales
      • Every time an event is updated, all participants receive an update email. How can I deactivate this?

        Every time an event is updated in Zoho CRM (e.g. change description, link to Lead) every participant of this meeting gets an update email. Another customer noticed this problem years ago in the Japanese community: https://help.zoho.com/portal/ja/community/topic/any-time-an-event-is-updated-on-zohocrm-calendar-it-sends-multiple-invites-to-the-participants-how-do-i-stop-that-from-happening
      • Streamlining E-commerce Photography with AI Background Tools

        Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out this
      • Add @Mention Notifications in Zoho Cliq for Zoho Project Mentions

        Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding "Projects Bot" Cliq bot notifications for @mentions inside Zoho Projects comments (Tasks and Issues). Current Behavior: At the moment, when someone
      • WO Completion Status Not Updating Automatically

        Hello Latha, Hope you are doing well. Over the past few days, we have been facing an issue with WO completion. When an AP is marked as complete, the work order status is not automatically updating to “Completed,” and we have to mark it manually. Could
      • Is it possible to create a meeting in Zoho Crm which automatically creates a Google Meet link?

        We are using Google's own "Zoho CRM for Google" integration and also Zoho's "Google Apps Sync" tools, but none of them provide us with the ability to create a meeting in Zoho CRM that then adds a Google Meet link into the meeting. Is this something that
      • Changing naming convention for Estimates

        Hi there, How do I customise the naming of the filenames for estimates when sending them? Currently they are named literally just ES11.PDF or whatever the number of the estimate is. There is no Company name, description of the work, customer name, date
      • Email templates for estimates

        Hi there, When I send an estimate the option to choose a template appears. However it is common to need to make some minor personalizations and modifications to the email before sending ie. adding a second person to the greeting, or adding a small note
      • Reading emails sent from Zoho

        Hi there, How do I view an email sent from Zoho, for example an email which contains an estimate? I can see there is a tab in the screen for that estimate which is labelled 'Emails' and I can see a summary of the email sent listed there, but I cannot
      • Editing Estimates

        Hi team, How do I delete line items in an estimate when editing it? I can't see any option to do this - no X, no trashcan, no drop down... And how do I revert to the original estimate after cloning? I cloned to see if the option to edit were disabled
      • Customer Message Edit/Delete Function & Backend Visibility Inquiry

        目前客服已发送的对话支持编辑和删除功能,请问在 Zoho 系统后台,是否可以查看客服具体发送了什么内容,以及删除或修改了哪些信息?如果无法查看,这个功能是否可以通过设置关闭客服的编辑和删除权限?如可以,请告知具体设置路径。 Currently, customer service agents are able to edit and delete messages after sending them. In the Zoho system backend, is it possible to view
      • In App Auto Refresh/Update Features

        Hi,    I am trying to use Zoho Creator for Restaurant management. While using the android apps, I reliased the apps would not auto refresh if there is new entries i.e new kitchen order ticket (KOT) from other users.   The apps does received notification but would not auto refresh, users required to refresh the apps manually in order to see the new KOT in the apps.    I am wondering why this features is not implemented? Or is this feature being considered to be implemented in the future? With the
      • Sync Task Status from Zoho Projects to Zoho Desk

        Hi Zoho Desk Team, Hope you’re doing well. We’re actively using the Zoho Desk–Zoho Projects integration, which helps our support and project teams stay aligned. However, we noticed that when we change a task’s status in Zoho Projects, the change is not
      • Automate the file import step

        Hello everyone, I have a Sales - 'Account' category, and currently import the file to update it as follows: Import Accounts - From File - Update existing Accounts only - select and match the field the CRM. Since we have been using Microsoft 365 SharePoint.
      • Lost the ability to sort by ticket owner

        Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?
      • Placeholder doesnt work in email tempalate

        Hi Team,  I have put in the customer happiness rating place holder in my email template but when I pick the template in my ticket and send it to client, the place holder doesnt get generated. What am I missing here? screenshot attached. 
      • Search API filter/sort ignores comment-triggered modifiedTime updates

        Summary When a comment is added to a Call or Account, the parent record's modifiedTime is correctly bumped. This bumped value is visible in: GET /api/v1/calls/{id} ✅ GET /api/v1/calls/search without a filter ✅ — the record's response body shows the new
      • Automation#17: Auto-Create Tasks in Zoho Projects Upon Ticket Creation in Zoho Desk

        Hello Everyone, This edition delivers the solution to automatically create a task in Zoho Projects when a ticket is created in Zoho Desk. Zylker Resorts uses Zoho Desk for bookings and handling guest requests. Zylker resorts outsources cab bookings to
      • Introducing parent-child ticketing in Zoho Desk [Early access]

        Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child
      • Schedule Timeout 5 minutes vs. stated 15 minutes

        I am running into a function run timeout error after 5 minutes for my schedules. The Functions - Limits documents states it should be 15 minutes: Functions - Limits | Online Help - Zoho CRM. What should it actually be? Due to the 5 minute timeout, I'm
      • Printing invoice from creator using writer

        Hello. I have created my invoices using Zoho Writer and i'm sending data to them from Zoho Creator by selecting a row in a report and then clicking a button which has workflow connected to it to send the date to the invoice in writer. This is working
      • Remove Bounced email addresses from CRM after running a campaign

        HI, Is there a simple way to remove bounced leads in the CRM where there email doesn't exist anymore after running a campaign?
      • CRM Notes

        Hello, We want to add a Note to the Contact record when a Note is added to a Case or Deal. I wasn't able to do this using a workflow, so I tried using Zoho Flow, but that didn't work either. Does anyone have a suggestion on how we can accomplish thi
      • Building a custom site

        do we have an option in Zoho to build custom sites like adding custom functionalities? want to make a site like jumble puzzle answers for today. Is it doable? Please assist.
      • How to Automate an Unsubscribe based on Scoring

        I automatically assign a negative point score to bounced emails and would like to automate unsubscription of these emails from our Campaigns, without losing the contact data. (Oftentimes the lead is no longer at a business, but I want to keep the business
      • Campaign Status Field in CRM

        I'm wanting to create a custom view in CRM that shows all those who have recently hard bounced in past campaigns so we can clean up the database. An old Zoho article said it was possible, but I don't see the option to push campaign status field to CRM,
      • Introducing PDF conversion in Deluge

        Hello everyone, We're pleased to introduce built-in PDF conversion capabilities in Deluge with the launch of the convertToPDF task. As PDF is one of the most widely used formats in professional environments, this task helps streamline document generation
      • Recurring Addons

        Hi, I know you can set the pricing interval for addons to weekly, monthly and yearly & set it for one off or recurring, which these are fine as a base addon item. It really would be helpful if when creating a subscription when you add on the addon item
      • Start Workflow from Deluge Script

        I have developed a customized process from our CRM that leverages a deluge script to create a statement of work document. Once the document has been created via the merge and store function, I would like the ability to start a workdrive review & approve
      • Re: Application Architecture in Zoho Creator — A Platform-Specific Deep Dive

        A recent community post on application architecture made some excellent points about planning architecture early in Zoho Creator projects. The core message is right — Creator applications have a habit of growing organically into maintenance nightmares,
      • Option+C shortcut conflict

        In the latest Cliq release, you introduced `Option+C` shortcut to start a new audio call. In Polish, `option+C` is used for letter `ć`. I changed this button combo but `Option+C` is still being blocked and doesn't allow me to write letter `ć`.
      • Zoho Books | Product updates | April 2026

        Hello users, Welcome to our April 2026 product updates roundup! Highlights include profit margin for sales transactions, insights in reports, recording deposits from undeposited funds in banking, and faster production workflows with improved assembly
      • Need Easy Way to Update Item Prices in Bulk

        Hello Everyone, In Zoho Books, updating selling prices is taking too much time. Right now we have to either edit items one by one or do Excel export/import. It will be very useful if Zoho gives a simple option to: Select multiple items and update prices
      • What is the maximum length/size of a presentation on Apple TV?

        Hello, I have a presentation here that I regularly show on Apple TV. It’s always the same presentation, which keeps getting longer and more extensive over time. Almost every slide contains a graphic or photo that takes up the entire slide. That means:
      • Share saved filters between others

        Hi, I am in charge to setup all zoho system in our company. I am preparing saved filters for everybody, but the only one can see its me. How can others see it? Thanks
      • Items Landed Cost and Profit?

        Hello, we recently went live with Zoho Inventory, and I have a question about the Landed Cost feature. The FAQ reads: "Tracking the landed cost helps determine the overall cost incurred in procuring the product. This, in turn, helps you to decide the
      • How to set custom Sales Order numbers

        I am trying to create Sales Orders with data from Jotform submissions. Auto number generation is disabled within Books. Whereas the flow Input recognizes the number (40732 in this example), the Output does not. How can I fix this? I'd like the number
      • Displaying Rate Inclusive of GST per unit

        Hello, Currently when I enter the pricing of a line item it shows the overall amount (price including tax * quantity). I would like to see price/unit inclusive of GST. Is there any way to simplify this and to be able to view it? I've attached my current
      • Next Page