Leveraging Sections and View Navigation to Enhance Experience Builder Apps

Haley Brueckman

GIS Analyst

It is official: Esri has announced that ArcGIS Web AppBuilder will be retired by the end of 2024 and replaced with ArcGIS Experience Builder. All apps built in Web App Builder will need to be rebuilt in Experience Builder, which means it’s time to revitalize your existing web applications and take advantage of the new and exciting features that Experience Builder has to offer. One of the new features that is unique to Experience Builder is the ability to create Sections with multiple views of content on an individual page.

Similar to how ArcGIS Experience Builder allows multiple pages in one app that the user can navigate between, it also allows multiple views on an individual page. With these tools, Experience Builder provides the ability to create multifaceted apps with increased flexibility. In this guide, we'll delve into how to create sections and navigate between these views in ArcGIS Experience Builder to enhance user engagement.

The two widgets utilized to create this functionality will be the Section widget and the Views Navigation widget. These widgets are used in conjunction with each other to allow multiple views of content and the ability for the user to go between these views. First, insert the Section widget by dragging it onto the page.

This widget will function as a container for multiple views of content. You can then adjust the size of the section and add widgets inside of the section. For this example, I added the Map widget and the Legend widget. These serve as the first view of the section. Note that in the Outline Body on the left of the Experience Builder editor, the Map and Legend widgets are within the Section widget under “View”.

If you click Section, you can view the settings of the Section widget and rename the view to provide a more descriptive title. In this case, I named it “Map View”. 

Now you can add a second view to this section. In the Section Widget settings, click the “New View” button. When the view is added, it is still a blank container which you can add any widget into. For this example, I made this view a table and added a Table widget configured with cemetery data. This view will be renamed  “Table View” in the Section widget settings. Now the “Map View” and “Table View” are set up, but there is no way for the user to go between these views. To allow this, you need to add the Views Navigation Widget. 

The Views Navigation widget must be added outside the Section to navigate between views within the Section widget. For this example, I reduced the size of the Section widget to leave some space for the Views Navigation widget. Once added to the page, the Views Navigation widget will automatically be connected to the Section widget and display the two views we have created. Now, you can click on these tabs to navigate between the Map View and the Table View. I have chosen to leave the Header and the Feature Info widget on the left, outside of the Section so that these widgets will be usable regardless of which Section view is clicked. The Feature Info widget has been configured to work with the Map in the Map View and Table in the Table View. See example video.

Mastering the art of creating sections and navigating between views in ArcGIS Experience Builder empowers you to design dynamic and user-friendly web applications with various content and data. By organizing content effectively and enabling seamless transitions between your content, you can captivate your audience and unlock the full potential of your spatial data. Contact us today for assistance creating powerful Experience Builder web applications or recreating your existing Web AppBuilder applications!