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:
Understanding Layouts
Layouts are pre-defined structures that organize components 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. Layouts group items, delineate areas, and manage display space, breaking information into Panels. They determine how information and controls are displayed and interacted with. To use, go to Displays → Layouts, create a new Layout, customize panels, and map displays to pre-defined areas.
Configuring Layouts
Creating new 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 a description, and press Ok button to finish the layout creation.
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 resizer 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.
Navigate to Displays → Layouts.
Create or Select a Layout:
Under the Page header, click on the empty and then "...".
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.
Navigate to Displays → Layouts.
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).
Under the DataGrid chart, there will be four different previews: Desktop Web Preview; Desktop on Windows WPF; Mobile; and Mobile Landscape.
Inspect the arrangement of components, colors, fonts, and overall design. Ensure that the layout aligns with your application’s requirements.
Working with Layouts
Configuring Layouts to Startup
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 Displays/Layouts.
Refer to Client Settings for more details.
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
Layouts properties | |
|---|---|
Property | Description |
ID | 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 specific areas within an application or page for content or actions. Header: This region appears at the top of the layout and includes the logo, site title, main navigation links, search bar, and possibly user account controls. Its purpose is to contain the key navigation elements. Its functionality is to identify the site or app and facilitate primary navigation and quick access. Content: This region typically contains the primary information or functionalities that users interact with, such as text, images, forms, and other interactive elements. Purpose: This is the main area where the core content is displayed. Functionality: This region is central to user interaction and displays critical information. Menu: This region includes links or buttons that navigate to different sections or pages within the application or website. It often appears on the left side of the screen. Purpose: It contains the main navigation menu. Functionality: It provides primary navigation and helps users move between major sections. Example: Left-side Menu panel. Submenu: This region provides additional navigation options or links related to the main content, often displayed on the side of the main content area. Purpose: It houses optional or secondary navigation elements. Functionality: It enhances user navigation by providing context-specific links or actions. Example: The right-side Submenu panel. Footer: This region is located at the bottom of the layout and includes copyright information, contact links, social media icons, and other ancillary information. Its purpose is to display supplementary information and links. Its functionality is to provide supporting information and site-wide links. Examples include the privacy policy, terms of service, site map, and back-to-top links. |
Docking | Related to the attachment of an element or window to a portion of the screen. |
Page | It refers to a particular selected page on the list of displays. |
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: