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.
  

• For real-time visibility, use the cards element with the carousel type to display key logistic metrics such as shipment status, fleet utilization, delivery performance, etc.
  

• 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.

• Topic Participants

• Harsha SS

  

• Sticky Posts

• 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

• 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

• Recent Topics

• Closing Accounting Periods - Invoice/Posting dates

  Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from posting

• How to update/remove file in zoho creator widgets using javascript API

  Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

• Has anyone built a ticket export that allows Help Center users to export the tickets shown in the My Area list they are looking at?

  Hi, We are moving to Zoho Desk soon. Our current support system displays an option in our help center allowing customers to export their Open, Closed, or all tickets based on which list they are looking at. We need to offer the same in Zoho Desk help

• Transitioning to API Credits in Zoho Desk

  At Zoho Desk, we’re always looking for ways to help keep your business operations running smoothly. This includes empowering teams that rely on APIs for essential integrations, functions and extensions. We’ve reimagined how API usage is measured to give

• Sheet View in CRM portal

  Hi, When will it be possible for my CRM portal users to edit/add records with Sheet View? George

• issue with image thumbnails not showing in Image Selector

  We have been using Zoho Campaigns for over a year, maybe close to two years, and this issue just started happening in the last month. I wanted to wait to see if it would resolve on it's own, and it doesn't seem to be. The thumbnail images for all new

• Deluge Script for adding tag

  Trying to create a custom function where a tag is added to a record - but for the life of me, I cannot figure out how. Help please! Moderation Update: Adding the help doc and sample to add Tags to records via deluge here for everyone's benefit. tag1 =

• Unlock your Zoho Vault with OneAuth, Windows Hello, TouchID, YubiKey, and many more!

  Hello everyone, We are thrilled to introduce one of the most highly requested features – the ability to unlock your Zoho Vault using various authenticators. The primary purpose of a password manager is to remember just one master password and securely

• Where does this report come from in the Zoho One ecosystems?

  Is this directly from MA, Analytics or ??? ???

• How to Delete/hide Google adwords section from Layout?

  Hi people, maybe someone can tell me how to remove or hide the Google adwords section from my layout? Im not using it and it takes too much space.

• All new Address Field in Zoho CRM: maintain structured and accurate address inputs

  The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Managing addresses

• Blueprint or Validation Rules for Invoices in Zoho Books

  Can I implement Blueprint or Validation Rules for Invoices in Zoho Books? Example, use case could be, Agent confirms from client that payment is done, but bank only syncs transactions tomorrow. in this case, Agent can update invoice status to done, and

• Creator roadmap for the rest of 2022

  Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancements

• How can I get base64 string from filecontent in widget

  Hi, I have a react js widget which has the signature pad. Now, I am saving the signature in signature field in zoho creator form. If I open the edit report record in widget then I want to display the Signature back in signature field. I am using readFile

• Default Value on a Number

  Hi, I would be nice to also be able to set the Default Value for a Number Field, not just the Initial Value shown, so if not on the screen so not enetred it can have a value of 0 for example. Thanks Dan

• Add Setting Values to the Rules

  Hi, It would be great to use the rules to set values in fields for submission, such as if a Type is X then set the Field Y to 10. Thanks Dan

• So we ran with it for the week

  In our company i bit the bullet and ran with FSM for a whole week. Service calls, deliveries and surveys. Covering about 30-120 miles a day to domestic properties. Loved the appointment list and satnav integration. Loved the timer to measure the appointments.

• Organization Emails in Email History

  How can I make received Org Emails to show up here?

• Is there a way to set Document Owner/Sender via the API

  When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?

• What's New - September 2025 | Zoho Backstage

  September has been a different month for Zoho Backstage. Instead of rolling out a long list of new features, we focused on something just as important: Performance, reliability, and stability The event season is in full swing, and organizers are running

• Prevent stripping of custom CSS when creating an email template?

  Anyone have a workaround for this? Zoho really needs to hire new designers - templates are terrible. A custom template has been created, but every time we try to use it, it strips out all the CSS from the head.  IE, we'll define the styles right in the <head> (simple example below) and everything gets stripped (initially, it saves fine, but when you browse away and come back to the template, all the custom css is removed). <style type="text/css"> .footerContent a{display:block !important;} </style>

• link to any Belgian bookkeeping software?

  Hello, Does anyone on this Forum can help me with the question whether the ZOHO CRM (Invoices) or ZOHO Book can be linked to software that is used for Belgian Bookkeeping/accountancy? By linking, I mean either with the help of a middleware program or either by the ability to export the custom made reports as CSV-files... If someone has an experience with online CRM-Accountancy in Belgium, with ZOHO (or other), it would be great to read it... Thank you

• marketing automation

  wants to know about the zoho marketing automation

• Create custom rollup summary fields in Zoho CRM

  Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

• Zoho Slowness - Workarounds

  Hi all, We've been having intermittent slowness and Zoho just asks for same stuff each time but never fix it. It usually just goes away on it's own after a couple weeks. Given that speed is a very important thing for companies to be able to keep up with

• Problems with email templates (HTML - Outlook)

  Hi there, I've been trying to create a newsletter from the template "Business 4". Everything looks great in the preview, but when I send it to my Outlook inbox, the layout doesn't seems to stick. More particularly: - The line-height is way more reduced, even though I used the line-height tool from the template - Columns but they are sometimes misaligned - Font size is not always the one I've selected. Could you help? Thanks!

• Zoho CRM still doesn't let you manage timezones (yearly reminder)

  This is something I have asked repeatedly. I'll ask once again. Suppose that you work in France. Next month you have a trip to Guatemala. You call a contact there, close a meeting, record that meeting in CRM. On the phone, your contact said: "meet me

• Zoho CRM IP Addresses to Whitelist

  We were told to whitelist IP addresses from Zoho CRM.  (CRM, not Zoho Mail.) What is the current list of IP Addresses to whitelist for outbound mail? Is there a website where these IP addresses are published and updated?  Everything I could find is over

• How to create a drop down menu in Zoho Sheets

  I am trying to find out, how do I create a drop down option in Zoho sheet. I tried Data--> Data Validation --> Criteria --> Text  --> Contains. But that is not working, is there any other way to do it.  Thanks in Advance.

• Introducing Keyboard Shortcuts for Zoho CRM

  Dear Customers, We're happy to introduce keyboard shortcuts for Zoho CRM features! Until now, you might have been navigating to modules manually using the mouse, and at times, it could be tedious, especially when you had to search for specific modules

• Zoho CRM's custom views are now deployable from sandboxes

  This feature is now available for users in the AU, JP, and CN DCs. This feature is now available for users in CA and SA DCs. New update: This feature is now available for users in all DCs. Hello everyone, We're excited to announce that you can now deploy

• Where are Kanban swimlanes

  So i've been playing with Zoho Projects Kanban view a bit more. It appears that task lists are being used as the Kanban columns, which makes sense from the implementation point of view but not the logical one.  Kanban columns are statuses that a task can flow through, while a task list has been a logical way to organize related tasks and relate them to a mislestone. In other words a task in a particular task can go through several stages while remaining in the same task list. After doing some research

• Send Automated WhatsApp Messages and Leverage the Improved WhatsApp Templates

  Greetings, I hope all of you are doing well. We're excited to announce a major upgrade to Bigin's WhatsApp integration that brings more flexibility, interactivity, and automation to your customer messaging. WhatsApp message automation You can now use

• Scheduling Calls in CommandCenter / Blueprints

  I would love it if you could add a function to schedule a call in the lead's record for a future date. I know you can add a Task by going to Instant Actions > Task and completing the form: These tasks go into the lead's record under Open Actions. But

• Zoho One - Syncing Merchants and Vendors Between Zoho Expense and Zoho Books

  Hi, I'm exploring the features of Zoho One under the trial subscription and have encountered an issue with syncing Merchant information between Zoho Expense and Zoho Books. While utilizing Zoho Expense to capture receipts, I noticed that when I submit

• Limit in number of records for subforms and multi-select lookup fields

  It is my understanding that a maximum of 100 items can be selected in a multi-select lookup field, and that a total of 200 items can be selected in total between both subforms in a given module.  Are there any ways to work around this limitation if we

• Kaizen #136 - Zoho CRM Widgets using ReactJS

  Hey there! Welcome back to yet another insightful post in our Kaizen series! In this post, let's explore how to use ReactJS for Zoho CRM widgets. We will utilize the sample widget from one of our previous posts - Geocoding Leads' Addresses in ZOHO CRM

• Way to update CRM records in quik view

  I have custom module in zoho crm and that module have 500 records. I want a quick way or UI so that user can easily update the record information in quick view without going to record detail view or edit view. I tried zoho sheet option but in zoho sheet

• Getting Permission denied to access this portal.

  We have one user that can't login to projects even though access has been granted. This user can login to accounts.zoho.com but when login to https://projects.zoho.com/portals.do we get this error: Unauthorized login to this portal Permission denied to access this portal. Check your portal URL again. Sometimes we also get "server too busy". We have tried killing sessions (in accounts.zoho.com) and we have deleted cookies; and tried different computers and still the same problem. All others use can

• Marketing Tip #1: Optimize item titles for SEO

  Your item title is the first thing both Google and shoppers notice. Instead of a generic “Leather Bag,” go for something detailed like “Handcrafted Leather Laptop Bag – Durable & Stylish.” This helps your items rank better in search results and instantly

• Next Page