Custom Fill widgets in Zoho IoT provide a visually engaging way to represent level-based metrics such as water or battery levels. These widgets use dynamic fill animations and customizable styles to offer a more intuitive and aesthetically appealing visualization. Ideal for dashboards, they help users quickly interpret values at a glance, enhancing both usability and the overall user experience.
All the Custom Fill widgets can be converted to any of its compatible formats.
The different styles of custom fill widgets and their short descriptions are provided below:
- Battery
- Level Tank 1
- Level Tank 2
Battery
The Battery style custom fill widget visually represents charge levels using a familiar battery icon. As data updates, the fill inside the battery indicates the available charge, offering a clear and intuitive way to monitor battery status at a glance.
Image: Battery Widget
To create a Battery style widget:
1. Access the End User application.
2. In the dashboard view, click Actions > Add Widget.
3. Click on Custom Fill in the Select Widget Type in the left frame.
4. Select Battery, then click Proceed.
5. Select Historical or Realtime option on the top.
- Historical to display collected stored data.
- Realtime to display live data of a datapoint.
6. Provide the name/title for your widget.

7. Select the value (i.e. Asset, Device, Locations, System Modules, or Custom Modules) from the drop down list for which you want to display the data. The value selection can be further fine-tuned using the filter option.
8. Select the Count, Field, or Datapoint for the selected module or model. The configure count/field/datapoint is displayed in the drop down list.
- Count - will display the total count of the instances of the selected model.
- Field - will display the field value. Along with the field, the aggregate based on which you want to display the data must be selected.
- Datapoint - will display the calculated value for the datapoint. Along with the datapoint, the time frame, unit, and aggregate based on which you want to display the data must be selected.
9. Select Outside/Inside on where you want to display the value.
10. Provide the range for the battery.
If the values for the property are consistently smaller or higher values, it is recommended to modify the min. and max. values. For example, if the usual level range is between 20 and 40 and there is no possibility of higher values, the min. and max. range can be set to 0 and 50.
11. Set the "Display Value as %" to ON if you want to display the value for a percentage.
If the percentage of a value will provide a better understanding, it is recommended to use the Display Value as % option. For example if the capacity of the monitored battery is maximum, you can use the percentage option to display 75% full etc.
12. Provide the color rule if required.
13. Click Create.
Level Tank 1
The Level Tank 1 Custom Fill Widget represents fluid levels within a rectangular, animated tank. The fill adjusts based on values, offering a clear and visually appealing way to monitor fluid levels in a structured, vertical format.
Image: Level Tank 2 Widget
To create a Level Tank 1 style widget:
1. Access the End User application.
2. In the dashboard view, click Actions > Add Widget.
3. Click on Custom Fill in the Select Widget Type in the left frame.
4. Select Level Tank 1, then click Proceed.
5. Select Historical or Realtime option.
- Historical to display collected stored data
- Realtime to display live data of a datapoint.
6. Provide the name/title for your widget.

7. Select the value (i.e. Asset, Device, Locations, System Modules, or Custom Modules) from the drop down list for which you want to display the data. The value selection can be further fine-tuned using the filter option.
8. Select the Count, Field, or Datapoint for the selected module or model. The configure count/field/datapoint is displayed in the drop down list.
- Count - will display the total count of the instances of the selected model.
- Field - will display the field value. Along with the field, the aggregate based on which you want to display the data must be selected.
- Datapoint - will display the calculated value for the datapoint. Along with the datapoint, the time frame, unit, and aggregate based on which you want to display the data must be selected.
9. Select Outside/Inside on where you want to display the value.
10. Provide the range for the tank.
If the values for the property are consistently smaller or higher values, it is recommended to modify the min. and max. values. For example, if the usual level range is between 20 and 40 and there is no possibility of higher values, the min. and max. range can be set to 0 and 50.
11. Set the "Display Value as %" to ON if you want to display the value for a percentage.
If the percentage of a value will provide a better understanding, it is recommended to use the Display Value as % option. For example if the capacity of the monitored battery is maximum, you can use the percentage option to display 75% full etc.
12. Provide the color rule if required.
13. Click Create.
Level Tank 2
The Level Tank 2 Custom Fill Widget displays fluid levels using a round, animated tank graphic. As the value changes, the fill rises or falls smoothly within the circular shape, providing a visually engaging and intuitive representation of fluid levels.
Image: Level Tank 2 Widget
To create a Level Tank 1 style widget:
1. Access the End User Application.
2. In the dashboard view, click Actions > Add Widget.
3. Click on Custom Fill in the Select Widget Type in the left frame.
4. Select Level Tank 2, then click Proceed.
5. Select Historical or Realtime option.
- Historical to display collected stored data
- Realtime to display live data of a datapoint.
6. Provide the name/title for your widget.

7. Select the value (i.e. Asset, Device, Locations, System Modules, or Custom Modules) from the drop down list for which you want to display the data. The value selection can be further fine-tuned using the filter option.
8. Select the Count, Field, or Datapoint for the selected module or model. The configure count/field/datapoint is displayed in the drop down list.
- Count - will display the total count of the instances of the selected model.
- Field - will display the field value. Along with the field, the aggregate based on which you want to display the data must be selected.
- Datapoint - will display the calculated value for the datapoint. Along with the datapoint, the time frame, unit, and aggregate based on which you want to display the data must be selected.
9. Select Outside/Inside on where you want to display the value.
10. Provide the range for the tank.
If the values for the property are consistently smaller or higher values, it is recommended to modify the min. and max. values. For example, if the usual level range is between 20 and 40 and there is no possibility of higher values, the min. and max. range can be set to 0 and 50.
11. Set the "Display Value as %" to ON if you want to display the value for a percentage.
If the percentage of a value will provide a better understanding, it is recommended to use the Display Value as % option. For example if the capacity of the monitored battery is maximum, you can use the percentage option to display 75% full etc.
12. Provide the color rule if required.
13. Click Create.