Let's build a dashboard with Cliq Widgets!

Let's build a dashboard with Cliq Widgets!


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

With its vibrant tile-based design and internal components like widgets packed with elements like charts, graphs, tables, and custom fields, Cliq can transform your static data into visual dashboards that deliver business value.

Business benefits  
  • Rapid decision-making: Visual data representation ( with charts and graphs ) makes it easier to spot trends instantly, track KPIs, and identify areas that require immediate action. With clear insights, decision-makers can respond proactively.
  • Enhanced collaboration: Interactive widget elements, such as tables, fields, and charts, allow teams to view, update, and share critical information without communication gaps. This ensures data consistency and fosters a more connected and agile workflow, minimizing the need to leave the chat interface. 
  • Improved efficiency: Constantly switching between apps to gather insights slows productivity. By consolidating key metrics in a centralized location, teams can reduce context-switching and make well-informed decisions faster. 
  • Proactive problem solving: Addressing potential issues before they escalate is crucial for maintaining business continuity. Automated alerts and notifications triggered via bots and schedulers in Cliq allow teams to respond quickly to emerging concerns.
Let's design a Logistics Dashboard tailored for a Fleet Manager overseeing multiple deliveries. This dashboard will provide real-time insights into fleet performance, delivery status, and potential delays, ensuring smooth logistics operations.


                                                                               

  • Utilize the image element to enhance your business brand, strengthen your identity and recognition, and create a professional dashboard that stands out.
  • Incorporate vertical bar graphs to analyze operational costs, differentiating between storage, transportation and packaging expenses.
    • These graphs support legend-based filtering. Click on a category in the legend to remove it and focus on specific cost metrics.
    • Use the navigator to zoom in or expand the X-axis, allowing for precise monitoring within a specific range.
  • Monitor speed, load, and efficiency trends over time using graphs to identify performance patterns and operational bottlenecks. Hover over data points to see tooltips displaying exact values for each category, providing quick insights.
  • Use the table element to showcase supplier statistics and a doughnut chart to illustrate orders by delivery status. Add widget buttons to the header for tasks such as filtering dashboards by date range and requesting stocks via Cliq forms.
  • Use the catalogue form input to present detailed product information and images for a rich and intuitive experience in stock requests.
Sample code :
  1. tabsList = {{"label":"Inventory Trends","id":"reports"}};
  2. if(target.containsKey("id"))
  3. {
  4. id = target.get("id");
  5. }
  6. else
  7. {
  8. id = "reports";
  9. }
  10. sections = List();
  11. if(id == "reports")
  12. {
  13. elements = list();
  14. // Cover Image for the Widget
  15. data = list();
  16. imgMap = Map();
  17. imgMap.put("url","https://www.zoho.com/sites/zweb/images/cliq/dev-helpdoc/image_31_1.jpg");
  18. data.add(imgMap);
  19. elements.add({"type":"images","data":data,"style":{"view":"carousel","size":"large"}});
  20. elements.add({"type":"text","text":"\n\n"});
  21. sections.add({"id":"coverImage","elements":elements});
  22. elements = list();
  23. elements.add({"type":"title","text":"Logistics Dashboard"});
  24. sections.add({"id":"tagline","elements":elements});
  25. dataList = list();
  26. eachData = Map();
  27. eachData.put("title","💰 733,284");
  28. eachData.put("description","Sales");
  29. dataList.add(eachData);
  30. eachData = Map();
  31. eachData.put("title","📥  6,000");
  32. eachData.put("description","Restocking Frequency | Bi-weekly");
  33. dataList.add(eachData);
  34. eachData = Map();
  35. eachData.put("title","⌛ 4.2");
  36. eachData.put("description","Average Processing Time (hrs)");
  37. dataList.add(eachData);
  38. eachData = Map();
  39. eachData.put("title","🚚 12,294");
  40. eachData.put("description","Shipment (in tons)");
  41. dataList.add(eachData);
  42. eachData = Map();
  43. eachData.put("title","📈⚙️ 83%");
  44. eachData.put("description","Utilization %");
  45. dataList.add(eachData);
  46. eachData = Map();
  47. eachData.put("title","⚠️📦 5%");
  48. eachData.put("description","Stockout Risk");
  49. dataList.add(eachData);
  50. elements = list();
  51. elements.add({"type":"cards","data":dataList,"style":{"view":"carousel","size":"small"}});
  52. elements.add({"type":"text","text":"\n\n"});
  53. sections.add({"id":"cardstats","elements":elements});
  54. // Add buttons based on your preferred usecase
  55. button1 = {"label":"Filter","type":"invoke.function","name":"LPWidgetbuttons","emotion":"positive","id":"filter"};
  56. button2 = {"label":"Stock Request","type":"invoke.function","name":"LPWidgetbuttons","emotion":"positive","id":"stockRequest"};
  57. elements2 = list();
  58. elements2.add({"type":"title","text":"Logistics & Operational Cost Analysis"});
  59. operationalCostData = {{"category":"Transportation","values":{{"label":"Jan 20","value":9},{"label":"Feb 20","value":8},{"label":"Mar 20","value":5},{"label":"Apr 20","value":2},{"label":"May 20","value":2},{"label":"Jun 20","value":2},{"label":"Jul 20","value":2},{"label":"Aug 20","value":2},{"label":"Sep 20","value":9},{"label":"Oct 20","value":8},{"label":"Nov 20","value":5},{"label":"Dec 20","value":2},{"label":"Jan 21","value":2},{"label":"Feb 21","value":2},{"label":"Mar 21","value":2},{"label":"Apr 21","value":2},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":2},{"label":"Oct 21","value":2},{"label":"Nov 21","value":2},{"label":"Dec 21","value":2}}},{"category":"Storage","values":{{"label":"Jan 20","value":6},{"label":"Feb 20","value":12},{"label":"Mar 20","value":3},{"label":"Apr 20","value":7},{"label":"May 20","value":3},{"label":"Jun 20","value":13},{"label":"Jul 20","value":5},{"label":"Aug 20","value":8},{"label":"Sep 20","value":9},{"label":"Oct 20","value":8},{"label":"Nov 20","value":5},{"label":"Dec 20","value":2},{"label":"Jan 21","value":2},{"label":"Feb 21","value":2},{"label":"Mar 21","value":2},{"label":"Apr 21","value":12},{"label":"May 21","value":3},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":8},{"label":"Oct 21","value":2},{"label":"Nov 21","value":2},{"label":"Dec 21","value":2}}},{"category":"Packaging","values":{{"label":"Jan 20","value":6},{"label":"Feb 20","value":11},{"label":"Mar 20","value":2},{"label":"Apr 20","value":5},{"label":"May 20","value":2},{"label":"Jun 20","value":6},{"label":"Jul 20","value":3},{"label":"Aug 20","value":5},{"label":"Sep 20","value":6},{"label":"Oct 20","value":11},{"label":"Nov 20","value":5},{"label":"Dec 20","value":3},{"label":"Jan 21","value":5},{"label":"Feb 21","value":7},{"label":"Mar 21","value":4},{"label":"Apr 21","value":6},{"label":"May 21","value":9},{"label":"Jun 21","value":8},{"label":"Jul 21","value":5},{"label":"Aug 21","value":2},{"label":"Sep 21","value":4},{"label":"Oct 21","value":6},{"label":"Nov 21","value":2},{"label":"Dec 21","value":3}}}};
  60. elements2.add({"type":"graph","styles":{"preview":"vertical_bar"},"data":operationalCostData});
  61. elements2.add({"type":"divider"});
  62. sections.add({"id":2,"elements":elements2});
  63. trendGraphData = {{"category":"Loading Time ⏳","values":{{"label":"Jan","value":9},{"label":"Feb","value":6},{"label":"Mar","value":3},{"label":"Apr","value":12},{"label":"May","value":15},{"label":"Jun","value":18},{"label":"Jul","value":24},{"label":"Aug","value":27}}},{"category":"Weight ⚖️","values":{{"label":"Jan","value":12},{"label":"Feb","value":18},{"label":"Mar","value":14},{"label":"Apr","value":6},{"label":"May","value":8},{"label":"Jun","value":4},{"label":"Jul","value":2},{"label":"Aug","value":10}}},{"category":"Processing Time ⏲️","values":{{"label":"Jan","value":4},{"label":"Feb","value":3},{"label":"Mar","value":7},{"label":"Apr","value":3},{"label":"May","value":4},{"label":"Jun","value":2},{"label":"Jul","value":6},{"label":"Aug","value":5}}}};
  64. elements3 = list();
  65. elements3.add({"type":"title","text":"Performance Trends: Speed, Load & Efficiency"});
  66. elements3.add({"type":"graph","styles":{"preview":"trend"},"data":trendGraphData});
  67. sections.add({"id":3,"elements":elements3});
  68. elements4 = list();
  69. elements4.add({"type":"table","headers":{"Supplier Name","Product Category","Avg. Delivery Time (Days)","Fulfillment Rate (%)","Contract Expiry Date","Price Variability (%)"},"rows":{{"Supplier Name":"GlobalTech","Product Category":"Laptops","Avg. Delivery Time (Days)":"6.5","Fulfillment Rate (%)":"92 %","Contract Expiry Date":"2025-12-31","Price Variability (%)":"1.5 %"},{"Supplier Name":"MedSupply","Product Category":"Medical Devices","Avg. Delivery Time (Days)":"4.2","Fulfillment Rate (%)":"96 %","Contract Expiry Date":"2026-06-30","Price Variability (%)":"2.8 %"},{"Supplier Name":"FreshAgri","Product Category":"Perishables","Avg. Delivery Time (Days)":"5","Fulfillment Rate (%)":"93 %","Contract Expiry Date":"2025-09-15","Price Variability (%)":"5.4 %"},{"Supplier Name":"AutoPartsCo","Product Category":"Auto Components","Avg. Delivery Time (Days)":"3","Fulfillment Rate (%)":"95 %","Contract Expiry Date":"2025-11-20","Price Variability (%)":"3.2 %"}},"style":{"text_align":{"center","center","center","center","center","center"}}});
  70. sections.add({"id":4,"elements":elements4});
  71. deliveryInfo = {{"label":"Delivered","value":1050},{"label":"In Progress","value":493},{"label":"Not Delivered","value":440}};
  72. elements5 = list();
  73. elements5.add({"type":"title","text":"Orders by Delivery Status"});
  74. elements5.add({"type":"percentage_chart","styles":{"preview":"doughnut"},"data":deliveryInfo});
  75. sections.add({"id":5,"elements":elements5});
  76. header = {"title":"","navigation":"new","buttons":{button1,button2}};
  77. }
  78. return {"type":"applet","tabs":tabsList,"active_tab":id,"sections":sections,"header":header};


Time to build your own dashboard!  

Cliq Widgets is not just for logistics. Do you want to track sales performance, monitor system health, or analyze customer support tickets? You can craft a dashboard that drives your unique business needs, turning static data into an interactive and actionable experience.

We're here to help, so don't hesitate to reach out to support@zohocliq.com with any questions or if you need assistance in crafting even more tailored workflows.

    • Sticky Posts

    • Customer payment alerts in Zoho Cliq

      For businesses that depend on cash flow, payment updates are essential for operational decision-making and go beyond simple accounting entries. The sales team needs to be notified when invoices are cleared so that upcoming orders can be released. In contrast,

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Accelerate Github code reviews with Zoho Cliq Platform's link handlers

      Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share

    • App Spotlight : PagerDuty for Zoho Cliq

      App Spotlight brings you hand-picked apps to enhance the power of your Zoho apps and tools. Visit the Zoho Marketplace to explore all of our apps, integrations, and extensions. In today's fast-paced world, seizing every moment is essential for operational

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    • Recent Topics

    • Specific Approval Question

      Hi everyone, Just a quick question here. I have located the "Approval Type" in the preferences, which is great, and I am sure we could make use of it. However, I am trying to understand how I can implement an approval "workflow". The business call it

    • Zoho Books - Show Discount Totals When Greater Than Zero

      Hi Books Team, I understand that to show or hide discount amount on a Quote or Invoice, I need to use different templates. It would be a great quality of life improvement for users if we had an option to show or hide the discount amount at line item and

    • Specifying a filename for Schedule Reports

      Is it possible to specify a filename to use with scheduled reports? For example: With a general ledger report, instead of general_ledger.pdf I would like to include the date the report was generated in the filename so it is called general_ledger_202

    • Need to upsert "Created Time" field in Leads Module

      I am in the process of implementing Zoho CRM for my business. I need to modify the "Created By' field to reflect the actual date/time the lead was captured in my original Excel file. Otherwise, my conversion velocity data will always be inaccurate, which

    • HTML for confirmation email

      Hi, After a prospect submitted the Zoho form, we want to send a confirmation mail. In this mail we want to add our email signature. However, while this is possible in Zoho CRM this doesn't seem to be an option in Zoho Forms. Also an html editor is not

    • Fire a webhook when the user gets access to portal

      Hello, We would like to know if there is any way in which we can automate a webhook call if the user accepts the portal invitation that Zoho sends by email. The customer module does have the option to trigger webhooks when a customer is created, updated,

    • Enable History Tracking for Picklist Values Not Available

      When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?

    • Creating Payrun summary by fetching values from the employee payruns and adding them

      I am trying to make a processing payrun module. I want on Form load to autofill payrun summary eg Total Deductions, Total employer contributions etc by fetching one value after the other in the employee payrun information. So it should loop through the

    • Feature Request - Zoho Books - Add Retainer Invoices to CRM/Books integration

      Hi Books Team, My feature request is to include Retainer Invoices in the finance suite integration with Zoho CRM. This way we will be able to see if retainer invoices have been issued and paid. I have also noticed that when the generate retainer invoice

    • Books <-> CRM synchronisation with custom Fields

      Hello, We are synchronising Books Customers with CRM Accounts. In CRM Accounts I set up last year a "segments" multiselect field shown below In Books, I set up a custom multi-select field with the same value as in the CRM And set up the synchronisation inside Books. Want to synchronise the Books Segments with the CRM Segments, but the later doesn't exist, and another non-existing is there ?! First, I don't understand where the field Segmentation is coming from. Second, I set CRM Segmentation to sync

    • Edit Reconciled Transactions

      I realize transaction amounts and certain accounts cannot be edited easily once reconciled, but when I audit my operational transactions quarterly and at the end of the year sometimes I need to change the expense account for a few transactions. To do

    • Request to Customize Module Bar Placement in New Zoho CRM UI

      Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

    • Sending campaigns from other server

      Hi, Is it possible to send campaigns from another server so customers can see mail direct from our company (Corrata) and not from ZCSend.net? Thanks, Tim

    • Edit a previous reconciliation

      I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

    • Admin and Dispatcher Users show as Field Technicians in Dispatch Module?

      Hi Zoho, Our Admin and Dispatch user both show up as Fied Technicians / Field Agents in the Dispatch module, but they most certainly should not be assigned to any of the work orders and service appointments. These users are NOT service resources. How

    • Zoho Payroll: Product Updates - June 2025

      This June, we’re taking a giant step forward. One that reflects what we’ve heard from you, the businesses that power economies. For our customers using the latest version of Zoho Payroll (organizations created after Dec 12, 2024) in the United States,

    • View Products (items) in Contact and Company

      Hi, I would like to know if there is an option to view all the products /(items) that were inserted in the pipeline deal stage for exemple "Win Pipeline" within the company and contacts module section? For instance, view with the option filter for the

    • Update subform dropdown field choices - on load workflow

      Hi, I have a "Check In" form that has "Contacts" subform and a "Tickets" subform. When the form is loaded, I want to populate one contact and the number of tickets. I want the "Contact" field in the "Tickets" subform to have the choice of "Contacts."

    • Upload Zoho Inventory Item Image by API

      itemID = item.get("item_id"); organizationID = organization.get("organization_id"); resvp = zoho.inventory.getRecordsByID("items",organizationID,itemID,"zoho_inventory_conn"); info resvp; image_file = invokeurl [ url: "https://t4.ftcdn.net/jpg/03/13/59/81/360_F_313598127_M2n9aSAYVsfYuSSVytPuYpLAwSEp5lxH.jpg"

    • Salesforce to Zoho One Migration

      HI, I am about to start a migration from Salesforce to Zoho One I would like to know the best practise for this, my current thoughts to the approach is 1) Create fields, modules as required for migrating data 2) migrate Data 3) go live Will this approach

    • Zoho Expense Integration with Zoho Books

      I want to know what flexibility do i have in selecting the chart of accounts which get a hit whenever we are posting any expense or advance in zoho expense?

    • Custom Function to Update Ticket based on Subject of Ticket

      This may be pretty simple but I'm having issues with getting a custom function to fill out custom fields based on the subject of a ticket and not the body of a ticket. Basically we need to fill in the PO number and Item ID custom fields, both of this

    • Incoming 'Message' data via WhatsApp appears empty

      the Incoming 'Message' data via WhatsApp appears empty; instead of customer messages, I only see CRM system notification messages are being displayed. I have seen 3 messages like this since yesterday it seems that in 'All Message' the message snippet

    • Handling Automatic Replies in Desk

      We send out email campaigns (currently via Klaviyo) and naturally we receive "Automatic Replies" to these mass email campaigns. These responses are all being routed to Zoho Desk. We get two types of "Automatic Replies" Type 1) Customer is out of the office/holiday

    • Zoho Mail API Error EXTRA_KEY_FOUND_IN_JSON

      I have a workflow set up in Pipedream that uses the Zoho Mail API to send emails from my account. It's worked without issue for months but today I'm getting the following 404 error for every email I try to send: { "data": { "errorCode": "EXTRA_KEY_FOUND_IN_JSON"

    • How to search (web API) for a Calls record by phone number?

      Using v8 /Calls/search web api I'm unable to to complete a search request no matter how I use the api: When I try using "criteria=" I get: response: <Response [400]> response_json: { "code": "INVALID_QUERY", "details": { "reason": "the field is not available

    • [Free Webinar] Product Release Updates - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Zoho GenAI API Error Not a valid response from zia.

      Zoho GenAI API Error Not a valid response from zia.

    • Help me to retreive my Document

      Please help me to retrieve my documents from any date between 1st February, 2025 to 20th,March 2025 .it got mistakenly deleted on the 21 of March 2025 due to phone screen malfunction I earnestly await your positive response .thank you

    • how to change the page signers see after signing a document in zoho sign

      Hello, How can I please change the page a signer sees after signing a document in Zoho Sign? I cannot seem to find it. As it is now, it shows a default landing page "return to Zoho Sign Home". Thanks!

    • Look Up Field Type not available for events and tasks?

      Look Up Field Type not available for events and tasks?    

    • I cannot check out to Zoho People.

      When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs

    • Digest Juin - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour à toutes et à tous, Ce mois-ci encore, tout s’est enchaîné à toute vitesse ! On vous fait un petit récap de ce qui a marqué ces dernières semaines. Zoho RPA est une solution robuste d’automatisation des processus, conçue pour s’intégrer aux systèmes

    • Different Transaction Series for Different Types of Sales

      Is there any way I can create multiple transaction series for different type of Sales? Say B2B-001 and B2C -001 for respective type of Sales.?

    • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

      Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.

    • Customer Advance Zoho Book API

      All I could find was Customer Payment API, it does not have facility to add customer advances, where those are not linked to any invoice as such. How to do it?

    • Even though the received amount+tax is equal to or lesser than the invoice value, zoho doesnt allow to record

      Even though the received amount+tax is equal to or lesser than the invoice value, Zoho mentioned the error- you've recorded more payment than the actual invoice balance. please check again. screenshot also attached.  You've recorded more payment than

    • Multiple deductions in invoice

      I issue invoices to a customer that include multiple deductions that I would like to track in different expense accounts. But that is not possible in Zoho Books as there is only one Deduction field and even that I don't have control over to assign it

    • #BiginnersTips | How to bulk update closing dates for multiple deals in Bigin

      Hello Biginners! Keeping your CRM data accurate is crucial for any business- big or small. One key aspect is ensuring that closing dates for deals are always up to date. Why? Because if a deal is closed but not updated, your dashboards and reports would

    • 采购里出现付款通知 的错误

      采购里面出现付款通知错误，怎么调整，我找不到路径，好像是ZOHO 自动生成的，请问怎么调整

    • Next Page