Harness form — Adding a screen layout |
Available only to user interfaces rendered in HTML 5 Document Type (standards mode).
Screen layouts are for portal harnesses only. You should use a column layout within a harness container to format a non-portal harness that creates a form tag.
Screen layouts determine the overall structure of your screen. They define the structure of a harness included in a composite portal. A harness can contain only one screen layout.
A screen layout is comprised of the following:
Header
, Left
, Right
, and Footer
You can choose from one of many different screen layout formats, each of which can be styled in the skin. For example, you may 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 may 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. 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.
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). You can create new panel sets in Quirks mode.
Prior to updating a panel set, make sure that the screen layout that you select contains regions that correlate to the areas in the existing panel set. If an existing panel set area does not correlate to a region in the screen layout, it will not be retained on upgrade.
For instance, if you want to update a Header Left Right panel set, select the Header Left Right screen layout, to ensure that all sections in the panel set display in the new screen layout.
Planning is important; determine the purpose of each area of the screen layout and identify the section to be placed in each area before selecting a screen layout.
Header
, Left
, Right
, Footer
.
If you want to allow users to resize the screen layout, select the User resizable checkbox on the properties panel of the appropriate regions in the screen layout. Only screen layouts with left and/or right regions are resizable.
Unit |
Specify the unit of measurement for the width of the layout: |
Alignment | Specify the overall alignment of the screen layout on the screen. |
Width | Specify the width of the screen layout in pixels. |
Inline style |
As a best practice, define custom styles in the skin. See Skin form — Components tab — General — Custom styles. Optional. Enter CSS code for an inline style for the screen layout. Click () to open the Style Editor. |
dynamic layout
screen layout |
|
Screen layout - Region properties - General tab
Skin form — Components tab — Layouts — Dynamic layouts Skin form — Components tab — Layouts — Screen layouts |