Problem

Want modern, auto-responsive graphics without hand-coding each breakpoint. Need something that looks professional on all screen sizes.

Solution

1. Introduction to Reflow

• Reflow is Niagara's newer graphics engine designed for modern, responsive UIs
• Automatically generates mobile-friendly layouts from semantic data (Haystack tags)
• Supports equipment graphics, floorplans, and custom dashboards

2. Set Up Reflow Graphics

• Define equipment or floorplan in your Niagara database using standardized tags (Haystack)
• Use Reflow's visual editor to build layouts (no coding required)
• Reflow auto-scales graphics based on screen size

3. Equipment Graphics with Reflow

• Bind equipment components (AHU, VAV, pump) to Reflow
• Specify what data points to display (temp, flow, status)
• Reflow generates a professional control interface automatically
• Mobile, tablet, and desktop all render correctly

4. Floorplan Integration

• Import building floorplan image
• Place equipment overlays on the floorplan
• Click overlays to drill down into equipment controls
• Fully responsive and touch-friendly

5. Custom Dashboards

• Combine multiple equipment views into dashboard
• Add KPIs, alarms, trends
• All components auto-respond to screen size

Advantages over Manual PX

• No manual pixel positioning—everything relative
• Professional, modern appearance out-of-box
• Much faster development than hand-coded PX
• Scales across multiple screen sizes automatically