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

    • 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

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

    • 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

    • Paid Support Plans with Automated Billing

      We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

    • Bug Report: "Name A-Z" sorting fails when Note titles start with an Emoji

      Hello, I recently migrated from Evernote (~2600 notes across 23 notebooks). I use emojis at the start of my note titles for visual organization. The Issue: When I set the view to Sort by: Name (A to Z), the sorting logic breaks for any note starting with

    • Copy & Paste not working

      I could create and save 10 new documents but when I go to copy and paste content (just text) into them, only 1 of 10 would save the content. It would appear to save the content but when I go back into the documents, they are empty.

    • editing/applying online payments

      We have customers who pay part or all of an invoice and then cancel their service and want the payment as a credit to future work. It would be ideal if we could make it an excess payment and then void the invoice. I can't make it an excess payment because

    • Contacts per department

      Hello, Is it possible to limit Contacts to a Department? Thanks

    • This site can’t be reached mail.zoho.com took too long to respond

      In my office at any system, we couldnt able to login zoho email. it shows " This site can’t be reached mail.zoho.com took too long to respond". please fix it soon.

    • Can send email from zoho mail, but can't receive any.

      Hi, My domain is sattvameditationresort.com. I've updated MX records with those of Zoho. But i can't send any mails to this email id from gmail. I have checked the MX status with MXTOOLS, its showing the correct entry either. The error is as shown below:

    • My domain did not activate

      Hi, my domain (apsaindustrial.com.ar) did not activate, and the phone verification message never arrived. Please would you solve this problem? Thanks.

    • Host not found?

      Howdy! So i'm trying to add my custom domain for with the mail server. I have 100% control of my DNS and have tried every single option (TXT, CNAME, and even HTML) multiple times, ensuring i did it properly, to no luck. I get the same error message every

    • Emails are going to notification folder and not in inbox

      emails are going to notification folder and not into inbox

    • Error AS101 when adding new email alias

      Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.

    • Report on opportunities showing only the last note added.

      Hi I need to create a report that shows the most recent note added to each opportunity. This is so management can see what the latest update is according to the assigned salesperson. One workaround is to use the status field but this implies added manual work and mistakes as the salesperson would have to copy the existing status to a note before adding the latest status... otherwise the activity history would be lost. My current workaround is a report on Notes with Opportunities as the related module.

    • Please add Zelle as an online payment option

      Hello, I would like to request Zelle be added to the online payment service providers for Zoho Invoice. Considering how ubiquitous Zelle has become as a way to pay people via the major banking institutions, I feel like many freelancers would benefit from

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • Getting Project Template List using the REST API

      I am trying to confirm that I can use the REST API to create a project using a project template. The API documentation indicates this is possible by providing the Template ID, but it is not clear at all how to get a list of available Project Templates

    • How to display the CONTACT ID in the Contact page

      Hi, I've seen this conversation below and it is exactly the same question I'm raising now, but unfortunately the last message is not solved https://help.zoho.com/portal/community/topic/show-contact-id-while-editing-contact-form I need to show the ContactId and I don't know how to do this. The last message included in the conversaton shows the way but not it is not completed. "I am sorry by default we do not have the option to show the record ID for the contacts in the field in a record. When you

    • How to change margins in templates

      Hi, I'm new to Zoho Campaigns, and am trying to figure out how to adjust the margins within an email template.  The default margins make the text go all the way to the edges of the page.  Please advise.

    • Create Canvas list view templates from images powered by Zia

      Currently available for all paid editions of Zoho CRM in the US, EU, IN, JP & CN DCs. Designing a personalized CRM interface just got even easier. In today’s fast-evolving digital landscape, AI is transforming the way we work by automating complex tasks

    • Painfully Slow Zoho mail

      Since yesterday Zoho Mail seems to have starting functioning very slowly and having a few bugs. It's slow to open mails, slow to send, slow to change between email accounts. Sometimes clicking on a particular folder (eg Sent folder) stops working and

    • "Wrong password or login" Problem to configure Zoho on MAIL App on my Macbook

      Hi, I'm having problems to configure my e-mail on my MAIL App(Macbook pro). My e-mail is hari@trespontoum.net Actually was working perfectly, and still working on my Iphone. My MAIL App prompt me that my login or password is wrong. I tried to change 3

    • "User already exist in your org"

      Hello, I've just read a discussion about this issue, which didn't solve my problem. I'm trying to add the following emails: sales@kiss-my-boutique.co.uk returns@kiss-my-boutique.co.uk orders@kiss-my-boutique.co.uk I'm getting an error message each time I try and add them. None of them are primary or secondary emails and none of them have been created as users before. I know this as when I try and login and do 'forgot my password' all I get is an error message saying 'user invalid'. Please advise.

    • Operation Not Permitted

      Hi, I have problem in adding user after verifying the domain but it seems like error appeared which is "operation not permitted". For your information, I had delete other domain before did it.

    • Email forwarding setup fails

      I'm trying to set up email forwarding from my Zoho email to my gmail address. I followed the directions to set up email forwarding here: https://www.zoho.com/mail/help/email-forwarding.html. I did only steps 1-6. After doing this, rather than setting

    • Shopify store email issues- Not getting emails

      Hi We have migrated from Microsoft outlook to Zoho back in March, we have a shopify store, the domain is hosted on namesilo, not shopify, I have seen some people here complaining about not getting emails from customers who fill out the contact form on

    • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

      How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

    • Invoice Discount Account

      Is there a way to change the account used for Discounts applied to an invoice? The current Discount account (ZB native account) type is an "Income" type. I would like to change it to "Other Income", but that is not possible, I am assuming because it contains

    • Need Inactive accounts to be visible in Reports in Zoho Books

      I N=need Inactive accounts to be visible in Reports in Zoho Books to do recons of the accounts but when i see the same they are not visible in the Accountant - Account Transactions report

    • API Support for Creating Invoices with Batch-Tracked Items

      Hi Zoho Community, I am working on an integration where we create invoices in ERPNext and push them to Zoho Books. I need to send batch-tracked items (batch numbers) when creating invoices. I could not find any reference in the Zoho Books API documentation.

    • javax.mail.authenticationfailedexception 535 authentication failed

      Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

    • Phantom Opening Balance

      While experimenting w/ creating a composite item, Zoho added funds to Petty Cash and added Bank Account equal to previous day's balance. I'm unable to undo the adding of funds. Attaching screenshots of both bank account and petty cash transactions.

    • Importing customer comments and multiple shipto addresses

      I am evaluating Zoho Books and have most of my data imported with two exceptions: (1) Import customer comments - in my current system I have several comments of different types, and I need to bring these into Zoho. Preferably Books customer records, but

    • Detailed Account Reports - Add Running Balance

      When one clicks into an account from a report (say P/L or Balance Sheet), the default reports have the Debit, Credit, and then the Amount. The Amount column (last one) is duplicate information. It would be far better and fit more peoples' use cases if

    • How to Billed from two different GST Numbers

      How to Billed from two different GST Numbers. Suppose ABC & Co had GST registration in Delhi and Haryana and Zoho account is created with Delhi GST Registration number. Now i also want to issue invoice from Haryana GST Registration number. How can i proceed ?

    • Payment system for donations management

      I manage an organization where we receive donations from payers. Hence, there is no need to first create invoices and then create payments received against the invoices. What are the recommended best practices to do this in ZohoBooks?

    • Zoho IP blocked by SpamHaus

      ERROR CODE :550 - 5.7.0 Your server IP address is in the SpamHaus SBL-XBL database, bye

    • IMAP Communication Problems - IMAP Down Again

      We are experiencing the same problems over the last week or so that were supposedly 'solved' according to this thread. Zoho Imap Down Again This is affecting attempts to use IMAP on multiple ISPs and users so is definitely narrowed down to Zoho problems.

    • Can't login to Zoho mail

      I'm logged into Zoho but when I try to go in zoho mail I get: Invalid request! The input passed is invalid or the URL is invoked without valid parameters. Please check your input and try again. I just set up my mx records and stuff with namecheap a few

    • Hotmail is STILL blocking the zoho mail IP

      Greetings, as I already mentioned in my last message, my Zoho IP has been blocked by Hotmail for more than 15 days. Although someone said that the issue was "solved," it still isn't, and this amount of time seems neither normal for a "serious" company,

    • Keyboard shortcut M key

      I'm trying to customize my keyboard shortcuts and assign the "m" key. But it says the key is already assigned. I've looked through all my shortcuts and can't see any assigned "m". When I select an email and press the M key, nothing happens. What is the

    • Manage customer access across multi-brand help centers

      Hello everyone! Managing customer's access across multiple brands has been streamlined with the ability to invite, reinvite, approve, reject, and deactivate contacts individually for each help center brand . This enhancement gives administrators precise

    • Next Page