Working with Widgets in Zoho IoT: A Practical Guide

Working with Widgets

Creating Widgets  

This section of the document provides an overview of creating and editing various types of widgets.

The following are the ways to create & add widgets in a dashboard.
  1. When creating a new dashboard.
  2. Using the Actions > Add Widget option in the existing dashboard's view screen.
  3. Using the Add Widget option when accessing the dashboard builder. 
To add widgets when creating a new dashboard:

1. Go to the End Application.
2. Select Dashboard from the application's main menu on the left pane.
3. Click the Add Dashboard button in the top-right corner. The Widget's welcome screen is displayed.



4. Click the OK button, and select the required widget type from the left panel.
5. Select the required widget from the widget gallery.
6. Configure widget properties. Widget properties are different for every type of widget. Refer to the documents under Different Types of Widgets for more details on creating each widget.
7. Click Create to add the new widget to the dashboard.

To add widgets using the Add Widget option from the dashboard view:

1. Go to the End Application.
2. Select Dashboard from the application's main menu on the left pane.
3. Select the dashboard to which you want to add the widget from the dashboards drop down list.
4. Click Add Widget from the Actions button.
5. Select the required widget type from the left panel.
6. Configure widget properties. Widget properties are different for every type of widget. Refer to the documents under Different Types of Widgets for more details on creating each widget.
7. Click Create to add the new widget to the dashboard.
 



To add widgets using the Edit Layout option from dashboard view:

1. Go to the End Application.
2. Select Dashboard from the application's main menu on the left pane.
3. Select the dashboard to which you want to add the widget from the dashboards drop down list.
4. Click Edit Layout from the Actions button.



5. Select the required widget type from the left panel.


 
6. Configure widget properties. Widget properties are different for every type of widget. Refer to the documents under Different Types of Widgets for more details on creating each widget.
7. Click Create to add the new widget to the dashboard.

Availability

Info
All Widget operations require necessary permissions. Refer to Users and Profiles document for more details.

Check Feature Availability and Limits

Editing Widgets 

An existing widget can be modified using the Edit option in the Ellipse button.
 
To edit a widget:
1. Select the dashboard in which the widget to be edited is present.
2. Click on the vertical ellipsis button and the Edit option to display the widget configuration screen with the current values.

3. Modify the required values.


 
4. Click Save.
Notes
Note: You can modify the style of a widget to another compatible style by using the Change Style option. Similarly, you can modify the time frame of period-based charts, graphs etc.  

Cloning Widgets

The Clone option is used to create a widget similar to any existing widget and with minor modifications. Cloning helps you avoid performing repeated configurations.


 To clone a widget:

1. Select the dashboard in which the widget to be deleted is present.
2. Click on the vertical ellipsis button on the widget, then select the Clone option from the drop down menu.
3. Modify any required values. 
4. Click Create.


Deleting Widgets  

The Delete option is used to remove widgets from the dashboard.
 

 
 
To delete a widget:
1. Select the dashboard in which the widget to be deleted is present.
2. Click on the vertical ellipsis button on the widget, then select the Delete option from the drop down menu.

3. Click Delete in the confirmation window.


Changing Widget Styles 

Widgets can be switched to other compatible styles of the same type without recreating the widget. For example, you can switch a Simple Card 1 style widget to a Simple Card 2 style widget. Similarly, graphs, charts etc., can also be changed to other compatible styles within their type. 
 

Inline Switching  

For inline switching, you can use the Change Style option on the top right corner of the widget in the dashboard view.
Notes
Note: The switching of widget style is for temporary viewing only and therefore the view is not saved anywhere. The widget is displayed in its original style when the client interface is refreshed.
The steps to be performed for Inline switching are provided below:
1. In the dashboard view, click the widget's Change Style image icon as shown in the above image. The compatible styles are displayed as options in the drop down list.






 
2. Choose the desired style.
   

Configuration Switching

Configuration Switching can be done using the Edit option on the widget in the dashboard view. You can provide the modified configuration values in the widget's edit screen and save the changes.
 

To switch style based on configuration switching:

1. In the dashboard view, click on the vertical ellipsis on the top right corner of the widget
2. Click Edit to invoke the Edit Widget screen.
3. Click Change Style link below the sample image on the left.
4. Choose the desired style.
5. Modify the values you want to change.
6. Click Save.  
 

Advanced Options 

Graph Widgets come with additional customization options such as Adding KPI Bar, Ranking/Sorting, Adding Threshold Line, and Configuring Axis Settings. These options will enhance the viewing experience providing more details in the charts.

The chart below displays the availablity of the options for timeseries and instance property grouping charts.

 
Timeseries Grouping Charts
Instance Property Grouping Charts
Add KPI Bar


Add Ranking/Sorting


Add Threshold


Set Multiple/Single Axis


 

Notes
 Note: Card and Image Widgets have color code options to improve aesthetics and readability of the widgets. 
 
 
Cards
Image
Apply Colors


 

Ranking/Sorting  

The ranking and sorting option helps you sort the data of the selected metrics in the chart.
 

Image: Chart displaying location-wise demand sorted in descending order

Adding KPI Bar  

KPI Comparison bar displays the summary of the chart values. Here, you can also display the increase or decrease in value when compared to the previous period as positive/negative.

Notes
 Note: The KPI Comparison bar is available for only Timeseries Group chart. 
 


Image: KPI Comparison Bar in Chart
 

Configuring KPI Bar 

 

 
Adding Threshold Line  

 A Threshold line can be drawn across the chart values to highlight the property values that are higher/lower than the threshold value.
 


Image: Distinctly displaying the devices having Alarm history count of more than 50.

Configuring Threshold Line Color

The color of the threshold line can be set while adding the line.


 
Notes
 Note: The Threshold Line setting is available for both Timeseries Group charts and Instance Property Group charts. 
 

Configuring Threshold Area

The color of the area above and below the threshold line can be set while adding the line.



Adding Axis Setting 

Axis setting helps to display metrics' values along a single axis or multiple axes. This provides a comparison view of the values as required.
 
Sample chart displaying the average values of CO2 and TOV Level in multiple axes


 
Image: Sample chart displaying the average values of CO2 and TOV Level in single axis
 

 

Configuring Axis Setting

Single and Multiple Axis settings can be configured using the Axis Setting option. 
 


Multi-axes charts allow all measures to be represented with separate axes, ensuring better clarity when visualizing multiple metrics. Using custom axis range within multi-axes helps users to manage the range for selected metrics, tailoring the display to specific data intervals.

Notes
When data falls outside the defined interval in a custom axis range, there are two possible approaches:
  1. Dynamically adjusting the axis range to accommodate all data points.
  2. Displaying only the data that falls within the given range.
This flexibility helps in maintaining a focused and meaningful visualization.


 

Applying Colors to Widgets 

The aesthetics of your widgets can be enhanced considerably using color coding in widgets. This will help denote the intensity of the values displayed by using different color ranges and combinations based on the values. The two coloring types supported in the application are: Static and Dynamic.

Static Color

The card widget is filled with the selected color when using the Static option.
 

 

1. Colored widget


2. Show color only in header strip and icon



3.Show color only in icon holder



Dynamic Color

The card widget is filled with the selected color set for different value ranges.
 

 
As shown in the above image, the widget values/color mapping is segregated into three ranges for 0-200 values. When the value for the widget is above 133.33, the color of the widget is set to the third range color which is RED.
 

 
Notes
 Note: The Apply Color feature changes in behavior based on the widget type and style. 


Hide Title 

The Hide Title option is used to hide the widget title.






Image: Devices Count Card widget with title "Devices".



Image: Devices Count Card widget without a title.

Color Scheme for Metrics

For Dial and Chart Widgets, the color scheme is configurable for each metric.

Hide Values for Metrics



Select the option Hide Data Values to hide the values displayed on any widget.




Image: Dial Widget with and without values displayed.

InfoFor step by step illustration on working with any specific type of Widget, refer to the Understanding & Working With Different Types of Widgets document.

See Also

      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          Zoho CRM Training Programs

          Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

          Zoho CRM Training
            Redefine the way you work
            with Zoho Workplace

              Zoho DataPrep Personalized Demo

              If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

              Zoho CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Intake FormsLegalMobile App
                              Form DesignerHRMobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsEncrypted Forms

                              Secure Forms

                              WCAG

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now






                                                        You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                            Manage your brands on social media

                                                              Use cases

                                                              Make the most of Zoho Desk with the use cases.

                                                               
                                                                

                                                              eBooks

                                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                               
                                                                

                                                              Videos

                                                              Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                               
                                                                

                                                              Webinar

                                                              Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                               
                                                                
                                                              • Desk Community Learning Series


                                                              • Meetups


                                                              • Ask the Experts


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner

                                                                Zoho Sheet Resources

                                                                 

                                                                    Zoho Forms Resources


                                                                      Secure your business
                                                                      communication with Zoho Mail


                                                                      Mail on the move with
                                                                      Zoho Mail mobile application

                                                                        Stay on top of your schedule
                                                                        at all times


                                                                        Carry your calendar with you
                                                                        Anytime, anywhere




                                                                              Zoho Sign Resources

                                                                                Sign, Paperless!

                                                                                Sign and send business documents on the go!

                                                                                Get Started Now




                                                                                        Zoho TeamInbox Resources





                                                                                                  Zoho DataPrep Demo

                                                                                                  Get a personalized demo or POC

                                                                                                  REGISTER NOW


                                                                                                    Design. Discuss. Deliver.

                                                                                                    Create visually engaging stories with Zoho Show.

                                                                                                    Get Started Now









                                                                                                                        • Related Articles

                                                                                                                        • Understanding Widgets

                                                                                                                          Widgets are the fundamental components of a dashboard, presenting vital statistics in intuitive formats within the Zoho IOT application. You can create various types of widgets, including cards, charts, custom fill, dials, image, tables, calendars, ...
                                                                                                                        • Understanding Map Widgets

                                                                                                                          Map type widgets are used to view google maps based location maps on dashboards. The maps configured in the Maps module are displayed for selection during the map widget creation process. Note: As a prerequisite, the required map must already be ...
                                                                                                                        • Understanding Table Widgets

                                                                                                                          The Table Widget, also referred to as the list view widget, is used to display the details of the selected module/model, assets, policies, alarms, etc. The two different table formats available are: Custom View Table Reports Table Custom View Table ...
                                                                                                                        • Working with Dashboards

                                                                                                                          Creating Dashboards To create a dashboard: 1. Select Dashboard from the application's navigation menu on the left pane in the End Application. 2. Click the Add Dashboard button in the top right corner. . 3. Select the type of the dashboard whether ...
                                                                                                                        • Working with Alarms

                                                                                                                          The different views of Alarms allow users to examine alarms in detail, providing insights into their nature, severity, and history. The application also includes features to view related alarms, helping users identify connections between different ...
                                                                                                                          Wherever you are is as good as
                                                                                                                          your workplace

                                                                                                                            Resources

                                                                                                                            Videos

                                                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                            eBooks

                                                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                            Webinars

                                                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                            CRM Tips

                                                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                                                              Zoho Show Resources