Page History

Displays Layouts (Reference) define the application window structure and organize display regions (Header, Menu, Content, Footer) that remain consistent while navigating through different screens.

Display Layouts

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 application navigation structure
Platform-adaptive regions
Header/Menu precedence control
Automatic display fallbackRegion-based organization
Multi-platform support
Dynamic content areas
Responsive adaptations
Runtime layout switching

Layouts ensure consistent navigation elements while the Content region changes with display navigation.

optimization

Layout Workspace

Layout 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

Creating Layouts

Navigate to Displays → Layouts
Click Add New button
Configure:
- Name - Layout identifier
- Description - Purpose documentation
Click OK
Map displays to regions

Region Configuration

Mapping Displays

Select layout in grid
For each region row:
- Click "..." in Page column
- Select display from dialog
- Repeat for Mobile/Landscape

Platform-Specific Settings

Column	Target	Fallback
Page	Desktop (WPF/HTML5)	Required
Mobile	Mobile portrait	Uses Page
MobileLandscape	Mobile landscape	Uses Mobile

<ac:structured-macro ac:name="tip"> ac:rich-text-body To remove a region on mobile, enter underscore (_) instead of leaving blank. Empty fields inherit from Page configuration. </ac:rich-text-body> </ac:structured-macro>

Layout Customization

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

Preview Options

Test layouts before deployment:

Desktop Web - HTML5 preview
Desktop Windows - WPF preview
Mobile Portrait - Phone view
Mobile Landscape - Tablet view

Runtime Configuration

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();

Configuration Properties

Property	Description	Type
Region	Layout area identifier	Enum
Docking	Attachment position	String
Page	Desktop display	Display
Mobile	Mobile display	Display
MobileLandscape	Landscape display	Display
HorizontalAlign	Alignment option	Enum
Splitter	Resizable divider	Boolean
Row/Column	Grid position	Integer
RowSpan/ColumnSpan	Grid spanning	Integer

Best Practices

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

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

Plan Structure - Define regions before displays

Test All Platforms - Verify on each target

Consider Mobile - Simplify for small screens

Use Splitters Wisely - Only where needed

Keep Headers Simple - Essential navigation only

Document Layouts - Explain purpose

Version Control - Track layout changes

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

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

Timestamp

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

Troubleshooting

Layouts in Runtime

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

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");
}

Metadata Tracking

Field	Purpose	Auto-Updated
ID	Unique identifier	Yes
VersionID	Change tracking	Yes
DateCreated	Creation audit	Yes
DateModified	Last change	Yes

The metadata tracking pattern applies consistently across all configuration tables in the platform.

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
spaces	93DRAF

Page tree

Page History

Versions Compared

Old Version 3

New Version Current

Key

On this page:

Layout Workspace

Layout Regions

Creating Layouts

Region Configuration

Mapping Displays

Platform-Specific Settings

Layout Customization

Header/Footer Alignment

Menu Configuration

Preview Options

Runtime Configuration

Startup Layout

Runtime Changes

Configuration Properties

Best Practices

Configuration Workflow

Step 1: Manage Layouts

Step 2: Configure Selected Layout

2.1 Organize Regions

2.2 Define Pages

2.3 Preview Results

Platform Adaptation Examples

Panel Regions

Regions Details

Header

Menu

Content

Submenu

Footer

Layout Design Considerations

Common Layout Patterns

Standard Application

Kiosk Mode

Dashboard

Customization Example

Header/Footer Alignment

Menu Configuration

Mobile Considerations

Responsive Design

Region Removal

Layouts in Runtime

Startup Layout

Runtime Changes

Layout Switching Scenarios

Time Based

Metadata Tracking

Best Practices Checklist

Troubleshooting

In this section...