Use Display Zones to Provide Page Layout

The DisplayZones element is new for SDK version 2.94

The DisplayZones element allows page authors additional levels of control over page layout. Traditionally, a developer can organize a feature such as a Data List or UI Widget within a section that is placed within a tab on a page. With display zones, developers can easily lay out page sections in either two equal columns or use HTML to arrange a custom layout of zones on a page.

The DisplayZones element may optionally be added underneath the tab's Sections element. Within the DisplayZones element, a series of one to many DisplayZone elements should exist. Each DisplayZone element indicates a single location in the layout of the page. The DisplayZone element refers to one-to-many sections defined within page's tab. In this way, sections may be displayed together within a zone and a zone may be positioned on a page using a CSS class.

The developer can either layout display zones in either two columns or a custom layout via an HTML file.

Use LayoutMode to Position Zones in One of Two Equal Columns

A page's tab may contain an option LayoutMode attribute which indicates a pre-configured arrangement that describes the layout for the tab's sections using display zones. As of SDK version 2.94, the only two options are TwoEqualColumns and None.

Figure: Position features using LayoutMode

After you specify the LayoutMode, you need to add your display zones underneath your sections within the tab element. The optional DisplayZones elements enables the SDK developer to display page sections together within a zone. If LayoutMode="TwoEqualColumns", each DisplayZone element should specify a CSS class value of either "bbui-displayzone-left" or "bbui-displayzone-right" to denote the placement of the zone on either the right of left column of the page. In this way features are placed on either the right or left side of the page.

Figure: Display zones group sections together and arrange them on a page.

Figure: The author altered and reloaded a kitchen sink page. Here we see the display zones in the second tab arranged in either the left or right column.

Use LayoutURL to Arrange Custom Layout of Zones on a Page

The optional DisplayZones element enables the SDK developer to display page sections together within a zone. See the figure below. The DisplayZones element indicates display zones that define how sections map to the LayoutUrl. The LayoutUrl can be found as an attribute within the Tab node and is used to indicate the URL to the HTML file that describes the custom layout for the tab's sections.

A developer can't use LayoutUrl and LayoutMode at the same time for a tab. Either lay the zones out in two columns via LayoutMode or use LayoutUrl to reference an HTML file for custom layout.

You can find an example of a page with a DisplayZones element on the Kitchen Sink Chart Widgets Page within the Kitchen Sink SDK samples. The spec file named KitchenSinkChartWidgets.Page.xml is in the \SDK\Samples\WebShellKitchenSink.Catalog\DataForms\Charts directory. In the figure below, the DisplayZone refers to the first two sections of the page. In this way, the first two scatter charts are grouped together within the same zone:

Figure: The DisplayZone groups existing page sections together and refers to a CSS class name which can be found within the HTML file referenced by the tab's LayoutURL attribute.

Figure: Position the div that contains the CSS class underneath the info bar groups the 2 charts together

Figure: Group sections together in a zone within the Kitchen Sink Chart Widgets page