View Source

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.

DisplayLayout provide:

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

Layout Workspace

The Layout configuration interface has four main areas:

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

<p><strong>Legend:</strong><br/>
(1) Layout List<br/>
(2) Panel Configuration — <em>Panel Regions</em><br/>
(3) Page Assignment Table<br/>
(4) Platform Previews</p>

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

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

Footer

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

On this page: