Section and view

In this page, you will learn Section and View components in ArcGIS Experience Builder. You will also learn how sections serve as containers for multiple views, how views function similarly to pages or windows in these sections, and how to navigate between them using the View Navigation widget.

What is a section?

A section is a layout container that can be added to a page. It organizes and structures content in your application. Sections are useful for modular layouts, allowing you to group related content. They can be used for headers, footers, sidebars, or main content areas.

A section can contain multiple views which are alternative layouts or content areas in that section. This allows you to create a more dynamic user experience by switching between different sets of content without leaving the page.

What is a view?

A view is a layout container added to a section. It functions like a page or window but is used in a section. Views create distinct areas for widgets and content.

Views are useful for presenting alternative content or layouts in the same section, such as tabs, steps in a workflow, or different information states. You can switch between views using navigation controls, such as the View Navigation widget, or by configuring triggers.

Views help organize your application by letting users focus on one set of content at a time while keeping related content accessible. This is helpful for guided experiences, wizards, or dashboards where users move between different sets of information or tools without leaving the page.

Views can have different layouts and widgets, and you can apply transition animations when switching between them.

How to use sections and views

Using sections and views with navigation widgets allows you to create interactive, organized, and modular experiences where users can easily switch between different sets of content in the same page.

To use sections and views, follow these steps:

1. Add a section to your page
2. Add views to the section.
3. Configure the views and set up navigation between them.
4. Optionally, apply transition animations for a smoother user experience.

Differences between sections and views

Sections and views are both used to organize content, but they differ in structure, rendering, and user interaction. The table below summarizes the main differences:

Aspect	Section	View
Definition	A container added to a page to group content and manage layout.	A container added to a section to display alternative content or layouts.
Hierarchy	Exists at the page level or within other views.	Exists within a section.
Content	Can contain multiple views.	Can contain widgets and content specific to that view.
Navigation	Not directly navigable; navigation is between views within a section.	Navigable using the View Navigation widget or triggers.
Rendering	All views in a section are rendered, but only the active view is visible.	Only one view is visible at a time; others are hidden but still rendered.
Animation	Transition animations can be set for switching between views.	Inherits animation from the section.
Use cases	Organizing page layout, grouping related content, creating modular designs.	Tabs, steps in a workflow, alternate states, guided experiences.

Here are the key differences between sections and views:

• Rendering: When loading multiple pages, only the content in the current page is rendered initially. In contrast, when loading multiple views in a section, all content in the views is rendered, but only the current view is visible while all others are hidden.
• Animation: Transition animations can be defined on the section, allowing for smooth transitions between views in the section.
• Navigation: Sections provide structure, while views provide the ability to switch between different sets of content within that structure.

AppConfig for sections and views

In the AppConfig, sections are defined under the sections property and the key is the sectionId. Views are defined under the views property. This structure allows you to organize your application effectively, ensuring that sections and views are easily manageable and accessible.

• The sections property contains an array of section objects, each representing a section added to your application. Each section object includes configuration details such as style and the list of views it contains.
• The views property contains the definitions for each view within a section. Each view object specifies its unique ID, the widgets and content it holds, and any specific settings or styles applied to that view.