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

• Bulk user onboarding for Cliq Channels in a jiffy

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

• Convert a message on Cliq into a task on Zoho Connect

  Message actions in Cliq are a great way to transform messages in a conversation into actionable work items. In this post, we'll see how to build a custom message action that'll let you add a message as a task to board on Zoho Connect. If you haven't created

• Unfurling Unlimited Possibilities in Zoho Cliq 🔗

  Are you tired of your app links looking plain? Imagine if the shared links came to life with custom previews, organized data, and one-click actions, making chats more interactive. With the Cliq platform's unfurl handlers, let's see how developers can

• Let's build a dashboard with Cliq Widgets!

  While juggling multiple tasks and tracking real-time data, you face a strict deadline for delivering a quarterly analysis report on a blank canvas while switching between different apps. Sounds exhausting, right? What if you could streamline everything

• Cliq Bots - Post message to a bot using the command line!

  If you had read our post on how to post a message to a channel in a simple one-line command, then this sure is a piece of cake for you guys! For those of you, who are reading this for the first time, don't worry! Just read on. This post is all about how

• Recent Topics

• Sending Email With SMTP python

  Hi, I am trying to send email with stmplib python lib.  Code... server = smtplib.SMTP_SSL('smtp.zoho.com', 465) server.login('username','password') server.sendmail('from_mail','to_mail', 'message') server.quit() Log  send: 'ehlo [127.0.1.1]\r\n' reply:

• Ajust quantities in another form based on subform, on form submission

  Hello, I have an Order form with a LineItems subform. The LineItems subform has many lookups that import data from various other forms. I want to deduct the quantity offered in one of those other form, called Offer. In another application I used the following

• Duplicating Forms doesn't duplicate Forms attachment path to workdrive

  Hi, I have this user, who uses one forms and duplicates it when needed and update the content. For him, it's important to have the submission forms saved in a specific folder inside Workdrive (as this PDF is transmitted later to another team). However,

• Delay in delivery of emails

  I'm experiencing random delays for emails sent from Zoho account. Headers show that the message reached mx.zohomail.com almost instantly, followed by a delay of anywhere from 3-15 minutes (and counting). Please confirm whether this is a system-wide

• Feature Request - Insert URL Links in Folders

  I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create

• Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

  We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

• Make the edit fields hover in Canvas View look the same as the Detail Page

  The edit field UI in the Canvas View is not consistent with the standard detail page UI. For some modules we have Canvas views, for some we don't. We don't want it to look differently. We want it to look like one system.

• One notebook is on my Android phone app, but not on Web or PC app.

  This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

• Company with ZohoOne, notebook ask to upgrade to collaborate in notecards.

  Hello, we as a company have ZohoOne as our Zoho choice, but Zoho Notebook asks us to upgrade in order to collaborate in notecards, is this correct? Acording to what I've read in Zoho Notebook help, it should be included in ZohoOne, can you please clarify

• Reason:554 5.1.8 Email Outgoing Blocked

  I have been struggling to set up my email address for some time now; it's difficult to locate what I need. Additionally, I cannot send or receive any emails. I keep receiving the "Reason: 554 5.1.8 Email Outgoing Blocked" error. There doesn't seem to

• Feature Request: Ability to copy notecards to Windows desktop

  Hello, Please consider adding the ability to copy notecards to Windows desktop. Thanks!

• How to reach the official Zoho Support channels and avoid fake ones.

  Dear Customers, Thanks a lot for choosing Zoho! Our applications are built to help achieve your day-to-day business goals. We are committed to engaging with you, to understand and develop solutions that enhance your productivity.  We are happy and ready to help you use our services effectively. Understanding and avoiding fake support Just like using popular bank names and financial applications for phishing purposes, using Zoho and claiming to be providing Zoho Support or services with false numbers

• Lost my notes

  Hi while re installing the notebook app, I have lost 2 most important notes and I am not able to find them anywhere. Can you help. Those were very important for my businesses, it had all the important transaction info, and the other were my log ins. I

• Notebook App Not Opening

  I love this app but for the last 2 days it recuses to open. My phone tells me the app is bugged and I must wait for a new update. Is anyone else having this problem or is something going on with me? I have many important notes that I can't necessarily

• Unable to connect to smt servers.

  Unable to connect to smtp.zoho.eu servers. Therefore, I cannot send emails via smtp.

• Custom Function : Copy multilookup field to text field

  Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2

• Problem Pasting Into Notes

  Occasionally I want to create a note by copying and pasting a few paragraphs from an article on line. When I create a new note and paste in the section the newly created note winds up with each paragraph in white text on a dark background rather than

• Customers not receiving emails

  So, a little backstory, we have been using Zoho Forms for the past eight years. And when we initially started, we would have email notifications be sent from inside Zoho Forms after a submission. We recently started using Zoho CRM as we wanted a better

• Not receive mail

  I just made my Zoho mail but I cannot receive any mail at all. What happen

• Possible to reorder Pipelines position?

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

• How do you pre-fill Form fields using URL parameters, for embedded forms?

  Is this possible? This is something that can be done on most major Form platforms (JotForm, TypeForm etc). Currently if pre-filled fields are a necessity for your business, you cannot use embedded forms.

• How to report and analyze a multi-select field entries distinctly ?

  As many of CRM users I have many multi-select fields that allows me to choose more than one chose in one cell for a specific filed Like: Field A - A;BC - A;C -B;C But when reporting the field it will handle each cell as a "String" not multiple entries

• ZOHO Creator subform link

  Dear Community Support, I am looking for some guidance on how to add a clickable link within a Zoho Creator subform. The goal is for this link to redirect users to another Creator form where they can edit the data related to the specific row they clicked

• Unable to delete Attachment on Modules/Record

  Hi Team, Could you please check the backend. Looks like today, CRM decided not to allow deletion of Attachment on Modules or Records. No error message but when you click Delete > Move to recycle bin, nothing happens. Please fix ASAP.

• Filter Multi-Line Properties with Plain Large Text

  To be able to filter fields that feature Plain large text, I am only able to filter on plain small text when you offer 3 separate options.

• Zoho Mail : Email Outgoing Blocked

  I suddenly received the following message yesterday. I cannot send any mail. Please resolve as soon as possible, I cannot work without sending email. Dear User, We regret to inform you that your email outgoing has been blocked and you will not be able

• Global Sets for Multi-Select pick lists

  When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

• Problem with signature in a forwarded mail

  Dear All, In my email account I created a signature and I unchecked the 'Place signature above the quoted text for relies and forwards' My question is, when I am trying to forward an email, sometimes I need to insert my signature so I select it from the

• Clone a Module??

  I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of Vendors

• Update date field from one module to the another

  Hi, I have a module called "Cargo". In this module there is a date field called "Fecha ETA". Api name = Fecha_ETA I have another module called "Deals". In this module there is a date field called "ETA 2". Api name = Fecha_Madrid I need to create a function

• Simple Text Search Function

  Would it be too much to ask for a simple text search function? My slide decks are often simply collections of slides of a random over, and I often have to find the slide I need at a moment's notice. A text search function, no matter how rudimentary, would

• Deluge script for purchase receive

  Trying to create purchase receives.... receive.put("purchaseorder_id",poId); // purchase order associated ... receive.put("line_items",itemList); result = zoho.books.createRecord("purchasereceives", orgId, receive); info result;...... {"code":9,"message":"Purchase

• Delete completed tasks

  My completed tasks will not delete. I have tried deleted them all together and one by one. It says they are deleted but they are still showing on my list. Help

• One user multiple access?

  Hi, I want to know if t is possible to have just one Zoho account for the business and have multiple users access this at the same time?

• Notebook not working on Windows 11/Atlas OS

  Hello, I jave bought gamer laptop in used condition to make some AI application. I installed Atlas OS to improved performanceds and it is working very well. I have Avast Secutiy as firewall. The whole system is really fast and all my apps work well....but

• Why are you taking functionality out of notebook?

  We were able to choose a custom sort, in free version. Now it seems that feature is only available if I upgrade. Not a nice trick, shame.

• Is Zoho Notebook available in any other languge besides english?

  There seems to be no option to change the language of the UI in the web browser version of Notebook, is this the case for all other versions? iOS Android Windows App MacOS

• Can't change form's original name in URL

  Hi all, I have been duplicating + editing forms for jobs regarding the same department to maintain formatting + styling. The issue I've not run into is because I've duplicated it from an existing form, the URL doesn't seem to want to update with the new

• Zoho Notebook suddenly running very slow on long notes

  I have been a longtime user of Zoho Notebook. Historically, it has run quite well, but I've noticed over the last few days that it has begun to run unbearably slow when typing in large notes, to the point where I can type four words and have to wait for

• Completely blank window

  When I open my notebook application on Windows 10 I get a completely blank window, see the attached .png file. There is no notebook or any hint that notebooks exist. Furthermore, the application always asks me to sign in again *every* time I start it.

• Next Page