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

    • Customer payment alerts in Zoho Cliq

      For businesses that depend on cash flow, payment updates are essential for operational decision-making and go beyond simple accounting entries. The sales team needs to be notified when invoices are cleared so that upcoming orders can be released. In contrast,

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Accelerate Github code reviews with Zoho Cliq Platform's link handlers

      Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share

    • App Spotlight : PagerDuty for Zoho Cliq

      App Spotlight brings you hand-picked apps to enhance the power of your Zoho apps and tools. Visit the Zoho Marketplace to explore all of our apps, integrations, and extensions. In today's fast-paced world, seizing every moment is essential for operational

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    • Recent Topics

    • The amount entered is more than the balance due for the selected bills."

      Hi Team i am trying to record payments for vendors using API and getting this error in response as { "code": 28011, "message": "The amount entered is more than the balance due for the selected bills." } JSON is prepared according to Documentation and

    • VBA handling named ranges

      In VBA I'm able to work with a single cell named range. E.g. Set Jr = Range ("Year").Value. Also other options are working fine, like Range("Year").Address shows $L$3. However a named range refering to multiple cells is not working for me. Eg. tbl_Test

    • Kaizen #176 - Optimizing the Use of Record ID Variables in Zoho CRM Queries

      Hello everyone! Welcome to another week of Kaizen! Since the release of Queries, we have covered Handling Query Variables in Zoho CRM, Serialization and Schema Management, and Leveraging the 'crmAPIResponse' object in Queries in previous posts. Today,

    • Unbilled Items Report?

      Hello! Is there any way to display a list of items that remain unbilled, without creating an invoice for each customer to see if the unbilled items box is displayed? ;-) Ben

    • Consolidation of Multi currency

      Would like to discuss on the possibility of consolidating the ZOHO companies

    • Landed Cost Allocation / Custom Duty manual data entry

      My client is an import business. They must manually enter the duty for each item with landed cost allocation in Bill. This is because customs duties cannot be allocated based on Quantity, Value, Weight, and Dimensions. Manual data entry is highly time-consuming

    • Territories Just Don't Work

      I have been on chat and screenshare support for the past 3 days and am getting no resolution so hopefully, someone here can help me. I am the Super Admin of my organization. We publish books globally. I want to break down the books into territories so

    • Negative Opening Balance

      How can I add Negative Opening balance - meaning a credit balance to a Customer or a debit balance to a vendor? If I go thru Sales-->Customers, and if the opening balance is Rs. 1000 (credit balance), it does not allow me to enter a "minus" sign or mention

    • Single-Line Invoicing from Sales Order Despite Multiple SKUs Shipped

      We deal mostly with Government Tenders And Lets say we got a tender that needs 125 XYZ Laptops Then we found 95 Laptops with a different SKUs and 30 Laptops with different SKUs We talk with the IT department of the government company and they approve

    • 📣📣 Zoho Bookings Schedulathon 2025 is here!

      Hey Zoho Bookings fam, We're excited to invite you to our first-ever hackathon: Yes, Zoho Bookings Schedulathon 2025 is live now. This is a virtual event and you can participate anywhere from the world. Businesses should be able to set up meetings from

    • I want to send out a new newsletter each month

      Without rebuilding a whole journey is there a way to create a new newsletter that is sent to an existing journey monthly?

    • Reinstalling Workdrive Truesync client

      Hi, I attempted to update to the beta version of TrueSync, but it was unstable and kept crashing, so I need to revert to the stable version. How do I properly reinstall TrueSync on a Windows PC? I couldn't install the 3.15.x version directly over the

    • Evaluating Creator; yesterday fine; today connection times out

      Yesterday I spent hours creating a new app, and it worked fine. Today I cannot access creator.zoho.com. Is this common? I'm in the evaluation mode, but I'm thinking I'm going to keep looking. It worked from my home computer, and now I'm checking it from my work computer. My work computer always works just fine, so I shouldn't htink there would be special settings or anything. If there are, how to find out what they could be? Using Chrome on Windows XP The error I get is: The webpage at https://creator.zoho.com

    • Pivot Chart seems to show "old" data - how do I make it update?

      I wonder how to make a Pivot Chart "update" its data contents. Here is the background: I need to report a subset of data that is so complicated that it is easier to make a calculation and put the result in a "reporting form", and then display the data from that form.  So, I get data from the "original form" GRANTS, make some calculations and put the result in the "reporting form" PERIOD.  Now I can watch the result in a list called LIST, which works fine. The list LIST shows that form PERIOD contains

    • Upcoming Changes to LinkedIn Parsing in Resume Extractor

      Starting 31 July 2025, the Zoho Recruit Resume Extractor will no longer support direct parsing of candidate data from LinkedIn profiles. Why Is This Change Needed? In accordance with LinkedIn’s platform policies, extracting profile data through browser

    • how to create view in leads module to that will show all leads + converted leads?

      is it possible to make custom view that combine all leads + converted leads? how to do that

    • Reply and react to comments

      Hi everyone! We're excited to bring to you a couple of new features that'll make your sprint process simpler. A cloud application brings with it an array of social media features that can be efficiently used in your organizational setup. As an agile scrum

    • Announcing Early Access to "Zoho CRM for Everyone" — A new and exciting update to Zoho CRM

      Zoho CRM For Everyone is now officially available to all customers, and the Early Access Program has come to a close. We want to extend our sincere thanks to everyone who participated in the program. Your valuable feedback played a key role in shaping

    • Avalara Sales Tax integration - AVATAX

      Just wondering if anyone else is having troubles with this integration?  Seems as though Avalara changed their billing process, unbeknownst to Zoho, and now ALL transactions are counted by Avalara, not just transactions in a taxable jurisdiction.  This caused a huge price adjustment billed to us by Avalara within a month of us signing up.  And Avalara is not cheap to begin with! Avalara has been great in waiving that increase, but there seems to be no fix.  Zoho is aware of the problem, but slow

    • Invalid value passed for description

      Dear Sir, When I am entering the purchase bill , the following message showing "Invalid value passed for description" what should I do ? I am attaching screenshot. With Regards, Harish harish@cracku.in 7978841636

    • Zoho Creator - 2024 Release Projection 1

      Hello everyone! As we enter 2024, we'd like to extend our warmest wishes for success and prosperity. Your fantastic response to our Product Roadmap page last year has been incredibly motivating. Continuing on this path, we're excited to share a glimpse

    • Automation Assistance for Zoho Form Integration and Workflow

      Hi, We are currently using a Zoho Form to send out our Global Credit Application and would like to automate the process further. Specifically, we’d like the ABN number submitted through the form to automatically populate the GST/VAT Number field in Zoho

    • COQL does not return queryable value if the result set is empty

      See linked video for running code illustration of the problem: https://workdrive.zohoexternal.com/external/d49bb40033b43b288d56fdf843095b7c65b28391d3ec5d09c854f416d853003d Moderation update: We are appending the comment that was removed, to add context

    • Zoho CRMでの商談の管理のしかたについて初歩的な質問です。

      先月からZoho CRMを試験的に導入して運用しています。 商談の管理（運用？）の仕方について教えてください。 商談の数が増えてくると、ダッシュボードの「ステージ別進捗状況」にどんどん過去の商談が蓄積されてくると思うのですが、 現在動きのあるものを中心に確認したくなる気がします。 そのあたりについては、どのように運用が一般的なのでしょうか？ アドバイスいただけるととてもありがたいです。 よろしくお願いします。

    • Composite Items & Purchase Orders

      The Composite Item is great way to bundle different products and services into a single line and sell it as a single line item in Estimates, Sales Orders and Invoices. However, on the other side - i,e,. Purchasing - this item creates quite a bit of a

    • using custom function is it possible to update the created by field in Zoho Crm custom module

      using custom function is it possible to update the created by field in Zoho Crm custom module

    • Slow Sloww Slowwww Responses

      Good day, Has anyone been experiencing slow responses from support? Since Thursday I migrated my Whats app to Sales Iq and I had to synch with Social to get the otp they were sending. Apparently What's app can't be automatically added so I reached out

    • You have exceeded the maximum number of attempts for this action. Please retry doing the same in 30 minutes.

      When one of Zoho Books user tries to select a vendor, recording a new bill, these message appears: You have exceeded the maximum number of attempts for this action. Please retry doing the same in 30 minutes. Other user, at the same time, but different

    • Enable Conversation Context Retention for SalesIQ Answer Bots

      Hello Zoho SalesIQ Team, We hope you are doing well. We have noticed that SalesIQ bots currently fail to maintain conversation context in Hebrew. For example, when we follow up on a previous answer or ask for clarification in Hebrew, the bot either provides

    • Automatic Hebrew Small Talk Setup Without Duplicate Term Errors & Manual Configuration

      Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement to the Small Talk feature in Zoho SalesIQ, specifically for Hebrew language support. Current Challenge: When setting up Small Talk for Hebrew, we encounter multiple issues: Simple

    • Should I Add Leads in Bigin?

      ok, first off I'm new here. I just started using Bigin. I'm debating if it's appropriate to enter leads. by leads I mean a list of contacts that I have not yet reached out to...it's a cold calling list.  if I enter them I can track them (I understand

    • Zoho Books - Perform a validation check before an invoice is marked as sent or sent

      Allow the validation rules to apply to button actions. For example: an invoice could not be sent or marked as sent if it has an empty value in a custom field. (The field could remain blank while it is being worked on.)

    • Flow error "given url is wrong"

      when I setup a flow to update a task status, I get an error when it runs that says "given url is wrong."

    • Upgrade Zoho Desk Agent-Side Answer Bot to GenAI

      Hello Zoho Desk Team, We hope you're doing well. Following the recent announcements and rollout of the GenAI-based Answer Bot in Zoho SalesIQ (Nova '25), we’d like to formally request a similar upgrade for the Answer Bot used by agents inside Zoho Desk.

    • Bigin Android app update: Email filters enhancement, change owner for related records.

      Hello, everyone! In the most recent Bigin Android app update, we have introduced additional email filters and an option to change the owner of related records. Email filters: We have now brought in support for 'All Emails' and 'Added from Widgets' filter

    • How can I get all conversations and comments of a Zoho Desk ticket using ZOHODESK

      Hi everyone, Currently, I am developing a Zoho Desk extension, and I am following the guide available at https://www.zoho.com/desk/extensions/guide/#ticket-object. While working with Zoho Desk, I have noticed that I can only retrieve the general information

    • AI & Zoho Recruit

      Hello, I guess we all are using AI in our personal and professional lives. Now, let's imagine. Recruitment is just a succession of stages and steps. For which step would you like to see AI implemented into Zoho Recruit ? I'll start : - Automatic translation

    • Workdrive and ChatGPT Team Synced Connectors

      Hi, we want to be able to integrate Zoho Workdrive with OpenAI’s ChatGPT Team plan. Google Drive and OneDrive both offer this, zoho please catch up asap. We dont want to have to put our company files in google drive, we want to allow chatgpt Team edition

    • widget url 404'ing

      I'm creating a widget for the first time. When I grab the url from the base url section of the widget builder and append /widget.html it 404's Just wrote a very basic test. I have a folder structure app.zip - widget.html --js/app.js /widget.html <!DOCTYPE

    • Unable to Edit Pick-List Items in Custom Project Field(s)

      I can edit most fields normally, but if I try to edit - in any way - a Pick List field, I just get this error: To be perfectly clear, I'm trying to edit an existing Pick List field (adding or removing items), not adding a new instance. If I rename it,

    • Next Page