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

    • Customer Management: #6 Common Mistakes in Customer Handling

      Managing customers doesn't usually fall apart overnight. More often, slight gaps in the process slowly become bigger problems. Incidents like missed follow-ups, billing confusion, and unhappy customers will lead to revenue loss. Many businesses don't

    • Zoho Desk iOS app update: UI enhancement of picklist and multi picklist fields

      Hello everyone! We have enhanced the UI of the picklist and multiselect picklist fields on the Zoho Desk iOS app to provide a more refined, efficient, and user-friendly experience. We have now supported an option to Search within the picklist and multiselect

    • Zoho Desk iOS app update: Revamped scribbles with Apple pencil kit

      Hello everyone! We’re excited to introduce a revamped Scribble experience, rebuilt from the ground up using Apple PencilKit for smooth strokes, proper scaling, and seamless image uploads. Please update the app to the latest version directly from the App

    • Zoho Desk Android app update: Norwegian language support

      Hello everyone! In the most recent Android version of the Zoho Desk app update, we have brought in support to access the app in Norwegian language. We have introduced the Norwegian language on the IM module of the Zoho Desk app as well. Please update

    • Payment Vouchers

      Is there any Payment Vouchers in Zoho? How can we create payment for non-trade vendors, i.e. professional fees, rent, and payment to commissioner income tax?

    • API in E-Invoice/GST portal

      Hi, Do I have to change the api in gst/e-invoice portal as I use zoho e books for my e-invoicing. If yes, please confirm the process.

    • When I click on PDF/PRINT it makes the invoice half size

      When I click PDF / Print for my invoice in Zoho Books, the generated PDF appears at half size — everything is scaled down, including the logo, text, and layout. The content does not fill the page as it should. Could someone advise what causes Zoho Books

    • Search by contain letter in a column

      Hello, everyone I need a filter function that searches by letter in a cell, and it should be a macro. To clarify further, if I have a column with several names and I chose a search cell and what I want is search by a single letter, for example, "a" then

    • Enrich your contact and company details automatically using the Data Enrichment topping

      Greetings, I hope you're all doing well. We're happy to announce the latest topping we've added to Bigin: The Data Enrichment topping, powered by WebAmigo. This topping helps you automatically enhance your contact and company records in Bigin. By leveraging

    • Easier onboarding for new users with stage descriptions

      Greetings, I hope all of you are doing well. We're happy to announce a recent enhancement we've made to Bigin. You can now add descriptions to the stages in your pipeline. Previously, when creating a pipeline, you could only add stages. With this update,

    • Can add a colum to the left of the item in Zoho Books?

      I would need to add a column to the left of the item column in Books. When i create custom fields, i can only display them to the right of the item.

    • Verifying Zoho Mail Functionality After Switching DNS from Cloudflare to Hosting Provider

      I initially configured my domain's (https://roblaxmod.com/) email with Zoho Mail while using Cloudflare to manage my DNS records (MX, SPF, etc.). All services were working correctly. Recently, I have removed my site from Cloudflare and switched my domain's

    • AI Bot and Advanced Automation for WhatsApp

      Most small businesses "live" on WhatsApp, and while Bigin’s current integration is helpful, users need more automation to keep up with volume. We are requesting features based on our customer Feedbacks AI Bot: For auto-replying to FAQs. Keyword Triggers:

    • 2025 Ask the Experts sessions wrap-up : Key highlights from the experts

      Here is a rewind journey of our Ask the Experts (ATE) Sessions, where we brought you expert insights and practical best practices together in one place. This recap highlights the key takeaways, learnings, and best practices from all these sessions so

    • How to disable the edit option in subform

      How to disable the edit option in subform

    • COGS - Account showing negetive

      I have multiple COGS account and in these all there is one account is negetive so suggest why it is showing negetive value.?

    • Adding non-Indian billing address for my Zoho subscription

      Hey Need help with adding a non-Indian billing address for my Zoho subscription, trying to edit the address to my Singapore registered company. Won't let me change the country. Would appreciate the help. Regards, Rishabh

    • Move record from one custom module to another custom module

      Is it possible to create a button or custom field that will transfer a record from one custom module to another? I already have the 'Leads' module used for the Sr. Sales department, once the deal is closed they convert it to the 'Accounts' module. I would like to create a 'Convert' button for a custom module ('Locations') for the department that finds locations for each account. Once the location is secured, I want to move the record to another custom module called 'Secured Locations'. It's basically

    • Notes Not Saving

      Hello,  My notes are continuously not saving.  I make sure to save them, I know the process to save them.  It is not operator error.  I go back into a Leads profile a while later and do not see the previous notes that I have made.  I then have to go back and do unnecessary research that would have been in the notes in the first place.  Not a good experience and it is frustrating.  Slows me down and makes me do unnecessary work.  Please resolve.   As a quick heads up, deleting cookies is not a fix

    • Prefill form with CRM/Campaigns

      I created a form in zForms and created prefill fields. I added this to the CRM and selected the fields so when sending from the CRM, the form works great. However, I want to use the same form in Campaigns and I want it to pull the data from CRM (which

    • Triggering a campaign automation from a Form

      I used Forms to create a lead form that is accessed by a button on my website. The field information flows into the CRM. However, I am trying to figure out how to use Campaign automations to start a workflow (series of campaign emails) that is triggered

    • Employee Appraisal Applicability - Why is Date of Joining Hard-Coded?

      In the new (to me, at least) Performance Appraisal Cycle wizard, it's possible to set criteria to determine for whom the appraisal process should apply. This makes sense on its face. However, one MUST use the Date of Joining criterion as a filter. Why

    • Formula fields

      Zoho People now supports formula fields. This post illustrates it. Formula fields are fields whose value is calculated instead of being entered by the user. Using this, number, decimal and date manipulations can be done. The value of this field could be numeric or date depending on the output of the formula. In date manipulations, the result will be given in milliseconds, which you can format as per you need. The operators we support are +, - , *, /. Formula fields get recalculated automatically

    • Zobot operator information

      I am working on a zobot that calls a plug to send data to our API. I want the response data from that API to be shown only to the operator and not the customer. I have tried writing this data out to the visitorCity field but nothing gets updated on the

    • Copy paste from word document deletes random spaces

      Hello Dear Zoho Team, When copying from a word document into Notebook, often I face a problem of the program deleting random spaces between words, the document become terribly faulty, eventhough it is perfect in its original source document (and without

    • Is it possible to use module field filters via URL parameters?

      It would be really convenient if I could quickly link to a filter. For reference, this is the filter functionality I'm referring to: https://help.zoho.com/portal/en/kb/crm/customize-crm-account/advanced-filters/articles/advanced-filters For example: My

    • Transitioning FESCO Bill Project to Zoho Sheets and Integration Options

      Hello Zoho Support, I'm considering transitioning my FESCO bill project from Google Sheets to Zoho Sheets and wanted to know if there are integration options to seamlessly migrate our existing work. You can view our platform here, any guidance would be

    • Credit card

      Coming from another software, is it possible here to typically have credit card payment off, but independently per customer, click a box (possibly on the invoice when I go to to send) allowing that 1 allowed customer credit card payment, NOT ALL of my

    • Lightbox Pop-up form

      I would like to embed my form using the lightbox pop up. I don't want it to load automatically. I want it to load when some clicks the button. I can see this option, however when I use the "show pop-up launch button" on the website, the button automatically

    • Lightbox Pop-up form

      I would like to embed my form using the lightbox pop up. I don't want it to load automatically. I want it to load when some clicks the button. I can see this option, however when I use the "show pop-up launch button" on the website, the button automatically

    • Connecting Portals from different Zoho apps

      Hi, I note that Zoho has functionality for customer portals for several of the Zoho apps, like CRM, Projects, Desk etc. Is there any way to connect these portals?  It would be great if we could give our customers access to a portal in which they could

    • Customer Management: #5 Never Let the Customer Slip

      When Rahul started Knight's Watch Consulting, his focus was simple: deliver good work and keep clients happy. He offered one-time consulting projects, monthly advisory retainers and usage-based support for growing clients. Business was steady, and customers

    • Deluge date time issue

      The deluge function info zoho.currentdate.toString("MMM/YYYY") returns Dec 2026 instead of 2025

    • Zoho Projects Android and iOS app update: Mobile device permission based on user profiles

      Hello everyone! We have brought in support for mobile device permissions based on the user profiles which are configured in organization level. Administrators can now configure the permissions on the web app(projects.zoho.com) by following the steps mentioned

    • How do I add a blank line to the Organisation Address Format?

      I'd like to have my VAT number, for example, shown prominently by having a clear gap between it and the address block above, but any blank lines in the address format get ignored in PDF outputs.

    • treatment for rehires

            Hello,  we are aware of the fact that Zoho People at the moment does not has a provision for rejoining exited employees. But is there any quick fix or hack to this? It will be appreciated a lot. 

    • Zoho Projects Android and iOS app update: Timesheet module is now renamed as 'Time Logs', delete option has been renamed to 'Trash'.

      Hello everyone! We have now renamed the Timesheet module as Time Logs and the delete option as 'Trash' on the Zoho Projects Android and iOS app. Time Logs Android: Time Logs iOS: Trash option Android: Trash option iOS: Please update the app to the latest

    • Zoho Mail app update: Manage profile picture, Chinese (Traditional) language support

      Hello everyone! In the latest version (v3.1.9) of the Zoho Mail app update, we have brought in support to manage profile picture. You can now set/ modify the profile picture within the app. To add a new profile picture, please follow the below steps:

    • Reminders for Article Approval

      Is there a way to send reminders for approvers to review articles and approve/deny them? I'm not seeing that option anywhere.

    • Add Full-Screen Viewing for Quartz Recordings in the Client Interface

      Hi Zoho Team, We would like to request an enhancement to the Zoho Quartz client interface when viewing submitted recordings. Current Limitation: When viewing a Quartz recording from the client (user) interface, there is currently no option to switch the

    • Next Page