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

        • Help with Filtering Records, HTML Pages, and Automatic File Uploads in Zoho Creator

          Hi Zoho Creator Community, I’m building a Zoho Creator application and need guidance on a few features I’ve been struggling with. I want to implement them safely and efficiently, and I’d appreciate any examples, tips, or best practices. I want users to

        • Feature Suggestion for Zoho Websites – Inspired by Squarespace Systems

          Dear Zoho Team, I’m a Zoho user and also a Squarespace Platinum Circle member, and I recently noticed the launch of Zoho Websites in India. I wanted to share some ideas for features that could enhance the platform for professional users and agencies.

        • Custom View - Sort by Custom Field

          I created a custom field for our Engineering team to know which tickets to work first by numbering them.  I created a custom view to general data which includes the Engineering Priority.  However, I cannot sort the Engineering Priority column ascending

        • Zoho Indeed Intergation not pulling candidate details

          We have recently integrated zoho with indeed. Prior to this our candidates came into the candidates tab via the zoho.resumes email address from indeed and it pulled through the candidates mobile number, and majority of the time a postcode. However since

        • Custom View of tickets created today

          How can I create a custom view that list all my ticked created in the current date? Currently, if I select the "Created Time" criteria, the "Current Time" option does not work as today. Actually, I don't know how it works this "Current Time".

        • Lifecycle Reports

          From data to decisions: A deep dive into ticketing system reports A lifecycle report captures and visualises the sequential states that a ticket undergoes across its lifespan. For instance, when a customer submits a support ticket for a faulty product,

        • Zoho Forms - Print Button on Forms

          Hi Forms team, I'm replicating a form for a client which is currently based on JotForm. I noticed that at the end of the form there is a button to print the completed form. I thought this would be something worth sharing and a nice to have in Zoho Forms.

        • Putting Watermark on Zoho Sheet

          Can this be done?

        • Validation function not preventing candidates under 18 or over 30 from submitting the web form

          Hello everyone, I’m trying to create a validation rule for the Candidate Webform in Zoho Recruit. I added a custom field called “Date of Birth”, and I want to make sure that candidates cannot submit the form unless their age is between 18 and 30 years.

        • Report to know the history of certain Tickets on Desk

          Hi there guys, As the title implies we're wondering if there's any way to get some kind of Report that allows us to check the History of various Tickets at the same time since as of today if we want to know that we have to check them 1 by 1 which is not

        • Advanced Usage Billing: Prepaid with Drawdown

          Picture yourself at your favourite coffee shop, Bean & Brew. You come by every morning for your usual cappuccino, and occasionally you get an extra cold brew and a muffin or two in the afternoon. Interestingly, Bean & Brew has a new idea of offering a

        • Zoho Commerce in multiple languages

          When will you be able to offer Zoho Commerce in more languages? We sell in multiple markets and want to be able to offer a local version of our webshop. What does the roadmap look like?

        • Urgent Zoho Creator down!!!???

          Now my zoho creator faced this issue. Anyone has idea? Urgent!!!

        • The Social Wall: September 2025

          Hello everyone, As we step into the fall season, some major updates are on the horizon. Meanwhile, here are the exciting updates we rolled out this September. Approvals in iOS Managing approvals just got more seamless on mobile. With this update, the

        • Introducing Detailed View for Candidates in Vendor Portal

          We’ve added a new Details sub-tab inside the Vendor Portal to help vendors easily view complete candidate information after submission. With this update, vendors can now access all candidate details, from personal information to associated job openings,

        • Zoho One Down

          Zoho Team, Checking if when the services up - currently Zoho One is down

        • How can I track which zoho users are actively using Zoho CRM

          I have several licenses of Zoho CRM. We now need to add a new user. I could purchase a new license, but before I do, I would like to see if any of our existing users are not actively using the license assigned to them. How can I determine the activity

        • Access to Detail View From HTML Snippet

          Zoho Creator displays a detail view that slides out from the right onClick of a record in a report. Am I able to access that detail view from an html snippet, e.g. click a record in a list and display the detail view? The zc_LoadIn dialog is a bit clunky,

        • Billing Management: #10 Solving Common Mistakes in Billing

          Over the past few weeks, we have explored different facets of billing, from the simplicity of traditional one-time billing to the evolving landscape of subscriptions, retainers, and usage-based models. We've unpacked how billing isn't just about sending

        • 【開催間近 - 10/17】東京 ユーザー交流会 Vol.3 参加登録 受付中！(参加無料)

          ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 10/17(金)に、東京・新橋で「東京 ユーザー交流会 Vol.3」を開催します！ ZOHOLICSよりも小規模なイベントですので、「リアル開催はちょっと緊張する…」という方も、安心してご参加いただけます✨ 当日は、初公開の事例を2つご紹介予定です！ なお、セッション映像のアーカイブ配信は予定していないため、会場にお越しいただいた方だけが、登壇者へ直接質問したり、リアルな声を聞いたりできる貴重な機会となっています。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

        • Loading CSS Stylesheets into HTML Snippet

          Combining html/css into a single snippet can grow quite large for a UI that has a lot of functionality/styling. To keep things tidy, are we able to pull files into an html snippet using a <link> tag? If so, what are some best practices?

        • Notes Attachments

          Two things it would be nice to have the attachment size the same as the attachments sections and it would be nice to be able to attach links like you can in the attachments section. Thank you

        • Canvas: empty images

          Hello. If I add an image field like contact photo in a Canvas design, and the field is empty, there is an ugly placeholder in its place. This doesn't happen in the standard view. In the standard view, if the contact photo is empty, nothing appears in

        • Google enhanced conversions not working

          Hi guys, I've connected Zoho CRM through Google Ads interface with the goal to setup the enhanced conversion tracking in Google Ads. I have to Zoho related conversion goals which you can see in the images below: For the conversion goal above I've setup

        • Sync Contacts with iPhone

          Is syncing the Zoho Personal Mail contacts with the iPhone (or other mobile devices) in the works?  I just dumped Yahoo & then found out that contacts sync is missing.  Importing is only a stop gap and a step backwards for me.

        • MS Teams Meeting to Zoho CRM

          Has anyone figured out a good way to push MS Teams meeting info on a trigger of "meeting end" to Zoho CRM? We're looking for a way to take attendees of a meeting and meeting duration and push it into Zoho CRM after the meeting has ended. If I can just

        • How do I move a section or element from one page to another in the NEW Zoho Sites UI

          I have a section on my home page with numerous elements within it and I'd like to move the entire section to a different page on my site so I don't have to recreate it from scratch.  Is there a way for me to do that easily? I could use a quick answer on this please.

        • Zoho Projects app update: Global Web Tabs support

          Hello everyone! In the latest version(v3.10.10) of the Zoho Projects app update, we have brought in support for Global Web Tabs. You can now access the web tabs across all the projects from the Home module of the app. Please update the app to the latest

        • Export as MP4 or GIF

          Hi, Just wondering if there's a way to export/convert a presentation to an MP4 video file or even a GIF. One use case would be to use the animation functionality to create social media graphics/charts/gifs/videos. Thanks for a great tool... Rgds Jon

        • Page Layout- Horizontal Rule

          When editing the layout of, for instance, the Potentials page, is there a way to insert a horizontal rule or white space in between fields?  I'd like to keep a group of fields in the same Section, but would like to create some seperation in order to further group together certain fields within the Section.  If this is not possible, does anybody have any other suggestions on how to create this same effect?   Thank you!

        • Zoho Books will discontinue support for older browser versions soon

          Hello users, Starting from May 15, 2024, Zoho Books will no longer support the following browser versions: Browsers Version Restrictions Firefox Browser Versions older than 100 Google Chrome Versions older than 100 Microsoft Edge Versions older than 100

        • Zoho Projects - Q3 Updates | 2025

          Hello Users, The final quarter of the year 2025 has begun, and we at Zoho Projects are all set with a plan. New targets to achieve and new milestones to reach, influenced by the lasting imprint of the past quarter. 2025's Q3 saw some new features and

        • Issue with Trident exe file

          Hello Team, Exe Setup file It's showing harmful for user pc please check and do needful. this message for developer team. Thanks Bhargav Purohit

        • Transaction Locking with the dynamic date

          Is it possible to dynamically update dates on transaction locking. We want to lock transaction x days from today

        • Unable to change sales_order status form "not_invoiced" to "invoiced"

          I am automating process of creating of invoice from sales_orders by consolidated sales_orders of each customer and creating a single invoice per customer every month. I am doing this in workflow schedule custom function where i create invoice by getting

        • Apply Vendor Credits Automatically

          We are bulk importing Vendor credits in Zoho Books!!! Is there a way to apply vendor credits automatically to the first UNPAID bill of the Vendor?

        • Apply Vendor Credit Automatically

          Hello!!! Is there a way where in we can apply vendor credits automatically on the FIRST OUTSTANDING BILL of the vendor?? We have lots of VENDOR CREDITS ISSUES mostly!!! Applying it manually is a pain for us. Would be great if we have a way to apply the

        • 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

        • Creator problem: Edit form View not displaying whole form

          I'm having problems with the form in my database. The edit view is not showing the whole form: This is how it looks in the normal view: As you can see, there is a whole section in the bottom right of the form which is not displaying in the Edit View. This means that I can't change or delete any of these fields... Anybody had a similar problem or know a solution? Any help would be appreciated.   Cheers,

        • Vendor Master Enhancements for Faster Purchase Entry

          I’d like to suggest a few features that will improve accuracy and speed during purchase voucher entry: Automated Item Tax Preference in Vendor Master Add an option to define item tax preference in the vendor master. Once set, this preference should automatically

        • Next Page