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.

Step 1 – Sign in.

Go to experience.arcgis.com and sign in to your ArcGIS account, or sign in 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 – Choose 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.

Experience Builder

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.

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 settings panel click Select map.

Map widget settings

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 select it, or choose any map you have. When finished, click Done.

Add data

Click the map in Select data. The settings panel for the map widget will update and the map will be displayed in the application.

Select data

Step 3 – Review other settings.

Now that the map has been added to the widget, change other settings such as the initial view, which tools appear, and the tool layout. Choose the settings you prefer. Below you will see the Tools section showing the toggles to add zoom, a home button, search, and fullscreen.

Map widget settings

 

Configure the Legend widget

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

Step 1 – Select the legend widget.

Click the legend widget or select it from the outline to view the current settings.

Legend widget

Step 2 – Change the title.

Click the Style tab and edit the Label. By default the title is the widget name, in this case “Legend 1.” Change the label to “Legend.”

Legend label

 

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.

Step 2 – In the Content tab of the widget settings, adjust the slider to enable Toggle layer visibility.

Map layers widget settings

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

Step 3 – Change the widget label.

In the Style tab, edit the label to change it from the widget name “Map Layers 1” to “Layer Visibility.”

Layer widget settings

Click the X to dismiss 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.

Selected 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. Click Delete in the layout toolbar.

Delete subtitle

Step 3 – 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 text

Step 4 – 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. 

https://www.arcgis.com/sharing/rest/content/items/98e813b8f5914ea7b88fe312f207e525/data

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 Web address 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.

Image widget settings

 

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

About the author

Tech evangelist and product manager at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS Platform. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email bszukalski@esri.com

Connect:

Next Article

How to Make this Corner Overview Globe in ArcGIS Pro

Read this article