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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Log for Scheduled Reports

        Hello, Is there somewhere to view a log of the successful and/or failed delivery of Scheduled Reports? We have users who only receive them sporadically instead of at the scheduled intervals and I'd like to understand what causes the problem when it occurs.
      • Why ZOHO Function Can't Read Custom Field API In Quotes Module (Subform)

        I’m using a Deluge function to transfer data from a subform in the Quotes module to a subform in the Accounts module. Everything works except for a custom picklist field in Quotes—no matter what I try, the Zoho API can’t read that field ("Status_sb").
      • Modules are continuously loading

        Hi! We are not able to open the task modules, it keeps continuously loading
      • How to get the call recording external ID via desk API

        I have enabled phonbridge integration with Zoom Call. I am trying to access the call recording in Zoom by calling Zoom API. I have built a Desk workflow to trigger on a new call, to call a custom function. when calling the API, the response doesn't contain
      • Need the ability to have read only fields on a form.

        There needs to be functionality in Creator that allows a field on a form to be read only. Most screen building software applications have this capability. I know you can hide certain fields from specific users and that you can also make the whole form read only but that's not the functionality I need. I want to be able to create a form where certain fields are editable and other are for display purposes only (read only). For example if the form was displaying information on an item that the user
      • 【Zoho CRM】BCCメール取り込みのアップデート

        ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から BCCメール取り込み用メールアドレスの認証についてご紹介します。 ・既存のBCCメール取り込み用のメールアドレスは、2025年5月15日までに認証する必要がございます。 BCCメール取り込みは、さまざまなメールアドレスから送信されたメールをZoho CRMのレコードと同期させる機能です。 BCCメール取り込み用のメールアドレスをBCCに追加するだけで、該当のメールがレコードと関連付けされます。
      • Can we have Backorder Management ?

        Can we have Backorder Management ?
      • Now filter your records by multi-select pick list values from a dropdown with additional operators

        Hi everyone, Here's an update to help you elevate your filtering experience. You can now say goodbye to the cumbersome string values in filtering places for your multi-select picklist fields and say hello to a dropdown interface. It is now possible for
      • Sending Recruit SMS's to Zoho Cliq - Or tracking in the Messages module in Recruit?

        Is there any way to send SMS Gateway messages in Recruit to ZOho Cliq? We use 2-way SMS massages a lot in Zoho Recruit to speed up communication with Candidates. However the only way to keep track of received SMS's is by keeping a look out for the Email
      • CRM->INVENTORY, sync products as composite items

        We have a product team working in the CRM, as it’s more convenient than using Books or Inventory—especially with features like Blueprints being available. Once a product reaches a certain stage, it needs to become visible in Inventory. To achieve this,
      • Add timestamp when checkbox is checked in ZohoCRM

        I have two fields. One is a checkbox field called "Check", one is a formula field called "Date" in my ZohoCRM Leads Module. I want the formula field to AUTOMATICALLY populate with the date when I check the box next to it. Can this be done? 
      • Customer Statement Templates

        Hi  In know that Credit Note Templates have already been proposed but I would also like to see Customer Statement templates as well please. Thanks Gene
      • HTML Email in Zoho Books

        Is it possible to create custom html email template in zoho books. 
      • Agents permission per department

        Hi Team, can I setup permission for each agent what they can do in each department, for example I want account department agents to only have view access to support department tickets and not allowed to assign or reply to clients. I am sure this would
      • Open a popup window from inside Record A and stay on the record after saving Record B

        Hello community, Perhaps you can help me with the following topic. I have a form A with a decision box. When this decision box is checked, a form B pops up. Once Form B is saved, I need to stay on Form A to continue entering data. I've observed the following
      • Don't allow scheduling service on same day

        Is there a way when setting up a Service for people to schedule to not allow them to schedule it for the same day, only a future date? We don't want people scheduling their meeting/service without giving us time to prepare for it.
      • Presenting the brand new Zoho Bookings!

        Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest
      • Expense Entry Error When Trying To Save (Related To Taxes)

        Hey folks, I've been trying to enter my first few expense entries in Zoho Books and I'm faced with the following error. "You cannot perform tax related operations when you are not registered for tax." But I have my HST/GST enabled and the tax rates are
      • Onboarding Zoho sign documents?

        I was wondering something about using the Zoho sign integration with the candidate onboarding process. We set up the entire onboarding process and we have added documents that the candidate needs to review and sign digitally using Zoho Sign. This part
      • Email Templates - Is There a Ticket Placeholder for Billing Entity ID

        Was looking to add Billing Entity ID as a placeholder in a ZoHo email template. https://help.zoho.com/portal/en/kb/desk/customization/templates/articles/creating-and-managing-email-templates#Guide_to_Placeholders e.g. the placeholder for Account would
      • Integration with Woocommerce

        Hi, Do you have plan to make integration with other e-commerce platforms, for example Woocommerce / Shopify / Magento ?  Thanks. 
      • Se puede mover un Cliente de un modulo a otro personalizado

        Hola, tengo una duda que me gustaría resolver: Actualmente trabajo con dos módulos: Seguimiento de Venta y Cierre de Ventas . Mi objetivo es que, cuando desde el módulo de Seguimiento se marca una venta como "Venta Efectiva" , el cliente sea movido al
      • 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.
      • Export Data & Attachments

        Hi, I am wondering whether it is possible to create an export of all data in creator, including attachments, for either backup purposes, or migration purposes. Thanks.
      • Apply partial payments to invoices from the Banking Module

        We need this! Why is this not possible?
      • Zoho Desk: Q1 2025 | What's New

        Hello everyone, Our first release for the year 2025 is here! Check out the Release Notes for more details The diverse capability of AI and its avatars has been the center of attention lately, and we've made some significant strides in this area. We now
      • Feature Request Improve parent-child relationship visibility

        Hi team, The Parent-Child ticket feature is great, but I've struggled to see the relationship between tickets when using ticket list views. It would be a great quality of life enhancement for users if child tickets were nested under parent tickets in
      • What is Resolution Time in Business Hours

        HI, What is the formula used to find the total time spent by an agent on a particular ticket? How is Resolution Time in Business Hours calculated in Zohodesk? As we need to find out the time spent on the ticket's solution by an agent we seek your assistance
      • Issues with Dashboard Filter and KPI in Zoho Analytics (CAGR)

        Hi everyone, I'm trying to build a CAGR (Compound Annual Growth Rate) KPI in Zoho Analytics, but I'm running into some issues with filter synchronization. Here's the scenario: I created two test reports: One that filters results from 2021 to 2025. Another
      • need a third party to fix email authentication dns records

        at my wit's end - zoho began giving me spf, dmarc, dkim errors two weeks ago fussed with it since and now it seems dkim is the only problem and when i added the dkim record with the key from zoho mail it still wont work tired of this, need someone who
      • How do i move multiple tickets to a different department?

        Hello, i have several tickets that have been assigned to the wrong department.  I am talking about hundreds of automatically generated ones that come from a separate system. How can i select them all at once to move them to another department in one go? I can select them in "unsassigned open tickets view" but i can't find a "move to another department" option. I also can't seem to assign multiple tickets to the same agent in that same view. Could somebody advice?
      • Zoho Books Sandbox environment

        Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a
      • Add Button on Tickets

        is there a way I could add another button on the ticket aside of "closed ticket" only. Like I want to add another button "Send & Pending", "Pending for Response" like that.
      • Enhancements in Canvas

        Dear All, Greetings! Canvas lets you design the record details page to suit your brand or business preferences. We are glad to introduce the following enhancements to uplift your design experience. Reusable Components Style Presets Let's go! Reusable
      • 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
      • Include Secondary Contacts (CCs) on Workflow Alerts

        Hi There, We use the Supervise Rules and Workflow Alerts to send automated messages to contacts in Zoho Desk. Most often, we are sending the ticket contact (our client) a reminder that we are waiting on their reply to our most recent message. The problem
      • Zoho Desk blank page

        1. Click Access zoho desk on https://www.zoho.com/desk/ 2. It redirects to https://desk.zoho.com/agent?action=CreatePortal and the page is blank. Edge browser Version 131.0.2903.112 (Official build) (arm64) on MacOS
      • Adding a lead by sending email message

        Hello, Our Zoho Mail is integrated with Zoho CRM (we have Enterprise) and we can add new leads to CRM right from the web interface/panel of Zoho Mail using buttons at the bottom right corner of the screen. This is very handy. We add leads on a regular basis.    I was wondering though if it's possible to add a lead to CRM by simply forwarding an email message to a certain e-mail address. For example, in Evernote one can add a new note by sending an email message (with certain parameters) to a custom
      • Ask the Experts 19: Live Expert Panel Discussion - Inside Zoho Desk Spring Release 2025

        Hello again! Have you ever needed quick insights into key indicators to help manage and streamline specific operations? Have you started using AI to enhance your customer service in Zoho Desk? From configuring simple bots using Guided Conversations to
      • 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,
      • Next Page