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 DataGrid List or CardView for centralized interface for managing all displays in your the solution. From that interface, you can also create new displays, open displays for editing within the platform, or open new windows with the Draw editor, with DataGrid and CardView options for creating, organizing, and accessing display configurations.
Display List provides
features for users to view and access multiple displays, supporting the organization of different displays and thus simplifying interface management.Using the Displays List
:
- Centralized display management
- Multiple view modes (Grid/Card)
- Display creation wizard
- Quick access to editor
- Build status monitoring
- Security configuration
Table of Contents maxLevel 2 minLevel 2 indent 10px exclude Steps style none
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
Creating New Displays
You can create a display in two sections of the software: Displays → List and Displays → Draw. These interfaces enable the creation and management of new displays.
To create a display on List:- Navigate to Displays → List .
- Click the
- Define the Name and Description of the display.
- Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
- Choose a Template for the display. If you do not select a template, a blank page will be created by default. Two types of templates must be highlighted:
- The Canvas option allows for manual positioning and sizing of elements.
- The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments.
- Finally, press the OK button to finish the display creation and close the popup window.
button at the top to open the 'New Display' popup window.To create a display on Draw:
- Navigate to Displays → Draw.
- Click the
button at the top to open the 'New Display' popup window. - Follow the same procedure as for Displays → List.
For more information on display creation on Draw, see Drawing User Interface (Consolidate with Parent).
The Drawing the User Interface section of the Users covers the information about the drawing tools and CodeBehind editing.
Displays Configuration Key Fields
- + 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 | Draw → Display Settings |
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...
| Page Tree | ||
|---|---|---|
|
Engine
The Engine field will specify if the display is intended for WPF, HTML5 or Portable.
When selecting WPF or HTML5, the design from Draw and CodeBehind will compile specifically for your selection. The Engine can be changed later on the Displays → List table.
The Portable option allows the automatic conversion between WPF and HTML5 technologies. The user does not need to create two different kinds of screens for Windows and Web Clients. Use the Portable option for the rendering engine to create the displays, and will automatically create them in both HTML5 and WPF.
Mode
Mode is a read-only column. To modify it, go to Draw and change it in the Drawing Properties sidebar on the right, inside the Display Settings section.
Pages, Popups, and Dialogs are different display modes. They share some similarities, but each has a specific behavior. They are commonly used in application development to build intuitive and dynamic user interfaces.
Page
A Page is a display that always remains open or opens, replacing the previous display.
Popup
A Popup is a display that opens over the displays, remaining on top, but the User can still interact with the other pages (it's called a non-modal interface). A variation, available only for WPF, is the PopupWindow, which opens a completely independent Window, with its own border, to show the display.
Dialog
A Dialog is a display that opens on top of all other displays, and stays open blocking the use of other displays until the User closes it (It is called a Modal interface).
PopupWindow
A PopupWindow opens a completely independent Window, with its own border, to show the display.
On Resize options
Under Display Settings, you can specify the settings for resizing an image or element to fit a designated display area.
StretchFill
This option stretches the image to fill the display area, potentially altering its aspect ratio. Distortion can occur if the display area's proportions differ from the image's original aspect ratio.
StretchUniform
This option will scale the image to fit the display area while maintaining its aspect ratio. If the aspect ratios don't match, the image will be scaled until it touches the edges of the container from within, potentially leaving some space in the display area.
Responsive
This option allows the image or element to adjust its size in response to the size of the display area. It's less clear without specific context, but typically, 'responsive' means that the element will scale sensibly to different screen sizes, often maintaining its aspect ratio without distortion.
NoAction
This option displays the image in its original size, regardless of the display area's size, which might lead to cropping or overflow if the image is larger than the display area.
Display List Columns
List Properties
ID
A unique identifier for the display.
VersionID
The version identifier, indicating the specific iteration or release of the display.
Name
The name assigned to the display for identification and reference.
Engine
The rendering engine used for the display, such as WPF, HTML5, or both, with the Portable option.
PanelType
PanelType organizes display elements within an interface. It structures content to affect layout and design. The options are:
Dashboards resize and reposition elements automatically, dividing the display into predefined regions.
Canvas allows for the manual positioning and sizing of elements.
Mode
Read-only. Shows whether the display is used as a Page, a Popup, or as a Dialog. This is defined on Drawing Properties / Display Settings.
Preview
Read-only. Uses the MainPage display as the thumbnail.
Navigate
A function to navigate or link to other displays or elements within the application.
Size
Read-only. The size of the display defined in Draw.
Length
The length property refers to duration or a specific dimensional measurement.
OnResize
Read-only. Actions taken when the display is resized (Stretch Fill, Stretch Uniform, Responsive or NoAction). This is defined on Drawing Properties / Display Settings.
EditSecurity
Select which Security Permissions groups have access to edit this display.
RunSecurity
Select which Security Permissions groups have access to this display in runtime.
BuildStatus
Read-only. The current status of the display's build process, such as 'Complete', 'In Progress', etc.
BuildErrors
Read-only. Any errors encountered during the build process of the display.
BuildMessage
Read-only. Messages or notes associated with the build process of the display.
Level
The level or tier of the display, possibly indicating its complexity or hierarchy in the system.
Category
The category assigned to the display, used for classification and organization.
LockState
Read-only. The current lock state of the display, indicating if it's editable or locked for modifications.
LockOwner
Read-only. The user or entity that currently has the display locked, if applicable.
DateCreated
Read-only. The date when the display was initially created.
DateModified
Read-only. The date when the display was last modified.
Description