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

    • Zoho Signature, "For Demo Purpose Only Powered by Zoho Sign"

      How to disable this text on the documents for signature. "For Demo Purpose Only Powered by Zoho Sign"
    • Add Resource variable to notification email customisation for Event Type

      The notification email customisation feature for Event Type does not include a variable for the Resource field. Without this field, Zoho Bookings cannot be used by any business for resource-based services or event types e.g. room bookings, equipment bookings.
    • Can't find add role button, is iet st because I have the free subscription

      Trying to add my accountant in Zoho Books if I press the add accountant button, I get stuck as it says no such role exists, and won't let me continue, I can't find the add roles button, so I am stuck. Is it because I have the free subscription? Also can't
    • Calendar view all appointments in workspace

      In the Calendar page, add the ability to view all appointments in the Workspace. The Manage Calendars filter requires me to select at least one user or resource, and it only lets me select up to five of them. There's no filter option to view the entire
    • Tip #13: Identify where your bookings come from with Source Tracking

      Source tracking is the practice of identifying where your bookings originated. This is important, because online bookings come from a wide variety of sources like social media platforms, your website, email and ad campaigns, partner websites, organic
    • Unable to Add Notes

      I've had a user report that they are unable to add notes to account records. I attempted and found the same issue. There is no option to save the note.
    • Workflow Rule Alert Not Working

      I have a workflow rule set (that I've been using for years) that suddenly stopped working. Module - Leads Execute on - Create Alerts - Email Active - Yes When I create my lead I no longer receive my email notification. 
    • Can zoho sign collect data feeding Zoho Sign?

      I m sending contracts to client who are not in my zoho CRM database yet. Can the data they enter in Zoho sign contract I send them, (that includes...) official company name address first name second name etc, ...Create or update a contact / account
    • IMAP ACCOUNT ACCESS PROBLEM

      Hi! I moved from Gmail some time ago to ZOHO. It works fine and it worked till yesterday. I found out that on my MAC OSX mail client I can not receive emails from ZOHO using IMAP. Gmail is set to IMAP and works OK. My company email account uses POP and works good as well. Is there anybody else who has such problem or this might be something with my email client...? I didi check for the settings but everything is as it was from the beginning. Honestly, I didn't change anything recently. It just stopped.
    • Modified approved time log

      I can’t seem to find a way to make change to approve time log entry. The case is the following. We pay the employees every 2 weeks, so employe A enter is time for the 2 weeks and then submit his timesheet. Now is superior approve the time he worked via
    • I want to Show the product list based on the drop Down

      in quotation app , amc form form i have Department drop down field and in subform i have loop up field item description taken from the anothe app PRO I want to show the product list look up based on the deparment selected example if they selected deparment
    • Inventory Barcode Creation - Add Picture of Item

      Hi I am trying to set up bar code labels and include a picture of the item on the label - any idea on how to add that field to the barcode generator?
    • Shared Snippets Everyone

      Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets
    • Topics assigned to Contacts in Campaigns

      I have yet to find an efficient way to assign topics to contacts in campaigns with the new system in place.  We have daily contacts added to our system through various forms and we have to manually go in and add topics to contacts before each email campaign
    • Zoho CRM email formatting issues

      I have been having a hard time with formatting email templates. It feels like Zoho email is "fighting my edits." It refuses to change size, font, etc. Sometimes, the template looks great, then when the email gets sent, it looks completely different- some
    • Weekly Tips : Seamlessly collaborate with Share Drafts in Zoho Mail

      Ever found yourself stuck wondering how to get input on an important email draft without actually sending it? Maybe you want a teammate’s feedback or approval from your manager—without exposing sensitive info. Or perhaps you are working across different
    • How to Share a workdrive folder outside organization ?

      Hi, Earlier we were using Google Suite and were able to share the google drive folders with external organization ( Auditors , marketing collaterals ) as most of them had a personal gmail account they were able to access it without any issue. How can
    • Zoho CRM Account Duplication via Credit Application Form

      Hi, We send a credit application link to our customers via email, which is managed through Zoho Campaigns. When a customer submits the form, it automatically creates a new account in Zoho CRM. We would like to know how to stop this from creating duplicate
    • Flexible Milestone Invoicing

      If your Zoho Projects portal is integrated with Zoho Invoice/Books, you can now create an invoice for your milestones. You can enable it under Integration Preference and invoice milestones regardless of the project's billing type. For instance, consider
    • The get records i am getting produts that show in the show in the sub form item list field

      The get records i am getting produts that show in the show in the sub form item list field if(input.Department != null) { // Get filtered records once creator_ptid = zoho.creator.getRecords("harshadgroup","item-master","All_Products","Department == \""
    • Add Zoho Form Submission as Attachment to Zoho CRM Deal using Zoho Deal ID

      Hi Zoho team, I have a Zoho Form in which one of the fields will be hidden but will be defaulted with the Zoho Deal ID. Once the form is submitted, I want to reattach the submitted form (and another uploaded file field) into Zoho CRM Deals record. The crazy part is that Deal Name and Stage are the only two fields available for mapping. I have the actual Deal ID. Why can't I just use that. Can you please fix it so that I can properly attach the submission using Zoho Deal ID instead of name/stage (which
    • Payment link showing as malicious

      We've had a few customers who have been unable to pay invoices as the payment link (the domain is zohosecurepay.eu) is showing as a malicious website in their browser. Could anyone help with this please?
    • Side bar menu

      It would be great if you could stop the auto collapse of expanded menus when selecting a different module. It would save a lot of mouse clicks for a lot of users that frequently switch between sales & purchases as we do, it's easier to collapse them manually when not required !
    • Add Microsoft Entra ID to Zoho One

      Hi! Have anyone tried the Zoho connection to Microsoft Entra ID (https://help.zoho.com/portal/en/kb/one/admin-guide/directory-stores/articles/add-microsoft-azure-to-zoho-one?action=kbArticleFollow&actionId=4014605732522 ) This is a big operation and you
    • Multiple Respondents for One Survey Submission?

      Does anyone know of a way to allow multiple respondents to complete only one  survey and then also see (while completing the survey) the responses for their fellow colleagues who already answered that question? The situation is that our new customers have within their own organization, multiple employees that will need to assist in the one survey response. Since we don't always know which new respondent is the "who" that will have the answer, we need multiple respondents to be able to view the response
    • Can you remove the title from the forms?

      I am placing the iframes for my forms on my website.  Is it possible to remove or hide the title of the form so that it doesn't show up on the website? Is it possible to place text in the form like "clicking submit will take you to paypal." thanks
    • Lost the ability to sort by ticket owner

      Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?
    • Mask Name Field in Report

      Is it possible to have the Name field as "Last Name, First Name" in a scheduled report.
    • Custom Project View by Project Group

      Hi Zoho Team, I used to have a custom project view which showed all my active projects (not cancelled or completed) and the list was separated into projects groups. Some time ago, possibly a couple of months ago, I began to see all projects even cancelled
    • Unable to attach the file via the API.

      We are trying to attach files to a Candidate in Zoho Recruit using the API. We reviewed the following API documentation: 🔗 Upload Attachment While this API does allow file attachment via a URL, that’s not what we want — we do not want to attach public-facing
    • Zoho Books (UK) needs to be able to submit a CT600 CTSA return

      As well as a VAT Return, most (if not all) small businesses have to submit a CT600 Corporation Tax Self-Assessment. There are many providers who do this (like Xero) bujt not Zoho. Can you add this to the request list please? Many thanks Steve
    • Stock Update After Approver 1 Approval in Multi-Level Approval Flow

      Hi Team, We have configured a multi-level approval process for POs/Bills. Our requirement is to update the item stock quantity based on the billed quantity immediately after Approver 1 approves the bill. Please find the script attached below. However,
    • Zoho Form Auto Fill

      I am setting up a Zoho form for my independent sales reps to request quotes. Their names are in the first field under a dropdown menu. The next field is their email address. I want the email address field to automatically be filled in when they select
    • Image Resolution Restriction Option in Zoho Forms File Upload

      Hi Zoho Forms Team, Greetings, We would like to request a feature enhancement for Zoho Forms regarding the file upload field. Currently, Zoho Forms allows us to restrict the file size of uploaded images, but not the image resolution (in megapixels). This
    • Can't select Leave type while applying a leave

      Hello, while trying to apply a leave, I can't find any leave type among the options in the Leave type select: Here are my leave settings. Daily: Hourly: Tried to clear cache and to navigate from another browser, but the problem persists. Any hint? Thank
    • Mes débuts sur Zoho Forms | 13 champs à l'export ! seulement

      Bonjour, je débute sur Zoho Forms, je viens de créer un formulaire avec tests dans la foulée et je n'ai que 13 champs qui remontent sur mon export CSV alors que j'ai plus de questions et champs qui devraient remonter. J'ai actuellement une formule payante
    • Introducing real-time document commenting and collaboration in Zoho Sign

      Hi, there! We are delighted to introduce Document commenting, a feature that helps you communicate with your recipients more efficiently for a streamlined document signing process. Some key benefits include: Collaborate with your recipients easily without
    • Adding Photos Into Form (as a form creator)

      As the form creator, is it possible to add images to my form? (I don’t mean adding an image upload field, but rather inserting a JPG file into the form so that users can view the image.)
    • [Training] AI-Powered Application Development Bootcamp 2.0 - Zoho Creator

      Hello everyone, Ready to take your app-building skills to the next level with the power of AI? We’re excited to invite you to AI-Powered Application Development Bootcamp 2.0—a 90-minute, live training session designed to help developers, business users,
    • What is the easiest/fastest way to attach an email or PDF to a Zoho record?

      Hi everyone, We use Outlook with Office 365 and have the need to either ideally attach a .msg email directly to an account or custom module in Zoho, or if not attach just the PDF that would be sent in that email. The Zoho plugin is very basic for Outlook
    • Next Page