Examples

Use a screen group to support app design requirements such as the following:

• You have several images and each image needs a long paragraph to describe it, so you want to scroll through the content while the image remains in the same position. You can add a screen group with scrolling panel to a scrolling page and place the image on the screen's main stage and the corresponding description in the screen's scrolling panel.
• You want to display your content with a page flipping effect rather than the default push effect of scrolling pages. You can use a given template for different transition effects between each screen in the screen group.

Usage notes

To add a screen group to a scrolling page, click the Insert screen group button in the canvas and choose a screen group template. When a screen group is added to the page, a separate scroll bar appears in the canvas for the screen group.

If a screen group has scrolling panels, the panel's height increases automatically based on its content. You can insert widgets into a panel by dragging a widget inside it, or by clicking the add button.

Currently, you can only add screen groups for large screen sizes and not for a medium or small screen size. You can move the entire screen group to the pending list to customize layouts for different screens.

Settings

Screen groups include the following configuration settings:

• Screen—Add multiple screens one at a time or duplicate existing screens if you want them to have the same background or layout.
• Manage the screens in the group with the following options: Rename, Duplicate, and Delete. Drag screens to change the scrolling order in the screen group. Click a screen to access and change the settings for its main stage and scrolling panel (if it has one).
  • Main stage—Change the main stage's background by choosing a fill color or image.
  • Scrolling panel
    • Mode—Choose a mode from Docked and Floating for a different layout.
    • Size—Define the width of the panel. You can also drag the edge of the panel on the canvas to resize it.
    • Position—Align docked panels to the left or right and floating panels to the left or right or centered. For floating panels, set the horizontal offset in pixels to adjust the panel location based on its alignment.
    • Gap—Specify the space between nested widgets (in pixels).
    • Padding—Add padding space around the inner edge of the panel.
    • Background—Change the scrolling panel's background by choosing a fill color or image.

    Tip:

    As you edit the contents in a screen group, floating panels have a Hide in design view button that you can click to temporarily minimize the panel so you can see the main stage behind it. Click the Show in design view button at the bottom right corner of the main stage to display the panel again. Hiding the panel doesn't affect the screen group appearance in live view or preview.

Templates

In addition to the widget layout, screen group templates have other preset settings, such as the transition effect, spacing between panels, and when to trigger the next screen. When choosing a screen group template in the gallery, hover over the template card to see an animated preview.

The configurable screen groups have the following predefined templates:

• Cascade is a multiscreen template with floating panels. Panels push through and main stages fade into the next one. Screens switch immediately after the next panel appears from the bottom.
• Index is a template with docked panels and has the same transition effect as Cascade. When the next panel scrolls to a lower position, the screen switches to the next.
• Flyer is a single-screen template specifically for a map and bookmarks. As the panel scrolls, the map on the main stage navigates to the bookmark location automatically (using the Bookmark widget setting, Active on loading).
• Stream is a multiscreen template with floating panels. There is a parallax effect between the panel of the selected screen and that of the unselected one. When the next panel scrolls to an upper position, the screen fades to the next.
• Guide is a template with a parallax effect, for which the screen switches to the next when the next panel scrolls to a lower location.
• Showcase is a multiscreen template with central floating panels. When the current panel scrolling is complete, the main stage switches to the next with a cover transition effect.
• Slideshow is a multiscreen template with docked panels. When the current panel scrolling is complete, the main stage switches to the next with a push transition effect.
• Portfolio is a multiscreen template with only the main stage, which has a cover transition effect.