Page History

Organize displays into responsive layouts.

Displays Layouts (Reference) the Operator UI's structural framework, organizing displays into regions that persist during navigation while the Content area changes with each page.

Layout provide:

Consistent navigation structure
Platform-adaptive regions
Header/Menu precedence control
Automatic display fallback
Multi-platform optimization

Table of Contents

maxLevel	2
minLevel	2
indent	10px
exclude	Steps
style	none

Layout Workspace

The Layout configuration interface has four main areas:

Layout List
Panel Configuration
Page Assignment Table
Platform Previews

HTML

<table class="relative-table" style="width: 95%; border: 1px solid #ccc; border-collapse: collapse;">
  <colgroup>
    <col style="width: 18%;" />
    <col style="width: 41%;" />
    <col style="width: 41%;" />
  </colgroup>
  <tbody>
    <tr>
      <!-- (1) Layout List -->
      <td rowspan="6" style="border:1px solid #ccc; vertical-align: top; padding:6px;">
        <p><strong>(1) Layout List</strong></p>
        <p>Search, +, ×, sort</p>
        <p>Startup<br/>Dashboard<br/>Layout1<br/>Layout2<br/>...</p>
      </td>

      <!-- (2) Panel Configuration -->
      <td colspan="2" style="border:1px solid #ccc; padding:6px;">
        <p><strong>(2) Panel Configuration</strong><br/><em>Panel Regions</em></p>
        <table style="width:100%; border:1px solid #ccc; border-collapse: collapse; text-align:center;">
          <tr>
            <td colspan="3" style="border:1px solid #ccc; background:#f4f5f7;">Header</td>
            <td style="border:1px solid #ccc;">Header Edit: <strong>Stretch</strong> / Left / Center / Right</td>
          </tr>
          <tr>
            <td rowspan="2" style="border:1px solid #ccc; background:#f4f5f7;">Menu</td>
            <td style="border:1px solid #ccc; background:#f4f5f7;">Content</td>
            <td style="border:1px solid #ccc; background:#f4f5f7;">Submenu</td>
            <td></td>
          </tr>
          <tr>
            <td colspan="2" style="border:1px solid #ccc; background:#f4f5f7;">Footer</td>
            <td>Footer Edit: Stretch / Left / Center / <strong>Right</strong></td>
          </tr>
        </table>
      </td>
    </tr>

    <!-- Spacer Row -->
    <tr>
      <td colspan="2" style="border:none; height:15px;"></td>
    </tr>

    <!-- (3) Page Assignment Table -->
    <tr>
      <td colspan="2" style="border:1px solid #ccc; padding:6px;">
        <p><strong>(3) Page Assignment Table</strong></p>
        <table style="width:100%; border:1px solid #ccc; border-collapse: collapse;">
          <tr style="background:#f4f5f7;">
            <th style="border:1px solid #ccc;">Region</th>
            <th style="border:1px solid #ccc;">Page</th>
            <th style="border:1px solid #ccc;">Mobile</th>
            <th style="border:1px solid #ccc;">Tablet</th>
            <th style="border:1px solid #ccc;">Description</th>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Header</td>
            <td style="border:1px solid #ccc;">Header</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Header panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Footer</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Footer panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Menu</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Menu panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Submenu</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Submenu panel</td>
          </tr>
          <tr>
            <td style="border:1px solid #ccc;">Content</td>
            <td style="border:1px solid #ccc;">MainPage</td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;"></td>
            <td style="border:1px solid #ccc;">Display for the Content panel</td>
          </tr>
        </table>
      </td>
    </tr>

    <!-- (4) Platform Previews (merged header) -->
    <tr>
      <td colspan="2" style="border:1px solid #ccc; padding:6px; text-align:center; background:#f4f5f7;">
        <strong>(4) Platform Previews</strong>
      </td>
    </tr>

    <!-- Preview Rows with labeled preview areas -->
    <tr>
      <td style="border:1px solid #ccc; padding:10px; text-align:center; background:#fafafa;">
        <strong>Desktop Web Preview</strong>
        <div style="margin-top:6px; border:1px dashed #bbb; padding:10px;">Preview area</div>
      </td>
      <td style="border:1px solid #ccc; padding:10px; text-align:center; background:#fafafa;">
        <strong>Desktop Windows WPF</strong>
        <div style="margin-top:6px; border:1px dashed #bbb; padding:10px;">Preview area</div>
      </td>
    </tr>
    <tr>
      <td style="border:1px solid #ccc; padding:10px; text-align:center; background:#fafafa;">
        <strong>Mobile Preview</strong>
        <div style="margin-top:6px; border:1px dashed #bbb; padding:10px;">Preview area</div>
      </td>
      <td style="border:1px solid #ccc; padding:10px; text-align:center; background:#fafafa;">
        <strong>Tablet Preview</strong>
        <div style="margin-top:6px; border:1px dashed #bbb; padding:10px;">Preview area</div>
      </td>
    </tr>
  </tbody>
</table>

Configuration Workflow

Step 1: Manage Layouts

Action	Method	Result
Add Layout	Click + button	Create new layout
Delete Layout	Select and click ×	Remove selected
Select Layout	Click layout name	Load for editing
Search	Use search box	Filter list
Sort	Click sort button	Reorder list

Step 2: Configure Selected Layout

2.1 Organize Regions

Configure which panels are active and their behavior:

Region	Enable/Disable	Alignment Options
Header	Always enabled	Stretch/Left/Center/Right
Menu	Optional	Fixed left position
Content	Always enabled	Auto-size center
Submenu	Optional	Fixed right position
Footer	Optional	Stretch/Left/Center/Right

2.2 Define Pages

Assign pages to each active region:

Assignment Rules	Behavior
Page column filled	Display assigned page
Mobile/Tablet empty	Inherit from Page column
Mobile/Tablet with name	Platform-specific override
Any invalid name	Hide region on that platform

2.3 Preview Results

Check layout appearance across platforms:

Desktop Web (HTML5/WebAssembly)
Desktop Windows (WPF)
Mobile (Portrait phone)
Tablet (Landscape/larger screen)

Platform Adaptation Examples

Desktop Configuration	Mobile Result	Tablet Result
All 5 regions active	Header + Content only	Header + Menu + Content
Complex menu	Hamburger menu	Simplified menu
Footer with status	Hidden footer	Minimal footer
Wide submenu	Hidden	Narrow tools panel

Panel Regions

Region	Purpose	Position	Dynamic
Header	Logo, title, main navigation	Top	No
Menu	Primary navigation links	Left	Optional splitter
Content	Main display area	Center	Yes
Submenu	Secondary navigation	Right	Optional
Footer	Copyright, links, info	Bottom	No

Regions Details

Header

Position: Top of application
Purpose: Branding, main navigation, user info
Alignment: Controls interaction with Menu/Submenu
- Stretch: Full width above side panels
- Center: Centered with side panels extending up
- Left/Right: Aligned with Menu/Submenu priority

Position: Left side
Purpose: Primary navigation
Options: Can include resizer for width adjustment
Mobile: Often becomes hamburger menu

Content

Position: Center area
Purpose: Main workspace that changes on navigation
Behavior: Only region that switches pages during runtime

Submenu

Position: Right side
Purpose: Secondary navigation, tools, properties
Mobile: Often hidden or moved to bottom

Position: Bottom of application
Purpose: Status bar, copyright, auxiliary info
Mobile: Frequently hidden to save space

Layout Design Considerations

Common Layout Patterns

Standard Application
Header: Navigation Bar Menu: Equipment List (with splitter) Content: Main Display (changes) Footer: Status Bar

Kiosk Mode
Header: Company Logo (center) Content: Full Screen Display Footer: Hidden (_)

Dashboard
Header: Title Only Menu: `Hidden (_)` Content: Dashboard Display Submenu: Quick Actions Footer: Timestamp

Customization Example

Header/Footer Alignment

Option	Behavior	Use Case
Stretch	Full width	Standard header
Left	Align left	Logo placement
Center	Center content	Title focus
Right	Align right	User controls

Menu Configuration

Optional splitter for resizing
Adjusts to header/footer
Can be hidden on mobile

Mobile Considerations

Responsive Design

Simplify navigation for touch
Hide non-essential regions
Optimize for portrait orientation
Test gesture navigation

Region Removal

Desktop Menu: NavigationPanel

Mobile Menu: _ (removed) or replaced

Layouts in Runtime

Startup Layout

Set default at Displays → Client Settings:

Initial Execution Conditions
  ??? Layout: [Select Layout]

Runtime Changes

Change entire layout:

csharp

@Client.OpenLayout("AlternateLayout");

Change content only:

csharp

@Client.OpenDisplay("NewDisplay");
// Or
@Display.NewDisplay.Open();

Layout Switching Scenarios

User Role Based

csharp

public void SetLayoutByRole()

{
    string role = @Security.CurrentUser.Role;
    string layout = role switch
    {
        "Operator" => "OperatorLayout",
        "Engineer" => "EngineeringLayout",
        "Manager" => "ManagerLayout",
        _ => "DefaultLayout"
    };
    @Client.OpenLayout(layout);
}

Time Based

csharp

public void SetDayNightLayout()

{
    bool isNight = DateTime.Now.Hour >= 18 || 
                   DateTime.Now.Hour < 6;
    @Client.OpenLayout(isNight ? "NightLayout" : "DayLayout");
}

Best Practices Checklist

Start Simple - Begin with Header + Content, add regions as needed
Mobile First - Design for smallest screen, enhance for larger
Name Clearly - Use descriptive names for layouts and pages
Keep Headers Simple - Essential navigation only
Use Splitters Wisely - Only where needed
Document Purpose - Fill description fields for maintenance
Test All Platforms - Use preview panels before deployment
Version Control - Track layout changes

Troubleshooting

Layout not loading:

Verify layout exists
Check display assignments
Review platform compatibility
Test startup settings

Region not showing:

Confirm display mapped
Check visibility settings
Verify display engine
Test without underscore

Mobile layout issues:

Review mobile mappings
Check responsive settings
Test orientation changes
Verify touch targets

In this section...

Page Tree

root	@parent

Overview

A layout defines the application window's size and arranges the display components in the runtime application. When planning your displays, decide if you need elements like a menu bar or toolbar consistently appearing at the top of your application window. Sometimes, a single layout suffices for managing the information in the application.

In the layout, the Content display is the one that changes upon an open display command. For instance, many new solutions incorporate a default 'Startup' layout. In this layout, the 'MainPage' display, listed in the Content area, is what changes when the application receives a command to open a new display, while the header and menu areas remain unchanged.

On this page:

Table of Contents

maxLevel	3
style	none

Image Removed

Configuring Layouts

Layouts are pre-defined structures that organize displays frames on a screen, positioning elements like the header, menu, content section, submenu, and footer. They organize information on pages and act as a blueprint for interfaces. You can select an existing Layout to edit or create a new one.

Creating New Layouts

To create a new Layout:

Navigate to Displays → Layouts.
Click the Image Removed button on the data grid control to open the 'New Layout' popup window.
Define the name for the layout and a description.
Press Ok button to finish the layout creation and close the popup window.

Customizing Layouts Panel

On Displays → Layouts, after creating a new layout, you can customize it by defining the display objects for layout regions. The Layout Panel organizes information into displays by configuring regions such as Header, Menu, Content, Submenu, and Footer.

The displayed objects on each Layout are selected from the data grid below the panel. Each selected object is defined on the Layout Region configuration items and its respective values for Page, Mobile, and MobileLandscape.

The Header and Footer regions can be aligned with Stretch, Left, Center, or Right options.

In contrast, the Menu, Content, and Submenu regions adjust automatically based on the Header and Footer settings.

A resized bar can also be added to the Menu region for dynamic adjustment, facilitating a structured layout and enhanced navigation.

Mapping Pages to Layout Regions

To use a Layout, you must map a page to a region on data grid. This procedure ensures that your layout displays relevant information based on the underlying data.

Navigate to Displays → Layouts.
Create or Select a Layout:
Under the Page header, click on the empty and then "...".
The Select Object Dialog window will open. Choose the desired option.

Tip

title	Removing sections for Mobile

By default, the Web, Mobile, and Landscape clients will use the page configured for the section (if that page is portable or web-compatible), even if the configuration field is left blank. If you do not want that page to be used, you need to remove it by adding an underscore (_) instead of just leaving the configuration blank.

For example, if you defined a page for the Menu section that you don't want to have an equivalent on the Mobile client, just add the underscore character (_) in the field for Menu Mobile. When running the solution on that type of client, the system will not open any page for that section.

Previewing Layouts Displays

Previewing layouts provides a crucial step in the development process, allowing you to catch design flaws or functional issues early. By following these steps, you ensure that your layouts meet your application’s visual and usability standards.

Navigate to Displays → Layouts.
Choose the layout you want to preview from the available options. Ensure that the layout is already mapped to the relevant page and data region (as discussed previously).
Under the Layout Panel table, there will be four different previews: Desktop Web Preview; Desktop on Windows WPF; Mobile; and Mobile Landscape.
Inspect the arrangement of components, colors, fonts, and overall design. Ensure that the layout aligns with your application’s requirements.

Working with Layouts

Configuring the Startup Layouts

To configure the solution startup to load a Layout, go to the Displays → Client Settings. Under Initial Execution Conditions, select the desired Layout item from the Layout menu. The drop-down menu reflects the layouts defined in the Layouts page.

Refer to Displays Client Settings (Reference) for more details.

Changing Layouts in Runtime

The runtime method Client.OpenLayout("<layoutName>") replaces the current Layout on the Client Window, loading the new one.

Changing Displays in Runtime

If you don't need to change all the Layout panels, only the Content (main region), it's not necessary to create or open new layouts.

The methods Client.OpenDisplay("MyDisplay") and Display.MyDisplay.Open() will open the MyDisplay page using the current layout, just replacing the page in the Content Region, to the new display.

Layout Configuration Table

Layout Settings Table
Property	Description
ID	Unique identifier for each Layout Region.
VersionID	Specifies the panel version. Increases with each change made to the panel.
Region	Denotes specific areas within an application or page for content or actions. Header: This region appears at the top of the layout and includes the logo, site title, main navigation links, search bar, and possibly user account controls. Its purpose is to contain the key navigation elements. Its functionality is to identify the site or app and facilitate primary navigation and quick access. Content: This region typically contains the primary information or functionalities that users interact with, such as text, images, forms, and other interactive elements. Purpose: This is the main area where the core content is displayed. Functionality: This region is central to user interaction and displays critical information. Menu: This region includes links or buttons that navigate to different sections or pages within the application or website. It often appears on the left side of the screen. Purpose: It contains the main navigation menu. Functionality: It provides primary navigation and helps users move between major sections. Example: Left-side Menu panel. Submenu: This region provides additional navigation options or links related to the main content, often displayed to the right of the main content area. Purpose: It houses optional or secondary navigation elements. Functionality: It enhances user navigation by providing context-specific links or actions. Example: The right-side Submenu panel. Footer: This region is located at the bottom of the layout and includes copyright information, contact links, social media icons, and other ancillary information. Its purpose is to display supplementary information and links. Its functionality is to provide supporting information and site-wide links. Examples include the privacy policy, terms of service, site map, and back-to-top links.
Docking	Related to the attachment of an element or window to a portion of the screen.
Page	Specifies which display to assign to each region of WPF and HTML5 pages.
Mobile	Specifies which display to assign to each region of a mobile client.
MobileLandscape	Specifies which display to assign to each region of a mobile client in horizontal orientation.
HorizontalAlign	Alignment of an element along the horizontal axis (stretch, left, center, right).
Splitter	A UI control that allows users to adjust the size of adjacent panes or areas.
Row	Represents a horizontal grouping of data or controls in a grid or table.
RowSpan	Indicates the number of rows a cell should span across in a grid or table.
Column	A vertical division in a grid or table, like a column in a spreadsheet.
ColumnSpan	Indicates the number of columns a cell should extend over in a grid or table.
DateCreated	The date and time when the panel was created.
DateModified	The date and time when the panel was last modified.
Description	A text description of the layout.

In this section:

Page TreerootV10:@parentspacesV10

Page tree