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

    • BUG ALERT: Client Script + Commands -> $Page contextual data is not updated

      When using the new Client Script Commands feature, there is an issue with the Client Script $Page contextual data not accurately being updated each time a Command is run. Assuming a Client Script Command called "Client Script Command Bug" with the following

    • Show iFrame of related List inside of Blueprint Transition

      Hey, is it possible to show an iFrame of a related list like this inside of a Blueprint transition?

    • Lookup Fields not Converting

      I manage holiday properties. I have a lookup to the Accounts (Properties) in the Leads module. The lookup is connected to the property address field. When I convert it the lookup field does not update in Deals, although the property address does. There

    • 2024: A Year of Transformation with Zoho Forms

      As we close the curtain on another exciting year, it’s time to reflect on the strides Zoho Forms has taken in 2024. From empowering businesses with advanced tools to simplifying workflows and enhancing user experiences, our updates this year were all

    • Stop selling out of stock Items.

      Hi I have been using Zohobooks for a around 8 month now. I am not involved in selling process but my staff cant stop selling product which they do not hold in stock, this is a big headache for me as physical count never matches what is shown on the books. 

    • Bigin API Token Request ("invalid_client")

      Hi people, I tried to connect to the API without success, I've read all of the documentation multiple time and tried just about everything. I tried to do it with Python Request module and with Postman, passing the information through both the URL parameter

    • Customer Happiness not clickable when using API

      Is there a way to automatically add the Customer Feedback links when generating email drafts via the API? Currently, the feedback links are only added when generating an email draft using the UI. I tried using the endpoint described in https://desk.zoho.com/DeskAPIDocument#CustomerFeedback#CustomerFeedback_Getthecustomerfeedbackplaceholderlink

    • Send To Zoho Sign not Showing

      The button send to Zoho sign is not showing on my Zoho CRM . Is there additional steps I need to take after installing Zoho Sign to CRM ?

    • How to Get An Image's URL once it's uploaded to library?

      I manage to find URLs to the images I uploaded to my library, but after a day, it seems the links stop working like its only temporary. Where can I find the ACTUAL solid URL for my images that I upload to my Library so I can use them for my custom template / HTML coded template? Thanks, Mac

    • 【Zoho CRM】インポート機能のアップデート：既存データへのタグ追加が可能に！

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中のインポート機能のアップデートをご紹介します。 Zoho CRMのタグは、データを効率的に分類、認識するためのラベルです。 タグ付けは次の3つの方法で行えます： 個別タグ付け：少数のデータを手動でタグ付け 自動化：特定のタイミングで繰り返しタグ付け 一括更新：インポート機能でタグを追加または更新 今回のアップデートでは、インポート時に既存のタグを残したまま、新しいタグの追加、既存タグを置き換えできるようになりました。

    • Link to Desk tickets

      Hello, We are using Analytics to analyze data in Desk. Is there a way to embed a link to a ticket in reports?  We'd love to be able to see the drill down data, and click a value in a result row that would launch the Desk Ticket in another window/tab. Thanks in advance for any ideas!

    • Bluerprints: How to connect the created record back?

      I've a blueprint which creates another record as part of an 'After' transition. But the two records don't seem to be linked together. If it's not automatic - how do I get the created record ID to link it to the original record? Thanks!

    • Populate a Related List Item based on a Stage

      I would like to know if I can populate a CLOSED DEAL section in a contact that populates only when a Deal (something in the Deal Module) is listed as Closed - Won. I'd like another section that is just called deals, which shows me all other deals that

    • Being able to draw inside a module ?

      I was wondering if anyone know of a solution for this request. We would like to be able to draw directly from one module in the CRM and have it attached to that record. Here is an example. Paul would go to the customer once he as done the measuring, he

    • 2 serial numbers for 1 item (Mac address and Serial number)

      There is a way to track 2 serial number type for 1 Item. Ex: Some electronic devices have a MAC address and a serial number. I need to track those 2 numbers

    • Holidays

      Hi; For defining Holidays, you need to add logic to handle the year as well as the month & day. We need to be able to enter Holidays for the next year. I need to add a holiday for January 2, 2017, but I can't until January 1st, which is a Sunday and we

    • Delete a department or category

      How do I delete a Department?  Also, how do I delete a Category? This is pretty basic stuff here and it's impossible to find.

    • Remove or hide default views

      I'm looking to only have the views pertinent to my organization.  Is there a way to show only my custom views (or separate them to a different area or something)? If not, this should be a feature as switching from Zendesk we had this option...

    • Analytics Module: Can you move items from one dashboard to another?

      Is there a way to move items from one dashboard to another? I want to rearrange my dashboard now that I know what i'm doing but i don't want to remake my various widgets? Edit: Hey Zoho, This would be a good feature: to be able to move/copy widgets to

    • Copy Widget to another Dashboard

      I can see the option to clone a widget to the same dashboard but is it possible to copy it to another dashboard?

    • Is there a way to print the dashboard?

      I would like the capability of printing the dashboard - is that possible?

    • Custom Deal Name in Lead Conversion Mapping

      I know there are ways to change the name of a Deal after conversion using a custom function, so no need to repost that information. I would like to see the CRM Improved with Deal Name Customisation and I think the Lead Conversion Mapping page would be

    • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

      Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

    • Introducing Record Summary: smarter insights at your fingertips

      Hello everyone, Building on the recent launch of Zoho's in-house Zia Large Language Model (Zia LLM)—a major milestone in Zoho CRM’s AI capabilities—we’re excited to introduce the Record Summary feature. This powerful addition makes use of Zia LLM to simplify

    • Suppress "spreadsheet will not be saved" message on published sheet

      I have published a sheet and have one column on that sheet that the user can edit (a dropdown picklist where the user can select the status for each line). Is there a way to suppress the Zoho Sheet message "Any changes made to this published spreadsheet

    • Missing "Email Authentication" tab

      Backstage is alerting users about "Unauthenticated Domains" with a large prompt in the backend. It adds a link to learn more. On this tutorial page, it shows where to find the "Email Authentication" tab in this screenshot. However, in our Backstage, that

    • Show item Cost value on Item screen

      The Item screen shows Accounting Stock and Physical Stock. It would be very helpful if value information could be displayed here as well, for instance Cost Price. Currently, to find the Cost Price (as used for inventory valuations) from inside the item

    • Zoho Analytics to Zoho Sheets - automatic update?

      Hi all, If I create a zoho sheet from an Analytics Report or Analytics Data, is there a way for the zoho sheet to automatically update as the Report / Data in analytics updates?

    • Integration with Moodle

      Greetings, I hope find all doing well and safe. I've recently returned to using Zoho Flow after a break and was hoping to connect my WooCommerce store with Moodle, the world's most widely used learning management system. My goal was to automatically enroll

    • How to Record Loan with interest

      I have received loans from friend he give me like 2 loans so far one is one year repayment and one short, how to properly record his payment, and repayment and give him statement  for each loan he give me 

    • Task status - completed - other options

      I have a dumb question I know i can make custom statuses for the tasks - but is there anyway to make additional "completed" statuses like for instance if i have a task "call back customer" and i leave a vm for them to call back marking it "completed -

    • Task module and related-to field

      In modules other than the Task Module I can add several lookup fields to provide a variety of relationships. In the Task module lookup fields are not available. There is only one "related to" field which I want to use for Company. But I want to relate

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (https://help.zoho.com/portal/en/community/topic/custom-fields-on-task-module).

    • migrating from Zoho Invoices (CRM) to Zoho Books

      Good day, I was wondering if there was a easy way to migrate all the quotes and invoices from Zoho Invoices CRM to Zoho Books. We plan to move to using Zoho Books in a few weeks and would like to have all the quotes and invoices from the past 3 years

    • Zoho MA and Custom Module

      I am trying to create a sync between Markting Automation and Zoho CRM. I am mapping a custom module from the CRM. The custom module has email field mobile phone field However I cannot finish the integration since the system keeps asking me for email or

    • When is partial reimbursement going to be launched?

      Hi there. I saw somewhere that the partial reimbursement feature is in the work. What is the update and ETA of that? Our clients and prospects have been asking us and we agree that that is an important feature to have.

    • 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,

    • Year-End Wrap: Declutter Your Inbox Using Email Filters

      Ping!—an email drops in. And another. And another! It's finally that time of the year when your inbox will be bursting with messages from team members, clients, and marketing agents, leaving you feeling overwhelmed and distracted. Sounds familiar? Now

    • Unified Notes View For Seamless Collaboration

      To facilitate better coordination among different departments and team members, the notes added to a record can now be accessed in all its associated records. With this, team members, from customer service representatives to field technicians, can easily

    • Q4 Europe In-person Zoho User Group Meetup: Streamlining Your Business Processes & Introduction to Zoho CRM for Everyone

      Hello Zoho Community, We are excited to announce our upcoming Zoho User Group meetup in Europe! This session is designed to help you streamline your business processes using Zoho CRM, with a special focus on enhancing customer interactions and leveraging

    • Next Page