Configure a column drop responsive layout

Video Tutorial: Create a layout in AVEVA OMI

Column Push/Column Pull Properties

The Column Drop method for configuring a responsive layout uses the Column Push and Column Pull properties in addition to the Column Span property. See Responsive Layout: Mostly Fluid for information about the Column Span property.

• The Column Push property moves the selected pane to the right by the number of columns specified.

• The Column Pull property moves the selected pane to the left by the number of columns specified.

Column Push and Column Pull let you rearrange the order in which panes are presented at different resolutions. For example, when viewed on a mobile device, you probably want to have the main content, such as an overview graphic, shown first and followed less critical content, such as a navigation pane that the user scrolls down to view. However, when these panes are resized for viewing on the desktop, the navigation pane ends up on the right side of the screen instead of to the left.

Use the Column Push and Column Pull properties to transpose the positions of two adjacent panes when using larger screen sizes.

To Configure a Column Drop 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 .

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

5. To transpose two adjacent panes:

   The follow screenshot shows two adjacent panes that have been resized to fit a single row when viewed on a Desktop (large) screen. The main content of the layout is in Pane1 and navigation is in Pane2. For this procedure, Column Span for Pane1 is set to 9, and Column Span for Pane2 is set to 3.

   

   1. Select the pane you want to move right (Pane1).

      

   2. Expand the screen size setting (Small, Medium, Large or Extra Large) that you are configuring, and set Column Push equal to the Column Span (3) of the pane to the right (Pane2).

      

      Note that Pane1 moves three columns to the right and slides under Pane2.

      

   3. Select Pane2.

      

   4. Set Column Pull equal to the Column Span of the pane to the left (Pane1).

      Pane 2 now slides to the left side of the layout.

      

      

6. 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, Pane1 and Pane2 will switch positions.

7. 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 two panes will switch positions as the width of the ViewApp changes.