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

    • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

      I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

    • VAT and Taxes option not available

      Dear ZOHO Team , The VAT and Taxes options in my ZOHO books account not available,I tried to find how to enable or check the way to use this option but unfortunately couldn't find it anywhere ,I'm in UAE ,kindly let me know what to do to solve this issue

    • Zoho Quartz Screen Recording

      Hello, can we get access to Quartz, please, as a standalone solution? It would be great for creating training videos for current and future staff on how to use Zoho software according to our company requirements. Thank you

    • auto close automated alert tickets which are similar

      Hello ZOHO Community, we are using ZOHO Desk to process automated monitoring alerts. Scenario: Our monitoring system creates a ticket when a threshold is exceeded, e.g. Subject: Computer 1 – CPU usage 100% – Error A few minutes later, once the issue resolves

    • Maintain knowledge base integrity by moderating article comments

      Hello everyone, A knowledge base provides a self-service platform where customers can refer to articles, user manuals, and other resources to learn about the company's products or services and troubleshoot problems. Often, readers leave a comment on the

    • Making another calendar your default calendar

      I am trying to make another calendar my default calendar when I add events to it. It keep going to a single calendar, I need it to go to my google calendar by default, as this is linked to other services / websites. I cannot find an option to make it

    • Option to Delete Chats in IM

      Currently, there is no option to delete any chats in IM, regardless of their source.

    • Referencing a cell from another sheet

      My workbook has multiple sheets. Each sheet has some calcluated totals in certain cells. The front master sheet has a list of everything that is detailed on the other sheets, with the totals. These could change at any time, so the totals need to be references to the other cell's value, not a fixed number. So on the master sheet, I put in =, then go the other sheet and choose the cell and hit Enter. In regular Excel, this works. But in the Zoho sheet, it doesn't work. I have to edit the result by

    • Group mail for external email addresses

      Hello, I was just wondering if the Group mail feature works with external email addresses - e.g. gmail.com or a completely different domain? it seems only internal addresses (hosted with Zoho) receive the mail. Thanks, Oliver

    • Dont have backup option in setting

      Hi guys. I started using zoho book a week ago. I bought premium package yet I don't have backup option in setting. I hope anyone can help me find a solution. Thanks in advance

    • The email address you have entered belongs to a different deployment/region.

      Hi, I am trying to create the user - mprust@crombiecomputers.co.uk but keep getting the message below -  The email address you have entered belongs to a different deployment/region. Please contact support@zohoaccounts.com for assistance. Look forward

    • Use Zoho Flow Credits for CRM ‘Actions by Zoho Flow’

      Hello Team, We would like to submit a feature request regarding credit usage for “Actions by Zoho Flow” in Zoho CRM. Use Case: We are Zoho One users and actively use Zoho Flow, where our organization has 52,000 Flow tasks per month. In Zoho CRM, we use

    • Unusual activity detected from this IP. Please try again after some time.

      Hello Zoho admin and IT team We are a registered website in Eloctronic services and we been trying to add our users to the zoho system but this issue faced us ,, hope you unlocked us please.

    • Alert if a field is ticked.

      Hi There, We have two modules named Opportunities (Deals) and End Users (CustomModule1), as per the image below. Within Opportunities, we have a lookup field that looks up from the End Users Module. We are looking to get an alert either via email or another

    • Zoho CRM Analytics - Allow To Reorder Dashboards

      I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go

    • Sending a Template to Sign

      hi, trying to send a template to be signed using this as a test: $accessToken = "1000.xxx" $templateId = "1234" $uri = "https://sign.zoho.eu/api/v1/templates/$templateId/createdocument" $payload = @{ templates = @( @{ template_id = $templateId request_name

    • Adding Choices in a Sub-Form Dropdown

      Hi, Has anybody tried Adding Choices to a Dropdown in a Zoho Creator Sub-Form programmatically? My Deluge code adds rows to a subform with 2 fields A and B. A - text field. B - dropdown. My Deluge script adds the row and displays A successfully. For the

    • Zoho CRM Email Templates 100% Width No Background How?

      Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this? 

    • Checking client unsubscribe details

      Hi team, Can you please let me know where we can check if a client has unsubscribed, along with the date and time it was done? If this information is not available at our end, please help confirm the unsubscribe date for the below email ID from the backend:

    • Optimum CRM setup for new B2B business

      Can some advise the most common way to setup Zoho CRM to handle sales for a B2B company? Specifically in how to handle inbound/outbound emails. I have spent hours researching online and can't seem to find an accepted approach, or even a tutorial. I have

    • Scan and Fill CRM Lookup Field

      Not sure if there is a reason why this isn't possible or if I'm just missing it. But I would like to be able to use the scan and fill feature on the mobile app to prefill the CRM lookup field and fetch the rest of the data in the form.

    • Customer Management: #2 Organize Customers to Enhance Efficiency

      When Ankit started his digital services firm, things felt simple. A client would call, ask for a website or a one-time consultation, Ankit would send an invoice, get paid, and move on. "Just one client, one invoice. Easy.", he thought. Fast forward a

    • Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails

      How do i setup Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails

    • Attachments between Zoho and Clickup, using Flow.

      Olá suporte Flow, tudo bem ? Estamos usando o flow para integrar Zoho Desk com o clickup. Não localizamos a opção de integrar anexos entre do zoho Desk para o clickup. Gostaríamos de saber se migrando para o plano pago, teremos suporte para fazer a integração

    • Adding an Account on Zoho Mail Trigger in Zoho Flow

      I'm trying to create a flow using the zoho mail trigger "Email Receive". My problem is that when I select this trigger, it only shows one account from the account dropdown. I'm planning to assign it on a different email. How can I add other email ad

    • Linnworks

      Unless I am missing something, the Linnworks integration is very basic and limited. I have reached out to support but the first response was completely useless and trying to get a reply in a timely manner is very difficult. Surely I should be able to

    • Test data won't load

      I am using a Flow to receive orders from WooCommerce and add them to a Zoho Creator app. I recently received an order which failed, and when attempting to test the order I found that it just shows a loading animation and shows up in the history as "queued."

    • AddHour resets the time to 00:00:00 before adding the hour.

      Based on the documentation here: https://www.zoho.com/deluge/help/functions/datetime/addhour.html Here's my custom function: string ConvertDateFormat(string inputDate) { // Extract only the date-time part (before the timezone) dateTimePart = inputDate.subString(0,19);

    • WhatsApp Link is not integrating

      Hello, I am using zoho flow. when new row added in google sheet it sends email to respected person. In email body I have a text "Share via WhatsApp". behind this text I putted a link. But when the recipient receives email and wants to share my given info

    • Zoho flow - Webhook

      If I choose an app as a trigger in Zoho Flow, is it still possible to add a webhook later in the same flow?

    • Zoho Flow + Bigin + Shopify

      We are testing Zoho Flow for the first time and want to create a flow based in first purchases. When a client makes his first order, we're going to add the "primeiracompra" (first order) tag to his account in Shopify (it's not efficient, but that's the

    • Is it The Flow? Or is it me?

      I want to do some basic level stuff, take two fields from a webhook, create a zsheet from a template using one field with date appended, create a folder using both fields as the name, and put the zsheet into that folder. I was going to elaborate - but

    • Having problem with data transferring from Google sheet to ZMA

      When connecting Google sheet with Zoho marketing automation it is having the email as a mandatory field. Can I change it as non-mandatory field or is there any other way to trasnfer data from google sheet to ZMA. I have leads which we get from whatsapp,

    • Dropbox to Workdrive synchronisation

      I want to get all the files and folders from Dropbox to Workdrive and each time a new file or folder is added in dropbox i want it to be available in Workdrive and wise versa. Sync Updates to Files Trigger: "File updated" (Dropbox). Action: "Upload file"

    • Microsoft Planner Task to Service Desk Plus Request - error n4001

      Hi there. I'm trying to create a flow that will create a new request in ServiceDesk Plus when a new task is created in Microsoft Planner. I have succesfully connected both Planner and ServiceDesk Plus, and have configured the 'create request' section

    • Trailing Space in "Date and time scheduled "

      I am trying to use the Zoho Projects - Create event action in a flow. It is failing with the output error as: "Action did not execute successfully due to an unknown error. Contact support for more details." The input is: { "Duration - Minutes": 30, "Project":

    • Project name by deal name; project creation via flow

      Hello, I want to create a project in zoho projects using flow by a trigger at the crm. My trigger is the update of a deal (stage). The project name should be the account name/ deal name. But I dont find the solution to it. Can you please give me the answer

    • Slack / Zoho Flow; Repl

      I am trying to add a comment in a zoho ticket when someone reply's to a message in a thread. The Message posted to public channel trigger doesn't seem to pick up thread messages. I also cannot use the thread_ts field as it doesn't seem to pull that in.

    • Get Holiday ready with Zoho Mail's Templates

      As the holiday season approaches, it’s time to step away from work and unwind. You may not be able to respond to every email or send individual messages to wish everyone holidays greetings—but It is still important to stay connected. How do you send thoughtful

    • Customize folder permissions in a Team Folder in a Team Folder via zoho Flow

      HI All, on the nth level folder of a team folder I would like to Customize folder permissions when it's created in the flow of Creating folders. That last level I only want to grant access to a specific group, goup ID 201XXXXXXXX. Can you help with a

    • Next Page