Page History

Layout Regions

Creating Layouts

Configuring Layouts

Layouts are pre-defined structures that organize displays frames on a screen, positioning elements like the header, menu, content section, submenu, and footer. They organize information on pages and act as a blueprint for interfaces. You can select an existing Layout to edit or create a new one.

Creating New Layouts

To create a new Layout:

1. Navigate to Displays → Layouts
.

2. Click the Image Removed button on the data grid control to open the 'New Layout' popup window.

3. Define the name for the layout and a description.

4. Press Ok button to finish the layout creation and close the popup window.

Customizing Layouts Panel

On Displays → Layouts, after creating a new layout, you can customize it by defining the display objects for layout regions. The Layout Panel organizes information into displays by configuring regions such as Header, Menu, Content, Submenu, and Footer. 

The displayed objects on each Layout are selected from the data grid below the panel. Each selected object is defined on the Layout Region configuration items and its respective values for Page, Mobile, and MobileLandscape.

The Header and Footer regions can be aligned with Stretch, Left, Center, or Right options.

In contrast, the Menu, Content, and Submenu regions adjust automatically based on the Header and Footer settings.

A resized bar can also be added to the Menu region for dynamic adjustment, facilitating a structured layout and enhanced navigation.

Mapping Pages to Layout Regions

To use a Layout, you must map a page to a region on data grid. This procedure ensures that your layout displays relevant information based on the underlying data.

1. Navigate to Displays → Layouts.

2. Create or Select a Layout:

3. Under the Page header, click on the empty and then "...".

4. The Select Object Dialog window will open. Choose the desired option.

Previewing Layouts Displays

Previewing layouts provides a crucial step in the development process, allowing you to catch design flaws or functional issues early. By following these steps, you ensure that your layouts meet your application’s visual and usability standards.

1. Navigate to Displays → Layouts.

2. Choose the layout you want to preview from the available options. Ensure that the layout is already mapped to the relevant page and data region (as discussed previously).

3. Under the Layout Panel table, there will be four different previews: Desktop Web Preview; Desktop on Windows WPF; Mobile; and Mobile Landscape.

4. Inspect the arrangement of components, colors, fonts, and overall design. Ensure that the layout aligns with your application’s requirements.

Working with Layouts

Configuring the Startup Layouts

To configure the solution startup to load a Layout, go to the Displays → Client Settings. Under Initial Execution Conditions, select the desired Layout item from the Layout menu. The drop-down menu reflects the layouts defined in the Layouts page.

Refer to Displays Client Settings (Reference) for more details.

Changing Layouts in Runtime

The runtime method Client.OpenLayout("<layoutName>") replaces the current Layout on the Client Window, loading the new one. 

Changing Displays in Runtime

If you don't need to change all the Layout panels, only the Content (main region), it's not necessary to create or open new layouts.

The methods Client.OpenDisplay("MyDisplay") and Display.MyDisplay.Open() will open the MyDisplay page using the current layout, just replacing the page in the Content Region, to the new display.

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

Layout Configuration Table

In this section: