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

    • What's New in Zoho Inventory | April & May 2026

      Hello users, We're excited to roll out the latest Zoho Inventory updates for April and May 2026. These enhancements are designed to make your daily operations smoother and more efficient, from advanced inventory management and flexible pricing to automated

    • Introducing Spotlight Forms

      Hey form builders! If someone opens your form, sees the wall of fields ahead, and quietly closes the tab. It may not be because the questions were hard. It could be because the experience felt like too much. Which is why we have now introduced a new form

    • Workflow Assistance in Zoho CRM

      Our client's sales team visits customers on-site and currently fills a physical paper form to capture customer details, and then separately re-enters the same data into Zoho CRM via the mobile app — resulting in double data entry. We want the salesperson

    • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

      I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically

    • Related products & AI product recommendations through commerce API.

      Hello Zoho team I’m looking to add related products and AI product recommendations to my Zoho Commerce webshop with custom storefront. Is this supported through the API? And if not, is this on your roadmap? Thanks in advance David

    • Why don't Zia agents support file uploads?

      I am trying to build a Zia Agent that allows uploading of a PDF file and uses the GLM5 model to process it and extract information. But agents.zoho.com has no way to enable file uploads on the agent. Additionally, GLM5 based agents keep outputting their

    • Pasting Images in Zoho Desk ignores cursor location

      My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

    • 'Pinned' notes feature of a pipeline record

      Hi team, Could you please implement a feature which will allow users to pin different notes so that they will appear at the very top of the notes tab in a pipeline record. Sometimes we have a wide range of notes on a record which means more important

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Announcing new features in Trident for Mac (1.37.0)

      Hello everyone! We’re excited to introduce the latest updates to Trident, which are designed to take workplace communication to the next level. Let’s dive into the details. Import EML archives directly into Trident. You can now import EML archives into

    • Zia Agent activation in Zoho Desk forces new Organization creation instead of deploying to existing one

      While attempting to complete the deployment and activation sequence of a new Zia Agent within our existing Zoho Desk environment, the activation process failed on the user interface, throwing a generic error (see print). However, despite the activation

    • #10 Bill While You Sleep

      A consultant is reviewing last month's work. Client meetings? Done. Deliverables? Sent. Support requests? Resolved. Then they realize something. "I have completed the work... but I haven't billed the client yet." The work was completed. The client was

    • Team Module Issues?

      We are testing Team Licenses for use by our Customer Service staff. I created a Teamspace called CSR and only assigned two users to this space: Administrator (me) and “Team License Test.” Team License Test is assigned to the Team User profile, with a

    • Access images from form submission in power automate

      Images from form submission show up as links in power automate. How do I access the image data?

    • Forms cannot be accessed.

      https://forms.zoho.com/ is not available, please help to fix

    • Associate records via the Multi-select lookup RELATED LIST via API

      In the REST API, is there a way to associate records for a multi-select lookup related list other than via the linking module? There are two methods for the lookup: 1. via insert records API 2. via the linking module ...as described in https://help.zoho.com/portal/en/community/topic/kaizen-125-manipulating-multi-select-lookup-fields-mxn-using-zoho-crm-apis

    • Problem with CRM Connection not Refreshing Token

      I've setup a connection with Zoom in the CRM. I'm using this connection to automate some registrations, so my team doesn't have to manually create them in both the CRM and Zoom. Connection works great in my function until the token expires. It does not refresh and I have to manually revoke the connection and connect it again. I've chatted with Zoho about this and after emailing me that it couldn't be done I asked for specifics on why and they responded. "The connection is CRM is not a feature to

    • How do I post a new question in Zoho Community forums?

      Hi everyone, I’m new to the Zoho Community and I’m trying to figure out how to properly create and publish a new topic in the forum. When I visit the community page, I can’t clearly find the option like “Add Topic” or “Post Question.” Could someone guide

    • Kaizen #245 - Real Time Signal Alerts for High-Value Abandoned Checkouts

      Howdy, Tech Wizards! Welcome back to another week of Kaizen. In this post, we will build a real-time abandoned checkout notification system using Stripe, Zoho CRM Functions, Sales Signals, and Widgets. When a customer abandons a high-value purchase, Zoho

    • Unable to attach Fillable File Upload field to Merge Template ever since UI update

      Ever since the new UI update, the field for Attachments for sending document for Signing in Writer has had an issue where trying to add a Fillable item in the Attachment field ends up always becoming a "Choose a File From Drive" option instead. No matter

    • Latest updates in Zoho Meeting | An improved Analytics tab and user interface, an invite pop-up revamp, an enhanced Zoho Meeting iOS app, a recording feature in the Android app, and more

      Hello everyone, We’re excited to share a few updates and enhancements in Zoho Meeting. Here's what we've been working on lately: Improved analytics for meetings, an invite pop-up revamp, a multi-video feed interface in the iOS app, a recording feature

    • Inquiry Regarding Automated Assignment of Zoho TeamInbox Messages using Zoho Flow and Deluge

      Hello, Our company is currently using Zoho TeamInbox, and we are interested in automating the assignment of responsible parties using tools such as ZOHO Flow and Deluge. Is it possible to achieve this? Allow me to provide more details. Currently, when

    • Kaizen #125 Manipulating Multi-Select Lookup fields (MxN) using Zoho CRM APIs

      Hello everyone! Welcome back to another week of Kaizen. In last week's post in the Kaizen series, we discussed how subforms work in Zoho CRM and how to manipulate subform data using Zoho CRM APIs. In this post, we will discuss how to manipulate a multi-select

    • Number of Reopn

      Hi Zoho, Is there any appropriate API call for This URL "http://support.zoho.com/api/v1/dashboards/reopenedTickets?...." what I thought is the resulting output of this call has data for number of reopen... "https://desk.zoho.com/api/v1/tickets/" + Ticket_ID

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Celebrating the businesses behind Bigin: Customer Awards 2026

      Hello Biginners, We're excited to announce the very first Bigin Customer Awards! If Bigin has played a role in your organization's journey, we'd love to hear about it. Share your story for a chance to be recognized among the best Bigin users across industries.

    • Client Script Button in Related List become invalid

      Hi, I am the admin of our organization. And I setup a client script button in related list to raise payment refund request While this button become non selectable recently. I believe there is something wrong from zoho as this button had run for a year.

    • Send Email Directly to Channel

      Hi, We are coming from Slack. In Slack each channel has a unique Email address that you can send emails too. I currently forward a specific type of email from my Gmail InBox directly do this channel for Verification Codes so my team doesn't have to ask

    • Zoho Desk: Auto-resizing of the "Description" textarea when creating a ticket.

      I would like to suggest an improvement for Zoho Desk regarding the Auto-Height-Resizing for Description field on the “Create a Ticket” page. It would be highly beneficial if the editor supported auto-resize functionality, allowing it to adjust dynamically

    • [URGENT] Cannot access Functions tab in CRM

      Navigating to /settings/functions/myFunctions gives this error message: "Sorry, something went wrong. Please try again later." I raised this issue with Zoho Support on Monday (3 days ago) but have not heard back. I'm sure it's clear how important it is

    • Not able to see appointements when the territory permission is activated

      Hello, I created different territories to separate the various departments within the company that will be working on different projects. The issue I am currently experiencing is that when I enable territory-based permissions, I can see the work order

    • Accepting Event from Outlook Client

      I've noticed this behavior for a few years now. If an Event is created from CRM and sent to participants and the participant accepts the invitation using Outlook client, Zoho event won't be updated as "Going" it only works if the recipient accepts it

    • Is there an API endpoint to retrieve the remaining email credit balance?

      Hi everyone, Is there any way to retrieve the remaining email credit balance programmatically through the API? I've gone through the full API documentation and it seems like there's no endpoint for this — everything related to credits is only visible

    • Switch between multiple LLMs instantly for tailored Zia experiences

      Availability Editions: Professional , Enterprise, Ultimate , CRMPlus , ZohoOne Release Plan: Available for all DCs Hello everyone, Previously, the multi-LLM feature supported only one LLM at a time for Zia Record Assistant, which restricted users' flexibility

    • Zoho CRM Community Digest - April 2026 | Part 2

      Hello Everyone! We're back with Part 2 of the April Zoho CRM Community Digest to wrap up our monthly roundup. This week, the spotlight is on smart database connections, proactive error tracking, and optimizing subform line items without breaking your

    • 【西日本初開催】「AI and DX Summit 2026」のご案内

      ユーザーの皆さま、こんにちは！ 西日本初開催となるZoho ユーザー / 検討中の方々向けイベントのご紹介です。 AI・DX大型カンファレンス「AI and DX Summit 2026」を、2026年7月16日（木）に開催します。 会場は、ウォルドーフ・アストリア大阪。 グラングリーン大阪直結のラグジュアリーな空間で、AIとDXの最新トレンド、実践事例、 展示、ネットワーキングが集結する、特別な1日をお届けします。 👉イベントページを見る ━━━━━━━━━━━━━━━ AIとDXの“今”を、体感。

    • Zoho Desk MCP doesn't expose all functions

      Hello, I'd like to be able to draft (rather than send) ticket replies using Claude Cowork. However, the Zoho Desk MCP doesn't currently offer that, despite it being available in the API (https://desk.zoho.com/DeskAPIDocument#Threads#Threads_DraftEmailReply).

    • Stop by and explore our six updates in ABM for Zoho CRM

      Dear Customers, We hope you're well! ABM for Zoho CRM is built to sharpen your database so that you engage with the right set of customer accounts. To fine-tune it further, we have six new updates: New access location for ABM Refined account entry criteria

    • Tracking Emails sent through Outlook

      All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But

    • Enhancement in Zoho CRM: Introducing New Return Types for String Fields Based on Character Length

      Dear Customers, We hope you’re well! In Zoho CRM, formula field with string return type is used in various scenarios where text is involved like concatenating customers’ first and last names, trimming characters from texts, performing find and replace

    • Next Page