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

      • File upload size limits

        I am designing a contact form in Zoho Creator with File upload facility. I am not sure where and how to set the following properties for the same: Allowed File Types Maximum Size of the Attachment Number of Attachments

      • Composite Services and Account Tracking

        I am looking to garner support/request the ability to make composite services. A quick search in the forums brings up multiple requests for this feature. I fail to see why an item is mandatory while services are optional. I also would like to see the

      • All operation codes getting Not applied in WO-TT22J1025WOR0471, SR-TT22J1025PRE0423,FOR VIN-W1K6G2AB2SL005130.

        Dear Support Team, Please refer attached screenshot. All operation codes getting not applied in work order. Request you to please check and update ASAP.

      • Exclude Segment from Campaign Recipients

        I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.

      • Reschedule Multiple/Mass Calls at Once

        When we go into a Call record, we have the option to "Reschedule Call." How can we select multiple Calls at once from the Activities tab and Reschedule them? The big use case for us: We have many leads that our reps are supposed to call on a daily basis.

      • Option to Empty Entire Mailbox or Folder in Zoho Mail

        Hello Zoho Mail Team, How are you? We would like to request an enhancement to Zoho Mail that would allow administrators and users to quickly clear out entire folders or mailboxes, including shared mailboxes. Current Limitation: At present, Zoho Mail only

      • I want to Make the due date of the project appears automatically

        hello everyone I want to know if the zoho projects app can add automatically the END DATE of the project I added the duration, start after dates of each tasks in the project template & the starting date of the project itself and the end date of it doesn't

      • Drag 'n' Drop Fields to a Sub-Form and "Move Field To" Option

        Hi, I would like to be able to move fields from the Main Page to a Sub-Form or from a Sub-Form to either the Main Page or another Sub-Form. Today if you change the design you have to delete and recreate every field, not just move them. Would be nice to

      • Deluge Tips & Tricks: Mastering dates and times

        Hello everyone! We're bringing back our Deluge Tips & Tricks series, where we show you how to make the most of Deluge for achieving a wide range of use cases. Working with dates and times is a fundamental part of almost any business application. Whether

      • Adding a Button in a Form in Zoho Creator App

        Hi I want to know how can I add a Button in Zoho Creator form. I have options that I select from a multiselect options and I want the button to add those selected options in a Subform. I do not want to add on a Page Builder I want it inside a specific

      • Internal Exception for Creator function

        I have been running a script successfully for several days using the scheduler in my application. Now today it suddenly creates and Internal Exception error. Nothing has changed about the script. The data is still retrievable from the web service it is using. Why would this suddenly be happening for no apparent reason? Also noticed that my usage logs are not up to date. Is something changing behind the scenes?

      • How to Set Up a Custom Domain and Customize Homepage

        Hello, I am experimenting with Zoho Creator to build applications for my own use case and have encountered a couple of issues: 1. Custom Domain Access: Is it possible to access my Zoho Creator application through a domain that I own? If so, how does the

      • Announcing new features in Trident for Mac (1.26.0)

        Hello everyone! Trident for macOS (v1.26.0) is here with new updates to securely manage your passwords, locally save your emails, and protect against emails with suspicious URLs. Let's take a quick look at them. Manage passwords with Zoho Vault eWidget.

      • Default Value on a Number

        Hi, I would be nice to also be able to set the Default Value for a Number Field, not just the Initial Value shown, so if not on the screen so not enetred it can have a value of 0 for example. Thanks Dan

      • Having trouble fetching contents of Zoho Connect Feeds using the API, requesting alternative API documentation.

        I'm trying to retrieve feed/post data from Zoho Connect using the API but facing challenges with the current documentation. What I've tried: OAuth authentication is working correctly (getting 200 OK responses) Tested multiple endpoints: /pulse/nativeapi/v2/feeds,

      • I can't set office hours in SalesIQ.

        I can't find the option to enable business hours in SalesIQ. Can someone please help me? Thank you.

      • Tip#45: Custom Tags and Cluster Tags

        Tagging your work items helps categorize and label work items within your Zoho Sprints workspace. Now, this feature is expanded across multiple modules, along with the introduction of cluster tags that offer an advanced tagging mechanism. Manage Tags

      • [Free Webinar] User Management in Zoho Creator - Creator Tech Connect

        Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

      • A couple of minor enhancements to Workflows

        Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"

      • Business Continuity - Disaster Recovery

        I know about the Zoho CRM backup .zip files, however, this doesn't include any of the infrastructure with like custom fields or custom modules. I am curious on what everyone has in place for a true backup or what your plan is if your Zoho instance were

      • Narrative 11: Are your customers happy?

        Behind the scenes of a successful ticketing system: BTS Series Narrative 11: Are your customers happy? Happiness isn't just something you experience; it's something you remember. Hear your customers' voices by enabling customer happiness ratings in Zoho

      • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

        When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

      • Signature field is showing black

        Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

      • Zoho CRM Android app updates: record sharing, user image upload, Zoho Survey integration, and more

        Hello everyone, We've made some important improvements to Zoho CRM's Android app, and we'd like to walk you through the latest updates. Here's what's new: Record sharing with org users User image upload Zoho Survey integration support Venue preference

      • How to Delete/hide Google adwords section from Layout?

        Hi people, maybe someone can tell me how to remove or hide the Google adwords section from my layout? Im not using it and it takes too much space.

      • WIDGET in related record list ZOHO CRM; how to get and put data to subform custom fields?

        he need: Read and write two custom subform line-item fields on Quotes: Segment_wyceny (picklist/text) and W_pakiecie (number). Write works; read does not return these fields via SDK. Environment Zoho CRM Widget Zoho Embedded App SDK v1.2 Module: Quotes

      • Outgoing emails to btinternet blocked.

        ERROR_CODE :421, ERROR_CODE :Too many messages (1.5.6.1) from 74.201.84.163I have been having problems sending to btinternet.com and btopenworld.com for the past week.  First 'email delayed' message, and then 'delivery failed', as above. Looks as though someone is spamming from the ZOHO email server 'sender163-mail.zoho.com' Surely this is abuse of your system, and you should be able to trace who it is (if it is a registered user of Zoho mail?) and block their account. An email system is really no

      • Way to update CRM records in quik view

        I have custom module in zoho crm and that module have 500 records. I want a quick way or UI so that user can easily update the record information in quick view without going to record detail view or edit view. I tried zoho sheet option but in zoho sheet

      • Where to integrate Price Book and Product List Price

        Hello, We sync zoho crm all modules with all data to zoho analytics. In zoho crm, we have "Price Books" and "Products" modules, where each product is assigned to a few price books with different list prices. From zoho crm, I am able to export a dataset

      • Form / CRM Integration Not entering into workflow

        I have a simple form setup with company name, first name, last name and lead source. Each of the fields are mapped to CRM Leads module. When the form is submitted, the lead is populated properly. I also have a workflow created that when the lead source

      • Zoho Slowness - Workarounds

        Hi all, We've been having intermittent slowness and Zoho just asks for same stuff each time but never fix it. It usually just goes away on it's own after a couple weeks. Given that speed is a very important thing for companies to be able to keep up with

      • Don't understand why Forms Mobile Scan and Fill not working

        I have configure enabled mobile scan and fill, I have enabled QR and Bar code on two fields name and position, I have mapped seq 1 to Name and seq 2 to position, I have created a 2d QR code with the person names and position, seperated by a comma. When

      • Recurring Supervisor Rule Reminders for Open/In-Progress Tickets

        Hello Zoho Support Team, I would like to suggest a potential improvement regarding reminders for tickets and activities in Zoho Desk. Currently, it is possible to set reminders only once. In the Supervisor Rules section, it is possible to configure reminders

      • Template usage

        Hi, We are using some templates as a response to customer questions. Is it possible to analyze the usage of these templates? We want to know if the use of our templates has increased over time

      • Ticket Status Colors

        Can i change the colors of Ticket Status in the admin panel? Or even change the background of the entire cell of a Critical ticket? This way its easy for my agents to see a urgent ticket when it comes in. Right now everything is black text. Here Right

      • Sync Lookup Fields from Zoho CRM

        HI Team, I have synced a lookup field from my CRM data to Campaigns. When I view the synced data the field appears to display a Zoho CRM record ID rather than the text value. Is it possible to get the sync to import the text value rather than the CRM

      • New From Address cannot verify

        I have created a new From Address, which is the support@ address for my domain, that forwards to the default support mailbox. Presumably then, the verification email that is sent, should turn up as a ticket, but it does not. How can I verify my from address so that I can use my own domain?

      • issue with image thumbnails not showing in Image Selector

        We have been using Zoho Campaigns for over a year, maybe close to two years, and this issue just started happening in the last month. I wanted to wait to see if it would resolve on it's own, and it doesn't seem to be. The thumbnail images for all new

      • Deluge Script for adding tag

        Trying to create a custom function where a tag is added to a record - but for the life of me, I cannot figure out how. Help please! Moderation Update: Adding the help doc and sample to add Tags to records via deluge here for everyone's benefit. tag1 =

      • Unlock your Zoho Vault with OneAuth, Windows Hello, TouchID, YubiKey, and many more!

        Hello everyone, We are thrilled to introduce one of the most highly requested features – the ability to unlock your Zoho Vault using various authenticators. The primary purpose of a password manager is to remember just one master password and securely

      • Next Page