Configure a layout shifter responsive layout example

The layout shifter pattern is the most complex of the responsive layout designs. Unlike a mostly fluid or column drop design, layout shifter actually presents users with different pieces of content when viewing the application at different screen sizes.

Show Content Property

In addition to the Column Span, and Push/Pull properties used for mostly fluid and column drop designs, respectively, the Show Content property allows different content to be shown or hidden at specific screen sizes.

The following example leverages Show Content to show and hide different navigation panes. For smaller screen sizes, we will show the navigation pane arranged horizontally across the screen, while for larger screen sizes, we will show a vertical navigation tree at the left of the screen. In the example, we will:

• Show the navigation pane with content arranged horizontally below the main content for mobile devices.

• Show the navigation pane with content arranged horizontally above the main content for tablets and laptops.

• Show the navigation pane with content arranged vertically to the left of the main content for large and extra large screens.

Note that this is a simplified example that is intended only to illustrate how you can use the Show Content property. Depending on your requirements, you can combine all the elements of mostly fluid, column drop, and layout shifter within a single 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.

   Pane 1 configuration (small device navigation)

3. Select Pane 1 and set its height to 100 (the pane height property is under the Size group of pane properties and has a default value of 300). Retain the default settings for all other pane properties.

4. Click the Show Hidden Panes button at the top of the layout to show panes regardless of how the Show Pane property is set. Showing hidden panes can help as you configure panes and their content.

   

5. With Pane 1 selected, make sure that the Show Pane Extra Small and Show Pane Small properties are enabled (checked). Disable (uncheck) the following Show Pane properties:

   • Show Pane Medium: disabled

   • Show Pane Large: disabled

   • Show Pane Extra Large: disabled

   Note: The Show Pane property, unlike the rest of pane properties, does not propagate and must be explicitly enabled or disabled for each screen size. The default state of the Show Pane property is enabled.

6. From the Toolbox tab, add the NavBreadcrumbControl navigation app to Pane 1. The NavBreadcrumbControl is a horizontally-oriented navigation control.

   Pane 2 configuration (large device navigation)

7. Add a pane (Pane 2) by clicking the New Pane button .

8. If the Toolbox tab is still selected, reselect the Properties grid.

9. With Pane 2 selected, make sure that the Show Pane Medium and Show Pane Large properties are enabled (checked). Disable (uncheck) the following Show Pane properties:

   • Show Pane Extra Small: disabled

   • Show Pane Small: disabled

10. Set the Column Span Medium property to 2 columns for Pane 2. This setting propagates to the larger screen sizes. Since Pane 2 is not shown for mobile (extra small) and tablet (small) devices, Column Span for these smaller screen sizes is irrelevant.

11. From the Toolbox tab, add the NavTreeControl navigation app to Pane 2. The NavTreeControl is a vertically-oriented navigation control.

    Pane 3 configuration (main content)

12. Add a pane (Pane 3) by clicking the New Pane button .

13. With Pane 3 selected, configure the Column Span Medium property to 10 columns. This setting propagates to the larger device sizes, but the settings for Column Span Extra Small and Column Span Small do not change from 12 columns.

14. Add an overview graphic or other graphic to Pane 3. This will function as the main content for the layout.

15. 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, the panes containing navigation content (vertical or horizontal) will be hidden or shown as applicable to the screen size.

    • Once you have added the layout to a ViewApp, you can observe the same behavior in the ViewApp editor. To check runtime behavior, use the Preview button in the ViewApp Editor, or deploy and launch the ViewApp.

    • As you resize the ViewApp, the Show Pane property determines which pane is shown as the width of the ViewApp changes.

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