What is a page?
In ArcGIS Experience Builder, a page is a representation of a layout, not a physical HTML web page, but it behaves like one. It is the foundation for organizing content in an experience.
An experience must include at least one page, but it can support multiple pages. Pages can be designed using two layout types:
- Fullscreen app: Resembles an application interface.
- Scrolling page: Resembles a traditional web page.
Page contents, such as widgets, sections, and screens, are arranged based on layout rules like fixed or flow layouts. To ensure responsiveness across different screen sizes, layouts can be configured for three size modes: Large, Medium, and Small. This configuration allows for customized designs that change to various devices.
In the app configuration, pages are defined by the pages property, and their structure is outlined in the page property.
How to use a page
Here are the general steps to use a page in ArcGIS Experience Builder:
1. Add a page
To add a page to your experience, follow these steps:
- Navigate to the Page panel in ArcGIS Experience Builder.
- Click on the Add Page button.
- Choose the layout type for the page:
- Fullscreen app: This layout resembles an application interface and supports fixed or grid layouts.
- Scrolling page: This layout resembles a traditional web page and allows vertical scrolling.
2. Add content to the page
To add content to the page, follow these steps:
- In the Page panel, select the page you want to add content to.
- Drag and drop widgets, sections, or screens from the widget panel onto the page.
- Arrange the content as needed using the layout options available in Experience Builder.
3. Configure the page layout
To configure the page layout, follow these steps:
- In the Page panel, select the page you want to configure.
- Set the size modes for the page:
- Large: Designed for larger screens such as desktops and laptops.
- Medium: Designed for medium-sized screens such as tablets.
- Small: Designed for smaller screens such as smartphones.
Page layout types
Experience Builder contains two main layout types for pages each designed to provide a different user experience: Fullscreen app and scrolling page.
Fullscreen app
The Fullscreen app page layout is designed to resemble an application interface. It provides a more immersive experience, allowing users to interact with the content without distractions. The layout can be customized to fit various screen sizes and orientations.
The Fullscreen app page layout supports two layout types.
| Layout Type | Description |
|---|---|
| Fixed | Contains a fixed width and height ensuring that the content remains consistent across different devices. It is suitable for applications that require a specific design and layout. |
| Grid | Allows for a more flexible arrangement of content. It can adapt to different screen sizes and orientations making it suitable for applications that require a responsive design. The grid layout can be customized to fit various content types and arrangements. |
Scrolling page
The Scrolling page layout is designed to resemble a traditional web page. It allows users to scroll through the content vertically similar to a standard website. This layout is suitable for experiences that require a more linear flow of information such as storytelling, step-by-step guides, or long-form content.
Page size modes
ArcGIS Experience Builder supports three size modes for pages, allowing developers to create responsive designs that adapt to different screen sizes and orientations. The three size modes are:
| Mode | Description |
|---|---|
| Large | This mode is designed for larger screens such as desktops and laptops. It provides a layout that can accommodate more content and widgets. |
| Medium | This mode is designed for medium-sized screens such as tablets. It provides a layout that optimizes the content for touch interactions. |
| Small | This mode is designed for smaller screens such as smartphones. It provides a compact layout that ensures the content is easily accessible and navigable on mobile devices. |
Experience Builder automatically adjusts the layout and content based on the selected size mode. Developers can customize the design and behavior of each mode to ensure a consistent user experience across all devices.
Headers and footers
In Experience Builder, headers and footers are optional components that can be added to pages to provide additional context or navigation options. They can include elements such as logos, titles, navigation links, and other relevant information.
The header footer can be turned on/off in page settings and the contents will be the same for all pages. Headers and footers can be configured to appear on all pages or only on specific pages within an experience. They can also be styled and customized to match the overall design of the experience. Headers and footers can be turned on or off in page settings.