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

    • Stock function not working for Brazil (Bovespa)

      Hi, The STOCK function in not working for the Brazil Exchange "Bovespa". This is the syntax I´m using: =STOCK("Bovespa:BBAS3";"PRICE"). Thanks for any help. Ale

    • Tablet Pencil + Fillable Form

      Hi There, I just started using Zoho Writer Forms for our team on iOS. I noticed that some functions support 'scribble' or tablet pens and some do not. Is there a function I am missing where any text field can support 'scribble' or handwriting/printing

    • Announcing new features in Trident for macOS (v.1.10.0)

      Hello everyone! Trident for macOS (v.1.10.0) is here with major features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Create tasks from emails. In addition to creating tasks from selected

    • Journey : "Added to segment" trigger doesn't work automatically

      Hello, I’m experiencing an issue with our Marketing Automation 2.0 integration with Zoho CRM. We have multiple segments defined in Marketing Automation, each with criteria based on field values synced from Zoho CRM. If a field value changes in Zoho CRM,

    • Assistance Required: Email Configuration Issues for Domain clearskyaerials.net

      Dear Support Team, I am experiencing issues with my email configuration after linking my domain, clearskyaerials.net, to Zoho Mail. I followed the DKIM setup guide and successfully configured it. While I can now send emails, I am unable to receive them.

    • How can I bulk import product images to Zoho crm.

      How can I import product images to Zoho crm within bulk imports. I am using an excel sheet or csv and want to include an image (via URL) for each product. This topic is the closest I have found to a solution but I need further help to implement it: https://help.zoho.com/portal/en/community/topic/import-file-upload-and-image

    • Can't send mail Reason:554 5.1.8 Email Outgoing Blocked.

      I send messages to my clients for my agency to my targeted clients last night I got (Unable to send message;Reason:554 5.1.8 Email Outgoing Blocked) this warning. Now I can't send mails. Please fix this issue.

    • erro 553 retransmitindo e-mails não permitidos devido ao domínio ou algo parecido

      Olá, não consigo enviar ou receber e-mails, pois mostra uma mensagem de erro 553 retransmitindo e-mails não permitidos devido ao domínio ou algo parecido.. Por favor, ajude-me a corrigi-lo. Obrigado.

    • How do I go to new form after using deluge button?

      I have (Form1) - [Report1] (Form2) - [Report2] I have created a button which appears on [Report1] which creates a new record for [Form2] using data from [Form1]. I have the script working well, it pulls the needed information from Form1 and builds a new

    • smtppro.zoho.como eror

      En nuestras cuentas de empresa desde hace unos dias estamos experimientando problemas con los correos IMAP outlook, generando un error en el smtppro.zoho.com 465 /SSL Todo estaba trabajando bien y sin problemas. Alguien mas con el mimo problema y/o encontró

    • Outgoing Email blocked

      Hi Support Team, My outgoing emails has been blocked, Appreciate your help to unblock it. Hartron Trade

    • Sheet view ignores layout rules / How to restrict fields in sheet view

      Hi Problem 1: When editing records in sheet view, layout rules are ignored. This is a problem, because it allows users to ignore some mandatory fields (mandatory in a Layout Rule). (Mass Update does not allow updating of fields with Layout Rules, so why

    • Portal users embed access

      So I have a page with a form, and two reports on either side. The reports are embedded as html snippets. So basically, it's set up that when I select a material from the form lookup field, it reloads the report embeds but filters the records with the

    • Importing Accounts with Parent Accounts

      I would like to import accounts that contain parent accounts.  I see a Parent Account but do not see a Parent account number in the Zoho fields and will need this to make sure the correct unique parent is imported. Can you help explain how to accomplish this?

    • 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

    • Next Page