Harness form — Adding a screen layout

Available only to user interfaces rendered in HTML 5 document type (standards mode).

Caution: 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.

About screen layouts

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:

• a main area
• adjacent regions, each identified by position: 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.

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). You can create new panel sets in Quirks mode.

Caution: 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.

To upgrade a panel set to a screen layout

1. Open the harness that contains the panel set that you want to upgrade.
2. Select Layout > Screen Layout from the toolbar.
3. A message displays indicating that the current panel set will be replaced by the screen layout that you select; click OK.
4. Select the desired screen layout from the dialog. 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.
5. Click OK.

Adding a 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.

1. Click the down-arrow at the right end of the Layout group and select Screen Layout.
2. Select one of the screen layout formats, for example, Header Footer Left. Each screen layout has one or more areas, each identified by position as Header, Left, Right, Footer.
3. Click OK. The harness form changes to match the selected screen layout.
4. Click in the screen layout header to set the screen layout properties.
5. Drag a section into each region of the screen layout and complete the property panel for each region of the screen layout.

If you want to allow users to resize the screen layout, select the User resizable check box on the properties panel of the appropriate regions in the screen layout. Only screen layouts with left and/or right regions are resizable.

Screen layout properties

About Harnesses

	dynamic layout screen layout
	Screen layout - Region properties - General tab Skin form — Components tab — Layouts — Dynamic layouts Skin form — Components tab — Layouts — Screen layouts

Open topic with navigation