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

        • Agent name Alias

          I am seeing that Full name of my staffs are written on every ticket response which is not good for some reasons. It is possible to user like this: Manny P. (First Name with Last Name's First Letter) or  Manny (First Name) This is want we want to show

        • Unable to add attachments to tickets through Desk API

          I able to use the Desk API to generate tickets. However when I try to use the tickets/{ticketId}/attachments endpoint, I always get an Unauthorized error. My app has Desk.Tickets.ALL included in its scope so this should not be an issue

        • What's wrong with this COQL?

          What's wrong with this COQL? Code returns "invalid operator found". SELECT id, Name, Stage, Account, Created_Time, Tag FROM Production_Orders WHERE (Account = '4356038000072566002' AND Stage NOT LIKE '%customer%') ORDER BY Created_Time DESC LIMIT 200

        • [Feature Request] Add support for internationalized top-level domains mail hosting

          This is an important request to add support for internationalized domains mail hosting to https://www.zoho.com/mail/ In this case, that is only limited to domain name/mail address however currently it's already possible for us send mails etc using below

        • Add Enable/Disable to Field Rules and other Rules

          Hi, Sometimes I have rules setup for fields, and until I want to enable them for use, I can set the fields to Hidden but rules still show them, today you have to delete rules and then recreate them again, would be nice to have a toggle for Enabled/Disabled

        • Syncing stuck for days

          Hello when I made an account a few days ago and synced all my notes to it, it is still syncing. My app is only 400mb so I do not know why it is taking so long. Please help

        • Workflow runs on every edit despite not ticking the field repeat this workflow whenever a parent is edited.....

          Hi, It is my understanding that this workflow should only trigger once. Why is this triggering on every edit of the field? Based on another support query - directly from Zoho, If i tick the box 'repeat this workflow whenever a parent is edited' it should

        • How do you add or update tags on Zoho CRM records via n8n? (Workarounds or best practices?)

          Hi all, I’m running into some limitations with the Zoho CRM node in n8n and was wondering how others have handled this: From what I see, the standard Zoho CRM node in n8n doesn’t allow you to add or update tags when creating or updating contacts/leads.

        • API PARAMETER FOR TICKET CLOSED TIME

          Hi, Is there a parameter for filtering tickets by closed time in zoho api, i can see closed time in the API response i get, but can't get tickets by that field while calling. Regards, Anvin Alias

        • Reply to email addresses wrong.

          I have setup my Zoho mail account using my main domain and I also have an Alias setup from a different domain. In Settings - Mail - Compose I have selected to the option "For replies, send using The same email address to which the email was sent to".

        • Meeting integration with Otter.ai

          Would love for an integration with an AI transcription service like Otter.ai to be integrated with Zoho Meeting. Thanks

        • How to close/delete a free creator account?

          I have a free zoho creator account associated with my email address that is not being used.  I want to become a user of another paid zoho creator account but I can not associate with the paid account with the same email.  I assume if I can close or delete the free account I will be able to use the paid account. I have emailed support but no response. Suggestions?

        • Zoho books and zapier causes Invalid data provided

          I have been using zoho books with zapier for over 2 years now, everything was working fine. On September 13th my zaps stopped working. Now on step create sales invoice in zoho books i get an error: Failed to create a create_invoice_v2 in Zoho Books The

        • CRM report

          Is it possible to pull a contacts report that also includes the company industry, as well as the company name? I’m having trouble combining company and contact fields – any help is appreciated. Thank you, Sam

        • Enhancements to Client script?

          Hi Zoho CRM, I've been extensively using Client Scripts to enhance our Deal form experience, particularly for real time validations and auto updating fields based on specific logic. However, I've encountered a challenge regarding permission boundaries.

        • Add views to new CRM UI navigation + Unlimited Webtabs

          Zoho CRM is so close now to being the ultimate business application with the new UI, as soon as this one feature is added. This is probably where Zoho is headed but if it's not I want to BEG for this to be incorporated. What we need is to be able to put

        • E-Mail Distribution List

          How do I create an e-mail distribution list in Zoho Mail?

        • Custom "create meeting" button with more functionality than Zoho currently has?

          I'm looking for a little help/direction in how to do this. Even just some general high level pointers on how this might be able to be done. The current Zoho Meeting Activity functionality is not ideal for my org's workflow. I'd like to try and create

        • Error Code 4: Invalid value passed for JSONString

          Okay, I want to start by saying I know I'm a terrible scripter, so sorry if this is a dumb mistake. I just can't figure it out, even with LLM help. Here's my code: // --- Input Variables --- customer_id = salesorder.get("customer_id"); so_id = salesorder.get("salesorder_id");

        • Organizing contacts/members by company

          I work for a membership organization (representing businesses) and am trying to use Zoho CRM more effectively for managing the points of contact for our members. Currently, our members are listed in our CRM by the primary point of contact's name, but

        • Unable to search in Zoho Email

          I've started using Zoho Email (free version) recently and realized that it doesn't have email search functionality. Am I missing anything here? I've gone through the Zoho tutorial which does show the search bar on the right top of the Zoho UI. But in

        • Response Time Report

          From data to decisions: A deep dive into ticketing system reports Every organization that interacts with its customers should have an established timeframe for how soon an agent is expected to send the first response and any reply to any follow-up messages.

        • Zoho - Outlook plugin

          Does anyone know if there is a way to modify the autofill in the Zoho plugin in outlook? When we create a contact, it enters the correct email address and name, but then pulls information from our own signature line to add phone number, address, etc.

        • Zoho Books - Sales Person Information

          Hi Team, On Invoices, Quotes, etc... I can include the Sales Person, but it only shows their name and not their email or phone number. It would be great to have place on invoice templates where we can manage what sales person information should be shows

        • Offline working in Zoho Creator portal

          Zoho's help says that offline working is only available in the Creator mobile app and not in the portal app. But I can see offline options in the portal app too and it seems to work when I test it. My portal users are often in areas where there is poor

        • Fetch Records using Dynamic Criteria

          Hi,  I have a form that builds a filter based on user input.  I need to fetch the records based on dynamic criteria.  How would I accomplish this as there is no eval function? For example: desiredRecord = Form1[dynamicCriteria];

        • Url filter Report date (pivot chart)

          Hello. Is it possible to filter the data in pivot char using parameters in the url? I'm trying but I should not doing very well. Something like: https://creator.zoho.com/.../....../#Report:MyPivotChartReport?MyDate=01-Jan-2012;31-Jun-2012;MyDate_op=58 Saludos

        • Sending gmail to a particular person fails because the address gets changed to "gmaill", with a second "l" typo somewhere

          I send to bob@gmail.com (example) and get an error sending to bob@gmaill.com, only for this one person. Note the extra "l" in the email the system tried to send to, which was not in the address I entered. Can't find a typo in the contact or anywhere else

        • Emoji Support in Bigin CRM

          We request the implementation of emoji support across Bigin CRM. This feature should allow users to seamlessly use emojis in text fields, headlines, and deals. It would enhance communication, improve the visual appeal of records, and bring more personalization

        • Bigin Booking Pages enhancements

          I would like to ask for several enhancements for the brand new (and promising) Booking feature. 1. Add "Contact/Mobile" Field to Booking form We use Mobile as key (id), but unfortunately it is missing from the Booking form, only Home Phone is available.

        • Amount in words in Indian format

          Hi, I had coded the following code to convert amount in words. But in the code in the format of US like million. But i need in Lakh and Crore. So pls suggest ideas r post corrected code string Num2Words(int val) {     val_s = input.val.toString();     th = {"", "thousand", "million", "billion", "trillion"};     // uncomment this line for English Number System     // th = {"","thousand","million", "milliard","billion"};     dg = {"zero", "one", "two", "three", "four", "five", "six", "seven", "eight",

        • What are people using to send Service based emails?

          Zoho Campaigns is for marketing. Users can unsubscribe from these emails. Service based emails need to be delivered and can without the worry of Can-spam act. What are people using to send service based emails? My mailing list is derived from a database

        • Standalone LMS tool

          Will Zoho release a standalone LMS (Learning management System) than can be used by external parties (guest)?

        • An Overview of Dario Schiraldi Deutsche Bank Executive

          Hello Community, Dario Schiraldi is an executive at Deutsche Bank, focused on advancing the firm’s financial services and crafting its global strategic vision. With 20 years of expertise in leadership roles, he has spearheaded successful market acquisitions

        • Emailing a document to WorkDrive

          Does WorkDrive include the ability to upload a document by sending an attachment to an email address? (Books and Expenses include this functionality) If it doesn't is it under consideration? on the Road Map?

        • Allow Changing Appointment Status from "Completed" to "No Show" or Other Valid States

          Hi Zoho Bookings Team, We hope you're doing well. We would like to submit a feature request regarding appointment status management in Zoho Bookings. 🎯 Use Case Sometimes, an appointment is mistakenly marked as Completed, but later we realize that the

        • Zoho One and Tally Integration

          Has Anyone in this forum done any implementation with Zoho CRM and Tally accounting software. If so who have you used and how easy was it?

        • 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

        • Next Page