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

    • Merge item

      As a follow up on a request point raised 7 years ago I would like to submit an official request to enable a "merge item" option. Discussion: https://help.zoho.com/portal/en/community/topic/merge-items submitted by user 4001007559351 Our business has several

    • Canvas Fit to Screen

      Hi, is it possible to have the Fit to Screen tickbox unmarked as a default?

    • Banking - User Roles - Access To Single Bank Account

      Hi, We have different locations with each location having a specific bank account for Expenses/Etc... Can you please confirm on whether it's possible to give a user (non accountant), specific access to only a single bank account as opposed to all accounts

    • Zoho Account search not finding account even thought account is created

      Hi Over the last week I cannot find a account on a lookup field, the account exists as when I check in the module its there. Any lookup filter, in a lookup field fails to find the appropriate account, im not sure if you have a Regex issue but its clearly

    • How to send an alert when there have been no leads for 2 days

      Hello, I want to be alerted when there have been no new leads created for, say, 2 days. It seems like it should be a simple thing to achieve but I'm struggling. I tried asking Zia and this was the answer, but it doesn't fit what I'm seeing on the workflow

    • How to get bulk write to work as expected

      I need to move data from our systems into Zoho. I have created a sandbox to test the usage of migrating our data to Zoho and confirmed everything worked there. When attempting to do the same with our production CRM I was met with an error saying Zoho

    • Zoho Sign embedded iframe

      Hello, we are looking for any of these options: a) some iframe that we can paste into our website for every signer, for onpage signing document. b) or get direct link for signers from Zoho sign API which we can redirect manually. Is any of these options

    • SIGNATURE FIELD INSIDE CRM MODULE

      I need to have a signature field inside CRM MODULE This can be used into my Post Sales Module that i´ve created to make Meetings Summary I need my client to sign this Meetings Summary during my visit and that ain´t possible with Zoho crm I know we have

    • email and username change

      HI, I'd like to change my email and username for my zoho store, please help me on this issue.

    • "Extra keys limit has exceeded"

      Hello, Has anyone encountered the below message before in a workflow log failure: "Update Record Response is {\"code\":52,\"message\":\"Extra keys limit has exceeded\"}" The script is supposed to generate an invoice for a deposit when a deposit payment

    • Collapsible Sections & Section Navigation Needed

      The flexibility of Zoho CRM has expanded greatly in the last few years, to the point that a leads module is now permissible to contain up to 350 fields. We don't use that many, but we are using 168 fields which are broken apart into 18 different sections.

    • use of comma as a decimal separator

      Hello, I wish to find a way to customize the number format for my proper use. I have to use french data, where the "," is used as the decimal separator : for example the french way to write "3.99�" is "3,99�" Is it possible to do it in Zoho Sheet ? If this is not actually the case, I'd love this feature to be implemented !

    • Zoho meeting api not working in trial version

      I have and free trial meeting access. When i have tried to create a authentication code for meeting it shows Invalid OAuth Scope error. My code: $client_id = 'client_id'; $redirect_uri = 'site_url'; $scope = 'ZohoMeeting.organize.CREATE,ZohoMeeting.organize.READ';

    • Why is Nordic No Longer Available as a Translation Service for Email

      I routine receive email in Nordic but now it has been removed from the list of available translations. Why?

    • Create WorkDrive Folder with specific Sub-Folders when new Zoho CRM entry in "Accounts" Module

      So, my flow creates a WorkDrive Folder in the required Team Folder, but I want the same flow to create four Subfolders within the new folder. Man, Woman, Boy & Girl sub-folders I was looking at this below but how do I identify the new Parent folder as

    • Live webinar: 2024 recap of Zoho Show

      Hello all, 2024 has been an incredible year for Zoho Show! We've listened to your feedback and worked continuously to strengthen the tools you use to create, collaborate, and deliver presentations. From rolling out new features to enhancing existing ones,

    • Changing Customer Currency

      It seems so silly that you can't change a customer's currency after a transaction is recorded. We work with companies all over the world and sometimes they might request an invoice in a different currency. To do this I have to create another customer

    • Bulk payment of bills from multiple vendors

      Is there a way to pay multiple vendors bills in one transaction?  It appears that you have to deal with each one as a seperate transaction.  Is there a way to export the transactions to the bank using an ABA file?

    • Line_Items not appearing in invoice arrays

      When i use the Zoho API to pull an invoice, it doesnt show the Line_items array... In the documentation it shows that it should appear but it does not. Is there any way to fix this?

    • Active Customer List 2024

      Hello everybody, i am just a beginner :) how can i create a customer list of all active customer in 2024? Active customer means, all customers, who received an invoice in 2024 of us. Just tried already in CRM. Can i do that also in ZOHO books? I am looking

    • Notifications on mentions in comments

      If another user mentions me (e.g. @mustafa... which autocompletes) in a comment on a ticket, how do I get notified? If I don't get notified, what on earth is the point of the mention feature???

    • [New] Create invoices and contracts in minutes with Zoho Writer's Merge Templates for Bigin!

      Do you often find yourself manually entering customer information in your business documents like invoices and contracts? This can be a time-consuming process that can take up valuable time from your business operations. With Zoho Writer's Merge Templates

    • Setup for a service based business

      I apologise if this has been asked before but a search of the forums didn't turn up what I was looking for. I am looking at setting up Zoho CRM for a consultancy based business and so there are no products as such. This is fine as I can create a product which is time based. However, I do not seem to be able to get rid of the concept of having quantity in stock. I have a unlimited supply of time! How can I bend Zoho to my will and get rid of the stock control? Thanks Neil

    • Introducing the New SalesIQ Live Chat Widget: Twice as Fast, Fully Optimized for Engagement!

      Hello everyone! To celebrate our 10-year milestone, we're thrilled to unveil the new and improved SalesIQ Live Chat Widget! Redesigned at both the User Interface and performance levels, this enhanced widget is not only optimized but also 2X faster than

    • Search terms from ASAP widget are not showing up in my Zoho Desk analytics

      When people perform searches in the Zoho Desk ASAP widget, the search terms do not show up inside my analytics report. But when people access the KB website directly and then do the search, the keywords ARE showing up. Is this a known issue, or am I just

    • Microsoft Loop integration

      Hi has anyone had luck getting any components of Microsoft Loop integrated into Zoho One, for example Follow-up tasks into Zoho Projects or other app, or perhaps Loop notes into Zoho Notes? cheers

    • Searching for content within courses

      Hello, I have been testing out Zoho One for my company have been exploring Learn. I've noticed that you cannot search for content within a course. You can only locate the title of the course. Example: Course: How to Make Your Bed Chapter: Pillows Lesson:

    • Cohort - Zoho Analytics

      I am developing a cohort analysis in Zoho Analytics for Tickets/Service Desk, which tracks the number of tickets created each month and when those tickets were closed. I have added a user filter for classification. When I change the classification using

    • Helper Functions and DRY principle

      Hello everyone, I believe Deluge should be able to use 'Helper functions' inside the main function. I know I can create different standalones, but this is not helpful and confusing. I don't want 10000 different standalones, and I dont want to have to

    • Automation Issue with Email Templates in Workflow

      Hello Zoho Support Team, I’m currently facing an issue with the automation setup in my workflow for following up with applicants. I have configured the workflow to send out emails with different templates, which work perfectly when sent manually. However,

    • Disable Private Reply.

      Is it possible to disable the option to do "Private Reply" for tickets? The reason is that sometimes we click on reply or "reply all," but the system automatically selects "private." Am I doing something wrong? Thanks Rudy

    • Zoho Books | Product Updates | October 2024

      Hello users, We're back with fresh feature updates in Zoho Books. Starting from associating an applicable period for TDS taxes to minimised tab view for web tabs, discover the latest enhancements that will streamline your workflow and elevate your accounting

    • Merge Items

      Is there a work around for merging items? We currently have three names for one item, all have had a transaction associated so there is no deleting (just deactivating, which doesn't really help. It still appears so people are continuing to use it). I also can't assign inventory tracking to items used in past transactions, which I don't understand, this is an important feature moving forward.. It would be nice to merge into one item and be able to track inventory. Let me know if this is possible.

    • Failures installing Unattended Agent using Microsoft Intune

      Hello, I configured Zoho Assist Unattended Agent using Microsoft Intune, following the steps outlined in this article, using a .MSI installer. I added a pilot group of users and for 6 of them it installed correctly and I see their computers in Zoho Assist

    • Crear tarea CRM con recordatorio desde Zoho Flow

      Hola, estoy intentando crear desde Zoho Flow una tarea en CRM. Lo he logrado hacer pero sin recordatorio, ya que no se como se debe escribir el string adecuado. He probado varias alternativas, pero ninguna me funcionó hasta ahora. - FREQ=NONE;ACTION=EMAIL;TRIGGER=DATE-TIME:${FechaVto}

    • Zoho CRM's new Homepage component: See all your activities in one powerful view!

      Hello everyone, We’re excited to introduce a new feature to your CRM dashboards: the Homepage Open Activity Component! Now you can effortlessly track all your open activities—including tasks, meetings, calls, and appointments—in a unified view, tailored

    • No fue posible enviar el mensaje;Motivo:553 Relaying disallowed. Invalid Domain - admin@laboratoriosantarosa.org

      Hola Renovamos después del tiempo el dominio, y luego de eso se cayó el servicio de correo. Seguimos las indicaciones que se indican en este articulo, sin embargo, hasta el momento solo podemos recibir correos pero no enviar. Hemos actualizado los registros

    • Add an option to start zobot when user clicks the Chat with Us button

      I would like to have an option to start the zobot when user clicks on "Chat with us" button when chat widget is maximized

    • Ticket list sorting is now supported in the latest version of the Desk Android mobile app.

      Hello, In the latest version of the Desk Android mobile app (v2.4.32), we have brought in the option to sort the ticket listing view.   Now we can sort the tickets listing by Ticket Id, Due Date, Recent Thread and Created Time. Please update the app either

    • Mass delete leads

      How do I mass delete leads in ZMA? I want to delete leads that have not opened emails in 6 months. But I can only select 200 at a time - there are thousands.

    • Next Page