Building Reusable PX Graphics with Parameters in Niagara

Copy-pasting PX pages for each piece of equipment creates a maintenance nightmare. When you need to update a graphic element, you must change it in dozens of places. Parameterized PX pages solve this by using a single template that dynamically binds to any equipment instance.

The Problem with Copy-Paste Graphics

Traditional approach (100 VAVs = 100 pages):
  /Graphics/AHU-1/VAV-101.px
  /Graphics/AHU-1/VAV-102.px
  /Graphics/AHU-1/VAV-103.px
  ... (97 more identical pages with hardcoded ORDs)

Parameterized approach (100 VAVs = 1 template):
  /Graphics/Templates/VAV_Template.px
  (dynamically resolves to any VAV via URL parameters)

Approach	Pages to maintain	Update effort	Load time
Copy-paste	100	Change all 100	Slower (larger station)
Parameterized	1	Change once	Faster (smaller footprint)

URL Parameter Binding

Basic Parameter Syntax

Pass equipment references via URL query parameters:

https://station/ord/Graphics/Templates/VAV.px?equip=slot:/AHU1/VAV101

In the PX page, bind widgets using the parameter:

Widget ORD binding:
  #{equip}/ZoneTemp
  #{equip}/DamperPosition
  #{equip}/HeatingValve
  #{equip}/OccupiedSetpoint

Navigation Links

Create equipment lists that link to the template:

Floor Plan Links:
  VAV-101 → /ord/Graphics/Templates/VAV.px?equip=slot:/AHU1/VAV101
  VAV-102 → /ord/Graphics/Templates/VAV.px?equip=slot:/AHU1/VAV102
  VAV-103 → /ord/Graphics/Templates/VAV.px?equip=slot:/AHU1/VAV103

Building a Reusable Template

Step 1: Design the Layout

Create the PX page with placeholder bindings:

1. Open PX Editor in Workbench
2. Design the graphic for one equipment type (e.g., VAV)
3. Use relative ORD bindings with parameter references
4. Add a title widget that displays the equipment name dynamically

Step 2: Use Relative ORDs

Avoid absolute ORDs that lock you to a specific instance:

Bad (absolute):
  station:|slot:/AHU1/VAV101/ZoneTemp

Good (parameterized):
  #{equip}/ZoneTemp

Good (relative to page context):
  ./ZoneTemp

Step 3: Add Dynamic Labels

Display the equipment name in the page header:

Title Widget:
  Text: #{equip}
  Or use: #{equip}/displayName

Step 4: Handle Optional Points

Not all equipment instances have the same points. Use conditional visibility:

Widget Visibility Binding:
  Visible When: #{equip}/ReheatValve exists
  Hidden When: point not found

PX Includes for Reusable Components

Break common elements into reusable includes:

Project Structure:
  /Graphics/Includes/
    Header.px          (site name, navigation, clock)
    StatusBar.px       (alarm counts, user info)
    TempGauge.px       (reusable temperature display)
    DamperWidget.px    (reusable damper graphic)
    ValveWidget.px     (reusable valve graphic)

  /Graphics/Templates/
    AHU.px             (uses includes + parameters)
    VAV.px             (uses includes + parameters)
    Boiler.px          (uses includes + parameters)

Creating a PX Include

1. Design the component as a standalone PX file
2. Define input parameters for the include
3. Reference the include from parent pages:

Parent page reference:
  <include href="/Graphics/Includes/TempGauge.px"
           point="#{equip}/ZoneTemp"
           label="Zone Temperature" />

Performance Optimization

Why PX Pages Load Slowly

Cause	Impact	Fix
Too many widgets per page	Long render time	Split into sub-pages
Absolute ORD resolution	Unnecessary network calls	Use relative ORDs
Large background images	Slow download	Compress to <100KB
Excessive animations	CPU load on client	Limit to status indicators
Hundreds of copy-paste pages	Large station database	Switch to templates

Optimization Checklist

• Keep pages under 100 widgets where possible
• Compress background images (PNG to optimized PNG or SVG)
• Use CSS styling instead of image-based styling
• Avoid polling intervals under 5 seconds unless necessary
• Test page load times in a browser (not just Workbench preview)
• Profile with browser DevTools to find slow bindings

Text and Layout Guidelines

Typography for Readability

Element	Size	Weight	Color
Page title	18-24px	Bold	Primary
Section header	14-16px	Semi-bold	Primary
Value labels	11-12px	Normal	Secondary
Point values	14-16px	Bold	Status-dependent
Units	10-11px	Normal	Muted

Color Coding Standards

Status Colors:
  Normal:    Green (#4CAF50)
  Warning:   Amber (#FF9800)
  Alarm:     Red (#F44336)
  Offline:   Gray (#9E9E9E)
  Override:  Blue (#2196F3)

Testing PX Pages

1. Workbench Preview: Quick check of layout and bindings
2. Browser Test: Test actual load performance in Chrome/Edge
3. Mobile Test: Verify responsive behavior on tablets
4. Multiple Instances: Test the template with different equipment to verify all bindings resolve
5. Missing Points: Test with equipment that has fewer points to verify graceful handling

References

• Tridium Niagara PX Editor Documentation
• Niagara Community PX Best Practices Guide
• Tridium Developer Documentation: ORD Resolution

A well-designed template library pays for itself the first time you need to update a graphic element across 100 pieces of equipment and it takes 5 minutes instead of 5 hours.