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!

    Zoho Desk Resources

    • Desk Community Learning Series


    • Digest


    • Functions


    • Meetups


    • Kbase


    • Resources


    • Glossary


    • Desk Marketplace


    • MVP Corner


    • Word of the Day


      Zoho CRM Plus Resources

        Zoho Books Resources


          Zoho Subscriptions Resources

            Zoho Projects Resources


              Zoho Sprints Resources


                Zoho Orchestly Resources


                  Zoho Creator Resources


                    Zoho WorkDrive Resources



                      Zoho Campaigns Resources

                        Zoho CRM Resources

                        • CRM Community Learning Series

                          CRM Community Learning Series


                        • Tips

                          Tips

                        • Functions

                          Functions

                        • Meetups

                          Meetups

                        • Kbase

                          Kbase

                        • Resources

                          Resources

                        • Digest

                          Digest

                        • CRM Marketplace

                          CRM Marketplace

                        • MVP Corner

                          MVP Corner




                          Zoho Writer Writer

                          Get Started. Write Away!

                          Writer is a powerful online word processor, designed for collaborative work.

                            Zoho CRM コンテンツ






                              ご検討中の方

                                • Recent Topics

                                • Cannot view or interact with polls on IOS

                                  When testing with Android the user will receive a pop up message when a poll is started and be able to access polls via the more menu. This is not the case when using IOS phones, there seems to be no way to view or interact at all.
                                • Calendar view not working in Zoho Projects

                                  Hello Zoho team! Since this morning, clicking on the "Calendar" link in the Projects Menu doesn't do anything. It seems to refresh the page, but it doesn't open the calendar view for tasks. It affects every user in my company. Closing and opening the
                                • Multi Select Filter off comma separated values

                                  Hey friends! I have a query table for a couple of dashboards/ charts. In one of the dashboards, I'm trying to create a multi select filter for the service that is being sold. The way we look at services is by a CRM field titled, "Mail Lead Entities,"
                                • Dashboard filter applied to all reports but not visible on report

                                  Hi, I have two reports which shows sales transactions data - one is graph and the other a pivot table. Both reports use the same base table. There are no filters on the reports so it shows all transactions for the last 6 months. I want to create a dashboard that includes the graph and the pivot table report. However, I want the dashboard to have a fixed date filter that only shows the last 30 days of data i.e. filtering the underlying graph and pivot table to show the last 30 days of order data.
                                • Equipment Scheduling for Efficient Field Service Operations

                                  Zoho FSM helps you nail the critical aspect of field service management, i.e., scheduling the right technicians to the service appointments. Ensuring that technicians have access to the right tools and machinery for their job is also of paramount importance.
                                • Problem with multiple pages record template

                                  Hi, I have a record template with multiple pages. When I print, it has gaps between pages. How can i fix it?
                                • Field Update: can't find a custom multi-line text field in the options list

                                  I want to update a custom text field (large size multi-line: 32000 characters) that I have added in the Accounts module using this functionality https://help.zoho.com/portal/en/kb/crm/automate-business-processes/actions/articles/field-updates , but I
                                • Zoho One Datensicherung möglich

                                  Gibt es eine Zoho One Datensicherung über alle Apps mit eindeutigen Datensatz-Id´s eines Kontaktes in allen Apps und mit allen Bildern (insbesondere Artikel-Bilder)? Wir haben festgestellt, dass die Zoho Books Datensicherung keine Bilder sichert. Und
                                • Pop Up

                                  Hello, I want to automatically display the information of the attached data in the product module in the related list section of my data in the lead module when the current time matches the "Call Time" field of my data in the leads module. How can I achieve
                                • New feature alert: Witness signing is now available in Zoho Sign

                                  Hello! Getting documents signed with confidence in Zoho Sign just got a major boost! We're delighted to introduce witness signing, where other individuals or entities can be designated as witnesses to observe the signing process and add their signatures
                                • How to report and analyze a multi-select field entries distinctly ?

                                  As many of CRM users I have many multi-select fields that allows me to choose more than one chose in one cell for a specific filed Like: Field A - A;BC - A;C -B;C But when reporting the field it will handle each cell as a "String" not multiple entries
                                • Get the capability to convert documents to different formats

                                  Hello users, In this article, we'll be exploring the Conversion API in Zoho Office Integrator to understand how it can be used to convert documents to different formats right from your web app. Before we get to the details of the Conversion API, here's
                                • Issues with certain CRM, Desk & webhook blocks in Guided Conversations

                                  Good day I have been attempting to add a block on our guided conversations, which give our customers relavent information based on their queries. The issue is that when I attempt to use a block that fetches data I get the following error popup: Cannot
                                • Use Zoho Creator as a source for merge templates in Zoho Writer

                                  Hello all! We're excited to share that we've enhanced Zoho Creator's integration with Zoho Writer to make this combination even more powerful. You can now use Zoho Creator as a data source for mail merge templates in Zoho Writer. Making more data from
                                • Can't delete/hide related lists

                                  Hi, Maybe I'm missing something, but I can't seem to find where I delete or hide related lists in a module. When I go to a record and click the little arrow on the right next to the related list, I only get the option to select what fields in that list
                                • Make Widgets Clickable or Copiable

                                  Hi, I created a KPI Widget in Zoho Analytics whose content I would like the users that see my dashboard could copy or click and be redirected elsewhere. Yes, I'm aware I can create a Text Box for that instead of a Widget, but the problem is that the link
                                • Address Autofill

                                  Hi I'm having issues with the address autofill tutorial (https://zurl.co/rGXQ). I have followed each step in the tutorial, but when i paste the code into a workflow/function, i'm getting the following error code: Improper code format Correct format :
                                • Sync custom module ID to Lead module

                                  Hello, I am trying to sync Contract ID (custom module) from Deal module. I have an existing function that whenever a contract is created, it will automatically creating deals based on the frequency of the contract. Now i am having problem to show the
                                • In Kiosk, please support "File upload field" in the "Field Update" action

                                  Hello. Supporting "File upload field" in the "Field Update" actions would be a great addition to Kiosk Studio. I would appreciate it if you could evaluate it. Saludos,
                                • can I link a contacts to multiple accounts

                                  can I link a contacts to multiple accounts
                                • Change Last Name to not required in Leads

                                  I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for
                                • For security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account.

                                  Hello Zoho Even if we open 10-15 windows in still we are getting our accounts locked with error " For security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account. "
                                • Launching CPQ for Zoho CRM! An in-built solution for bespoke quote management

                                  Hello everyone, We are thrilled to announce the public release of CPQ (Configure, Price, Quote) for Zoho CRM, which is a fundamental block in sales management. NOTE: CPQ was a public early access feature from March 2023 — January 2024. Since February
                                • Power of Automation :: Automatically set the dependency between Parent task and the respective sub tasks

                                  A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate complex tasks and
                                • Spell Check default language

                                  Hello All, Is it possible to set the Spell Check default language? I can't find it in the settings. Thanks a lot! Levente
                                • Function #4: Schedule Customer Statements

                                  Regularly sending statements to customers is an imperative part of many business processes as it helps foster strong customer relationships and provides timely guidance on payments. While you can generate the statement of accounts and have it sent over
                                • Music files on Zoho Docs

                                  1) Uploaded a ma3 music file from Itunes.  When I click on the link, i go to the page and see a music player but it doesn't play.  Clicking on the play arrow does nothing.  How to fix???? 2) Also, when i put up a .zip file  and goto the page, anyone download it.  That's fine. But with a music file, all I get is that non functional player with no way to simply download the song. Do I have to zip every song so it can be downloaded?
                                • Restrict Employees Access to Zoho Support

                                  Dear Zoho Support Team, Greetings! I am the focal point for all Zoho-related matters in our organization, and I would like to request the following features to help us streamline and centralize our support interactions. We request that zoho one support
                                • How to import timesheets or entries into a projecgt

                                  How can one import timesheets into a project via a csv file?
                                • Issues with Agent Forwarding Card in Zobot

                                  I implemented an Agent Forwarding Card in a Zobot that I created. There are a few issues with the way the card functions in an actual chat. The way it is designed right now is not easy to use and is not intuitive. Here are a few of the issues I have with
                                • Automatic License Management Upon User Deactivation in Zoho One

                                  Dear Zoho Team, We would like to propose a feature enhancement for Zoho One regarding license management. Currently, when a user is deactivated, their license is not automatically downgraded or removed from our account. Zoho explains this behavior by
                                • Shared Snippets Everyone

                                  Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets
                                • Introducing parent-child ticketing in Zoho Desk [Early access]

                                  Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child
                                • How to suppress display of "USD" of currency field?

                                • When is Zoho Vault getting fuzzy search?

                                  Seeing posts on here dating back as far as 3 years complaining about Vaults search functionality. It’s terrible. Please include fuzzy search, and sorting of results according to “most applicable”; not just alphabetically.
                                • Automation#22 Track Ticket Duration at Specific Status

                                  Hello Everyone! Welcome back to the Community Learning Series! Today, we explore how Zylker Techfix, a gadget servicing firm, boosted productivity by tracking the time spent at a particular ticket status in Zoho Desk. Zylker Techfix customized Zoho Desk’s
                                • Self-Support Portal invites

                                  I'm a one man operation and I'm using the free version of the Zoho Desk for now, but I am in need of help. When I do test tickets, I get a reply from the system inviting me to join the Self Service portal. I don't plan on using that, so I wonder if there
                                • Tip #10: Automatically add tags to Zoho CRM records using form responses

                                  You may be using tags to filter records, create reports based on specific tags, or let your sales team to know which clients to give priority to. Don't skip tagging for the crm records added via forms. The tags can be set to be automatically captured during the form submission. How it works When you set up a configuration to push form entries into CRM, you can add a tag to them automatically. The tag value can vary based on the respondent's input (captured using form fields), or you can include a
                                • Understanding response time

                                  We have the following set up for our SLA. When a contact first writes in, the response due and resolution due dates are set. When one of our agents responses, the response due goes away. When a ticket gets a response from the contact, it appears to reset
                                • Publish multiple languages at once in Knowledge Base

                                  Does anyone know if it is possible to publish multiple translated articles at the same time? My knowledge base has about 35 languages, and while I have them set up to automatically translate, I still have to go in and select each language and manually
                                • Next Page