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

    • 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}
    • Recurring Bookings

      Will Zoho Bookings ever offer an option to the customer to schedule recurring meetings (unlimited) for the same days/times? Making a client schedule the same days/times for an entire month is a tedious process. I'd like to offer the option upfront to
    • 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.
    • Creator v5, v6 and v8 for Zoho One

      Greetings, I hope find all doing well and safe. I was browsing the Zoho One page, where the details of each application's plans are outlined (https://www.zoho.com/one/plan-details.html?prd=zcreator). I noticed there are three versions available for Creator
    • Base Currency Adjustment - Mark Transaction as Something Other than Unreconciled

      Not a very concise title, but it describes the issue pretty well. Basically, when a Base Currency Adjustment is made, the transaction is recorded in the register of the account in question (as it should be). It's marked as "Manually Added", which makes
    • Customer Account Statement

      Dear Sir, I am Travel Agent Curranty Zoho Provide Customer Statement with Date, Transactions, Details, Amount, Payments, Balance Our Suggestion is kindly Provide Statement with Item name & Description Kindly find the attachment
    • move or clone the custom layout

      Hi, is it possible to move or clone the custom layout of a ticket from one department to another? BR
    • How to restart the timer for the 'First Response' field associated with an SLA.

      Hello, through the API, I send an email to multiple accounts when a new ticket is created, and the system automatically sets the "First Response" field to null. I would like this to happen only when a ticket is assigned.
    • Invoice filter issue

      Hello Team, I am using following API documentation for getting list of invoices. https://www.zoho.com/books/api/v3/invoices/#list-invoices I have applied filter on multiple fields & its working correctly. But when I pass search_text parameter with combination
    • Zoho Books says "Please ensure that the "webhook_name" has less than 50 characters."

      I have a custom module on Zoho Books that creates a customer trip record. It has a customer field to link to their account information. When these entries are created, I want to fetch this customer's information so I can put the selected customer's address
    • How to delay automatic retainer invoice

      Hi, we would like to use the functionality that there is a retainer invoice created automaticaly, when the customer accepts the offer. The "problem" is that the mail with the retainer invoice is sent imediatelly to the customer, which is kind of "impolite".
    • Refresh token not appearing

      Hello, I was wondering if there is another way of obtaining a refresh token, as following the usual 60-second-code procedure generates a new access token, but not the refresh token, and so i have to repeat everything to get a new token every hour or so,
    • Quote item header via api

      Hello. I'm not a programmer, but am trying as an amateur to have a form create a new quote so I can guide my sales reps with questions to accurately fill out the quote. We use zoho books. After three days I've successfully been able to create a quote
    • Decrypting Secrets Returned by Zoho Vault API

      Hello, I've been able to follow the documentation here: Zoho Vault | API Reference and successfully call the GET_LOGIN operation with my token. I get back a response containing/similar to this: "name": "GET_LOGIN", "details": { "PASSPHRASE": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxABCDEFG==",
    • copy the row to the end of table if under condition

      Hi, my table is created from zoho forms entry. Lat's say that column 3 has value 1 or 2. when the value is 1, no action is needed but when the value is 2 I would like that entire raw was automatically copied to the next row - it is the end of the table.
    • my seo title , keyword and discription are not reflecting

      I added seo title, description, and keyword on my products but they are not reflecting. Please resove this problem.
    • Integrate WhatsApp and ZohoOne

      What is the most recommended application or tool to integrate WhatsApp and ZohoOne? That allows, for example: - When a new lead is generated in Zoho CRM, the lead automatically receives a message by WhatsApp. - In line with the previous point, schedule
    • Allow Zoho Cliq Admins to Manage External Channels Without Joining

      Dear Zoho Team, Greetings! As a Cliq admin, I can create external channels, but there is currently no way for me to invite external users to these channels without being a part of them. There are scenarios where, as an admin, I only need to set up the
    • Invite External Users to Channels via Zoho Cliq Mobile App

      Dear Zoho Team, Greetings! Currently, Zoho Cliq allows us to invite external users to an external channel through the web interface. However, this functionality is not available in the mobile app. We kindly request the addition of this feature to the
    • Deluge help - Looping in Zoho CRM

      Hi! I am trying to create a function and struggling as I cannot get the function to repeat without. breaking. Trying to write a function (currently doing through schedule) to run daily. Searching for tasks that are 90 days or more overdue. If task is
    • Community Digest Noviembre 2024 - Todas las novedades en Español Zoho Community

      ¡Hola, Español Zoho Community! Wow, ya termina el año, ¡gracias a vuestra participación se nos ha pasado volando! Por eso mismo estamos preparando sorpresas para todos los que participáis en la Español Zoho Community para el próximo año, ¡estad atentos
    • Assistance Required: Email Authentication Issue (SPF/DKIM) for Domain clearskyaerials.net

      Dear Support Team, I hope this email finds you well. I am experiencing an issue with my email services after linking my domain clearskyaerials.net (hosted on Zoho) to WordPress for website building. I am unable to send or receive emails, and the following
    • ZOHO MAIL not loading

      Hello, My zoho mail is not loading. Both my desktop version and in google chrome. It opens but then doesn't load any charts. Are there any issues and how fast will it be resolved? Rafal.
    • Zoho Storage Limit in Account where Multiple Emails are Accessed

      I have a main email account but also access three other email accounts set up in Zoho regularly so I set them up under my main account. Each account should have its own storage. However, I recently got a notification that my email was reaching its storage
    • Not Getting Emails

      I am not getting any emails. All DNS is correct. I have been waiting for over an hour for my test email from my personal Gmail account to arrive into my Zoho Mail.
    • Unable to receive emails from WordPress website contact forms.

      MX records are set up correctly, and email routing is set to remote. I am using WPForms on my website, which has been configured to send notifications to my Zoho mail. When I configure the notifications to my gmail account it works perfectly but I want
    • Next Page