A layout defines the application window's size and arranges the display components in the runtime application. When planning your displays, decide if you need elements like a menu bar or toolbar consistently appearing at the top of your application window. Sometimes, a single layout suffices for managing the information in the application.
In the layout, the last listed display is the one that changes upon a display switch. For instance, many new solutions incorporate a default' Startup' layout. In this layout, the 'MainPage' display, listed last, is the default section that changes when the application receives a command to open a new display.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Understanding
LayoutLayouts
Definition
Layouts are pre-defined structures for the organization of that organize components on a screen. They position , positioning elements like the header, menu, content section, submenu, and footer within an application screen or webpage.
Purpose
The purpose of Layouts is organize the . They organize information on pages , creating pre-defined areas to separate and organize information on the page. They act as the a blueprint for creating interfaces.
Function
Layouts group items, delineate areas, and manage display space. Layout design breaks down , breaking information into Panels (Header, Menu, Content, Submenu, Footer).
Operation
Layouts work pre defining an area to show a specific display.
Application
They determine how information and controls are displayed and interacted with, directly affecting usability and efficiency.
Usage
Go . To use, go to Displays → Layouts. Create , create a new Layout, customize the Header and Footers panels behaviors, select these regions and map a display to be shown on the displays to pre-defined screen areaareas.
Configuring Layouts
Creating Layouts
Creating a new layout: go to Displays → Layouts and click the 'Insert new' button on the data grid control to open the 'New Layout' popup window. Then, define the name for the layout and select its layout Engine (Portable, WPF Only, or HMLT Only). Note: the new Layout will appear on the table but not as a
Customizing Panels
On Displays → Layouts, after creating a new layout, you can customize the layout by editing Header and Footer behaviors.
Panels
Header: edit options (Stretch, Left, Center, and Right)
Menu: adjust automatically based on header and footer behavior
Content: adjust automatically based on header and footer behavior
Submenu: adjust automatically based on header and footer behavior
Footer: edit options (Stretch, Left, Center, and Right)
It allows many layout possibilities. In addition, it offers an option to add a resizer bar for the Menu region.
Working with Layouts
Mapping a page to a region on Layout
To use a Layout you must to map a page to a region on data grid.
Previewing Layouts Displays
Properties Reference
The Properties References present a reference that describes and explains the Displays Layouts properties. The table lists all properties available for the configuration item. However, not all properties described in the documentation are displayed in the data grids by default. Right-click column headers to see which property columns are currently displaying. The displayed properties appear with a check mark.
The data grids allow users to manage and organize information by showing or hiding properties in tables within configuration interfaces. Users can view and select properties via column headers, enable multiple selections, add or remove columns, or reset grid settings. These features are available in all configuration interfaces using a table for data management. To show or hide properties on the data grid, right-click column headers to select properties or use the reset button to return to default settings. Check out Working with DataGrids for detailed info.
Layouts properties |
|---|
Properties Reference
LayoutsID | A unique identifier for an element or object within a system. |
VersionID | Refers to the specific version of an element or object, for tracking changes or updates. |
Region | Denotes a specific area within an application or page for content or actions. |
Docking | Related to the attachment of an element or window to a portion of the screen. |
Page | Refers to a particular page within an application or a website. |
Mobile | Indicates if an element or feature is available or optimized for mobile devices. |
MobileLandscape | Refers to the layout or display of an application on a mobile device in horizontal orientation. |
HorizontalAlign | Alignment of an element along the horizontal axis (left, center, right). |
Splitter | A UI control that allows users to adjust the size of adjacent panes or areas. |
Row | Represents a horizontal grouping of data or controls in a grid or table. |
RowSpan | Indicates the number of rows a cell should span across in a grid or table. |
Column | A vertical division in a grid or table, like a column in a spreadsheet. |
ColumnSpan | Indicates the number of columns a cell should extend over in a grid or table. |
DateCreated | The date and time when the element or object was created. |
DateModified | The date and time when the element or object was last modified. |
Description | A text description of the element or object, detailing its purpose or contents. |
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|