6.4 Frontend Nodes
      Back to home
      1. Home
      2. 6: Nodes Reference Guide
      3. 6.4 Frontend Nodes

      Multi Value Widget Node Configuration Guide

      The Multi Value Widget Node displays multiple key numeric indicators side-by-side in a single block. It’s ideal for showing related metrics (e.g., totals, KPIs, performance measures) in a clean and compact visual format.

      What Is a Multi Value Widget?

      A multi value widget consolidates multiple metrics into a unified block, eliminating the need for multiple separate widgets. Each value is configured individually and can represent different fields, functions, and formats. This provides a clean, readable interface for monitoring critical information in a structured format.

       Step-by-Step: How to Configure the Multi Value Widget Node

      1. Add the widget

        • Drag the Multi Value Widget Node from the Visualizations panel to the canvas.

      2. Connect the widget to the data source

        • Link the widget to the upstream workflow node that emits the relevant fields for each metric.

        • All configured Input Data Fields must exist in the incoming JSON payload.

      3. Open configuration

        • Double-click the widget to open the settings window.

       General Settings

      Field Requirement Description
      Widget Name* Required Title for the widget (e.g., Daily KPIs).
      Widget Subtitle Optional Description or context below the title.
      Widget Header Optional Show/hide the header bar.
      Show UID / Label Name Optional Display device name or label.
      Calculation Interval* Required Time frame to use for aggregation (e.g., 5).
      Time Units* Required Unit for interval: Seconds, Minutes, Hours, etc.
      Thousands Comma Separator Optional Toggle to show commas in large values (e.g., 1,000).
       

       Add Value Rules

      Each metric is configured using a rule. Click “+ Add Rule” to define a new value.

      Field Requirement Description
      Name* Required Label shown on the widget (e.g., Total Uptime).
      Input Data Field* Required JSON key to extract value from.
      Function* Required Aggregation method: Last, First, Sum, Average, Min, Max.
      Symbol Optional Unit symbol (e.g., %, °C, $).
      Decimal Precision Optional Number of decimal places to display.
      Type* Required Choose: Numeric or Alphanumeric.
      Icon Optional Select an icon from the library to display beside the value.
      Link To Optional Choose a dashboard to redirect users upon clicking.
       

       Conditional Formatting (Ranges)

      For each value, you can define color rules based on value ranges.

      Field Requirement Description
      ⊕ Add Range Optional Define value-based formatting (e.g., green/yellow/red).
      From* Required Lower bound of range (inclusive). Supports dynamic [[rangeX]].
      To* Required Upper bound of range (exclusive). Supports dynamic values.
      Hex Color* Required Color applied when the value is in this range.
       

       Tooltip Configuration

      Field Requirement Description
      Enable Tooltip Optional Toggle to show tooltips on hover.
      Tooltip Text Optional Custom text to appear inside the tooltip popup.
       

       Grouping & Interface

      Field Requirement Description
      Add to Interface* Required Assign the widget to one or more dashboards.
      Select Label Optional Choose a label (e.g., Zone, Machine) to group widgets.
      Grouped Display Mode Optional - No Grouping
      - Group by Label Value
      - Group by Label Name
      Number of Widgets to Display Optional Limit the number of rendered widgets in grouped mode.
       

       Best Practices

      • Use icon + color + label to make each value easily scannable

      • Keep rule names short and meaningful for fast recognition

      • Use conditional color ranges to flag thresholds or anomalies

      • Link high-priority metrics to deep-dive dashboards via Link To

      • Prefer "Last value received" for near-real-time indicators

      ❓ Frequently Asked Questions (FAQ)

      Q: Can I show text values like "Online" or "Offline"?

      A: Yes, use the Alphanumeric type for such use cases.

      Q: What if multiple ranges overlap?

      A: The first matching range from top to bottom will be applied.

      Q: Can I apply different icons or colors per value?

      A: Yes. Each rule supports its own icon, symbol, and conditional color logic.

      Q: Can I use workflow variables for dynamic range thresholds?

      A: Yes — use [[range1]], [[range2]], etc. for dynamic bound references.