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

• 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

• Field customization

  Hi Team Good day! I am a commission agent who sell and purchase goods from vendors, while in purchasing invoices I am not able to deduct the expenses such as commission and other expenses on actual amount. Kindly help me to customize the invoice based

• vendors / customers with 2 different address and gst no

  Why can't we have option for more than one address and depending on the state option for more than 1 GST no. ? We have customers / vendors PAN india with different addresses and GST no. for different states.

• Error: Invalid Element gst_no, Invalid Element gst_treatment, Invalid Element place_of_contact

  so i am creating a new contact post request and i want add gst infomation when amount is above 50000 and if pass gst info in request body then i get this errors > Error: Invalid Element gst_no, Invalid Element gst_treatment, Invalid Element place_of_contact

• Add multiple Billing Addresses under one GST number

  My client owns multiple businesses in various locations but they all come under one GST. Is there a way to add multiple billing addresses for the same GST? Managing this by adding multiple Shipping addresses is not an option. The client wants the GST

• Zoho Mail API - Upload Attachment

  https://www.zoho.com/mail/help/api/post-upload-attachments.html I followed the steps from the API documentation and wrote a backend in JavaScript to send emails. Normal emails are sent without any problems. However, I can’t send emails with attachments.

• Unable to create custom fields for shipment order

  I'm unable to create custom fields for shipment orders, even though the custom fields are set up correctly. A request to the following endpoint: https://www.zohoapis.com/inventory/v1/settings/preferences/customfields?organization_id=${ZOHO_ORGANIZATION_ID}&entity=shipment_order

• Kaizen #202 - Answering Your Questions | Testing and Using REST APIs in Widgets

  Hello Developers! Welcome back to a fresh week of Kaizen! Thank you for your active participation in sharing feedback and queries for the 200th milestone. This week, we will look at the following queries related to widget: Widget Testing Using REST API

• Introducing the 'Send as Email' option on the Zoho Desk iOS mobile app

  Hello everyone! In the latest version(v2.10.2) of the Zoho Desk iOS app, we have brought in support for the 'Send as Email' option while creating a ticket. This feature enables you to reach out to the customers by sending outbound emails. The emails are

• Zoho Forms Not Loading on Website – DNS Resolution Error

  Dear Zoho Support Team, User ID : 20069458731 We are experiencing an issue with the Zoho Form embedded on our website (https://vitel.com.tr/satis-destek-formu/). The form is not loading, and the following error message appears in the browser: “forms.zohopublic.eu

• Data backup retention question/

  My zohocrm subscription gives me 2 full data backups per month. I have a scheduled backup configured to run twice a month. I just went to download my backup and i can't find it, it ran about 9 days ago... From what i can tell with google zoho only keeps

• Basic Apple Watch App

  Sometimes I leave my phone behind. I will get push notifications that tickets are updated etc.. It would be nice to at least view them and do a few basic functions. reassign. public reply. private comment.

• Look and Feel Uniformity

  Someone needs to go through the mobile app and match the look and feel of the web version. For example, it is global standard to highlight private notes as yellow background hue. Desk does that on web, but not on mobile. Mobile also has an odd blue icon

• Managing two books in Zoho Books

  is it possible to effectively manage two separate books within Zoho Books? My organization is considering handling accounting for two distinct subsidiaries, and we would like to understand the best way to achieve this within the Zoho Books.

• Display All Custom Buttons Without Dropdown on Record Page

  In my org's workflow we usually want to do some kind of quick action off of an individual record - i.e. of an individual contact, or individual deal. What we have always found a hindrance is the location of all custom buttons being in the drop down on

• Zoho Sales Team - Extremely Slow Response Times

  Hi everyone, Has anyone else experienced unusually slow response times from Zoho’s sales team? I sent an email last night, and it’s been nearly 24 hours with no reply. While I understand delays can happen, this seems longer than expected for a sales inquiry.

• Yodlee Bank Feeds

  I'm well aware of the many bank feed issues out there that haven't been resolved, but I'm looking for information on Rules in relation to bank feeds. U.S based, Bank of America user and prior to Yodlee all of my banking feeds and Rules worked seamlessly.

• Unable to create custom function

  Unable to create custom function - Please check the screenshot for the details HERE IS THE FUNCTION!! try { // 1. Fetch the details of the approved Bill using its ID billDetails = zoho.books.getRecordById("Bills", organization.get("organization_id"),

• Need a feature which can validate PAN from Income Tax Portal

  Hello Zoho, We need a feature which can help us validate PAN which is being entered in AR/AP Profiles to check if it is valid and display the name as per Income Tax so as to get rid of incorrect PAN into the systems. Please do the needful Thanks

• PAN - Aadhar Link Status

  Can Zohobooks also get latest PAN-Aadhar Linking Status from Income Tax Portal ?

• Canvas translation

  We want to offer our CRM system to our users in English and Dutch. However, it seems that text in our deal Canvas isn't available for translation through the translation file. The same applies to the field tooltips. They don't appear in the translation

• Are Cadences visible to anyone with Cadence permission?

  When setting up a new Cadence is it possible to restrict its use to a specific user? How can I prevent users from making modifications to existing Cadences?

• Show my cost or profit while creating estimate

  Hi, While creating estimate it becomes very important to know exact profit or purchased price of the products at one side just for our reference so we can decide whether we can offer better disc or not .

• Issue on Upload API and href image URL

  Here is my Full API Code , URL : URL: https://desk.zoho.com/api/v1/uploads/659563000000193003/content Headers* Authorization: 'Zoho-oauthtoken 1000.ed5ce2836bf5ba9b946f5ec9************88e73ff4883a3e9c58ffeb7870' orgId: 7586***** RESPONSE{ "errorCode":

• Issue when downloading a Mail Merged Zoho Writer Document as .docx

  Hi, We are using within Zoho CRM mailmerge to create documents. This results in a Zoho Writer document. When we try to download as a Microsoft Docx file we get following error: "Word experienced an error trying to open the file. Try these suggestions.

• 【Zoho CRM】ケイデンス機能のアップデート

  ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、ケイデンス機能のアップデートをご紹介します。 ケイデンス機能の2つの強化されたことで、適用と解除のタイミングをより柔軟に管理できるようになり、 よりタイムリーで的確なコミュニケーションが実現できるようになりました。 目次： 1. ケイデンスの再開／最初からのやり直し 2. ケイデンスからのデータ解除タイミングの設定 1. ケイデンスの再開／最初からのやり直し 手動削除、完了、または適用解除条件が満たされた場合など、以前に適用解除されたデータをケイデンスに再適用できるようになりました。

• Anyone get the OpenAI API to work in Zoho Meeting?

  Has anyone been able to get the OpenAI API to work in generating meeting summaries? I have been trying, but I get an error that says "OpenAI key notes request rate exceeded. Please try again later or upgrade your open AI account." I contacted Zoho support

• Push Notifications Customization

  There is no way to customize the notifications we get. I would like to be able to get notifications based on if they are assigned directly to me, my team, my department, or perhaps tickets that match a specific criteria (a contact or account is a VIP

• Announcing Early Access to the next generation of Zoho Desk UI

  Customer service is one of the categories where efficiency and quality of service have to run in parallel, and your team's experience with their helpdesk goes a long way ensuring these aspects are uncompromised. Introducing DOT Design for Zoho Desk -

• Editing the record in report

  I have a use-case as below- User creates a assessment record by filling some fields. User assigns that record to portal user by using Assigned To dropdown (Assigned To is Users field in form with choices as customers). I have set the record owner of form

• Can we have Bills of Material Module ?

  Can we have Bills of Material Module ?

• Main Ticket Page Customization

  We do not love the ticket list page (right after clicking Tickets menu item) would like options to customize it.

• Agent Collision Missing from Mobile App

  Please add Agent Collision capabilities to the mobile app.

• Zia Sentiment and Functionality on Mobile

  Please add Zia sentiment and generative responses to the mobile app. It would be nice to see the ticket sentiment and generate a response back to a user using Zia on my iPhone

• View Account Attachments on iOS

  Please allow us to view account attachments on the mobile iOS app!

• How do I run a PnL by Sales Person?

  I am trying to run a PnL by sales person but am not seeing the option do so. All I need to know (per salesperson) is revenue, cost of goods, gross profit.

• View Contracts and Support Plans on Mobile

  We would like to be able to see contracts and support plans from the mobile app on iOS!

• Why is Zoho Meeting quality so poor?

  I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

• App like Miro

  Hi all, is there a way to have a interactive whiteboard like in Miro? We want to visualize our processes and workflows in an easy way.

• Loan repayment Entry

  While receiving loan, i does following steps in My Zoho books. 1. Create "Loan & Advance " Account as Parent Account under Long Term Liabilities. 2. Create another account For Example "Mr. ABC's Loan as Child account under the parent account. Now: In

• Quotes module send email reverted back into 2022??

  Our Zoho CRM PLUS quotes, sales orders, invoice modules is showing us an email composer from 2022. We cannot send emails and its been a real pain. I tried clicking the new version over there but it doesnt seem to do anything. Any help is welcome. th

• Next Page