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 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.
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.
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.
You can also preview the template.
Locate the Foldable template and click Create to begin.
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.
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.
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.
At the bottom of the Select data panel click Add new data. Note that you can also search, or filter for type.
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.
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.
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.
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.
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.”
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.
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.”
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.
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.
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.
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.
Step 2 — Remove the subtitle.
Select the subtitle text widget in the header. Click Delete in the widget toolbar.
You can also select the subtitle and delete it from the Outline.
Step 4 — Select the subtitle container and delete it.
Step 5 — Change the title.
Select the title text widget and click Edit from the layout toolbar.
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.
Step 6 — Lock the layout again to avoid any accidental movement of widgets as you work with them.
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.
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.
https://www.arcgis.com/sharing/rest/content/items/98e813b8f5914ea7b88fe312f207e525/data
Enter a carriage return after you paste the URL.
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: https://washington.org/
(d) – Choose New window to open the link.
(e) – Click OK when finished.
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.
Step 2 — In the widget settings, choose a different background fill color to highlight the tools and text.
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.
When finished, Save and Publish the experience.
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.
Shown below is the completed item page.
More information
For more information see
- ArcGIS Experience Builder
- ArcGIS Experience Builder overview and concepts
- What is ArcGIS Experience Builder?
- Widgets overview
- Create your first web experience
This blog article was originally published on February 18, 2020, and has been updated.
Commenting is not enabled for this article.