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

Layout Customization

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

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

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:

• 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

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

In this section...