ArcGIS Experience Builder

Get started with ArcGIS Experience Builder: Foldable template

ArcGIS Experience Builder enables you to deliver responsive web experiences without writing any code. You can create apps and/or 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, simply drag, position, and configure widgets such as maps, images, text, and tools. You can add triggers and actions to make widgets work together, within a single app and across multiple pages. You can begin building an experience using an existing template, or can create one from scratch. You can also save your work as a new reusable template. ArcGIS Experience Builder is built into ArcGIS Online, so you can leverage all of your existing content.

For more information on the basics see:


This tutorial

This tutorial that follows shows you how to get started working with ArcGIS Experience Builder by building a simple, mapcentric experience using the Foldable template.

You can view the completed experience and follow along by using the Places to See in Washington D.C. web map. Sign in to your ArcGIS account and save the web map to use it in this tutorial.


Create a mapcentric experience

You can use Experience Builder to build a variety of apps. Follow these steps to create a simple, mapcentric experience using the Foldable template.

Step 1 — Sign in.

Go to and sign in to your ArcGIS account, or sign in at your organization home and launch Experience Builder from the app launcher.

App launcher

After signing in you will see a gallery where you will find experiences that you have created, have been shared with you, or are publicly available.

Step 2 — Click Create New.

Create new experience

This step advances you to the template gallery, where you can choose from available templates and begin creating a new experience.

Step 3 — Select a template.

The template gallery contains a variety of default templates, as well as templates that have been shared with you. To get more information about any template, hover over the thumbnail.

Template hover text

You can also preview the template.

Preview template

Locate the Foldable template and click Create to begin.

Create experience using a template

Step 4 — Explore the template.

Foldable is a basic template for an appcentric experience. It includes widgets for a title, subtitle, map (including standard zoom tools), legend, and layer list. If you can’t see all of the widgets, fit the app to the the current window.

Fit to current window

In the panel on the left you will see the outline of the current page. Click the arrows to expand the view to show all the widgets in the template. Click any widget, or select it in the outline, to view its current settings and make changes to the settings in the panel on the right.

Foldable template
View larger image

Additional tools in the header bar at the top of Experience Builder will be used to create the experience.

Lock layout prevents accidentally moving and removing some widgets. Live view lets you view and work with the app using its current settings. Additional tools let you preview the app on different size devices, and there are also undo/redo, save, and publish tools. Don’t forget to save your work from time to time.

In the steps that follow, each widget will be configured to create your experience.


Configure the Map widget 

First you will connect to a map and add tools. You will do this by adding a map to the map widget, and adjusting settings to add a search tool, zoom tools, and a home button.

Step 1 — Select the Map widget to view its settings.

In the center of the builder you will see the Map widget with a placeholder map. Click the Map widget to select it, or select it from the outline panel, to display the current settings.

Step 2 — Set the map used by the map widget.

In the Content tab in the setting panel, click Select map.

Select map

At the bottom of the Select data panel click Add new data. Note that you can also search, or filter for type.

Add new data

Add data displays available maps. If you have saved the example map used in this tutorial, locate it and click to select it, or choose any map you have. The selected map will display a checkmark.

Add web map
View larger image

When finished, click Done in the lower right.


Click the map in the Select data panel. The settings panel for the map widget will update and the map will be displayed in the application. Set the Initial view to Default to open the map at its saved extent.

Select web map

Step 3 — Review other settings.

Now that the map has been added to the widget, you can review and change other settings such as which tools appear, the tools layout, and others. Choose the settings you prefer, remember that you can toggle from Lock layout to Live view to preview your changes and experiment with them.

Below you will see the Tools section showing toggled zoom, home, navigation, and fullscreen buttons.

Tools settings


Configure the Legend widget

Next, you will configure the legend. The template contains a Legend widget in the upper right of the application that displays the legend for visible layers in the map. Follow the steps below to change the title.

Step 1 — Select the Legend widget.

The Map Layers widget and Legend widget are contained in a Widget Controller. You can select the Legend widget by clicking it in the upper right of the app in the Widget Controller.

Legend widget

You can also select it by opening the Widget Controller in the Outline section, then selecting the Legend.


Step 2 — Change the title.

In the configuration panel, click the pencil to edit the label. By default the label is the widget name, in this case “Legend 1.” Change the label to “Map Legend.”

Edit label

Click X to close the Legend widget.

Configure the Map Layers widget

The Map Layers widget displays the layers in the map and lets you to choose what options are available to interact with them, such as toggling visibility, zoom, and transparency. In the following steps you will add the ability to toggle layer visibility and change the title of the widget.

Step 1 — Select the Map Layers widget from the widget controller or from the outline, as described in Step 1 above.

Step 2 — In the Content tab, adjust the slider to enable Toggle layer visibility.

Toggle layer visibility

You can experiment with other options and use Live view to examine how they work.

Step 3 — Change the widget label.

In the configuration panel, click the pencil to edit the label to change it from the widget name “Map Layers 1” to “Layer Visibility.”

Widget label

Click X to close the Map Layer widget.


Configure the Widget Controller widget

The Widget Controller widget is a container for other widgets, in this case the Legend and Map Layer widgets. In the next steps you will change the shape and size settings that will be applied to all widgets within the widget controller.

Step 1 — Select the Widget Controller widget from the outline.

Select widget controller

Step 2 — Change the size and shape of tools in the container.

In the Content tab appearance section, set the icon style to circular and size to large.

Widget controller settings

Step 3 — Give the app user the ability to open multiple tools at once.

By default, only one widget at a time can be opened from the widget controller. For example, the app user can open the legend tool or the layer tool, but not both at the same time.

In the Behavior section of the settings panel, choose Multiple to enable more than one widget to open at once, and set them to stack when opened.

Widget controller settings

You can also set one of the widgets to open automatically when the user opens the app. Experiment to see what you like using Live view to see how your settings work.


Edit title and subtitle Text widgets

Next, you will edit the title bar. Two text widgets, one containing the title and the other the subtitle, are contained within the fixed panel widget above the map. You will remove the subtitle and expand the title.

Step 1 — Unlock the layout.

To remove the subtitle and make other adjustments, you must unlock the layout. Turn off Lock layout in the Experience Builder header bar.

Turn off layout lock

Step 2 — Remove the subtitle.

Select the subtitle text widget in the header. Click Delete in the widget toolbar.

Delete subtitle

You can also select the subtitle and delete it from the Outline.

Delete subtitle

Step 4 — Select the subtitle container and delete it.


Delete container

Step 5 — Change the title.

Select the title text widget and click Edit from the layout toolbar.

Edit title

Change the title to “Places to See in Washington D.C.” You will have to resize the text widget to display the entire string. Click the Text widget to show the handles, and grab the middle right handle to drag it wider.

Resize title

Step 6 — Lock the layout again to avoid any accidental movement of widgets as you work with them.

Layout lock


Configure the Image widget

The Image widget is in the top left of the application and is contained within the Fixed Panel widget. In the steps that follow, you will change the image that’s displayed and add a link from the image to a website.

Step 1 — Select the image widget by clicking it or selecting it from the page outline.

Select image widget

Step 2 — Add the image using a URL.

(a) – In the settings panel click Select an image.

(b) – Select URL.

(c) – Copy and paste the following into the URL input.

Enter a carriage return after you paste the URL.

Image widget settings

Step 3 — Add a link to a website.

(a) – In the settings panel click Set link.

(b) – Choose URL from the dropdown list.

(c) – Copy and paste the following into the URL input:

(d) – Choose New window to open the link.

(e) – Click OK when finished.

Add link to image


Configure the Fixed Panel widget

The top of the application is a fixed panel widget. In the next steps, you will change the color settings of the widget.

Step 1 — Click the fixed panel widget from the outline.

Select fixed panel widget

Step 2 — In the widget settings, choose a different background fill color to highlight the tools and text.

Fixed panel settings


Finalize the app

You can go back and make additional adjustments, or reconsider settings, using Live view to see how things work. To create the final app shown below, the layout was unlocked and the height of the fixed panel and map widgets were adjusted within the application body. The image widget and title were also resized.

Completed experience

When finished, Save and Publish the experience.

Save and Publish

It’s a best practice to complete the item details for the experience by adding a summary, description, and thumbnail. You can edit the name, title, and thumbnail by clicking more options on the experience card, and selecting Edit info, or edit the item pages by clicking View details.

Experience card

Shown below is the completed item page.

Experience item pages


More information

For more information see

This blog article was originally published on February 18, 2020, and has been updated.

About the author

Corporate technology evangelist and advocate at Esri, focusing on ways to broaden access to geographic information and helping customers succeed with the ArcGIS system. On a good day I'm making a map, on a great day I'm on one. Email or connect on LinkedIn (


Next Article

Mix and match buffer styles for your business solutions

Read this article