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


 

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

    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 FormsEnterpriseBegin 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 onboardingOrder Forms for Small Business
                          No Code FormsConstructionRSVP tool for holidays
                          Free FormsTravel
                          Prefill FormsNon-Profit

                          Intake FormsLegal
                          Mobile App
                          Form DesignerHR
                          Mobile Forms
                          Card FormsFoodOffline Forms
                          Assign FormsPhotography
                          Mobile Forms Features
                          Translate FormsReal EstateKiosk in Mobile Forms
                          Electronic Forms

                          Notification Emails for FormsAlternativesSecurity & Compliance
                          Holiday FormsGoogle Forms alternative GDPR
                          Form to PDFJotform alternativeHIPAA Forms
                          Email Forms
                          Encrypted Forms
                          Embeddable Forms
                          Secure Forms
                          Drag & drop form builder
                          WCAG



                                            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


                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts


                                                    Zoho Marketing Automation

                                                      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 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, dials, image, tables, calendars, commands, ...
                                                                                                              • 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