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

      • Using Zia in Zoho Sheet data to research the internet and return answer to a cell in Zoho Sheet

        I'm trying to see if Zia (connected with OpenAI key) can take data parameters stored in a Zoho Sheet to conduct research out on the internet then return an answer into the same Sheet. I'm trying to do the equivalent of using something like the =AI() function

      • [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]"

      • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

        We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

      • 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

      • Add and Remove Agents from Departments and Groups in Zoho One

        Hi Zoho Flow Team, We hope you're doing well. Currently, Zoho Flow provides an action to add an agent to a group in zoho one, but there is no action to remove an agent from a group or a department. Another action that we find missing is the option to

      • Zoho CRM - best way to search an account and assign to a deal

        Hi Everyone I am looking for some advice. I want to find the best way to complete the below steps. We have a deal and once it reaches a certain stage we need to allocate a supplier / vendor to this deal along with the salesperson. I want to add (ideally

      • 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

      • How to Assign Record Ownership in a Custom Form via API?

        Hello everyone, I’ve created a custom form in Zoho People and I’m using the API to manage its records. I would like to know how I can assign ownership of these records to specific users via the API. Is there a specific parameter or field in the API request

      • 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

      • Apple Messages for Business in Omnichannel communications?

        Hello, Apple launched "Apple Messages for Business" but Zoho CRM or Zoho Desk don't appear in the list of possible integrators. Zoho already promotes https://www.zoho.com/crm/omnichannel.html Omni Channel integration, but Apple Messages does not yet appear.

      • 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

      • If I turn off the Task Prefix & ID in the Portal Configuration section, will it remove the dependencies in my projects?

        Hi all, basically the title, I am new to zoho projects and trying to get my head around some basic principles. Unfortunately I have not found this information via the search option and after deleting yesterday some Phases I had created in the Phases tab,

      • 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

      • Zoho Sheets not compatible with Excel/Google Sheets

        In order to share a copy of a Zoho sheet with someone that does not use Zoho, it must be downloaded as MS Excel format and then added to an email.  This is a labor intensive, and frankly confusing process.  I have forgotten to do this before, only to

      • 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

      • Next Page