HOW TO

Configure the header of a web experience for different screen sizes in ArcGIS Experience Builder

Last Published: October 25, 2022

Summary

In ArcGIS Experience Builder, header layouts can be modified to effectively display web experiences on various devices such as mobile phones, tabs, or desktops, in which the screen sizes are small, medium, and large. The header layouts can be modified to fit the screen size to optimize the user experience when viewing on different devices.

This article describes the workflow to modify header layouts for small, medium, and large screen sizes for a web experience in ArcGIS Experience Builder.

Procedure

  1. Open the ArcGIS Experience Builder web experience.
Note:
Certain full-screen app templates use a header created with a Fixed Panel widget instead of the Header setting from the page. If this is the case, refer to Step 2 to enable the header to configure it.
  1. On the Page panel, enable the Header option, if necessary.
The Header option in the Page panel.
  1. On the top ribbon, click the screen button to edit the page. In this example, the medium screen page for medium screen devices is configured.
  2. On the canvas, next to the header, click Custom to modify the header for medium screen devices.
The 'Edit your page for medium screen devices' button on the builder toolbar and Custom button on the canvas.
Note:
When Auto is selected, the header layouts are synchronized for all screen sizes.
  1. Click OK when prompted through the Are you sure you want to enable it? window.
  2. Hover over the canvas header and click Edit header to configure the header layout.
The Edit header button.
  1. Add and connect widgets to the header layout as desired. Refer to ArcGIS Experience Builder: Add and connect widgets for more information.
  2. To remove a widget from the current screen size, click the widget and click the Move to the pending list The 'Move to the pending list' option. button. In this example, the Print widget is moved to the pending list as it is unnecessary to be displayed on medium screen devices.
The 'Move to the pending list' button.
Note:
Deleting a widget removes the widget from all screen sizes. Moving the widgets to the pending list hides the widgets from the current screen and they can be added back to the canvas from the Pending tab on the Insert widget panel.
  1. Arrange the widgets accordingly to proportionately fit medium screen devices.
  1. On the top ribbon, click the other screen sizes and repeat Steps 4 through 7 to modify the header layout.
  2. Click Save The Save button. to save the configurations.

The image below displays the header layouts for the medium screen size.

The header layout for medium screen devices.

Article ID:000028481

Software:
  • ArcGIS Experience Builder

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

Discover more on this topic