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!

      • Recent Topics

      • [Free Webinar] Learning Table Series - Creator for the Education Industry

        Hello Everyone! We're thrilled to invite you to the Learning Table Series—a year-long initiative to demonstrate how Zoho Creator can transform industries with innovative and automated solutions. Each month focuses on a specific industry, and this time,

      • Remove the [## XXXX ###] from subject replies

        For our organisation we would like to have the [## XXXX ###] removed from subject replies. Cheers, Jurgen 365VitaalWerken

      • Self Client Authorization Issue

        Hi. Trying to test the api integration for Zoho Desk with the Self Client - Client Credintials flow method. I've created the self client, obtained the client id and secret, inputted "Desk.tickets.ALL" as my scope, and "ZohoDesk.[My Zoho Desk Org ID]"

      • How Can I Easily Access and Manage My GEPCO Online Bill Using Zoho Sheets?

        Hello everyone, I'm looking for an efficient way to access and manage my GEPCO online bills. I've heard that Zoho Sheets can be a powerful tool for organizing and tracking bills, but I'm not sure how to set it up for this specific purpose. Does anyone

      • All notes disappeared

        I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,

      • How to add tags to a record with jS SDK 1.2/ZohoEmbededAppSDK

        Hello Is it possible to add tags to a record with jS SDK : https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js ZOHO.CRM.API.updateRecord Thanks for insights

      • URGENT: Zoho Forms reCAPTCHA v2 Spam Issue

        Hello Everyone, We are encountering a critical issue with Zoho Forms despite having reCAPTCHA v2 enabled. Our business is accessibility-focused, and we are receiving a high volume of spam submissions, which is significantly affecting our workflow and

      • View all Products by pipeline deal

        Very good CRM I use it everyday only problem is modules not being interconnected especially products module. The main problem of products module are separated from contacts and company modules and only being connected to the Deals module. This way there's

      • Add "Lead Image" in Bulk?

        Each of our Leads is accompanied with a URL containing a photo of the lead when they come in. We currently have to manually download then upload the photo to the lead. This is a HUGE waste of time. Is there any way to AUTOMATICALLY add the photos to the

      • Map fields from CRM record to Finance Suite/Books Invoice fields

        I'm trying to auto-fill unique record specific field inputs that I have in my Contacts and Deals modules onto Invoices created from the record's finance suite related list upon creation.  One example is a field called "Job Number" that I have in my Contact

      • What's New in Zoho Analytics - December 2024

        Hello Users! We’re excited to bring you a roundup of the latest features and improvements in Zoho Analytics. These updates are designed to elevate your data analytics experience, making it more powerful, interactive, and seamless. Let’s dive in! Expanded

      • trying to access CRM Variables with JS SDK

        Hello i built a widget with Sigma, i create CRM VARIABLES in custom properties. I try to access them in function : ZOHO.embeddedApp.on("PageLoad",function(data) with : ZOHO.CRM.CONFIG.getVariable("mycrmvariable").then(function(data){ console.log("mycrmvariable

      • Writing on sketch cards is bugged when zoomed in

        When zoomed in, it writes a noticeable distance above or to the side of where you're actually trying to write. The further you're zoomed in, the more noticeable it is. Zooming is also entirely absent on the desktop version.

      • Private Project

        Hi, I would like to know if a user can create a Private project that only he's able to see it. Not even the ADMIN user. Thanks

      • Accordion in tabs to create FAQs, etc.

        Accordion elements do not seem to be able to be placed in the tabs. It would be useful to be able to do this. Thank you.

      • Which are the IP addresses to use for 'split delivery' with Office 365? (Zoho mail inbound gateway)

        Hi, I'm trying to set up 'split delivery' (email routing) with Office 365. I'm following the instructions to set up Office 365 as the primary server (https://www.zoho.com/mail/help/adminconsole/coexistence-with-office365.html) One of the prerequisites

      • Zoho Projects 2024 Recap

        Dear Users, As we conclude another remarkable year, it's the time to reflect on the journey we've just completed. The year 2024, defined by significant milestones, challenges, achievements, and important lessons. Every moment has contributed to the story

      • Custom Fields at Line Level

        Hi, is there an ability to add custom fields at line level? I need to track the start and the end date for each product within an invoice and I can't seem to find an option to do this.

      • Zoho API Error Code 7019 when adding job.

        Hello, I am following the documentation found here. https://www.zoho.com/people/api/timesheet/adding-jobs.html Regardless of how I try and post the data (including just using the example requests), I receive back the response {'response': {'message':

      • How to see changes with ZOHO.CRM.API.updateRecord(config) without reload page

        hello got a widget in account, trigger with a button i copy data to account when click on a button, in my popup All is working well. But i need to reload the page to see the update. How can i see the changes without reloading page, only when close the

      • How to call a Creator function which is in a different Creator application?

        How to call a Creator function which is in a different Creator application?

      • Unable to send message; Reason: 554 5.1.8 Email Outgoing Blocked

        My account is mino@flawless-frames.com, or flawlessframesstudio@gmail.com Could you please unblock my account, I've got restricted from sending more emails

      • Stock Count

        The stock count is a nice new feature, but we cannot figure out how to: 1. Use it without assigning to a person, we have a team or one of multiple do stock counts as do most any company. 2. Add any extra fields to what the "counter" sees. The most important

      • Move a Contact from Current Account to a NEW Account

        I do not believe the functionality to Move a Contact from a Current Account to a New Account is not available. Please someone tell me I am missing something! I have been through designing, developing, using and selling CRM systems for over 25 years and had this functionality20+ years ago in other CRMs.  In the real world people move from one organisation to another. In the sales, finance and technical world it is nice to see the communication history with that person in their old account and also

      • Force Specific Layout for CRM Contacts Portal

        Hello: We're in trial on ZOHO One and looking at the CRM Portal (just for the contacts module). We have a client layout set up for Contacts that is working well for our internally, but for the portal we don't want to require (make mandatory) some of the

      • Automatic Removal of Departments and Groups for Inactive Employees in Zoho One

        Hi Zoho One Team, We hope you're doing well. Currently, when an employee is marked as inactive in Zoho One, they remain listed as a member of their department and associated groups. This creates a challenge in maintaining accurate records and ensuring

      • Change eMail Template for Event-Invitations

        Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, Juerg

      • Zoho Social integration with Zoho Flow

        Is there any plans for Zoho Social integration with Zoho Flow?

      • Zoho CRM Widget and translations

        Hi everyone! We're building a Widget with zoho-extension-toolkit, how is localization supposed to work? "zet init" created a translations/en.json file, but what should go inside it and how is it supposed to be accessed from the Widget/javascript? Thanks

      • Bienvenue à Zoho FSM : l'optimisation des opérations locales qui offre une expérience de service impeccable

        Nous sommes ravis de vous présenter Zoho FSM, la plateforme de gestion des services terrain de bout en bout. Les solutions de gestion des services locaux s'adressent aux organisations qui effectuent des activités d'installation, de réparation et de maintenance

      • Adding tag to specific record as an acion in a workflow

        Hi! I've created the following workflow in the module 'Leads'. When a record meets the criteria, there should be a tag added to the specific record in the module 'Contacts'. In the module 'Leads', there is a look-up field named 'Kandidaat' which is connected

      • Trying to catch error with ZOHO.CRM.HTTP.get (Response Code)

        Hello, I'm trying to get response header from ZOHO.CRM.HTTP.get, in order to catch error like 404 or something else but it seems that ZOHO.CRM.HTTP.get() method only returns the body of the response, and I see no way to access the headers returned. Is

      • FSM - How to ADD PHOTOS to Estimates & Invoices

        How can you add photos to estimates and invoices that are being emailed to the client so the can see what you are estimating and your completed work?

      • Free developer edition of Zoho CRM

        A question for Zoho and other developers: How can you set up a demonstration version of a Zoho CRM implementation to show employers/clients what can be achieved? Do you pay for Zoho CRM Enterprise/Zoho One for this purpose? Does Zoho offer a free version

      • Can I add Conditional merge tags on my Templates?

        Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

      • Where are scheduled emails stored?

        After you schedule an email to go out through the CRM, how do you go about changing that scheduled email? Or even where can I see the list of emails scheduled to go out? They are not listed in my Zoho Mail account in Outbox which has been the only answer

      • CRM Home Page Dashboard, how can i add zoho desk cases?

        How can i see which tickets are in my group as a dashboard component on the home tab in zoho crm? I don't see any way of adding this.

      • Custom Module missing SDK function fetchRelatedRecords(...) in a Client Script

        Good day, We have added a new module with a Multi-Lookup relation to Contacts.  When we tried to use the fetchRelatedRecords(id, related_list_api_name) function to get Related Records it is missing for our new custom module. https://js.zohocdn.com/crm/5124797/documentation/DotSDK/Modules.html

      • Assistance with Setting Default Values for Zoho Chat Custom Fields

        I am currently using the Zoho Chat JavaScript API to successfully add custom fields to the chat interface. While the implementation of these fields has been smooth, I am now looking to set default values for these custom fields. However, I couldn't find

      • Subform Client Script

        Good day,  I have a subform where users can subscribe to various magazines. I would like to prevent the user from selecting the same magazine twice when adding a new row. Is there a way to prevent the user from doing this? (Can it be done via a client

      • Next Page