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 View 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.
Example
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 View Navigation widget so users can click tabs 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 View Navigation widget for end users to browse the different views of a section.
Users can see the view names in the corresponding View Navigation widget, so provide meaningful names. The sequence of views in the configuration panel is the order they’ll appear in the View 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.