Skip to content

Data Value#

dataValueIcon

Overview#

The Data Value widget provides a mechanism to display values by using a preset list of gauges. An example is shown below, where a Data Value widget is used to show the gauge on the right:

dataValueExample

General Steps#

To use the Data Value widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Data Value from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

Screenshot showing a data value set configuration wizard.

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    Diagram showing a widget customization interface with options for border width and color.

  2. In the Layout tab, you can customize the visual properties of the widget:

    • Gauge Type - Select the type of gauge to display the data value. The options are Number, Delta, Data Indicator, Number + Delta, Number + Delta Side, Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, Full Circle, and Thermometer.
    • Title - Set the title for the data value displayed on the gauge.
    • Subtitle - Set the subtitle for the data value displayed on the gauge.
    • Data Label - Specify a string to be shown in place of the value when Use Name As Secondary Value is true.
    • Show Animations - Enable or disable animations for chart transitions and interactions. This option is set to false by default.
    • Value - The numerical value to be displayed on the gauge.
    • Units - Specify the units for the gauge value.
    • Minimum - Set the lowest limit of the gauge scale.
    • Minimum Target Lower - Define the minimum lower target limit for the gauge.
    • Target Lower - Set the lower target limit for the gauge.
    • Target - Define the target value for the gauge.
    • Target Upper - Set the upper target limit for the gauge.
    • Maximum Target Lower - Define the maximum lower target limit for the gauge.
    • Maximum - Set the highest limit of the gauge scale.
    • Show Primary Label - Enable or disable the display of the primary value on the gauge. This option is set to false by default and is available for Data Indicator, Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, Full Circle, and Thermometer types.
    • Show Secondary Label - Enable or disable the display of the secondary value on the gauge. This option is set to false by default and is available for Radial Gauge, Bullet Gauge, Progress Bar, Vertical Bar, Half Circle, and Full Circle types.
    • Use Name as Secondary Value - Decide whether to show the "Value" or the "Data Label" in the secondary label. This option is set to false by default and is available for Progress Bar, Vertical Bar, Half Circle, and Full Circle types.
    • Combine Labels - Combine the primary and secondary labels. This option is set to false by default and is available only for the Progress Bar type.
    • Is Percentage Value - Specify if the value should be treated as a percentage. This option is set to false by default and is available for Half Circle and Full Circle types.
    • Use Background Color - Enable or disable the background color on the gauge. Default is green and is set to false. Available for the Number gauge type.
    • Decimal Places - Set the number of decimal places to display on the gauge.
    • Custom Color - Choose a custom color for the gauge instead of the default color.
    • Invert Colors - Invert the colors of the gauge. This option is set to false by default and is available for Number, Delta, Data Indicator, Number + Delta, and Number + Delta Side types.

    Screenshot showing a data value layout customization interface with options for gauge inversion.

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    Screenshot showing a data value links customization wizard with options for linking to other UI elements.

  4. By saving and closing the settings, the widget will be changed accordingly.

Using the Fill Settings Feature#

When using widgets that can be configured via input, you can take advantage of the Fill Settings feature, which is accessible through the three-dot menu of each widget while in build mode. This functionality automatically updates the widget settings based on its current state.

To use it, simply connect a compatible output from a System Task to the appropriate input of the Data Value widget. Then, select the Fill Settings button, and the widget will be updated accordingly.

Screenshot showing a UI with a field labeled "Data Value" and a filename hint reading "data value fill settings".

Real Use Case#

To configure a Data Value widget with a Radial gauge type, follow the steps below.

  1. Choose the Gauge Type, in this case Radial gauge and configure the Title, Subtitle and Data Label. Choose whether to show animations by setting the toggle button to true.

    data value use case

  2. Define the Value, Units, Minimum, Minimum Target Lower, Target Lower, Target, Target Upper, Maximum Target Upper, Maximum. Also choose whether to show the primary and secondary labels by setting the toggle buttons to true.

    data value use case

  3. If you follow the steps before, the end result should be something similar to the image below.

    data value use case