ArcGIS Experience Builder

Get started with ArcGIS Experience Builder - Gallery 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, 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. Start an experience using an existing template or 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 explains how to get started with Experience Builder by building a simple, pagecentric experience. You can view the completed example that you will build in the following steps.

 

Create a pagecentric experience

Experience Builder enables you to build a variety of apps. Follow these steps to create a simple pagecentric experience using the Gallery template.

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. To get more information about any template, hover over the thumbnail.

Template hover text

You can also Preview the template.

Preview template

In this tutorial we will use the Gallery template. Locate the template, and click Create to begin.

Create from template

Gallery is a basic template for a pagecentric experience. It includes an image at the top of the page and prominent thumbnails to highlight content. If you can’t see the entire template, 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 it’s current settings and make changes in the settings panel on the right.

Experience Builder

The header bar at the top of Experience Builder has additional tools that will be used to create the experience.

Lock layout prevents accidentally moving and removing some widgets.

Live view lets you 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.

Follow these steps to create your experience.

 

Page

A page is a document that is the foundation for the app’s layout. For this example, the page should fill the entire width of the browser.

Step 1 – Select the page from the side panel.

Select page

Step 2 – Make a custom size page.

Note that in the page settings panel the default is Auto. This ensures that the page will fill the browser. However for this example, we will choose Custom and design a page around a width of 1280.

In Content width click Custom, then enter 1280 as the Max width.

Page settings

 

Configure the Image widget

Follow these steps to edit settings for the image widget located at top of the page.

Step 1 – Select the Image widget at the top of the page. You can click the widget to select it, or select it from the outline panel on the left.

Step 2 – Add the image using a URL.

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

(b) – Select URL

(c) – Paste the following into the URL input:

https://onlinelabs.maps.arcgis.com/sharing/rest/content/items/46e8176749ac4f51b88357b0238c435f/data

Image widget settings

 

Change the title and subtitle

Step 3 – Double click the title and subtitle (which are text widgets) to enter enter new text.

Step 4 – Select the text to display the edit toolbar to make changes. Make changes as desired, such as color and typography.

Edit toolbar

You can also change the current settings in the settings panel.

Text format

After making edits to the title and subtitle, your app should look something like this, depending on the text and settings you chose.

 

Experience Builder

 

Gallery rows

The Gallery template includes several rows with image and text widgets. You can think of these as “cards” which can be used to highlight your content. In the steps below you will edit the settings for one of the cards, and can apply those steps to other cards.

Step 5 – Select the image widget in the first card.

You can click the widget to select it, or select it from the outline panel on the left.

Step 6 – Add an image using a URL.

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

(b) – Select URL

(c) – Paste the following into the URL input:

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

 

Image widget settings

Step 7 – Add a link to the image widget to open an app. This will open the app when the image in the card is clicked.

(a) – Click Set link.

(b) – Select Web address from the dropdown.

(c) – Enter the app URL. Use the following URL: https://livingatlas.arcgis.com/wayback/

(d) – Choose to open the app in a New window.

(e) – When finished, click OK.

Image widget settings

Step 8 – Edit the card title text.

Double click to edit the card title text widget and enter “World Imagery Wayback.”

Step 9 – Edit the card summary text.

Double click to edit the card summary text widget and enter “Wayback is a digital archive providing access to the different versions of World Imagery created over time.”

The completed card should look like the following:

 

Completed card

Step 10 – Complete the remaining two cards in the row by repeating Step 5 through Step 9. The following can be used for the cards:

 

Second card:

Image: https://www.arcgis.com/sharing/rest/content/items/ffc7b01dfbd2450db2bd660611e4ea54/data

App link: https://livingatlas.arcgis.com/sea-ice/

Title: Sea Ice Aware

Description: This app displays the monthly mean sea ice extent for the Arctic and Antarctic along with the historical median extent.

 

Third card:

Image: https://www.arcgis.com/sharing/rest/content/items/a35416cb27674729996dd0e590b17fc7/data

App link: https://livingatlas.arcgis.com/topoexplorer/

Title: USGS Historical Topo Explorer

Description: The USGS Historical Topographic Map Explorer delivers access to 177,000 topographic maps dating from 1882 to 2006.

 

After completing the above, the experience should look similar to the screen capture below:

Experience Builder

Step 11 – Complete your experience.

You can complete your experience by editing the settings for the rest of the widgets in the template. Click a widget, or select it from the outline, to display its settings and make changes.

The majority of the remaining widgets are the same as those described above. The rest are straightforward enough that what you have learned above can be easily applied to the rest of the template.

You can streamline the experience by removing entire rows. Select the row from the outline, then move your mouse to the top center of the row to display the edit toolbar where you can click Delete.

 

Delete row

 

More information

For more information see

About the author

Tech evangelist and product strategist 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

Use ArcGIS Living Atlas to create a custom basemap gallery

Read this article