Section widget

The Section widget is a layout container for dynamic content in one or more views. When you have multiple views, the Section widget works in coordination with the Views Navigation widget and can be a combination of any other widgets such as a map, list, and image. As the content in a section changes, only the section refreshes instead of the entire page, providing better app performance.

Examples

Use this widget to support app design requirements such as the following:

  • You want to display several large images with similar headings, but you want to avoid too much scrolling in your app. Use multiple views in a section, and include a Views Navigation widget so users can click tabs or arrows to access each image without scrolling the page.
  • You have different features that focus on the same location and want to showcase their information with a list and a map without needing to go to a separate page or block. You can switch the views to see the different perspectives. For example, create a section with two views that contain a map and a list. One view presents a map of San Diego restaurants and another view presents a map of the same area, but with recreational spots.

Usage notes

You can create multiple views to organize dynamic content in one section. Sections can exist anywhere on a page and include multiple views, and you can have separate content in each view. You must add a Views Navigation widget for end users to browse the different views of a section.

Users can see the view names in the corresponding Views Navigation widget, so provide meaningful names. The sequence of views in the configuration panel is the order they’ll appear in the Views Navigation widget.

Settings

The Section widget includes the following settings:

  • Views—Add multiple views one at a time or duplicate existing views if you want them to have the same background or layout.
  • Manage the views with the following options: Rename, Duplicate, and Delete.
  • Background—Edit each view’s background by choosing a color or image. When you use a background image, set its position in the view by choosing Fit, Fill, Center, Tile, or Stretch.
  • Drag views to change the navigation order in the section.
  • The Animation style setting for Sections includes options to animate both the section panels and the views. For more information, see Animation.