Configure a layout shifter responsive layout

Video Tutorial: Create a layout in AVEVA OMI

Show Pane Property

The Layout Shifter method for configuring a responsive layout uses the Show Pane property to allow different content to be displayed as a function of screen size. Layout Shifter also uses Column Push and Column Pull properties, introduce in the Column Drop method. Column Span, as the basic property that sets the width of a pane, is used in all responsive layout methods.. See Responsive Layout: Mostly Fluid for information about the Column Span property, and Configure a column drop responsive layout for more information about the Column Push and Pull properties.

The Show Pane property lets you show different content, contained in different panes, at different resolutions. Returning the navigation example presented in Configure a column drop responsive layout , we may want to use vertically-oriented content at some screen resolutions, and horizontally-oriented content at other resolutions. With the Show Pane property, we can selectively show and hide content, depending on the width of the screen the user is using. The Show Pane property lets us conditionalize panes and their content, so they are shown only at specific screen sizes.

Note: The ShowContent() method does not work with hidden panes.

Use the Show Pane property along with other responsive layout properties to show/hide and change positions of selected panes.

For additional information about the responsive web design, including the Layout Shifter method, see "Learn Responsive Design" at web.dev.

To Configure a Layout Shifter Responsive Layout

1. Open the layout in the Layout Editor.

2. Switch to Responsive Layout view by enabling the IsResponsive layout property, or by clicking the Fixed/Responsive button in the menu bar.

3. Add panes for each content item, as described in Responsive Layout: Mostly Fluid . As you add panes, think of the conditional

4. Resize panes using the Column Span property, as described in Responsive Layout: Mostly Fluid .

5. Configure Column Push/Pull if needed for larger screen sizes, as described in Configure a column drop responsive layout .

6. Determine which content is needed for each screen size, and the position in which the content should be displayed. For example:

   • For mobile devices, you want to show several several panes that contain important graphics. You do not need to show a navigation pane, or you want the navigation pane to have its content oriented horizontally (such as in the Breadcrumb navigation app) and below the other content.

   • For desktop displays, you want the navigation pane to be the first pane and to have its content oriented vertically, such as in the NavTree navigation app.

7. For each applicable screen size for the conditional panes, select the pane and then enable or disable the Show Pane property.

8. To test the responsive behavior within the Layout Editor, drag the right or left edge of the layout to change its width. As the layout size exceeds or falls under the dimension that defines a particular layout size, panes will be shown or hidden.

9. Click the Save and Close button on the menu bar to save your changes and close the Layout Editor.

To check runtime behavior, add the layout to a ViewApp. You can use the Preview button in the ViewApp Editor, or deploy the ViewApp. As you resize the ViewApp, the conditional panes will be shown or hidden as the width of the ViewApp changes.