Manage the list of available displays.
Reference → Modules → Displays → UI → Client Settings | Draw | Images | Layouts | List | Localization | Symbols | Themes | Units Conversion
Displays List (Reference) provides a centralized interface for managing all displays in the solution, with DataGrid and CardView options for creating, organizing, and accessing display configurations.
Display List provides:
- Centralized display management
- Multiple view modes (Grid/Card)
- Display creation wizard
- Quick access to editor
- Build status monitoring
- Security configuration
Access via Displays → List for complete display inventory and management.
List Interface
View Modes
- Grid View - Tabular display with sortable columns
- Card View - Visual preview thumbnails
- Toggle using buttons in top-right toolbar
Navigation Bar
Use the breadcrumb navigation in top-right to quickly switch between:
- List (current)
- Draw
- Layouts
- Client Settings
No need to use left-side tree navigation when working within Displays section.
Navigating to Draw Editor
Multiple methods to open a display for editing:
| Method | Action | Notes |
|---|---|---|
| Double-click Preview | Click preview image | Safest - always opens editor |
| Pen Icon | Select row, click pen in toolbar | Opens selected display |
| Draw Shortcut | Top toolbar Draw button | Opens with selected display |
| Double-click Name/Description | Click editable field | ?? Enters cell edit mode, not navigation |
Solution Explorer Toggle
When Draw opens:
- Left panel auto-collapses for more drawing space
- Click ? (three bars) icon to expand/collapse Solution Explorer
- Useful when frequently switching between List and Draw
Creating Displays
From Display List
- Navigate to Displays → List
- Click + Add New button
- Configure in dialog:
- Name - Display identifier
- Description - Purpose documentation
- Rendering Engine - Target platform
- Template - Starting layout from library
- Click OK
Template Library
- Use predefined templates for consistency
- Canvas or Dashboard base types
- Industry-specific starting points
Special Pages
MainPage (ID 0)
- Cannot be deleted - Always exists
- Solution Center preview - Shows as project thumbnail
- Best practices:
- Small apps: Use as main workspace
- Large apps: Create separate "Main" workspace, use MainPage for preview only
Predefined Pages
| Page | Purpose | Called By | Notes |
|---|---|---|---|
| SelectPage | Display picker | File→Open (dev mode) | Customizable |
| LogonPage | Login screen | Security menu (dev mode) | Can be deleted |
These affect Rich Client development mode menus only.
Display Properties
Core Properties
| Property | Description | Where to Edit |
|---|---|---|
| Name | Display identifier | List (direct edit) |
| Engine | Rendering platform | List (dropdown) |
| PanelType | Canvas or Dashboard | Creation only |
| Mode | Page/Popup/Dialog | Draw → Display Settings |
| Size | Display dimensions | Draw → Display Settings |
| OnResize | Resize behavior of the display as the client area changes. One of: StretchFill (fills the viewport, may distort — backgrounds and decorative full-bleed art only); StretchUniform (scales preserving aspect ratio — process diagrams, P&IDs, mimics); Responsive (elements reposition and resize individually — data displays, forms, and docked Header / Footer / Menu regions, paired with LockedWidth / LockedHeight); ResizeChildren (all elements scale proportionally as one unit — viewer and text pages); NoAction (fixed size, may clip — popups, dialogs, forms). See Responsive Design and RESS for the full decision tree and worked examples. | Draw → Display Settings |
| LockedWidth | Boolean, default false. Pins a docked Menu / SubMenu rail to its native pixel Width under OnResize=Responsive, so the rail keeps its design Width instead of stretching horizontally with the Layout. Applies to the display assigned to the corresponding Layout region. | Draw → Display Settings |
| LockedHeight | Boolean, default false. Pins a docked Header / Footer band to its native pixel Height under OnResize=Responsive, so the band keeps its design thickness instead of stretching vertically with the Layout. Applies to the display assigned to the corresponding Layout region. | Draw → Display Settings |
Note: the per-element align locks (IsWidthAlign / IsHeightAlign / IsLeftAlign / IsTopAlign) are properties of individual drawing elements, not DisplaysList row properties. They are set per element in the Properties panel and are honored only when the display's OnResize is Responsive — see Display Settings Reference and the control reference pages.
Engine Types
| Engine | Target | Auto-Promotion |
|---|---|---|
| Portable | WPF & HTML5 | Default target |
| WPF Only | Windows clients | Can auto-upgrade to Portable |
| HTML5 Only | Web browsers | Requires JavaScript/web features |
System automatically promotes WPF to Portable when compatible during upgrades.
Navigation Flag
- Navigate checkbox - Used by DisplaySelection control
- Filters which displays appear in navigation lists
- Can be used in custom navigation logic
Build Status
What Gets Compiled
- CodeBehind scripts
- Expressions in graphical objects
- Dynamic bindings
Status Indicators
| Status | Meaning | Action |
|---|---|---|
| Success | No errors | Ready to run |
| Errors | Compilation failed | Check BuildMessage |
| Warning | Non-critical issues | Review messages |
To fix errors:
- Check BuildMessage column for details
- Open in Draw → CodeBehind tab
- Review expressions in visual elements
Security Settings
| Property | Controls | Default |
|---|---|---|
| EditSecurity | Who can modify in Designer | Engineering |
| RunSecurity | Who can view in Runtime | All Users |
Organization
Categories
Group displays logically:
- Process Areas
- Equipment Types
- User Roles
- Functional Groups
Levels
Hierarchy indication:
- Top Level - Main screens
- Mid Level - Area displays
- Detail Level - Equipment views
Important Behaviors
Safe Renaming
- All references use internal ID, not name
- Rename displays anytime without breaking configuration
- Runtime continues working with new names
Development Tips
- Use WPF Rich Client for testing even when targeting web (faster)
- Development mode includes File/Security menus
- WebAssembly ensures consistent behavior across platforms
Lock Management
Lock States
- Unlocked - Available for edit
- Locked - Being edited by user
- LockOwner - Shows current editor
Managing Locks
csharp
// Check lock status
bool isLocked = Display.IsLocked;
string owner = Display.LockOwner;
// Force unlock (admin only)
Display.ForceUnlock();Best Practices
- Start with MainPage - Use for initial development
- Use Templates - Consistent starting points
- Name Meaningfully - Include area/function
- Set Navigate Flag - Control navigation visibility
- Monitor Build Status - Fix errors promptly
- Use Portable Engine - Maximize compatibility
- Configure Security - Set appropriate access
Troubleshooting
Build Errors:
- Check BuildMessage column for specifics
- Open in Draw editor
- Review CodeBehind tab
- Check expressions in elements
Display Not Opening:
- Verify RunSecurity permissions
- Check build status is Success
- Review client type compatibility
- Test with different user account
Navigation Issues:
- Use Preview column for double-click
- Check if display is locked
- Verify Navigate flag if using DisplaySelection
- Try pen icon or Draw shortcut
Metadata Tracking
| Field | Purpose | Auto-Updated |
|---|---|---|
| ID | Internal reference | Yes |
| VersionID | Change tracking | Yes |
| DateCreated | Creation audit | Yes |
| DateModified | Last change | Yes |
All internal references use ID, making renaming safe at any time.
In this section...