ArcGIS Experience Builder allows you to deliver responsive web app experiences without writing code. You can create apps and pages that contain 2D and 3D maps, text, and media. Experiences can focus on one type of content or can combine and link many types of content to create a complete experience and destination for your audience.
To create an experience, drag, position, and configure components such as maps, images, text, and tools. You can add triggers and actions to make widgets work together, within a single app, or across multiple apps and pages. Start an experience using an existing template or create one from scratch, saving your work as a new reusable template. ArcGIS Experience Builder is built into ArcGIS Online and ArcGIS Enterprise, so you can use all of your existing content. For more information, see the following:
This tutorial
This tutorial takes you through the steps of configuring an app by replacing a template’s default data with your own data.
Everyone deserves the opportunity to enjoy time outside. Organizations such as the Feminist Bird Club aim to make conservation efforts and the outdoors inclusive and accessible to people who historically may have been excluded from environmental movements, including BIPOC, the LGBTQIA+ community, and people who live in cities.
In this scenario, as a GIS manager for an advocacy group, you’ll create an easy-to-use web app showing birdwatching hot spots around Boston, Massachusetts, that are accessible through public transportation.
You can view the completed experience and follow along using the Birding in Boston web map. The map shows a bird’s-eye view of Boston, literally. Among the urban sprawl, migratory birds look for green spaces where they can rest and eat. These are some of the best birdwatching spots around the city, according to eBird, a project of the Cornell Lab of Ornithology.
Sign in to your ArcGIS account and save the web map to use it in this tutorial. If you don’t have an ArcGIS account, you can create a free trial account.
Create the experience
Step 1 — Start ArcGIS Experience Builder. Go to experience.arcgis.com and sign in to your ArcGIS account, or sign in at your organization home and launch Experience Builder from the app launcher.
Step 2 — Click Create new.
You see the template gallery. In the gallery, you can choose from available templates and begin creating an experience.
Step 3 — Select a template.
Browse to the ArcGIS Online tab. This section of the template gallery contains several finished experiences created by the Experience Builder team.
Locate the Place Explorer template and click Create to begin.
Step 4 — Explore the template.
Place Explorer is a multipage template with a full-screen style, useful for showing location and important information about places in your community. It includes widgets for a map and displaying feature info.
By default, Place Explorer is a tourism app for San Diego. Click around the experience to learn about the template. The app shows places in San Diego in three categories—Food & Drink, Arts & Culture, and Outdoor. Each category has its own page, and each page has a Map, List, and Feature Info widget. Click a restaurant in the Food & Drink list and the map pans to the restaurant. Click the restaurant’s photo in the list to reveal more information about the restaurant.
The new experience only needs one page. In the Table of Contents, click More for the Arts&Culture and Outdoor pages. Delete both, leaving just the Food&Drink page. Rename Food&Drink to Birding in Boston.
Configure the Map widget
First, connect to a new map. The Map widget allows you to display 2D or 3D geographic information. The widget requires a data source, such as a web map.
Step 1 — Select the Map widget to view its settings.
Step 2 — Replace the web map used by the Map widget.
On the Content tab in the setting panel, remove the Food_Drink map, then click Select map.
At the bottom of the Select data panel, click Add new data.
The Add data window displays available maps. If you saved the example map used in this tutorial, locate it, and click to select it. The selected map will display a check mark.
Click Done in the lower right.
Click the map in the Select data panel. The Map widget displays the new map.
Step 3 — Adjust the extent.
Set the Initial view to Custom and click Modify. Pan and zoom in the Modify initial view panel until you have all 10 birding hot spots in view. It’s OK to have the train lines extend outside of the initial view, because the focus of the app is the birding hot spots.
Configure the List and Feature Info widgets
Next, configure the list. Place Explorer contains one list widget per page. You can use the Expand button to expand and collapse a list into the side of the page.
Step 1 — Configure the List widget.
Click the first Text widget in the list, the one that currently says STK San Diego. Notice the text changes to {RestaurantName}, which is an attribute from the connected layer. When you connect a Text widget to data, the Dynamic content button becomes available on the toolbar.
You can use Dynamic content to choose the field from the selected data for which you want to show attribute values.
On the List widget’s content tab, remove Places to Eat in San Diego. Click Select data, expand Birding in Boston, and select the Boston Birding Hotspots layer.
Click the Dynamic content button for the first text widget. On the attribute tab, click Name. Delete {RestaurantName}. Now when you click away, notice that the list contains the names of all the birding hot spots.
Repeat this process with the second Text widget. Replace the old {Address} attribute with the new one.
Next, click an Image widget (the picture of the chicken will do). Under Image source, make sure URL is selected. Click Attribute and select Thumb URL (640px).
Step 2 — Configure the Feature Info widget.
Under view_2_FeatureInfo in the outline, click Image 9.
On the Content tab, connect again to Boston Birding Hotspots. Under Image source, make sure URL is selected. Click Attribute and select Pic URL (1280px).
Click Feature Info 1. Under Source, again connect to Boston Birding Hotspots. Under Details options, make sure only Content is checked (the Title and Media appear elsewhere, so you don’t need them again).
Delete Text 10. Slide Text 11 over to replace it. Configure Text 11 using Dynamic content and the Name attribute, as in step 1.
Step 3 — Configure the data for an empty selection.
The map has specific features, the birding hot spots, for users to click. Make sure that when users click anywhere on the map besides those 10 features, the Feature Info, List, Text, and Image widgets don’t display empty data, such as this:
Click the data tab, then click the Birding in Boston web map, then click the Boston Birding Hotspots feature layer, then check View for empty selection.
Configure triggers and actions
If you explored the template app before, you may have noticed that selecting a feature on the map opens it in the list, and that selecting a feature in the list pans to it on the map. You can replicate those triggers and actions with your new data.
Step 1 — Add a list trigger.
Click the List widget and go to the Action tab. Under Record selection changes, delete and re-add the “Map 1 Pan to” action. Delete the “Feature Info 1 displayFeature” trigger.
Step 2 — Add a feature info trigger.
Click the Feature Info widget and go to the Action tab. Under Record selection changes, delete and re-add the “Map 1 Pan to” action.
Finalize, save, and publish
The experience no longer uses the web maps that came with the template. You can remove the Art_Culture, Food_Drink, and Outdoor web maps from the data tab.
Add a meaningful header. Click Edit header.
Delete Menu 1. Replace the title with “Birding in Boston.” Add another Text widget with the subtitle “Check out these great birding spots in and around Suffolk County.” Include data acknowledgments for MassGIS, eBird, and ArcGIS Living Atlas of the World. Always sign your work.
You can make additional adjustments, such as changing the theme of the app. Experiment with other settings such as background color and fonts until satisfied. When finished, save and publish the experience.
Share the experience publicly. Click the Options button, then click Change share settings.
You see the experience’s item page. Click Share, then select Everyone (public).
More information
For more information about Experience Builder, see the following resources:
- ArcGIS Experience Builder
- ArcGIS Experience Builder overview and concepts
- What is ArcGIS Experience Builder?
- Widgets overview
- Try ArcGIS Experience Builder
Article Discussion: