Page History

Using the Displays List

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.

1. Navigate to Displays → List
.
3. Click
the Image Removed button at the top to open the 'New Display' popup window.
4. Define the Name and Description of the display.
5. Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
6. 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:
   1. The Canvas option allows for manual positioning and sizing of elements.
   2. 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.
7. Finally, press the OK button to finish the display creation and close the popup window.

To create a display on Draw:

1. Navigate to Displays → Draw.
2. Click the Image Removed button at the top to open the 'New Display' popup window.
3. 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

1. Add New button
2. Configure in dialog:
   • Name - Display identifier
   • Description - Purpose documentation
   • Rendering Engine - Target platform
   • Template - Starting layout
3. 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

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

Lock Management

Lock States

• Unlocked - Available for edit
• Locked - Being edited
• LockOwner - Current editor

Managing Locks

csharp

// Check lock status
bool isLocked = Display.IsLocked;
string owner = Display.LockOwner;

// Force unlock (admin)
Display.ForceUnlock();

Metadata Tracking

In this section...

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