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

    • Customer paid excess. How do I record payment?

      A customer has paid me Rs. 7150 which is in excess. The amount due is Rs. 5388 I owe them Rs. 1762 back which I will be transferring to their account tomorrow. How do I get this entered into Zoho Books? I'm a little lost. :) Rishi

    • Tabular View Report | Scale To Fit Screen

      Please add the option to scale Tabular View reports to fit the screen. I constantly have to adjust the column size of Tabular View reports to fit various screen sizes and it just looks messy. You can see in the screenshot below there is a blank gap after

    • Why Server error in creatiing Landing Pages

      Hi Zoho Team, pls see my screenshot and tell me, what's wrong. Thx

    • Tip 31: How to make a field in a Zoho Creator form mandatory based on criteria

      Hi folks,   I'm sure most of you are familiar with the Mandatory property available in our form builder. It enables you to ensure that your users enter an input in a required field. If they don't enter an input in that field, they'll be unable to submit

    • Bulk update account type when adding a bill

      Hi I've only been using Zoho Books for a short while but I'm impressed so far, keep up the great work. One minor issue I'm coming up against is when creating a new bill from a scanned document (supplier invoice). In some cases, the supplier invoice could

    • How to start fresh after many years of using Zoho Books without deleting everything and creating a new organisation?

      Hi, I have used Books since 2016, but never reconciled with my bank account. I was thinking of trying to go back and fix that, but I don't just don't have the time it would take. Instead, I'd like back up my old records and start anew. What is the best

    • How do I modify the the incoming/current call popup? I can modify other call pages but not that one.

      I want to modify the incoming and active call popup on the crm to include customer relevant information, such as purchase history or length of relationship. Under modules and fields, I don't seem to see active call as a choice to modify, only the main

    • Canvas: Add Sections to Detail View

      Currently it is only possible to add fields to a canvas detail view. This makes Canvas hard to maintain, because everytime we add a field to our system, someone needs to go into the canvas view and add it there as well. This leads to additional work and

    • Automation#32:Auto Add New Portal Users to the Help Center User Groups

      Hello Everyone, Introducing a custom function that automates the process of adding new portal users to Help Center user groups, making user management effortless! By default, Zoho Desk allows you to assign new portal users to groups manually. But with

    • Cannot delete old accounts

      Hello, I try to delete old accounts from CRM, but it won't permit, saying documents are still linked to them. I searched in CRM and BOOKS, found some documents and deleted them, but still CRM won't delete them. Any idea how to do that ? I have a lot of

    • Offline mode on Android TV app?

      Hello! Is there a way to use Zoho Show offline in the Android TV app? I have an Android TV based projector, and I travel with it, and don't want to have to rely on a steady internet connection when giving a presentation.

    • Choice-based Field Rules on Global Lists

      Hi, The new Choice-based Field Rules should also be able to work with Global Lists not just local lists. Thanks Dan

    • Tip #36- How to use Survey in Zoho Assist to capture valuable feedback from remote sessions- 'Insider Insights'

      The survey feature allows technicians and customers to share their valuable feedback, contributing to the improvement of remote service quality. After the completion of a remote session, technicians and customers are prompted to fill out a survey form,

    • Narrative 3 - Comprehending User Management

      Behind the scenes of a successful ticketing system - BTS Series Narrative 3 - Comprehending User Management User management in a ticketing system includes important aspects of how administrators oversee user access, roles, and permissions. This process

    • Product Details's Description is lost

      Hi CRM lost its description in Product details subform. Can you make some test before deploy any update?

    • Sent items with shared folders

      Hello, this is in some way in between a problem and an idea.  When sharing folders (which is actually not any close to a shared mailbox...) the person which the folder has been shared with can access that folder and can send emails when delegation is

    • Zoho Bookings Issues We are facing

      Hi team, Here are list of issues we are facing with Zoho Bookings when migrating from other platforms. Sorry there is a lot but the bookings app need to be functional and practical for people to actually use it and not-cause MORE problems by being so basic and not customisable to each business.  1: SMS reminders for staff  There should be time limits on these reminders to make them useful. EG. if a new booking comes in more than 4 hours from now we don't really need to get a reminder, however if

    • Run workflow on data import in Creator 6

      How to run a workflow on data import in Creator 6?

    • Multi Day booking for resources

      I have following business-case: Rental for Tablets. Customer should be able to select how many device for how many days he'd like to rent. Same as a car rental for multiple days. Is this possible with Bookings on the current version?

    • Add Usage & Voting Analytics for Knowledge Base Articles in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We appreciate the current integration between Zoho Desk and Zoho SalesIQ that allows knowledge base articles to be synced and displayed to users directly within the SalesIQ chat interface. One valuable feature already available

    • Real-Time Alert or Status Indicator for WhatsApp Connection Issues in SalesIQ

      Hi Zoho Team, We’d like to request a feature enhancement in Zoho SalesIQ related to WhatsApp integration stability and visibility. Recently, we encountered a critical issue where our WhatsApp bot stopped responding to messages without any warning or alert

    • Customization of Chat Transcript Emails in Zoho SalesIQ

      Hi Zoho SalesIQ Team, I hope you're doing well. We would like to request the ability to customize the email template that is sent to clients when they request a chat transcript from SalesIQ. Currently, when a client clicks the button to receive their

    • Import from Linkedin

      Please provide a way to enable importing contact information for Contacts and Companies from Linkedin? Thanks

    • The ability to format text fields, ie when data is number or currency

      Hello, I have spent some time trying to determine how to accomplish this but it appears to be impossible. I want to merge a currency field from CRM into a PDF document. The CRM data shows $1,234, but when zSign gets the data it shows 1234 in the text

    • Tip of the Week #64– Customize your sidebar for a more focused workflow.

      When your shared spaces start filling up with too many views, it gets a little harder to zoom in on what really matters. You find yourself scrolling more than working, and the things that need your attention? They’re often buried down below. Custom sidebar

    • Zoho Social - Queries about GST invoices and subscription

      Hi, I am going to purchase the Zoho Social tool with a yearly subscription. So, can you please help me with my below queries: 1. How I get the monthly GST Invoices? 2. What is the process of subscription? 2. How to cancel a subscription?

    • Sales IQ needs to capture both first and last names

      Sales IQ chat only has one field for name. When this then syncs with Campaigns, the field populates the "last name" field in Campaigns. However most people fill in the "name" field of Sales IQ with either their full name or their Christian name. This

    • Multi-Card Selection and Cross-Zobot Copy-Paste Functionality

      Dear Zoho SalesIQ Team, We’d like to suggest a productivity-enhancing feature for the Zobot builder in Zoho SalesIQ: the ability to select multiple cards (modules) at once using a selection area, and then copy-paste them either within the same canvas

    • Personal Link / Meeting ID

      with zoho meetings do I have my own personal link to my 'meeting space' ? I have an email template in Zoho CRM which confirms people's appointment with me, I would like to include the link to my Zoho Meetings so that they have it in advance. How do I

    • Ability to Initiate WhatsApp Template Messages in Zoho SalesIQ Without Preexisting Chat

      Hi Zoho SalesIQ Team, I hope you're doing well. I understand that with the WhatsApp integration in SalesIQ, clients can contact us via WhatsApp, and we can use WhatsApp templates to send messages outside of the 24-hour window by reopening an existing

    • Related Lists filter

      I have Contacts showing in our Accounts module. I customized the Contacts module with an Employment Status field, with the following picklist options: "Primary Contact", "Secondary Contact", "Active Staff(not a main contact)", and "No longer employed".

    • Making money out of Zoho Sheets - How?

      Hello, Suppose I come up with a brilliant Zoho Sheet that I want to sell to other people, can I do this? How? Thanks.

    • Mobile Display Issues on Zoho Sites After Recent Update

      Hello! I’m currently facing an issue with my Zoho website that I created for my small business. After the recent updates, I’ve noticed that my site is not displaying correctly on mobile devices. Specifically, the layout appears distorted, and some elements

    • Can i set per-client hourly rate in Zoho Desk and not to correct the calculation on invoice?

      We use Zoho Desk to run one ticket per client per month. All time entries go to the ticket, we have to enter hourly rate manually and then correct it when we do the invoicing at the end of the month. So, our workflow is as following: I worked for 30 minutes,

    • Unable to add Agents

      I am trying to add agents to my account. While filling the details and sending invitation, the system mentions that invitation is sent. But no email is received on the user side. I have tried this multiple times and have also checked Spam and other

    • How to add new widgets?

      Searched and searched and cannot find anywhere. Why is everything so hidden in zoho! Why is there not a button right here that allows me to create a new one, why is it buried somewhere else! Zoho's UI is so infuriating

    • Submit Ticket from Custom Form on Website

      Hi I would like to create new tickets from our custom form on our website including some custom fields like serial number. I would prefer PHP to create the ticket. I know there is the Zoho webform but we would like to create our own. I have now read into the API and with AuthToken this would work with PHP but it is deprecated  and will not be supported any more in the future, so this not an option. OauthToken on the other hand needs an interaction from the ticket creator (customer) which we would

    • Customising Sign Up Page in Zoho Help Centre Sandbox

      Hi, I would like to customise the Sign Up page in my Help Centre Sandbox Environment but when I try to access it I get this message: What setting or permission do I need to achieve this? Many thanks, Kunal

    • Sort data in Pivot Table

      Is it possible to sort by a data field. I can gruop and filter, but I culdn't find how to sort the results. Tank You.

    • How to interact webhooks with Creator?

      How can I interact webhooks from external websites with Zoho Creator?  I'd like to get notifications from external websites (Stripe, Zoho Subscription, etc.) These notifications are coming as HTTP POST request from those servers, on maybe daily, monthly or based on any events.  How should I prepare my app in creator to receive these requests? Where and how to should I program in Deluge if I'd like to add some part of the JSON/XML data to my form?  Thank you BR, Balazs

    • Next Page