A Layout is a frame container that divides the operator interface into regions
Displays Layouts → Concept | How-to Guide | Reference

Overview

Layouts provide the structural framework for operator interfaces, defining persistent regions that remain stable while content changes during navigation.

What is a Layout?

A Layout is a frame container that divides the operator interface into regions. Some regions persist (Header, Menu, Footer) while the Content region changes as users navigate between displays.

Key Concept: Users navigate between pages, but the overall interface structure remains consistent.

Layout Regions

Layouts can have up to five regions:

Region	Position	Purpose	Behavior
Header	Top	Branding, title, primary navigation	Always visible
Menu	Left	Asset tree, page navigation, secondary navigation	Optional; hamburger menu on mobile
Content	Center	Working area — displays load here	Changes during navigation
Submenu	Right	Tools, filters, contextual navigation	Optional; hidden on mobile
Footer	Bottom	Status bar, alarms, limited navigation	Optional; often hidden on mobile

Region Diagram

???????????????????????????????????????????????
?                   HEADER                    ?
???????????????????????????????????????????????
?         ?                         ?         ?
?  MENU   ?        CONTENT          ? SUBMENU ?
? (Left)  ?        (Center)         ? (Right) ?
?         ?                         ?         ?
???????????????????????????????????????????????
?                   FOOTER                    ?
???????????????????????????????????????????????

Content Navigation

When users open a display, it loads into the Content region by default:

Header, Menu, and Footer remain unchanged
Only the Content area updates
Provides consistent user experience during operational workflows

Navigation Commands:

csharp

@Display.PageName.Open()        // Opens page in Content region
@Client.OpenDisplay("PageName") // Alternative syntax

Default Layout

When you create a new solution, FrameworX automatically creates:

Item	Default
Startup Layout	Header + Content (or Header + Menu + Content, depending on template)
Header Page	HEADER
Content Page	MAINPAGE

These defaults can be changed in the Layout configuration or by the solution template used.

Display Types

Not all displays can be used in Layout regions:

Display Type	Use in Layout	Purpose
Page	? Yes	Standard display for layout regions
Popup	? No	Temporary child window, appears on top of pages
Dialog	? No	Modal child window, requires user response

Note: Popups and Dialogs are opened programmatically and float above the layout — they cannot be assigned to layout regions.

Multiple Layouts

A solution can have multiple layouts for different contexts:

Operations Layout — Full Header + Menu + Content + Footer
Kiosk Layout — Content only (no navigation)
Mobile Layout — Simplified regions

Each layout defines which regions are active and which displays fill each region at startup.

Size Considerations

When creating displays for specific regions:

Region	Size Consideration
Header	Fixed height — keep consistent (e.g., 40-60-80px)
Menu	Fixed width — keep consistent (e.g., 200-250px). It can have a resize splitter.
Content	Flexible — adapts to available space
Submenu	Fixed width — keep consistent
Footer	Fixed height — keep consistent (e.g., 30-50px)

Tip: Header and Menu displays should maintain consistent dimensions across the application. You can create custom Header or Menu when the application opens in a Mobile device.

Page tree

Displays Layouts