Niagara PRO TIPS: PX Includes - Part 2

Niagara PRO TIPS: PX Includes - Part 2

Video Tutorial: Niagara PRO TIPS: PX Includes - Part 2

Overview

This guide covers advanced PX include techniques in Niagara 4, focusing on using value bindings and PX properties to dynamically control PX includes. Part 2 builds on the basics from Part 1 and demonstrates two powerful use cases: dynamic BQL queries and rotating kiosk displays.

Prerequisites: Watch Part 1 first to understand PX include basics and variable ORDs.

Understanding the Core Concept

The Challenge: Animating ORDs

Normal Binding Behaviour:

• Bindings use ORDs to animate properties of widgets

• The ORD itself is the source - it cannot be animated

• This limits flexibility for dynamic content

The Solution:

• Create a PX property in the include file

• Link that property to a widget's ORD

• Animate the PX property using a value binding

• Result: Indirect control of the ORD through the property

Analogy: Instead of directly changing the binding, we change a variable that controls the binding.

Key Concepts

PX Properties

What are PX Properties?

• Custom properties you add to a PX file

• Can be of any type (Ord, String, Boolean, Number, etc.)

• Accessible from PX include widgets

• Can be animated using bindings

Property Linking

What is Linking?

• Connecting one property to another

• Changes to the source property automatically update the target

• Type-safe - properties must match types to link

Value Bindings on PX Includes

Key Capability:

• PX include widgets expose PX properties from the source file

• You can add value bindings to animate these properties

• Use pass-through or conversion bindings depending on types

Use Case 1: Dynamic Audit History Tables

The Problem

Scenario:

• Multiple air handler devices

• Each needs an audit history view

• BQL query must be device-specific

• Don't want to create unique PX views for each device

Traditional Approach:

Bound Table → BQL Query: 
history:AuditHistory|bql:select timestamp, user, action 
where target like 'station:|slot:/Drivers/BacnetNetwork/AH_01%'

Problem: Query is hard-coded to AH_01 - not reusable!

The Solution: PX Include with Dynamic Query

Architecture Overview

Query Helper Component (per device)
    ↓ (B format resolves device name)
Resolved ORD/Query
    ↓ (Value binding)
PX Include Property
    ↓ (Linked to)
Bound Table ORD
    ↓
Dynamic Query per Device!

Step 1: Create the Audit Include PX File

File Setup

1. Navigate to px/includes/ folder

2. Create new PX file: audit_include.px

Configure Canvas

1. Replace scroll pane with canvas pane:

   • Canvas pane as root element

2. Set scaling:

   • Scaling = None

3. Size canvas appropriately:

   • Size to fit bound table widget

Add Bound Table Widget

1. Add a Bound Table widget to the canvas

2. Important: Leave the ORD unconfigured (no binding yet)

Step 2: Create PX Property

What is a PX Property?

A custom property added to the PX file that can be accessed and animated.

How to Create PX Property

1. In PX Editor, click the Plus button (+)

2. Enter property details:

   • Name: queryOrd (or any descriptive name)

   • Type: baja:Ord

   • Value: null (initially unconfigured)

Result: A new property appears in the PX file's properties list.

Step 3: Link PX Property to Bound Table ORD

Understanding Property Linking

Key Concept: You can only link properties of matching types.

Examples:

• ✅ baja:Ord property → widget's ORD property (both Ord types)

• ❌ baja:Ord property → widget's boolean property (type mismatch)

• ❌ String property → Color property (type mismatch)

How to Link

1. Select the Bound Table widget

2. Right-click on the Ord property

3. Choose Link from the context menu

4. Hover over the arrow → Available properties appear

5. Select queryOrd property

Visual Indication:

• Linked property shows pale green shading

• Indicates property is linked, not directly set

Step 4: Create Query Helper Component

Using VComPro Format to Ord Resolver

Component: Format to Ord Resolver (from VComPro module palette)

Purpose:

• Takes B format text with embedded variables

• Resolves variables against itself

• Outputs a complete ORD/query string

Setup per Device

1. Under each air handler device, add component

2. Name it: queryHelper

3. Configure the B format property

B Format Example:

history:AuditHistory|bql:select timestamp, user, operation, target 
where target like 'station:|slot:/Drivers/BacnetNetwork/%parent.name%%' 
and operation='invoked'

Key Elements:

• %parent.name% - Resolves to parent device name (e.g., "AH_01")

• Rest is static BQL query text

• % acts as wildcard in the like clause

Resolution Example:

Input:  .../%parent.name%%...
Parent: AH_01
Output: .../AH_01%...

Step 5: Add PX Include to Audit View

Add the Include Widget

1. Open your audit view PX file (assigned to air handlers)

2. Drag the audit_include.px file from includes folder

3. Drop onto the PX view

Result: PX include widget appears with queryOrd property exposed.

Step 6: Add Value Binding to PX Include

Create the Binding

1. Select the PX Include widget

2. Add a Value Binding

3. Click Component Chooser for the ORD

Select Source ORD

Navigate to:

BacnetNetwork
└── Floor1
    └── AH_01
        └── queryHelper
            └── ord (property)

Select: The ord property on the queryHelper component

Step 7: Animate the queryOrd Property

Setup Animation

1. Right-click on the queryOrd property

2. Choose Animate

3. Select Pass Through binding

Pass Through Binding:

• Gets the actual value from the source (queryHelper.ord)

• Passes it through unchanged

• Sets it as the queryOrd property value

• Which is linked to the Bound Table ORD

• Result: Bound table displays the dynamic query!

Step 8: Make ORD Relative

Why Make it Relative?

The audit view should work for all air handlers, not just AH_01.

Option A: Use Relativize Button

1. Click the Relativize Px button in toolbar

2. Automatically converts absolute ORDs to relative

Option B: Manual Conversion

Change the value binding ORD:

From (Absolute):

station:|slot:/Drivers/BacnetNetwork/Floor1/AH_01/queryHelper/ord

To (Relative):

slot:queryHelper/ord

Syntax Breakdown:

• slot: - Current device (where PX view is assigned)

• queryHelper - Component under current device

• /ord - The ord property on that component

Result: Dynamic Audit View

Final Behavior:

1. AH_01's Audit View:

   • Query Helper resolves to "AH_01"

   • BQL query filters for AH_01 audit records

   • Shows only AH_01's history

2. AH_02's Audit View:

   • Query Helper resolves to "AH_02"

   • BQL query filters for AH_02 audit records

   • Shows only AH_02's history

Benefit: Single relative PX view works for all devices!

Use Case 2: Rotating Kiosk Display

The Problem

Scenario:

• Kiosk display that rotates through multiple PX views

• No human interaction needed

• Timer-based rotation

• Want to display different content on a schedule

Challenge:

• How to dynamically change which PX is displayed?

• Can't use static PX includes (they're fixed)

Solution: Animate the PX include source ORD!

Architecture Overview

Timer/Logic Component
    ↓ (Outputs ORD string/index)
PX Include Property (rotationOrd)
    ↓ (Linked to)
PX Include Widget Source
    ↓
Display rotates through PX views!

Step 1: Create Blank Include PX File

File Setup

1. Navigate to px/includes/ folder

2. Create new PX file: blank_include.px

Configure Canvas

1. Root element: Canvas Pane

2. Size: Match your display canvas size

Add PX Include Widget

1. From Baja UI Palette → Widgets folder

2. Drag PX Include Widget onto canvas

3. Important: Leave source ORD unconfigured initially

Step 2: Create PX Property

Similar to Use Case 1:

1. Click Plus button (+) in PX Editor

2. Create property:

   • Name: rotationOrd

   • Type: baja:Ord

   • Value: null

Step 3: Link Property to PX Include Widget

1. Select the PX Include Widget

2. Right-click on the Ord property (the include source property)

3. Choose Link

4. Select the rotationOrd property

Result: The PX include's source is now controlled by the rotationOrd property.

Step 4: Create Rotation Logic

You have two options for controlling the rotation:

Option A: Wire Sheet Components (Standard Approach)

Components Needed:

1. Multivibrator (from Kick Control)

2. Counter Block

3. Greater Than Block

4. String Select

Configuration:

Multivibrator:

• Period: 10 seconds (adjustable for your needs)

• Output: Toggles every 10 seconds

Counter Block:

• Input: Linked from Multivibrator output

• Behavior: Increments on each toggle

Greater Than Block:

• Input: Counter value

• Threshold: 3 (if you have 4 views, indexes 0-3)

• Output: True when counter > 3

Counter Reset:

• Greater Than output → Counter preset/reset

• Resets counter back to 0 when limit reached

String Select:

• Input: Counter value (index)

• Configure indexes:

  • Index 0: file:/px/view1.px

  • Index 1: file:/px/view2.px

  • Index 2: file:/px/view3.px

  • Index 3: file:/px/view4.px

• Output slot: Current PX file ORD based on index

Result: Output updates to whichever index (0, 1, 2, or 3) is current.

Option B: Program Object (More Flexible)

Component: Custom Program Object

Configuration:

Properties:

pxOrdList (Baja Ord List):

• Add as many PX view ORDs as you want

• Example:

  [0] file:/px/floor_plan.px
  [1] file:/px/equipment_schedule.px
  [2] file:/px/energy_dashboard.px
  [3] file:/px/alarm_summary.px
  

executePeriod:

• Set to 10 seconds (or desired rotation interval)

activeOrd (Output Property):

• Updates with next ORD in list

• Wraps around to start after reaching end

Logic:

Every executePeriod seconds:
  1. Get next ORD from pxOrdList array
  2. Update activeOrd property
  3. Increment index
  4. If end of array, reset to 0

Benefits:

• More flexible - add as many views as needed

• Cleaner logic

• Single period setting

• Easy to reorder views (just rearrange list)

Step 5: Create Kiosk Dashboard View

File Setup

1. Create new PX file: dashboard_kiosk.px

2. Standard structure:

   Scroll Pane
   └── Canvas Pane
   

Add Blank Include

1. Drag blank_include.px from includes folder

2. Drop onto canvas

3. Size: Make it same size as canvas (full screen)

Result: PX include widget with rotationOrd property exposed.

Step 6: Add Value Binding to Control Rotation

Using String Select (Option A)

Add Value Binding:

1. Select the PX Include widget

2. Add Value Binding

3. Use Component Chooser

Select Source:

px/rotation/
└── StringSelect
    └── out (slot)

Animate rotationOrd Property:

1. Right-click rotationOrd property

2. Choose Animate

3. Important: Use Status String to Ord conversion

Why Conversion?

• String Select outputs a String (the file path)

• rotationOrd property is a baja:Ord

• Types don't match - need conversion

• Status String to Ord converts string to ORD type

Using Program Object (Option B)

Add Value Binding:

1. Select the PX Include widget

2. Add Value Binding

3. Use Component Chooser

Select Source:

px/rotation/
└── PxRotationHelper (program object)
    └── activeOrd (property)

Animate rotationOrd Property:

1. Right-click rotationOrd property

2. Choose Animate

3. Use Pass Through binding

Why Pass Through?

• Program Object outputs a baja:Ord

• rotationOrd property is a baja:Ord

• Types match perfectly - use pass through

• No conversion needed

Result: Rotating Kiosk Display

Final Behavior:

1. Timer triggers (every 10 seconds)

2. Index/counter increments

3. String Select or Program Object outputs next PX ORD

4. Value binding passes value to rotationOrd property

5. Linked property updates PX Include source

6. Display changes to next PX view

7. Cycle continues indefinitely

Perfect For:

• Lobby displays

• NOC (Network Operations Center) screens

• Dashboard rotations

• Public information kiosks

• Unattended monitoring displays

Binding Type Reference

When to Use Each Binding Type

Pass Through Binding

Use When:

• Source and target properties are same type

• Examples:

  • baja:Ord → baja:Ord

  • Number → Number

  • Boolean → Boolean

Behavior:

• Gets value from source

• Passes through unchanged

• Sets target property

Examples:

• Program Object activeOrd (Ord) → rotationOrd (Ord)

• Query Helper ord (Ord) → queryOrd (Ord)

Status String to Ord

Use When:

• Source is a String

• Target is a baja:Ord

Behavior:

• Gets string from source

• Converts string to ORD

• Sets target property

Example:

• String Select out (String) → rotationOrd (Ord)

Other Conversion Bindings

Available as needed:

• Number to String

• String to Number

• Boolean to Number

• Enum to String

• And many more...

Rule: Use conversion when types don't match.

Understanding Property Types

Type Matching is Critical

Linking Rules:

✅ Can Link:

• baja:Ord to baja:Ord

• Number to Number

• Boolean to Boolean

• String to String

❌ Cannot Link:

• baja:Ord to Boolean

• String to Number (without conversion)

• Any mismatched types

Visual Indicators

When Linking:

• Right-click property → Link

• Only matching type properties are available

• Incompatible properties are grayed out

When Linked:

• Property shows pale green shading

• Indicates property is controlled by link, not directly set

Complete Workflow Summary

Use Case 1: Dynamic Queries

1. Create include file with bound table (no ORD)
2. Add PX property (type: baja:Ord)
3. Link property to bound table ORD
4. Create Query Helper components per device
5. Add include to view PX
6. Add value binding from Query Helper
7. Animate property with pass through
8. Make ORD relative

Use Case 2: Rotating Display

1. Create blank include with PX include widget
2. Add PX property (type: baja:Ord)
3. Link property to widget source ORD
4. Create rotation logic (wire sheet or program)
5. Add include to kiosk PX
6. Add value binding from logic output
7. Animate property with conversion or pass through

Advanced Concepts Explained

The Redirect Pattern

Normal Widget Behavior:

ORD → Binding → Animates Widget Property

PX Include Pattern:

Source → Value Binding → PX Property → Link → Widget ORD
                         ↑
                    "The Redirect"

Why This Works:

• ORDs normally can't be animated (they ARE the binding)

• PX properties CAN be animated

• Linking creates indirect control

• Result: Dynamic ORD changes!

B Format Syntax

Used in Query Helper:

Format:

%propertyName%

Examples:

• %parent.name% - Parent object's name

• %name% - Current object's name

• %displayName% - Display name

Resolution:
Component evaluates expressions against itself and replaces with values.

Best Practices

PX Property Naming

Do:
✅ Use descriptive names: queryOrd, rotationOrd, sourceOrd
✅ Include "Ord" in name for baja:Ord types
✅ Use camelCase

Don't:
❌ Use generic names: property1, temp
❌ Use confusing names that don't indicate purpose

Component Naming

Do:
✅ Name helper components clearly: queryHelper, rotationHelper
✅ Use consistent naming across devices
✅ Document purpose

Don't:
❌ Leave default names: FormatToOrdResolver1
❌ Use inconsistent naming between devices

Rotation Timing

Consider:

• View complexity (some need more time)

• Information density

• User audience

• Purpose of display

Recommendations:

• Simple views: 5-10 seconds

• Detailed dashboards: 15-30 seconds

• Dense data: 30-60 seconds

Query Optimization

For Audit Queries:

• Use appropriate predicates (where clauses)

• Limit time ranges when possible

• Consider using sampling/rollup for large datasets

• Test performance with realistic data volumes

Troubleshooting

Property Won't Link

Problem: Link option grayed out or property not available

Possible Causes:

• Property types don't match

• PX property not created in source file

• File not saved after adding property

Solution:

• Verify types match exactly

• Check PX property exists in include file

• Save and reload files

Binding Not Updating

Problem: PX include doesn't change when expected

Possible Causes:

• Wrong binding type (need conversion?)

• Source ORD not updating

• Property not linked correctly

Solution:

• Check binding type (pass through vs. conversion)

• Verify source is actually changing values

• Re-link property to confirm connection

Query Not Working

Problem: Bound table shows no data or wrong data

Possible Causes:

• B format syntax error

• Query Helper not configured correctly

• Property not animating

Solution:

• Test B format string manually

• Verify Query Helper ord property has correct value

• Check value binding is active

Rotation Stops

Problem: Kiosk display stops rotating

Possible Causes:

• Timer/logic stopped

• ORD path invalid

• PX file moved or deleted

Solution:

• Check multivibrator or program object is running

• Verify all PX file ORDs are valid

• Confirm files exist at specified paths

Key Takeaways

✅ PX properties enable indirect control of widget ORDs
✅ Linking connects properties of matching types
✅ Value bindings on PX includes animate PX properties
✅ Pass through for same types, conversions for different types
✅ B format enables dynamic string construction
✅ Query Helper components create device-specific queries
✅ Rotation logic enables kiosk displays
✅ Type matching is critical for linking and binding
✅ This pattern solves problems that normal bindings can't handle

Comparison: Part 1 vs Part 2

Part 1: Variable ORDs

Purpose: Create reusable templates for repeated elements
Method:$(variableName) syntax in include file
Use:Drag components to automatically bind variables
Best For:Floor plans, equipment schedules, repeated UI elements

Part 2: PX Properties & Value Bindings

Purpose: Dynamically control include content at runtime
Method:PX properties linked to widget ORDs, animated via bindings
Use:Runtime changes based on logic or data
Best For:Dynamic queries, rotating displays, conditional content

Real-World Applications

Dynamic Audit Views

• Device-specific audit history

• Equipment-specific event logs

• User-specific activity tracking

Rotating Kiosks

• Lobby information displays

• NOC monitoring rotations

• Public dashboard cycling

• Multi-view status boards

Conditional Content

• Show different include based on mode

• Switch views based on alarms

• Display context-sensitive help

• Dynamic equipment detail selection

Dynamic Data Tables

• History queries per device

• BQL queries with parameters

• Device-specific trend displays

Quick Reference

Creating PX Property

1. PX Editor → Click + button
2. Name: queryOrd (or similar)
3. Type: baja:Ord
4. Value: null

Linking Property to Widget ORD

1. Right-click widget ORD property
2. Choose "Link"
3. Select PX property
4. Property shows pale green

Value Binding on PX Include

1. Select PX include widget
2. Add Value Binding
3. Choose source ORD
4. Right-click PX property
5. Animate → Pass Through or Conversion

Binding Type Selection

Same Types → Pass Through
String → Ord → Status String to Ord
Different Types → Use appropriate conversion

Presenter: James Johnson
Series:Niagara PRO TIPS
Topic:PX Includes - Part 2
Part:2 of 2
Key Concept:Using PX properties and value bindings to dynamically control PX includes for advanced scenarios like dynamic queries and rotating kiosk displays

YouTube: http://www.youtube.com/@TridiumInc