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

    • 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
    • Add Claude in Zoho Cliq

      Let’s add a real AI assistant powered by Claude to your workspace this week, that your team can chat with, ask questions, and act on conversations to run AI actions on. This guide walks you through exactly how to do it, step by step, with all the code
    • 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
    • Automate attendance tracking with Zoho Cliq Developer Platform

      I wish remote work were permanently mandated so we could join work calls from a movie theatre or even while skydiving! But wait, it's time to wake up! The alarm has snoozed twice, and your team has already logged on for the day. Keeping tabs on attendance
    • 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,

    Nederlandse Hulpbronnen


      • Recent Topics

      • VIEW HEADERS PARAMETERS

        A function was created in zoho creator. In the microservices “https://creator.zoho.com/userhome/<adminuser>/admindashboard#/microservices”. A custom API was created and associate the function. In the postman I send some data, how can I visualize what
      • Problem applying batch operation error keeps looping that error

        Problem applying batch operation error keeps looping that error an wont login
      • Shared Email Sending Duplicate Copies of Emails

        Hi there, We recently have moved our info@ email to Team Inbox to trial. We set this channel up using the Microsoft setup which works fine and have 3 users. I am wanting to know: 1. When I send a new email, it will create a copy of that email and send
      • merhaba

        merhaba sosyal medya paketimiz mevcut ama yorumları göremiyoruz ve o yüzden cevap veremiyoruz destek rica ediyoruz.
      • Teaminbox not working

        We couldn't send or receive any mail within the team inbox. Displaying error 'Unable to process this request.'
      • Related lists New option in missing

        hi I have created quite a few modules and added as related lists to my main module. Some have new, some dont I can not see why?
      • Cliq and ToDo integrations?

        I'm a bit surprised not to find any way to open a Cliq chat for the current thread, or to create a Zoho Mail ToDo from a thread. Are these on the roadmap?
      • Reply-to names are mangled

        Hello, I'm seeing an odd behavior in replies. Steps to reproduce: 1. Click reply to an email from "John Doe <doe.john@example.com> in TeamInbox Expected outcome: TO field pre-filled with "John Doe <doe.john@example.com>" Actual outcome: TO field pre-filled
      • I CANT UPGRADE MY FREE ACCOUNT

        I TRY TO UPGRADE MY FREE ACCOUNT AND I COULD NOT UPGRADE IT CAN SOMEBODY TELL ME WHY? AND I HAVE THE MONEY SO.
      • Level up your ASO game with tags & categories in store reviews

        Introducing tags and categories in Apptics' store reviews Dear Apptics community, If your app is listed on the Play Store or App Store, you already know how important store reviews and ratings are. They’re one of the most direct signals of user sentiment
      • Including attachments with estimates

        How can attachments be included when an estimate is sent/emailed and when downloaded as a .pdf? Generally speaking, attachments should be included as part of an estimate package. Ultimately, this is also true for work orders and invoices.
      • Adding VENDOR SKU to PURCHASE ORDERS

        how can we add the Vendor SKU when issuing a Purchase Order , so the PO shows the Supplier SKU and our own Internal SKU , which is what we want to receive into the system .
      • Possible to freely prompt/query CRM data using Zia?

        Is it possible to prompt Zia to query on any information stored in the CRM, especially on the data stored in custom text fields? My use case is the people in my organisation have entered lots of text in custom text fields to capture information from an
      • Restrict employees to take only one day holiday from a multi-day festival holiday

        Hi everyone, I have a requirement related to Optional/Festival Holidays in Zoho People. For example, in the month of May there are three optional holiday dates: May 11, May 12, and May 13. Employees can choose one of these days as their optional holiday.
      • Cannot modify colours in invoice email template

        I have tried switching browsers... but I cannot change the (pretty horrible) default colours in the preset email when sending an invoice... the blue banner, red outstanding total and the bright green button... I can change other things but not the colours?
      • Cannot find zpuid for Zoho Projects user

        I'm using the Zoho Projects v3 API to create a task. The task is created successfully, but in order to assign the task owner, the "Create a Task" API also requires the zpuid of the task owner. Unfortunately I cannot find any user-related API calls that
      • Print a document from Zoho Writer via Zoho Creator

        If i use the code below i can get writer to create a new document or email it to me but i want to be able to print it directly from the browser and not have to send it via email and then print. Below is the code im using. Attached options form zoho writer
      • Allow styling for specific Subform fields in Zoho Creator

        Sometimes in forms we need to visually highlight a specific field inside a Subform (for example Sanctioned Amount, Approved Value, Critical Fields, etc.) so that users immediately notice it while entering data. Currently there is no direct UI option to
      • Placeholder format in Number field does not reflect Max Digits configuration

        When the Max Digits (Maximum digits of number) property is set to a smaller value (for example, 2 digits), the placeholder in the input field still displays a 7-digit format (#######). The same behavior can also be observed in Decimal and Currency field
      • How does SKU work when selling products in parts in Zoho Inventory

        Hello everyone, Zoho Inventory does not understand the physical cutting of the piece.. It only tracks quantities of the unit (like feet ). So when you sell part of an item, the system simply reduces quantity for that SKU. Assume that i have a 50 ft long
      • CRM Cadences - working timesThe Friday afternoon? The next Monday morning? Not at all?

        I think I’m writing saying that cadence emails are only sent during the organisations set working hours in CRM. So if a particular email is set to send for example in three days and that lands on a Sunday (when working hours are not operational) when
      • CRM Cadences - working times

        I think I’m right in saying that cadence emails are only sent during the organisations set working hours in CRM. So if a particular email is set to send for example in three days and that lands on a Sunday (when working hours are not operational) when
      • Push Notification for New Bookings in Zoho Bookings App

        when a someone schedules an appointment through the booking page, is there any option to receive a push notification in the mobile app?
      • Add the same FROM email to multiple department

        Hi, We have several agents who work with multiple departments and we'd like to be able to select their names on the FROM field (sender), but apparently it's not possible to add a FROM address to multiple departments. Is there any way around this? Thanks.
      • Zoho Desk View Open Tickets and Open Shared Tickets

        Hi, I would like to create a custom view so that an agent can view all the open tickets he has access to, including the shared tickets created by a different department. Currently my team has to swich between two views (Open Tickets and Shared Open Tickets).
      • Zoho Expense - Bi-Weekly Report Automation

        Hi Zoho Expense Team, My feature request is to please include an option to automate creation of reports bi-weekly (every 2 weeks)
      • How to Fetch data from Sales Order and Insert into Purchase Order with Deluge

        Hello, I am wanting to write a Deluge script that would take the shipping address on a Sales Order and upon conversion to a Sales Order automatically insert it into that corresponding PO. I am new to Deluge but understand that it has great capabilities.
      • Arquitetura de Aplicações no Zoho Creator: Por que pensar nisso desde o início

        Muitas empresas começam a utilizar o Zoho Creator criando formulários simples para automatizar processos internos. Isso é natural — a plataforma é extremamente acessível e permite construir aplicações rapidamente. O problema começa a aparecer quando a
      • Dark Mode - Font Colors Don't Work

        When editing a document in Dark Mode and selecting font colors, they don't show up on screen.  Viewing/editing the same document in Light Mode shows them just fine.
      • How to Customize & Reorder Spaces in Zoho One 25 (Spaces UI) — Admin Tips Not in the Docs

        Hey Zoho Community, After digging around in the new Spaces UI, I found a couple of admin features that aren't well documented yet but are really useful. Sharing here in case others are looking for the same things. 🔁 How to Change the Default Space Users
      • Non-Avalara Tax Automation wtih Zoho Books

        We are paying a ridiculous amount for Avalara. Our team wants to make a change, but they're the only software fully integrated with Zoho. We also don't have the bandwidth to do this manually, so we do need some sort of automated software solution. We
      • System Components menu not available for Tablet to select language

        I have attached a screenshot of my desktop, mobile, and tablet menu builder options. I am using 2 languages in my application. Language Selection is an option under the System Components part of the menu, but only for my desktop and phone(mobile). My
      • Approvals in Zoho Creator

        Hi, This is Surya, in one of  my creator application I have a form called job posting, and I created an approval process for that form. When a user submits that form the record directly adding to that form's report, even it is in the review for approval.
      • Function #9: Copy attachments of Sales Order to Purchase Order on conversion

        This week, we have written a custom function that automatically copies the attachments uploaded for a sales order to the corresponding purchase order after you convert it. Here's how to configure it in your Zoho Books organization. Custom Function: Hit
      • How Zoho Desk contributes to the art of savings

        Remember the first time your grandmother gave you cash for a birthday or New Year's gift, Christmas gift, or any special day? You probably tucked that money safely into a piggy bank, waiting for the day you could buy something precious or something you
      • Estimate PDF Templates - logo too large

        Hello, I cloned a standard estimate template, but my logo is showing up much larger than intended. This doesn’t happen with the standard invoice template, where the logo displays correctly. How can I adjust the logo size in the estimate template? Thank
      • Select CRM Custom Module in Zoho Creator

        I have a custom module added in Zoho CRM that I would like to link in Zoho creator.  When I add the Zoho CRM field it does not show the new module.  Is this possible?  Do i need to change something in CRM to make it accesible in Creator?
      • Invoice emails not sending but reminders are

        I am a new user. I have been creating some dummy invoices before I go live and have struck a block. Emails for the invoice are not being recieved by the recipient, however, when I send a reminder for the same invoice the email is sent. NOTE: I have checked
      • Deleted account recovery

        I ended up accidentally deleting our Zoho invoice account while trying to work something out. Emailed support for recovery and restoration of the deleted account, if possible, but they responded by saying they can't find an account associated with that
      • Devis et factures multipage coupées

        Bonjour, je suis sur Zoho invoice et je rencontre un problème sur mes devis et factures lorsqu'ils dépassent 1 page. je me retrouve souvent avec des lignes coupées ou le sous total page 1 et le total page 2. j'aimerai savoir s'il existe une possibilité
      • Next Page