Displays Layouts Reference

Organize displays into responsive layouts.

Reference → Modules → Displays → UI →  Client Settings | Draw | Images | Layouts | List | Localization | Symbols | Themes | Units Conversion

Layout Workspace

The Layout configuration interface has four main areas:

1. Layout List
2. Panel Configuration
3. Page Assignment Table
4. Platform Previews

Configuration Workflow

Step 1: Manage Layouts

Step 2: Configure Selected Layout

2.1 Organize Regions

Configure which panels are active and their behavior:

2.2 Define Pages

Assign pages to each active region:

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

Panel Regions

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

Menu

• 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

Footer

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

Layout Design Considerations 

Common Layout Patterns

Customization Example

Header/Footer Alignment

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