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.
- Enter the following script in the Client Script IDE and click save.
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.
- Lead Status is "Pre-Qualified" , foreground color is set to green and background color is set to light yellow.
- Lead Status is "Lost Lead/Junk Lead" and foreground color is set to red.
- 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.
- Enter the following script in the Client Script IDE and click save.
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!
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Nick
Serge Piskarev
859953848@zohoclosedAccount.com
Blake
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 thisKaizen #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 howKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Sales IQ Chat Widget is Only Displaying Last Name
Can anyone suggest why the widget is only displaying "last name"?! We have the latest version of the wordpress plugin installed. Thanks Thanks!Shopify - Item sync from Zoho Inventory
Hi team, We’ve connected Shopify with Zoho Inventory. We want that when an item is created in Zoho Inventory, it must create a product in Shopify. But currently, new items created in Zoho Inventory are not getting created in Shopify even after clickingKill zoho meeting
Saying the quiet part out loud. Can zoho please just give up on the idea that they can make a meeting platform and just make our workplace licenses cheaper when you remove it so people can switch to zoom or teams. Tired of the excuses, you guys cant makeUtilisation de Zoho en conformité avec l’article 286 du Code général des impôts (CGI)
Cher(e) client(e), Conformément à l’article 286 du Code général des impôts (CGI) impose aux entreprises assujetties à la TVA d’utiliser des systèmes de caisse ou de gestion commerciale certifiés lorsqu’elles enregistrent des ventes à des particuliers.Unable to Create Task as a Support Administrator
Hello! I want to ask for help regarding creating tasks within the tickets. I am by default the Support Admin. I should be able to create tasks or activities right? But there's a prompt that I need to contact the Administrator. See photos for reference.Introducing Forms in Zoho Sheet
We hereby bring you the power of forms in Zoho Sheet. Now, build and create your own customized forms using Zoho Sheet. Be it compiling a questionnaire or rolling out a survey, Zoho Sheet can do it all for you. Forms is an excellent feature that helps you collect information in the simplest of ways and having it in Zoho Sheet takes it a notch higher. Build Simple yet Powerful forms Building forms using Zoho Sheet is fairly simple. The exclusive 'Form' tab lets you create one quickly. Whether youLayout one survey question in a time & redirect next Page based on previous response
I have doubt while, I am scripting survey on the Zoho where I redirecting to next page based on my previous response but didn’t get success on this. Please help me on this and tell me how I layout one survey questions in a time when I submit responseZoho Bookings form pre-filled with Zoho Forms in
Hi, I've got a contact page on my website and I'd like to have the option to book an appointment (redirected to zoho bookings page) after an option is submitted on the contact form. how would I go about doing this? thanksSupport “Other” Option with Free Text in Dropdown Fields
Hello Zoho Bookings Team, Greetings, We would like to request an enhancement to the registration form fields in Zoho Bookings, specifically for dropdown fields. Current Limitation: At the moment, dropdown fields do not support an “Other” option that allowsSending automated messages that appear in the ticket's conversation thread
Good morning, esteemed Zoho Desk community, warm greetings Today I am here to raise the following problem, seeking a solution that I can implement: I need to implement an automation that allows me to send reminder messages to customers when I am waitingPayment Card or Identity form-fill from Vault?
Hello! I'm working on replacing Bitwarden with Vault and one issue I've run into is that I can't find any option to fill address and payment forms from Payment Card or Identity info that has been saved in Vault. Is there a way to do this? Is it a plannedTime Log Reminder
Tracking the time spent on tasks and issues is one of the most important functions of a timesheet. However, users may forget to update the time logs because they have their own goals to achieve. But, time logs must be updated at regular intervals to keep[Early-access] Introducing Zoho's CommandCenter - Cross-Zoho business process automation
Resources to help Webinar recording | Documentation Feature Restrictions Currently available on early-access only for US data center accounts Features Role CommandCenter as a Service uses signals across Zoho services to propel the movement of recordsTip #58- Accessibility Controls in Zoho Assist: Learning- 'Insider Insights'
Learning should be clear and interruption-free for everyone. Timely feedback plays an important role in helping users understand actions as they happen, without breaking their focus. In this post, we’ll explore the final section of Accessibility: Learning.ZIA "Generate Content" action doesn't have contexual data from the ticket
"Generate Content" action doesn't have contexual data from the ticket. I try to get AI to help me with this ticket but it doesn't seem to have any ticket information as context. Although the ticket has a lot of information in it.Zoho Desk - Zoho FSM Integration issue on Mobile and iPad
Hello Team, I am trying to create a Work Order (WO) using the Zoho FSM integration (Add-on Service) that is integrated with Zoho Desk. The issue is that the integration is not working on mobile devices and iPads. While I am able to create the WO, Request,E-File Form 1099 Directly With the IRS From Zoho Books
The Form 1099 filing season has begun, and businesses are required to e-file certain forms with the IRS to report payments made to vendors and contractors. If your business made qualifying payments during the year, you must e-file the appropriate FormSuggestions for showing subscribed Topics in CRM (contact record)
We have several Topics set up in ZMA. We also have a sync set up between ZMA and CRM. I'd like to display the subscribed topics on the CRM Contact record. This will allow the Sales team (who uses CRM) to see at a glance what topics a Contact is subscribedReplies sometimes creating separate ticket
Sometimes when a customer responds to an email coming from Zoho Desk, instead of adding a reply to the original ticket, a separate ticket is created. This happens even though the response subject line contained the ticket number, and the person respondingRe-hide fields when option is unselected
Hi all Can anyone help me with this - when I create a 'show' field rule for when a dropdown option is selected, how to I make it so the 'show' option re-hides if that option is no longer selected?Custom Fields
There is no way to add a custom field in the "Timesheet" module. Honestly, the ability to add a custom field should be available in every module.Consultant-Only Booking Page
Zoho Bookings does not allow for Meeting Type OR Workspace-Wide booking pages to be turned off. This is detrimental to organizations that have territory-based or assigned accounts, because if prospects can go to these booking pages and either select theCustom Sorting based on other columns in table
I need the ability to apply custom sorting to a text-based dimension in the X axis where the sorting is based on another column in the table. For example, I have a chart report where the X axis is a text label. I would like to be able to sort those textIs there a way to invoke deluge function from within a widget?
Hi! I have custom functions in deluge and I was wondering whether there is any way to call this function through a widget? Something like on click of a button inside a widget, run the deluge custom function. Would this be possible?Can a default task Priority be set?
The "Priority" field in the Task layout does not allow a default to be set. Is there another way of doing it? Because the current default is "None" and the Zoho Kanban board design has selected this field as critical information to surface by includingAdding a threshold to a line chart based on date range
I have a line chart that is tracking a percentage over time. It also has a filter for 50 different clients. I would like to create a threshold that is based on a portion of the date range. As I understand it, this would be done by adding a column to theResize Signature field dynamically
On the tablet, it is perfect. But on smaller mobile devices and PCs, both web and application, it is too small for people to sign. Is there any plan to make the signature field size dynamically in the future update?Zoho Creator Application - New User Not able to access the application
In Zoho Creator, The newly added user not able to access the " Added Application" - User has received the Invitation Email, but while clicking "confirm Account" in the invitation Email, the following error message has appeared. "Sorry! you cannot acceptDeleting Salutation Field
We have updated our lead input screen and 'Salutation' has appeared. This is not visible in the 'Edit Pgae Layout' screen so cannot be moved to 'List of Removed Fields' Salutation is visible in the list in 'Customization - Fields' however I can only 'Edit' or 'Replace' I cannot delete and I do not need this field on my lead input screen. Please can you advise how to get rid of this. Screen shots can be provided if needed. Thank you TashaAuto-Generate & Update Asset Serial Numbers using a custom function (Assets Module)
Hello Team, I’ve been working on a script to automate one of our processes in Zoho FSM, and the core functionality has been successfully implemented. However, I’m encountering an issue related to serial number allocation, which is not working as expected.Zoho Mail iOS app update: Access Delegated Mailbox.
Hello everyone! You can now access the delegated mailbox from within the iOS version of the Zoho Mail app. To access the delegated mailbox: Open the Zoho Mail app. Go on to the 'Email' module. Tap the profile picture. Choose the delegated mailbox PleaseHow to convert Lead's country field from Text to Pick List
Hi, I would like to change the default country field in ZCRM from text to pick list. It looks like not I can't delete default country field and recreate it as pick list nor can i create an new custom field country because such a label belong to default field. So what do I have to do? Any ideas? LHow create a draft via workflow?
I wish to create a workflow rule for specific emails that creates a draft response - not an automatic email reply, but just a draft with a set response ready to be verified by an agent who can then manually select recipients. Alternatively, the workflowFunction #51: Transaction Level Profitability for Quotes
Hello everyone, and welcome back to our series! In a previous post, we shared a custom function that could determine the profitability of a Sales Order. Today, we are presenting a similar function that calculates the profitability of a Quote. The setupImproved Contact Sync flow in Google Integration with Zoho CRM
Hello Everyone, Your contact sync in Google integration just got revamped! We have redesigned the sync process to give users more control over what data flows into Google and ensure that this data flows effortlessly between Zoho CRM and Google. With thisالخصم على مستوى فاتورة المبيعات
السلام عليكم ورحمة الله وبركاته مطلوب في إنشاء خصم على مستوى فاتورة المبيعات وليس على مستوى البند أريد معرفة الطريقة؟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 issueDefault Tagging on API-generated Transactions
If one assigns tags to an Item or Customer, those tags get auto-populated in each line item of an Invoice or Sales Order when one creates those documents. However, if one creates the Sales Order or Invoice via the API (either directly coding or usingDirect Feed (Bank)
Is Direct feed integration for AlRajhi and ADCB bank supported by Zoho Books in GCC/SaudiSales Order, Invoice and Payment numbers
Hi zoho friends, it is me again, the slow learner. I'm wondering if there is a way to have it so the Sales order, invoice and payment numbers are all the same? It would be easier for me if they were the same number so there is not so many reference numbersNext Page