The Conditional Value Widget Node displays a single numeric value and dynamically adjusts its appearance based on defined rules. It is ideal for highlighting key metrics, performance thresholds, and risk states with color, icon, and trend feedback.
What Is a Conditional Value?
A Conditional Value widget presents a real-time numeric value and changes its visual output — such as color, icon, and background — depending on whether the value falls within predefined ranges. This makes it highly effective for alerting, KPI tracking, and highlighting critical operational states at a glance.
Step-by-Step: How to Configure the Conditional Value Widget Node
-
Add the widget
-
Drag the Conditional Value Widget Node from the Visualizations panel to your canvas.
-
-
Connect the widget to the data source
-
Connect the widget to an upstream node that provides the numeric field used for evaluation.
-
The value field must match the JSON key to display exactly.
-
-
Open configuration
-
Double-click the widget to open the configuration window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Main title for the widget (e.g., Status Indicator). |
| Widget Subtitle | Optional | Secondary label displayed below the title. |
| Widget Header | Optional | Show or hide the top header. |
| Show UID / Label Name | Optional | Toggle to display the device ID or label name. |
| JSON Key to Display* | Required | Payload key for the numeric value. |
| Calculation | Optional | Select how to retrieve the value (default: Last value received). |
| Show Last Value* | Optional | Select how the last value is handled (e.g., Chronologically). |
Visual Styling
| Field | Requirement | Description |
|---|---|---|
| Background Color | Optional | Set background color using hex code. |
| Transparency | Optional | Adjust background transparency (e.g., 0%, 50%). |
| Select Icon | Optional | Display a contextual icon. |
| Trend Indicator | Optional | Show directional indicator (e.g., up/down arrows). |
| Show Additional Text | Optional | Show extra label in portrait layout only. |
| Unit Symbol | Optional | Add a unit (e.g., °C, %). |
| Decimal Places | Optional | Round displayed value. |
| Thousands Comma Separator | Optional | Format large values with commas (e.g., 1,000). |
Condition Logic
This section allows you to create visual rules based on numeric ranges.
| Field | Requirement | Description |
|---|---|---|
| Condition Type* | Required | Choose how to evaluate values (e.g., Numeric Range). |
| Range Min / Max* | Required | Define the lower and upper bounds for each rule. |
| Hex Color* | Required | Background/text/icon color if value falls within this range. |
| Icon | Optional | Icon to display when range is active. |
Add multiple ranges to support more complex conditions.
Interface & Navigation
| Field | Requirement | Description |
|---|---|---|
| Interface to Link To | Optional | Redirect to another dashboard interface when clicked. |
| Add to Interface* | Required | Choose which dashboards this widget appears on. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Required (if grouped) | Filter or group widget by device label. |
| Grouped Display Mode* | Required | Select: - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Cap the number of widgets rendered when grouped. |
Use Cases
-
Display current status of sensors, production, or KPIs
-
Highlight risk or alert levels with red/yellow/green logic
-
Show performance metrics with trend indicators
-
Link value cards to deep-dive dashboards for exploration
Best Practices
-
Define clear numeric thresholds and use color to communicate intent
-
Enable trend indicators for insight into change direction
-
Use transparent backgrounds for subtle placement over images or maps
-
Group by labels to monitor entire fleets or zones efficiently
-
Leverage interface linking to enable contextual navigation
Frequently Asked Questions (FAQ)
Q: Can I display text instead of a number?
A: No — this widget is built for numeric display only. Use a different widget (e.g., status block) for labels or text conditions.
Q: Can I apply multiple icons across different ranges?
A: Yes, you can assign a unique icon per value range.
Q: What happens if a value doesn’t match any range?
A: It may fall back to a default appearance or be hidden, depending on configuration.
Q: Is this widget interactive?
A: Yes, you can enable interface linking to allow navigation upon click.