A Layout is a frame container that divides the operator interface into regions
Displays Layouts → Concept → 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.
Table of Contents maxLevel 2 minLevel 2 indent 10px exclude Steps style none
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 syntaxDefault 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.