Screen layouts determine the overall structure of your screen. They define the structure of a harness that is included in a composite portal. When you create a new harness it contains a screen layout by default. A harness can contain only one screen layout.
Available only to user interfaces rendered in HTML 5 document type (standards mode).
Different layout options are available when you use the harness as an app view, a main area, inner harness, or a page view. The header and footer can be fixed on the page, or set up to scroll with the page.
A screen layout comprises of the following elements:
- Main area
- Adjacent regions, each identified by position:
You can choose from one of many different screen layout formats, each of which can be
styled in the Skin form — Components tab — Layouts — Screen layouts For example, you can choose the
Header Footer Left format,
which provides a header, a left sidebar, a main area, and a footer.
Each region in a screen layout can contain a single section. That section can hold a layout, which in turn can hold various controls or included sections. Typically, the section that goes into the main area contains a dynamic container.
Screen layouts can exhibit responsive behavior, as configured in the Skin form — Components tab — Layouts — Screen layouts. You can set responsive breakpoints for screen layouts, enabling the layout to adjust according to screen size, providing an optimal user experience on a desktop, tablet, and phone.
- Open the harness that you want to modify..
- On the Design tab, from the Structural list, drag Screen layout onto the work area.
- Configuring a screen layout
Determine the purpose of each area of the screen layout and identify the section to be placed in each area.
- Screen layout properties
Some layout properties might not be available if the harness is used as an app view, main area, inner harness, or page view.
- properties panel
Click the View properties icon in the header of the region of the screen layout to display the Properties panel for that region.
- Upgrading panel sets to screen layouts
As a best practice, upgrade deprecated panel sets to screen layouts. Existing panel sets continue to function, but you cannot create a new panel set in applications rendered in HTML 5 document type (standards mode). Screen layouts are available only to user interfaces rendered in HTML 5 document type (standards mode).
Organize the content and structure of a portal by defining harnesses. By populating harnesses with sections, you can build a modular interface that promotes reuse and maintainability.
Sections are the building blocks of your user interface. You can populate a section with components, such as fields and controls, to create a functional chunk of user interface that can be reused in different contexts for improved consistency and efficient development.