Page History

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

1. Panel Configuration
2. Page Assignment Table
3. 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

Creating Layouts

1. Navigate to Displays → Layouts
2. Click Add New button
3. Configure:
   • Name - Layout identifier
   • Description - Purpose documentation
4. Click OK
5. Map displays to regions

Region Configuration

Mapping Displays

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

Platform-Specific Settings

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

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

Preview Options

Test layouts before deployment:

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

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

Configuration Properties

Best Practices

1. Plan Structure - Define regions before displays
2. Test All Platforms - Verify on each target
3. Consider Mobile - Simplify for small screens
4. Use Splitters Wisely - Only where needed
5. Keep Headers Simple - Essential navigation only
6. Document Layouts - Explain purpose
7. 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:

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

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