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

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

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

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

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

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

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)

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

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.

On this page:

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

Common Layout Patterns

Standard Application

Kiosk Mode

Dashboard

Mobile Considerations

Responsive Design

Region Removal

Troubleshooting

Layout Switching Scenarios

User Role Based

Time Based

Metadata Tracking

In this section...