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

    • Removing To or CC Addresses from Desk Ticket

      I was hoping i could find a way to remove unnecessary email addresses from tickets submitted via email. For example, a customer may email the support address AND others who are in the helpdesk notification group, in either the TO or CC address. This results

    • Ability to Export Field Dependency Structure in Zoho Desk

      Hi Zoho Team, We’d like to request a feature enhancement in Zoho Desk that would greatly improve configuration management for organizations like ours: Requested Feature: The ability to export the full structure of Field Dependencies, especially for multi-level

    • [URGENT] Allow reorder (drag&drop) of subform record

      Very simple user case: a wedding planning app where you want to send your client a form to fill with information about their wedding. Form includes some field for general purpose information and a subform for event pacing/schedule. Clients are invited to create a new row (When? - What? - Where? - Who?) for each thing happening during their wedding chronologically. Ex: When                  What 10h                      Something TBD                    Speech After speech      Yet another thing happening

    • Departments in Zoho

      I'm trying to set up a department. It looks like Departments have been removed from Zoho One. Is there another option? We have our main account setup, but want to set up a separate small department that can't see our tabs.

    • Add Timer for Agent Status Duration in Zoho Desk Dashboard

      Hello Zoho Desk Team, We hope you're doing well. We would like to submit a feature request to further enhance the agent status tracking functionality within the Zoho Desk Dashboard. 🎯 Current Functionality As it stands, Zoho Desk allows us to view the

    • [Beta Feature] Parent-Child Ticketing

      Hello there, a beta parent-child ticketing feature has recently been made available for some, read more here: https://help.zoho.com/portal/en/kb/desk/ticket-management/articles/understanding-parent-child-ticketing-system#Business_scenarios I would like

    • Enable Sorting by Ticket Count in Category Reports

      Hi Zoho Desk Product Team, I hope you're doing well. We would like to submit a feature request to improve the reporting capabilities in Zoho Desk. 🎯 Feature Request: Sorting by Ticket Count in Category Reports Currently, category-based reports in Zoho

    • Reactivating a CRM user...

      I'm a 1-man business primarily using CRM under my Zoho1 subscription (I have NO other employees or users). I wish to re-activate a prior user (my son, once more working with me) but when changing his status from inactive to active I receive this message:

    • Zohoサポートにスコープ開放を依頼する

      お世話になっております。 現在、弊社にてZoho DeskのナレッジベースをAPI経由で取得し、AIツール（NotebookLM等）に連携する仕組みの構築を検討しています。 つきましては、ZohoDesk.articles.READ スコープを使用したOAuth認証の許可をいただけますでしょうか。 API Console から Server-based アプリを作成済みですが、認可URLにアクセスすると「スコープが登録されていません」と表示されます。 お手数をおかけしますが、スコープの開放をご

    • Where can I configure the notifications for everything KB-related?

      Hi all, I'm receiving notifications for some actions happening in our Knowledge Base (e.g. someone leaving a feedback) and I would like to customise the template or have the choice to enable/disable such notifications like it is possible for ticket notification

    • Increase Round Robin Scheduler Frequency in Zoho Desk

      Dear Zoho Desk Team, We hope this message finds you well. We would like to request an enhancement to the Round Robin Scheduler in Zoho Desk to better address ticket assignment efficiency. Current Behavior At present, the Round Robin Scheduler operates

    • Self Client Authorization Code Flow for Mail returns 404

      Hello, I'm having trouble getting the Zoho mail api setup and want a sanity check. I am trying to follow this guide to get an access token for the mail api: https://www.zoho.com/accounts/protocol/oauth/self-client/authorization-code-flow.html Unfortunately

    • Zoho Knowledgebase Help Center Categories linkages are wrong

      Greetings, I am build a help center in zoho desk, based on the additional custom brand I have paid for. My knowledge base has 4 main categories. I have this setup this way in my knowledgebase customization theme area. The page layout is like this: Here

    • Connecting Learn to a Custom GPT

      Hi all! I am attempting to connect a Learn Space and all it's articles into a custom GPT. Has anyone successfully done this? I have worked on it with no success so far.

    • Tip 12: How can you customize the display name while sending emails from Zoho Creator.

      Hi folks, Usually when you send emails to your users, the display name defaults as your From email address. Most often, you would like to set a custom display name to represent your organization or the context of the email. You can mask or customize the display name (From Address) using Deluge script as long as the From email address has been verified. This would be very useful to you if you want to send bulk emails to a large audience.    Let's say you have a Student Registration form for your dance

    • Importing Data to update and not add

      I'm very new to Zoho created and tried searching the forums for the answer. Nothing I found has helped me make sense of how to do this. I created a app based on an excel spreadsheet but no matter what I do, whenever I import data it duplicates the record. I have a field I would like to use as a unique identifier, but I'm not sure how to tell my app that.  Any assistance, even a link to a tutorial on creating functions in the workflow of the app, would be very helpful. Unfortunately I can't share

    • Allow me to duplicate a field

      Hi, Many times I need to create new field with slightly change compare to an existing one. So when I click an existing field, can you add one more option "duplicate"? That'd be very helpful. You mayc heck wufoo.com to see this feature. Thanks, Li lhong1

    • Community Digest Noviembre 2024 - Todas las novedades en Español Zoho Community

      ¡Hola, Español Zoho Community! Wow, ya termina el año, ¡gracias a vuestra participación se nos ha pasado volando! Por eso mismo estamos preparando sorpresas para todos los que participáis en la Español Zoho Community para el próximo año, ¡estad atentos

    • Zoho Mail iOS app - Complete revamp of the UI including insert image option, toolbar customization, calendar widgets and more!

      Hello everyone! The new Zoho Mail iOS app introduces a fresh look, blending native iOS features with a refined UI and UX to make email management more intuitive. The updated design focuses on simplicity, ensuring smoother navigation throughout the app.

    • Adding a work order for Assets vs. changing the contact person

      When adding a work order for an existing Assets (e.g. service), the assigned contact cannot be changed (deleting the contact deletes the selected Assets). This results in such an illogical operation that if you want to change the person to be contacted,

    • DOMIN NME

      How many email account do zoho supports

    • Assign admins to the application

      I want to know who to assign admins to UAE Payroll application. I tried from inside the application, and from one.zoho.com >> directory and nothing is happening, knowing that I have enabled zoho people integration with payroll. Can someone help me?

    • Zoho Marketing Campaign

      I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?

    • ¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?

      ¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramienta

    • Automating SharePoint Folder Creation based on Equipment Module

      Dear Team, I would like to seek your valuable advice on one of my requirements. My objective is to automatically create a SharePoint folder whenever a record is created in the Equipment module. The folder should be named based on the equipment name. Once

    • Can I view a gallery of attachments related to an Account, Contact, or Subscription

      It is often useful to review photos related to an account or contact by service type. It would be nice to be able to see the photos collected through workorders or appointments all associated.

    • Language Field on Contact Person-level

      Dear at Zoho Books, would it be possible for you to have a Field for 'Language' for the Contact Persons under a Company. In CRM and Bigin we could create a Custom Field (Dropdown) for this effect but without any present in Zoho Books we could never sync

    • Customise Zoho FSM Work Order Name

      Hi there, is there a way for us to customise the work order number? For example - I want to add auto look up for company name or dates at the end of the work order number. WO4 - Company ABC

    • Introducing Dynamic Display in Zoho CRM mobile apps

      Hello everyone, We're happy to announce that Dynamic Display is now available in the Zoho CRM mobile app for both iOS and Android devices. Mobile apps have become synonymous with convenience and flexibility. As more and more businesses rely on mobile

    • How we can integrate pdf attachments in zoho crm with xero

      when i tried to integrate the data and attchment from zoho crm to to xero only the data get integrated with xero how we can integrate the pdf attachment as well nb zoho apis are not working via functions

    • Delete user profile

      Hello, How can I delete a User Profile?

    • Send emails directly via Cases module

      Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization

    • Introducing delegate signing in Zoho Sign

      Hi everyone! We are happy to announce a new feature in Zoho Sign — Delegate Signing! Whether you're tied up in meetings, away on vacation, or managing multiple responsibilities, you can now assign a delegate to sign documents on your behalf. This ensures

    • Deleting Salutation Field

      We have updated our lead input screen and 'Salutation' has appeared. This is not visible in the 'Edit Pgae Layout' screen so cannot be moved to 'List of Removed Fields'  Salutation is visible in the list in 'Customization - Fields' however I can only 'Edit' or 'Replace' I cannot delete and I do not need this field on my lead input screen.  Please can you advise how to get rid of this.  Screen shots can be provided if needed.  Thank you Tasha

    • Zoho Voice VS in Zoho CRM for logging calls

      I don't understand the differences between logging calls in Zoho Voice VS in Zoho CRM. Why the 2 separate platforms? Seems confusing

    • Updates to Auto-Upgrade in Zoho Campaigns

      Hello everyone, We've rolled out a new update that slightly modifies how the auto-upgrade option in Zoho Campaigns works. Even if you hit the contact limit, this update ensures that your account is upgraded and that contacts are imported smoothly—without

    • Adding Sub-Forms to Merge Documents

      I am setting up a Mail Merge, which includes sub-form table data. I've done it before but now I am having issues: 1. The headings don't show. I had to enter these manually 2. The table lines are separated. I want them together. Anyone know how to fix

    • Zoho Bookings Online Training | July 31, 2025

      Hi everyone! We’re back with the second session of our Zoho Bookings training series! This time, we’ll show you how to automate your scheduling, manage appointments more efficiently, and explore advanced features for your industry. Join our free, two-hour

    • Translation of Tooltip Messages

      The descriptive help messages should be available to provide translations for.

    • CREATE button is grayed

      On Android adding new notes to notebooks with collections is impossible because the CREATE button is grayed. What can be done?

    • Next Page