Page History

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:

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

1. Navigate to Displays → List
2. Click + Add New button
3. Configure in dialog:
   • Name - Display identifier
   • Description - Purpose documentation
   • Rendering Engine - Target platform
   • Template - Starting layout from library
4. 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

These affect Rich Client development mode menus only.

Creating Displays

From Display List

1. Navigate to Displays → List
2. Click Add New button
3. Configure in dialog:
   • Name - Display identifier
   • Description - Purpose documentation
   • Rendering Engine - Target platform
   • Template - Starting layout
4. Click OK

From Draw Editor

1. Navigate to Displays → Draw
2. Click New Document button
3. Follow same configuration
4. Opens directly in editor

Rendering Engines

Portable Benefits

• Single design for all platforms
• Automatic technology conversion
• Consistent user experience
• Reduced development time

Display Modes

Configure in Draw → Display Settings

Display Templates

Canvas

• Manual element positioning
• Pixel-perfect layouts
• Fixed coordinates
• Full control

Dashboard

• Auto-positioning elements
• Responsive regions
• Adaptive sizing
• Grid-based layout

Resize Options

Set in Display Settings → OnResize

Display Properties

Core Properties

Security Settings

Build Information

Engine Types

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

To fix errors:

1. Check BuildMessage column for details
2. Open in Draw → CodeBehind tab
3. Review expressions in visual elements

Security Settings

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

View Modes

Grid View

• Tabular display list
• Sortable columns
• Quick filtering
• Bulk operations

Card View

• Visual preview
• Thumbnail display
• Quick navigation
• Grouped layout

Best Practices

1. Use Consistent Naming - Include area/function
2. Choose Right Engine - Match deployment needs
3. Select Appropriate Mode - Page vs Popup vs Dialog
4. Configure Security - Control access properly
5. Document Purpose - Clear descriptions
6. Organize Categories - Logical grouping
7. Test All Platforms - Verify rendering

Performance Tips

Engine Selection

• Use Portable for most displays
• WPF Only for complex graphics
• HTML5 Only for web features

Template Choice

• Canvas for fixed layouts
• Dashboard for adaptive UI
• Consider screen variations

Troubleshooting

Build Errors:

• Check BuildMessage column
• Review code behind
• Verify references
• Test in Draw editor

Display Not Opening:

• Check RunSecurity settings
• Verify build status
• Review error logs
• Test permissions

Resize Issues:

• Review OnResize setting
• Test different modes
• Check element anchoring
• Verify responsive settings

Wrong Platform:

• Confirm Engine setting
• Check client type
• Review portable limitations
• Test on target platform

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 - Current 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

1. Start with MainPage - Use for initial development
2. Use Templates - Consistent starting points
3. Name Meaningfully - Include area/function
4. Set Navigate Flag - Control navigation visibility
5. Monitor Build Status - Fix errors promptly
6. Use Portable Engine - Maximize compatibility
7. 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

All internal references use ID, making renaming safe at any time.

In this section...