Overview

Gauge Indicator UI is a responsive and customizable OutSystems UI component that displays a semicircular gauge with a needle and a colored indicator arc. It supports percentage-based values and customizable colors, making it suitable for fuel levels, capacity, utilization, and performance metrics.

Web Block

Name: GaugeIndicatorUI

Input Parameters

How to Use

1. Open your application in OutSystems Service Studio.

2. Find the GaugeIndicatorUI Web Block.

3. Drag and drop it onto your screen or inside the desired container.

4. Set the Percentage input to the required value between 0 and 100.

5. Set the ColorHex input to the desired HEX color.

6. Publish your application and view the gauge.

Responsive Design

The gauge automatically adjusts to the available space of its parent container. Simply drag and drop the Web Block into your desired container, and it will scale according to the container's dimensions.

Examples

• Percentage: 40

• ColorHex: #20a943

This displays a green gauge filled to 40%.

Other color examples:

• Green: #20a943

• Yellow: #f5a000

• Red: #d7193f

Features

• Responsive sizing based on the parent container.

• Percentage-based needle positioning and arc filling.

• Customizable indicator color through HEX values.

• Smooth needle and arc animations.

• Reusable across different screens and use cases.

Notes

• Percentage should be between 0 and 100.

• ColorHex should be a valid HEX color code.

• Ensure the parent container provides sufficient space for the gauge to display correctly.