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

    • Bulk user onboarding for Cliq Channels in a jiffy

      As developers, we frequently switch between coding, debugging, and optimizing tasks. The last thing we want is to be burdened by manual user management. Adding users one by one to a channel is tedious and prone to errors, taking up more time than we could

    • 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

    • Recent Topics

    • Zoho Inventory MobileApp compatible with barcode scanners such as Zebra

      Hi, Although the Zoho Inventory App is working with a scanner mode taken directly through the cell phone which I do not consider it as efficient, I would like to know when are you planning an update on the app so it can be compatible with bar code scanners

    • Automating Sales Order Confirmation & Picklist Generation in Zoho Inventory

      Hi everyone, I’m looking to automate the sales order creation and confirmation process in Zoho Inventory, along with the automatic generation of picklists with bin-level details. Here’s what I need: Sales orders should be automatically created and confirmed

    • Sum Total of various fields in child module and add value to parent module field

      Hi! Having trouble with a custom function, im trying to calculate the total of all the rent and sqm fields of our offices in Products module and have them transfer to the parent module Location. The API names are as below: Child module Products = "Products"

    • campaings flagging domain error but crm says OK

      campaings flags error with domain buy crm says notig wrong - this is new, help

    • Field Validation and Profile restrictions bypassed using Mass Actions

      We have a Validation Rule that prevents ticket closure if the "Subcategory" field is blank. This has been working fine, but recently we noticed a few tickets per day somehow being closed without a "Subcategory". Upon further investigation we found the

    • Undelivered Mail Returned to Sender

      commerciale@etruriadesign.it, ERROR CODE :550 - "The mail server detected your message as spam and has prevented delivery." I have been corresponding with the receiver and they wrote "Ciao, ho fatto verificare ma purtroppo non è un problema che deriva

    • Creating Email template that attaches file uploaded in specific field.

      If there's a way to do this using Zoho CRM's built-in features, then this has eluded me! I'm looking to create a workflow that automatically sends an email upon execution, and that email includes an attachment uploaded in a specific field. Email templates

    • Any Companies using HubSpot for Marketing integrated to Zoho CRM ? - Looking for Feedback

      Our company is using HubSpot for Marketing looking at moving from our presently working Z-CRM to hubspot for CRM. I am looking for any companies that are successfully integrating HubSpot Marketing functions with Zoho CRM. Upsides/Downsides/Effort/etc.

    • Multicolumns fields for native forms

      It would be nice to be able to create forms with multiple columns. Currently, each field occupies a single column, which makes a fairly complex form seem too long.

    • Customize Thank You message for native forms

      While it allows me to add a personalized message when completing a form, it would be nice to be able to customize the title (Thank You) and the button text (Close). In my case, the page is in Spanish, and those texts are in English, so I can't edit them.

    • Customize forms validation for native forms

      I'd like to be able to edit and/or translate the validation messages of a native form. My page is in Spanish, but the messages appear in English, and I couldn't find a place to edit what I want to display. Perhaps they can be edited when adding fields

    • Assign values to hidden fields in native forms

      It would be great to be able to assign values (static or dynamic) to hidden fields in a form. Currently, I can only assign a value via the URL. I currently have a form integrated with a webhook, but I don't have a way to send useful form data as parameters,

    • Mass emails - Allow preview of which emails will receive the email based on the criteria

      Feature request. Please allow us to view and confirm the exact recipients of the mass emails based on the criteria we've chosen before sending. It can be quite sensitive if you send the mass email to some wrong accounts accidently, so it would be great

    • Filter Vendors/Suppliers from Campaigns

      We are unable to filter out our vendors/suppliers from any mass campaigns we send out. When synching our CRM contacts within Campaigns, we are unable to map the "Vendor Name" field. We have tried to create a segment from our all contacts list but to no

    • 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

    • Add picklist in subform lookup

      Hello, I am trying to rewrite a script that works on a from as parent form, to the same form when is is a subform. Here is what I did in the form itself : RefCat = Offre_de_produits.distinct(Categorie_OFFRE); clear Categorie_LIGNE; for each Record in

    • Parent-Child Tickets using API or Deluge

      Hi Everyone, We are looking at the parent-child ticketing features in Zoho Desk. We want to be able to create a parent ticket at customer level and nest child tickets underneath. The issue we are facing is to be able to automate this. I'm checking the

    • Zoho Books | Product updates | May 2025

      Hello users, We’ve rolled out new features and enhancements to elevate your accounting experience. From configuring approval at the module level to allocating landed costs to multiple bills, these updates are designed to help you stay on top of your finances

    • Date & Time Field | Minimum 24 hour notice.

      I'm trying to use Zoho Forms to build a booking request form. I have the date and time field selected as the field users can select their booking time for. My issue is I need a minimum of 24 hour notice for each appointment. I have it sent to only future

    • Restricting Printing

      Hi Is it possible to stop users printing documents?

    • Delete a department or category

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

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • Ticket layout based on field or contact

      Hi! I want to support the following use-case: we are delivering custom IT solutions to different accounts we have, thus our ticket layouts, fields and languages (priority, status field values should be Hungarian) will be different. How should I setup

    • 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

    • Zoho RPA is now available in your Zoho One bundle!

      Hello All! Of late, it's been quite a stint of new app integrations in Zoho One. This announcement pertains to the addition of another Zoho application, the most sought-after Zoho RPA - Robotic Process Automation, to the bundle. What is Zoho RPA? Zoho

    • Looking for basic script structure course

      Hi, I am not a programmer, but try to learn on my own. I get a lot of good advises in this forum, and thanks, but I tend to ask the same questions since I do not remember comparable answers I already received. Is there a basic course of "scripting structure"

    • Check out in Meetings

      Why there is no check out in Meetings of Zoho CRM, very difficult to track

    • How to let only account-bound products visible to users

      Hello friends, I'm trying to leave only the Products linked to the accounts visible to Zoho Portal users. If the user clicks "All Products," they can open tickets incorrectly for products that do not belong to the account that are registered. Is it possible

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Add Lookup Field in Tasks Module

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

    • RTL Support on iPad

      hi I have this issue that when I create notes on my android app [in hebrew] all the text is aligned correctly to the right because I’m typing in Hebrew. But then when I open it up on my iPad, everything is suddenly aligned to the left and there is no

    • Sites Speed and Performance Grades

      I noticed that there are no recent inquiries or complaints about load speed or performance issues with Zoho Sites websites. However, I wanted to understand what Zoho has done to ensure that speed remains optimized, images are compressed and lazy loaded,

    • Possible to reorder Pipelines position?

      I have multiple Pipelines and want to reorder their positions, so that in the Deals module record for the Pipeline field, I have them ordered in a certain way. Is there a way to reorder the position of the Pipelines without deleting existing Pipelines

    • Set up multiple IMAP email addresses

      Hi, I just started using CRM and its great, but I just found out I can only add one imap email address for incoming mail in the included salesinbox ...this is ridiculous. All companies have different email such as sales@domain, info@domain , personal@domain

    • Zoho CRM Outlook integration: no option showing up even after installation

      I followed the instructions on this page to install the add-in: https://help.zoho.com/portal/en/kb/crm/integrations/microsoft/ms-outlook-add-in-for-zoho-crm/articles/outlook-add-in-for-zoho-crm#Understanding_the_add-in But I don't see the options in Outlook

    • No sync

      I have amended a note on my PC, startet syncing but on the smart phne sync starts und runs for minutes. The note amendment ist not shown, but when I go to version the new version is shown but not possibility to accepte the new version

    • Validating an order by a superior

      Hi, I have a very specific use case for Backstage. Let me know if this is possible or how I could get around this (or if there are no workaround). One of my client uses Backstage to manage internal (on site) events. Participants from different departments

    • Zoho Books - Feature Request - Provide "Show PDF View" toggle on Invoice records

      I have noticed it is possible to activate or deactivate the PDF preview on some records but not all. This would be very helpful on Invoices when a custom template is being used and the PDF preview does not represent the output file. Not available on:

    • Dark mode

      Because the whole world talks about it and iOS also will get this option. Please make a real dark mode happen. It is very cool to switch the navigational color, but the content always stays in light colors.

    • Changing Default PDF Name

      Is it possible to change the default name of a PDF? As of right now, all of my quotes are named 'QT_$QuoteNumber' (i,e: 'QT_19803471298374) - would it be possible to change this to: '$CompanyName - $AccountName - $QuoteNumber' for instance?

    • Next Page