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

    • Support poor service

      I just wanted Zoho support to give me some more concrete answers. I’m facing SMTP error issues, and they told me that the South American IP was experiencing problems, but they didn’t provide an estimate for when it would be resolved. Now my company is

    • Zoho say my domain seems to be already associated with another account

      I created a zoho account for try my domain mail configuration. When I want to add my domain in this page https://mailadmin.zoho.com/hosting?plan=free then this shows an error that is "This domain is already associated with this account a*****n@f*****."

    • Incorrect Device Time

      Hi On my windows laptop I can't sign into Zoho mail due to "incorrect device time". I'm in Toronto, Canada. How can this be resolved?

    • Get user images by API

      Hi For our internal management software, I want to retrieve user photos via REST API: curl --location --request GET 'https://profile.zoho.com/file?fs=thumb&ID=<zoid>' \ --header 'Authorization: Zoho-oauthtoken <token>' The token has `profile.userphoto.ALL`,

    • Depois de 1 ano não consigo receber e-mail

      Consigo enviar e-mails mas não estou recebendo nenhum e-mail isso aconteceu pontualmente após eu completar 1 ano de uso. Me ajudem por favor

    • Submitted form URL

      I am using the feature "Include a link to allow respondents to edit their responses" for the first time. This URL is included in the email sent to the user after they press Submit. If a form is Saved, there is a section called Partially Saved Entries

    • API to post drafts for social media

      I we want to post draft posts to our zoho social account and then approve and schedule them within Zoho social. is this possible with for example: https://apis.zoho.com/social/v2/post TIA Jon

    • Function for Emails tranfer from Lead to Deal

      Hi Due to the fact that my Deals conversion needs to be done in 2 ways - depending on the fact if those records already exists or not - resources in fields are different. I am making function control conversation for Leads but I have problem with transferring

    • Create a new immigration service- Similar to immigration law software

      It will be good if you can build a new service. Data will be pulled from the employee form. Then automatically users should be able to complete immigration forms like I 129, ETA 9089, ETA 9035 E, G- 28, W4, I 9 PDF forms and then be able to send for signature with Zoho sign. Immigration Softwares like docketwise can be used for ideas. The advantage with this it sits within Zoho people and employees don't have to feed data in another system

    • Accessibility in Zoho CRM: Not just a feature—a way to empower

      For instructions on setting up these controls, please check this help document: Configuring accessibility controls. Hello everyone, Today (December 3, 2024), on the International Day of Persons with Disabilities, we begin our journey towards a CRM that

    • Zoho Meeting very bad video quality

      Hello, I need 1080p HD on my Zoho Meeting as explained here: Low Resolution/Quality Video (zoho.com) Currently, video quality is lagging with 400mb internet which is not acceptable for my business. My 1080p 60FPS webcam performs well on platforms like

    • Contacts with Deals not appearing.

      What: I simply want to see all of the contacts that are tied to an open deal Problem: In Contacts Module > When filtering on Contacts with an open deal, Zoho only shows some Contacts instead of all. Details: More specifically, I should have ~200 contacts

    • Auto-sync field of lookup value

      This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

    • CRM limit reached: only 2 subforms can be created

      we recently stumbled upon a limit of 2 subforms per module. while we found a workaround on this occasion, only 2 subforms can be quite limiting in an enterprise setting. @Ishwarya SG I've read about imminent increase of other components (e.

    • Version of Cliq included with Zoho One and Limitations

      I'm confused by the information presented in the application detail page of Zoho One. I'm a solopreneur with a single-seat Zoho One Enterprise license and I need to communicate externally .. extensively. The plan details page suggests channels are limited to 100 members. Whereas the pricing plan comparison page on the Cliq marketing site says 2500 for enterprise level.  If it's 100... that's going to kill my use case as it is my understanding that external customers can only be communicated with

    • Resubmit for Approval for Zoho Books Module in CRM

      The integration between CRM and Books is great, but it is incomplete in many areas. One of them is if an estimate/invoice/sales order is rejected, the users in CRM cannot resubmit it for approval. Let's face it, sales people will mostly be in CRM and

    • Upload edited meeting recording for attendees to download

      Hi Would it be possible to let meeting organisers upload an edited version of the meeting recording? Usage case: most of us probably start a meeting 15 minutes before the official start time. It would be nice to trim that dead time off the recording.

    • Why does the embed feature within the article editor seem to be not functional?

      I would like to embed media into an article, but that feature seems to be non-functioning. Am I doing something wrong? to clarify, I do not want to create an article by embedding. I want to embed media into an article I have created in a manual.

    • Get all fields using COQL

      Hi Is it possible to get all the fields of a record using COQL?. Something similar to select * from Accounts in SQL.

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Can it change the language ?

      Hello ! The question is in the title ;) 

    • Notes and Notebook integration

      Maybe I missed it, but is there a way to synch notes in the desktop with the notes in the Notebook app? I've been combing through the help topics and other forum entries and not finding anything. When I downloaded the android app I assumed there was integration with the desktop notes. Is that not the case? thanks.

    • Tags on notes aren't syncing correctly on Android

      I've created notes on the desktop version that have several tags assigned, but on both my Android devices those notes only have ONE of those tags instead of all of them, despite the actual content of the note being correctly synced, and I'm also starting

    • Text formatting does not work (Notebook Mac)

      The text formatting does not work at all. It seems, that the program loses the selection and therefore hitting bold, italic, etc. does not do anything.

    • For Each Loop only returns 1st result of List, not the whole list?

      I have a custom function that collects event data from Google calendar using invokeURL. I want to create meetings in CRM from this URL response. The invokeURL response contains over 100 records and works perfectly (code line 2). Then I'm using a For Each

    • Delete Zoho Mail Account accidently from Admin panel

      Is it possible to restore deleted email accounts with all data.

    • How do I delete a test email address to which I am supposed to send a test email?

      How do I delete an email address added to a test email recipient that is no longer needed due to resignation or other reasons?

    • Kaizen #121 : Customize List Views using Client Script

      Hello everyone! Welcome back to another interesting Kaizen post. In this post, we can discuss how to customize List Views using Client Script. This post will answer the questions Ability to remove public views by the super admin in the Zoho CRM and Is

    • Batch Number on Packing Slip

      When we send orders to our warehouse, we want to tell them the batch number to pull from the shelf.  It seems we should be able to pick the batch when assembling the package. In the current Inventory, we have to create an invoice, pick batches for the invoice.  This is too late.   As a workaround, we are sending the invoice to the warehouse (via a template that removes most of the price information).  This is cumbersome and causes our warehouse to see the total invoice price (which can't be removed

    • Editing a bundle

      How can I edit a bundle?

    • Saving URL for Submitted Forms

      The unique URL for submitted forms should be saved automatically within 'System Fields'. (without sending a duplicate email to myself, there is no other way to retrieve the unique URL for a submitted form if the user wishes to update) Additionally, it

    • Implement Meeting Polls in Zoho Bookings

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement related to appointment scheduling within Zoho Bookings. Current Functionality: Zoho Bookings excels at streamlining individual appointment scheduling. Users can set availability

    • Response from a customer via web channel

      Is it possible to ensure that a customer using the web channel can respond to an agent's question without creating a new thread but instead linking their response to the existing thread?

    • Venezuelan Bolivares missing from available currencies

      My mother is ill and lives in Venezuela. I do her finances and insurance expences related to medical billing. Most receipts are in Venezuelan Bolivares. However I cannot find this currency. I am migrating from Expensify which conveniently has Bolivares

    • Using WhatsApp with your existing number

      Hi. We want to use the WhatsApp functionality in Zoho Desk. We already have a WhatsApp business account. Is it possible to use your existing number instead of creating a new number?

    • Customize Section

      I know it has to be in the themes somewere but where is it that you can change the divider color of a section?

    • Customer Feature Requests

      Like Zoho, we're a software company that markets an SaaS product. We frequently get feature requests that come from the support system. My technicians have a responsibility to listen to our customer requests and add them. Right now the only way to do

    • the expected input type is jsonarray

      I keep getting an error when creating a record in CRM via a Zoho Form. CRM has a pick list field "Type". All Form entries from this form will ALWAYS be "Volunteer", therefore we do not ask them what their Type is. I am trying to use Set Value to create

    • Card payment surcharge?

      Hi, I would like to offer my customers the ability to pay invoices by card (using the PayPal integration). However, PayPal charges me around 5% to receive a card payment, and I would like to pass on this cost to my customer by way of a card payment surcharge. Is there any way for Zoho Invoice to be set up to automatically add a defined "card processing fee", say 5% of the invoice total, if the customer elects to pay by card? I don't want to add this on to invoice manually, since most of my clients

    • Cant add contact mail. cant find it

      Hi, I am writing a new message and when I enter the contact address that is in my address book, zoho cannot find it. Previously there was no problem. I wrote the first two characters and it shows me all the contact.

    • Next Page