Let's build a dashboard with Cliq Widgets

Let's build a dashboard with Cliq Widgets


While juggling multiple tasks and tracking real-time data, you face a strict deadline for delivering a quarterly analysis report on a blank canvas while switching between different apps. Sounds exhausting, right? What if you could streamline everything into one interactive space?

With its vibrant tile-based design and internal components like widgets packed with elements like charts, graphs, tables, and custom fields, Cliq can transform your static data into visual dashboards that deliver business value.

Business benefits  
  • Rapid decision-making: Visual data representation ( with charts and graphs ) makes it easier to spot trends instantly, track KPIs, and identify areas that require immediate action. With clear insights, decision-makers can respond proactively.
  • Enhanced collaboration: Interactive widget elements, such as tables, fields, and charts, allow teams to view, update, and share critical information without communication gaps. This ensures data consistency and fosters a more connected and agile workflow, minimizing the need to leave the chat interface. 
  • Improved efficiency: Constantly switching between apps to gather insights slows productivity. By consolidating key metrics in a centralized location, teams can reduce context-switching and make well-informed decisions faster. 
  • Proactive problem solving: Addressing potential issues before they escalate is crucial for maintaining business continuity. Automated alerts and notifications triggered via bots and schedulers in Cliq allow teams to respond quickly to emerging concerns.
Let's design a Logistics Dashboard tailored for a Fleet Manager overseeing multiple deliveries. This dashboard will provide real-time insights into fleet performance, delivery status, and potential delays, ensuring smooth logistics operations.


                                                                               

  • Utilize the image element to enhance your business brand, strengthen your identity and recognition, and create a professional dashboard that stands out.
  • Incorporate vertical bar graphs to analyze operational costs, differentiating between storage, transportation and packaging expenses.
    • These graphs support legend-based filtering. Click on a category in the legend to remove it and focus on specific cost metrics.
    • Use the navigator to zoom in or expand the X-axis, allowing for precise monitoring within a specific range.
  • Monitor speed, load, and efficiency trends over time using graphs to identify performance patterns and operational bottlenecks. Hover over data points to see tooltips displaying exact values for each category, providing quick insights.
  • Use the table element to showcase supplier statistics and a doughnut chart to illustrate orders by delivery status. Add widget buttons to the header for tasks such as filtering dashboards by date range and requesting stocks via Cliq forms.
  • Use the catalogue form input to present detailed product information and images for a rich and intuitive experience in stock requests.
Sample code :
  1. tabsList = {{"label":"Inventory Trends","id":"reports"}};
  2. if(target.containsKey("id"))
  3. {
  4. id = target.get("id");
  5. }
  6. else
  7. {
  8. id = "reports";
  9. }
  10. sections = List();
  11. if(id == "reports")
  12. {
  13. elements = list();
  14. // Cover Image for the Widget
  15. data = list();
  16. imgMap = Map();
  17. imgMap.put("url","https://www.zoho.com/sites/zweb/images/cliq/dev-helpdoc/image_31_1.jpg");
  18. data.add(imgMap);
  19. elements.add({"type":"images","data":data,"style":{"view":"carousel","size":"large"}});
  20. elements.add({"type":"text","text":"\n\n"});
  21. sections.add({"id":"coverImage","elements":elements});
  22. elements = list();
  23. elements.add({"type":"title","text":"Logistics Dashboard"});
  24. sections.add({"id":"tagline","elements":elements});
  25. dataList = list();
  26. eachData = Map();
  27. eachData.put("title","💰 733,284");
  28. eachData.put("description","Sales");
  29. dataList.add(eachData);
  30. eachData = Map();
  31. eachData.put("title","📥  6,000");
  32. eachData.put("description","Restocking Frequency | Bi-weekly");
  33. dataList.add(eachData);
  34. eachData = Map();
  35. eachData.put("title","⌛ 4.2");
  36. eachData.put("description","Average Processing Time (hrs)");
  37. dataList.add(eachData);
  38. eachData = Map();
  39. eachData.put("title","🚚 12,294");
  40. eachData.put("description","Shipment (in tons)");
  41. dataList.add(eachData);
  42. eachData = Map();
  43. eachData.put("title","📈⚙️ 83%");
  44. eachData.put("description","Utilization %");
  45. dataList.add(eachData);
  46. eachData = Map();
  47. eachData.put("title","⚠️📦 5%");
  48. eachData.put("description","Stockout Risk");
  49. dataList.add(eachData);
  50. elements = list();
  51. elements.add({"type":"cards","data":dataList,"style":{"view":"carousel","size":"small"}});
  52. elements.add({"type":"text","text":"\n\n"});
  53. sections.add({"id":"cardstats","elements":elements});
  54. // Add buttons based on your preferred usecase
  55. button1 = {"label":"Filter","type":"invoke.function","name":"LPWidgetbuttons","emotion":"positive","id":"filter"};
  56. button2 = {"label":"Stock Request","type":"invoke.function","name":"LPWidgetbuttons","emotion":"positive","id":"stockRequest"};
  57. elements2 = list();
  58. elements2.add({"type":"title","text":"Logistics & Operational Cost Analysis"});
  59. operationalCostData = {{"category":"Transportation","values":{{"label":"Jan 20","value":9},{"label":"Feb 20","value":8},{"label":"Mar 20","value":5},{"label":"Apr 20","value":2},{"label":"May 20","value":2},{"label":"Jun 20","value":2},{"label":"Jul 20","value":2},{"label":"Aug 20","value":2},{"label":"Sep 20","value":9},{"label":"Oct 20","value":8},{"label":"Nov 20","value":5},{"label":"Dec 20","value":2},{"label":"Jan 21","value":2},{"label":"Feb 21","value":2},{"label":"Mar 21","value":2},{"label":"Apr 21","value":2},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":2},{"label":"Oct 21","value":2},{"label":"Nov 21","value":2},{"label":"Dec 21","value":2}}},{"category":"Storage","values":{{"label":"Jan 20","value":6},{"label":"Feb 20","value":12},{"label":"Mar 20","value":3},{"label":"Apr 20","value":7},{"label":"May 20","value":3},{"label":"Jun 20","value":13},{"label":"Jul 20","value":5},{"label":"Aug 20","value":8},{"label":"Sep 20","value":9},{"label":"Oct 20","value":8},{"label":"Nov 20","value":5},{"label":"Dec 20","value":2},{"label":"Jan 21","value":2},{"label":"Feb 21","value":2},{"label":"Mar 21","value":2},{"label":"Apr 21","value":12},{"label":"May 21","value":3},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":8},{"label":"Oct 21","value":2},{"label":"Nov 21","value":2},{"label":"Dec 21","value":2}}},{"category":"Packaging","values":{{"label":"Jan 20","value":6},{"label":"Feb 20","value":11},{"label":"Mar 20","value":2},{"label":"Apr 20","value":5},{"label":"May 20","value":2},{"label":"Jun 20","value":6},{"label":"Jul 20","value":3},{"label":"Aug 20","value":5},{"label":"Sep 20","value":6},{"label":"Oct 20","value":11},{"label":"Nov 20","value":5},{"label":"Dec 20","value":3},{"label":"Jan 21","value":5},{"label":"Feb 21","value":7},{"label":"Mar 21","value":4},{"label":"Apr 21","value":6},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":4},{"label":"Oct 21","value":6},{"label":"Nov 21","value":2},{"label":"Dec 21","value":3}}}};
  60. elements2.add({"type":"graph","styles":{"preview":"vertical_bar"},"data":operationalCostData});
  61. elements2.add({"type":"divider"});
  62. sections.add({"id":2,"elements":elements2});
  63. trendGraphData = {{"category":"Loading Time ⏳","values":{{"label":"Jan","value":9},{"label":"Feb","value":6},{"label":"Mar","value":3},{"label":"Apr","value":12},{"label":"May","value":15},{"label":"Jun","value":18},{"label":"Jul","value":24},{"label":"Aug","value":27}}},{"category":"Weight ⚖️","values":{{"label":"Jan","value":12},{"label":"Feb","value":18},{"label":"Mar","value":14},{"label":"Apr","value":6},{"label":"May","value":8},{"label":"Jun","value":4},{"label":"Jul","value":2},{"label":"Aug","value":10}}},{"category":"Processing Time ⏲️","values":{{"label":"Jan","value":4},{"label":"Feb","value":3},{"label":"Mar","value":7},{"label":"Apr","value":3},{"label":"May","value":4},{"label":"Jun","value":2},{"label":"Jul","value":6},{"label":"Aug","value":5}}}};
  64. elements3 = list();
  65. elements3.add({"type":"title","text":"Performance Trends: Speed, Load & Efficiency"});
  66. elements3.add({"type":"graph","styles":{"preview":"trend"},"data":trendGraphData});
  67. sections.add({"id":3,"elements":elements3});
  68. elements4 = list();
  69. elements4.add({"type":"table","headers":{"Supplier Name","Product Category","Avg. Delivery Time (Days)","Fulfillment Rate (%)","Contract Expiry Date","Price Variability (%)"},"rows":{{"Supplier Name":"GlobalTech","Product Category":"Laptops","Avg. Delivery Time (Days)":"6.5","Fulfillment Rate (%)":"92 %","Contract Expiry Date":"2025-12-31","Price Variability (%)":"1.5 %"},{"Supplier Name":"MedSupply","Product Category":"Medical Devices","Avg. Delivery Time (Days)":"4.2","Fulfillment Rate (%)":"96 %","Contract Expiry Date":"2026-06-30","Price Variability (%)":"2.8 %"},{"Supplier Name":"FreshAgri","Product Category":"Perishables","Avg. Delivery Time (Days)":"5","Fulfillment Rate (%)":"93 %","Contract Expiry Date":"2025-09-15","Price Variability (%)":"5.4 %"},{"Supplier Name":"AutoPartsCo","Product Category":"Auto Components","Avg. Delivery Time (Days)":"3","Fulfillment Rate (%)":"95 %","Contract Expiry Date":"2025-11-20","Price Variability (%)":"3.2 %"}},"style":{"text_align":{"center","center","center","center","center","center"}}});
  70. sections.add({"id":4,"elements":elements4});
  71. deliveryInfo = {{"label":"Delivered","value":1050},{"label":"In Progress","value":493},{"label":"Not Delivered","value":440}};
  72. elements5 = list();
  73. elements5.add({"type":"title","text":"Orders by Delivery Status"});
  74. elements5.add({"type":"percentage_chart","styles":{"preview":"doughnut"},"data":deliveryInfo});
  75. sections.add({"id":5,"elements":elements5});
  76. header = {"title":"","navigation":"new","buttons":{button1,button2}};
  77. }
  78. return {"type":"applet","tabs":tabsList,"active_tab":id,"sections":sections,"header":header};


Time to build your own dashboard!  

Cliq Widgets is not just for logistics. Do you want to track sales performance, monitor system health, or analyze customer support tickets? You can craft a dashboard that drives your unique business needs, turning static data into an interactive and actionable experience.

We're here to help, so don't hesitate to reach out to support@zohocliq.com with any questions or if you need assistance in crafting even more tailored workflows.
    • Sticky Posts

    • Convert a message on Cliq into a task on Zoho Connect

      Message actions in Cliq are a great way to transform messages in a conversation into actionable work items. In this post, we'll see how to build a custom message action that'll let you add a message as a task to board on Zoho Connect. If you haven't created
    • Unfurling Unlimited Possibilities in Zoho Cliq 🔗

      Are you tired of your app links looking plain? Imagine if the shared links came to life with custom previews, organized data, and one-click actions, making chats more interactive. With the Cliq platform's unfurl handlers, let's see how developers can
    • Let's build a dashboard with Cliq Widgets!

      While juggling multiple tasks and tracking real-time data, you face a strict deadline for delivering a quarterly analysis report on a blank canvas while switching between different apps. Sounds exhausting, right? What if you could streamline everything
    • Cliq Bots - Post message to a bot using the command line!

      If you had read our post on how to post a message to a channel in a simple one-line command, then this sure is a piece of cake for you guys! For those of you, who are reading this for the first time, don't worry! Just read on. This post is all about how
    • Automate a CRM workflow with Zoho Cliq

      Imagine having a virtual assistant that provides rapid updates to your team through Zoho Cliq, helping you stay on top of your sales processes. After returning from a client meeting filled with updates and action items, managing this information together
      • Recent Topics

      • What is the Use Case for Business Messaging when Live Chat already exists?

        Hi I'm excited about the new announcement for Business Messaging in Zoho Desk. However I'm unclear the use case for Business Messaging when Live Chat already exists? Is Business Messaging essentially a new version of Live Chat but built for use in the
      • Edit Pinned Comments in Zoho Desk

        It's great that private comments can now be pinned to the top of the ticket but what would be extremely helpful would be to allow for the pinned comment to be edited vs. having to find the comment in the ticket to edit it.
      • Introducing the 'Send as Email' option on the Zoho Desk iOS mobile app

        Hello everyone! In the latest version(v2.10.2) of the Zoho Desk iOS app, we have brought in support for the 'Send as Email' option while creating a ticket. This feature enables you to reach out to the customers by sending outbound emails. The emails are
      • Document data extraction and import into CRM.

        I've been trying to solve this for a while and I can't come up with a workable solution: In our business, we utilize many subcontractors around the world (without Zoho user accounts) to produce reports and client sites which they then submit back to us
      • Modular cannot Edit in portals

        I have a custom module in CRM. If I create in either CRM or portals, I can edit it in the CRM but I can't edit in the portal. Even if it is created in the portal it wont edit. Anyone know why? I've created a new module and it works fine but this one
      • Introducing Assemblies and Kits in Zoho Inventory

        Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the
      • Zoho CRM and Books Integration

        Evening, I have started the integration with FSM from CRM and having difficulties with the mapping. In CRM we use "Unit Price" as our cost price and mark this up on a subform to create a "Sell Price" this markup can be different on each quote depending
      • Plug Sample #13: Display CRM Products as Dynamic Carousels in Your Chatbot

        Hi everyone! We’re back with another simple yet powerful plug to level up your chatbot experience. With the SalesIQ-CRM integration, you already have the ability to create leads, contacts, and deals directly within your CRM from SalesIQ, and view complete
      • Como puedo mover un prospecto "Cliente" de modulo

        Tengo un modulo llamado Seguimiento de Ventaa y otro llamado Cierre de Venta. Que cuando se marca como venta efectiva o venta no efectiva, pase a Cierre de Venta, Esto sin duplicarlo "Que esten en ambos modulos" ,Como esta en una base de datos "Excel"
      • Zoho Books not working/loading

        Hi! I haven't been able to access/load Zoho Books for the past hours. I get a time out (and it is not due to my internet connection). Could you please check this asap? Thank you!
      • Introducing ICR in Zoho CRM: Transform your printed text into digital data

        From writing on papyrus in the ancient times to creating a humble record in your CRM, the world may have evolved with how it used to record data, but data entry as such has not been simplified. It is still a repetitive and arduous chore on which businesses
      • Max limit reached on Web Tabs for Zoho Projects

        Hello, ByWater manages between 50-60 projects at a time, and we have been heavily utilizing the Web Tab feature. However, we just hit our maximum limit reached for web tabs. The main thing we use Web Tabs for is sharing a Google document with our partners
      • Creating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.

        Creating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.
      • Article Update Event

        I'm trying to configure a webhook to fire when an article is updated or added. These are listed as available events in the documentation. However, in the webhook creation/editing screen, articles are not listed as a module when setting the event: Am I
      • Kaizen #187 - Building a Timer and Worklog Widget (Part 1)

        Howdy Tech Wizards! Welcome back to a fresh week of Kaizen! This time, we are diving into a two-part series where you will learn how to build a Timer and Worklog Widget for Zoho CRM. This widget helps track active work time and log multitasking sessions
      • Task Permissions

        Is there anyway to have some tasks restricted to view just by the owner or creator?
      • Zoho CRM Forecast - Exclude certain Deals

        We have our forecast and we use it for team forecast/targets/attainment. It works great for that. However, occassionally we have to offer Deals that are non-revenue generating, but are tracked in our CRM. They still have revenue tied to them, but our
      • Kaizen #154 - Dynamically Update Picklist Values in Zoho CRM Workflows

        Hello all! Welcome back to another interesting Kaizen post. Today, we will discuss how to add automatically or remove values from a picklist field using Deluge within a workflow. This post serves as a solution for the forum post. Use case The sales team
      • What is VoC "Unique count", counting?

        Using the "Response based sentiment analysis" dashboard, here is our VoC "Overall Count by Sentiment" VoC uses Zoho Survey and email...and we have almost certainly touched (via email) more than 401 Contacts since January 1, 2025.
      • Filter a report for a specific bank and a specific transaction type (interest income)

        I am trying to run a report - any report - on a specific bank account for the interest income. I do not see it as an option. I can see the Bank Account under Account in the Filters, and I can see the Interest Income under Account in the Filters But I
      • Ability to select Vendor Credits when creating Vendor Payments

        When making vendor payments there should be the option to select open vendor credits, this way the payment shows what bills and credits are being used for the payment Right now the vendor credits must be applied to the bills prior creating a payment,
      • Sorting Tasks by Start Date

        I like using the Tasks tool so far but have one little problem that would help me tremendously. This is my favorite aspect of using Outlook for task management.  When I create a task - I give the Start and Due Date. Some tasks are a little longer and may take a few days, while others only take a few minutes. For example, if a task takes 5 hours, and I want to spend 1 hour per day on it.  Because of this - knowing the start date is much more important than the due date.  The ability to sort by Start
      • Single payment link for multiple invoices or total due for a customer on Whatsapp.

        I want to send a single payment link for multiple invoices or total due for a customer on Whatsapp. Currently zoho books do not have this option . While sending WhatsApp template, payment link is created for particular invoice. I want to send WhatsApp
      • Whatsapp Customer Statement and Outstanding

        Customers are asking to whatsapp statement or outstanding report or invoices regularly. Is there a way we can integrate it in Zoho Books. We already have Whatsapp Business API from Interakt and regular Whatsapp API from MessageAutoSender. How can we use
      • Owner's Draw

        Example: I have a charge account at ABC Company. During the month I charge one $50 item for my business. I also pick up a $20 item for personal use. At the end of the month, I receive a statement with a balance due of $70 and I want to PAY THE ENTIRE
      • Show both Vendor and Customers in contact statement

        Dear Sir, some companies like us working with companies as Vendor and Customers too !!! it mean we send invoice and also receive bill from them , so we need our all amount in one place , but in contact statement , is separate it as Vendor and Customer, 
      • Adding google reviews

        HI , is it possible to add my google reviews to my zoho website ? Thank you 
      • Display an image in Zoho reports report

        I have a table report in which i'd like to display an image made up of data from another column, something like: <img src="records.photo"> However, when i do that, nothing happens.  How do i pull it off?  
      • Currency fields and decimal places in CRM email templates

        Hi, How do I get more than the standard 2 decimal places showing in a Currency field, on an email template? In the Layout for my Currency field, it is set to 6 decimal places. I want to show up to 6 places in the email template (unrounded). See attached
      • GST Returns India

        1. Have been requesting that the documents issued section should be filled automatically. If other accounting software can do it ZOHO Books can. NOT ROCKET SCIENCE !! 2. There is an Issue with the Debit Notes not showing up in GSTR 1 ???  Sorry but this is unacceptable !! as a GST Suvidha provider and an accounting software developer both these errors are unforgivable. P.S: Another GST issue is that the GSTR 2 reconciliation has to be closed monthly to do the next month, Maybe ZOHO developers should
      • Getting error "invalid warehouse_id" when trying to update any transaction in Zoho books

        I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I never
      • E-Way Bill Generation and Custom Button Requirement in Stock Transfer Module in ZOHO Books India

        We would like to provide further clarification and highlight a few operational challenges we're currently facing : we are handling stock transfers between branches/warehouses within the same state under the same GSTIN. As per government rules, E-Way Bill
      • Subform data to Sheets

        I have been trying to setup a Zoho Flow automation to bring any Subform input to a Zoho Sheets but it seems impossible to post the subform entries to a Zoho Sheet. Is there any way to do it via Zoho Sheet API? https://www.zoho.com/sheet/help/api/v2/#CONTENT-Insert-row-with-JSON-data
      • Voiding of Invoice

        What's the implication in GSTR 1 and GSTR 3B when an invoice is voided?
      • Search WorkDrive File Contents from Creator

        Good afternoon, I am building out a Creator app where I want to allow users to input search terms from Creator that will return the appropriate files that contain those keywords from their Creator search. Is this possible?
      • execute workflow when a package is create

        hji, there is a wey to make a workflow when a package is sended o created ?
      • Adding string / text fields to modules

        I'm working on a custom leads module with a layout for call center agents.  I need to add text fields that are for display purposes only to prompt call center agents.  I haven't found any way to add a field in Zoho CRM that doesn't accept input, ie. is
      • Looking to Hire: Zoho Creator Developer for Vendor Dashboard Portal

        We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-time
      • Automate Zoho Meeting Creation via Blueprint (Leads & Accounts)

        I need help automating Zoho Meeting creation during a blueprint transition in both the Leads and Accounts modules. Requirements: Triggered via blueprint Read meeting start time (DateTime field) and internal participants from CRM Create Zoho Meeting via
      • BCC Dropbox on the Agency Module

        Good morning! We've recently implemented the BCC Dropbox feature on our Zoho CRM, but this only appears to be working on the Leads and Contractor (Contacts) modules. It would be incredibly useful for it to work on our Agency module too as a way of tracking
      • Next Page