Getting Started

with
Experience
Builder
June 24, 2021

[email protected]
 1 What is Experience Builder?
2 Firing up Experience Builder
3 Let the Configuration Commence
4 Adding Data to Your Experience
5 Configure Map Widget
6 Configure List Widget

Agenda
7 Adding some Action
8 Add more maps to your Map
9 Add more maps to your Map
10 Map related Widgets: Legend, Layers and Bookmarks
11 Color your Experience: Pick your Theme
12 Customize your Header
13 Add a Second Page and Embed an App
14 Add a Menu to your Experience
15 Picture Gallery
2. Getting some Content Ready
We will start by picking two drought related maps to
show on the first page of our “Experience”
1 • Open a browser and visit https://livingatlas.arcgis.com/
2 • Do a search for “Drought”.

3
Click on “Croissant” and
Choose Map Viewer. Leave
the Living Atlas tab open.
 4 Sign into your
2. Getting some Content Ready ArcGIS Online
Account
4• Sign into your ArcGIS Online
Account
5 • Zoom to the Western United
States
6• Click on Save > Save As

7• Add your initials to the end of the Title

8 • Add “Temp” as a tag so you know it will be safe to delete later.

9• Click on Save Map

2. Getting some Content Ready
10• To make it easier to orient yourself we will add state
boundaries. Click on Add > Browse Living Atlas Layers

11
13• Click on the “Change Style Button” for the
Do a Search for State Boundaries layer
“State Boundaries”
14• Show location only, and then click on Options

15• Click on

12 16
Set the fill to no
Add the USA States color and then click
(Generalized) OK
 2. Getting some Content Ready
17 • Click OK again, and then Done, to close the Change Style dialog box
18 • Next, we will filter and display only the Western States. Click on Filter

19 • Click 5 times, so there are 6 statements

20
Click on the Drop-down and choose “Display features in
the layer that match any of the following expressions

21 Use this expression, click on “Unique” before picking

Idaho from the list. Then repeat for Utah, Nevada,
California, Oregon and Washington
2. Getting some Content Ready
22 • Click “Apply Filter”. We will use this layer to help zoom and filter the map in the Experience
23 • Save your map

24 • For the second map go back to the Living Atlas (https://livingatlas.arcgis.com/). If not already put in, type
in “Drought” in the search box
25 • Click on All content types and then choose Maps

26
Open the map in a Map Viewer
2. Getting some Content Ready
27 • Sign into your ArcGIS Online account if needed
28 • Click on and turn on the SPI 01
29 • As on the last map, add the “USA States (Generalized)”
from the Living Atlas, make the symbols hollow and
show only the Western states SPI stands for Standardized Precipitation Index.
It looks at the difference between the expected
30 • Zoom to the Western United States precipitation compared to what actually
happened. 01 = monthly average, 03 = 3-month
31 • Click on Save > Save As average, etc.
32 • Add your initials to the Title
33 • Add the Temp tag
34 • Save your Map
3. Firing up Experience Builder 2
Click on the
Waffles
1 • Go to the Content Page in ArcGIS Online (look for
this in the top-left hand side of your screen)

4• After Experience builder is fired up click on

3 Click on
Experience
Builder
3. Firing up Experience Builder
5 • Hover over the Jewelry Box template to see a description
and then click on Create in the Jewelry Box
6 • Click on Create
4. Let the configuration commence
1 • Click on the pencil next to the Experience name
and rename to “Drought in the Western USA –
Your Initials”
2 • Unlock the layout so we can move some and
delete some elements by moving the slider to
the left
3• Double click on the title and change it to
“Drought in the Western USA”
4 • To ensure you can see your entire title click on
the Subtitle box and delete by clicking on the
garbage can
4. Let the configuration commence
5• Grab the handles for the title box and enlarge it
so your whole title is visible

6 • Hover over “Page 1” near the top-left corner of your map until you see the
the … Then Click on rename. Rename to “Drought maps”
 5. Add Data to your Experience
4 Confirm both Web Maps
Before configuring the map and list widgets we need to are added to “Data”
add data to our Experience

2
3• Select both maps that
1 Click on Add you made earlier, and
Click on Data then click on Done
Data
6. Configure Map Widget
1 • Click on the map in the Experience builder to
open up it’s setting
2 • Click on “Select map”

3 • Choose the USA Drought Outlook map with your

initials on it
4 • Click the X to the right of “Select data” to close
the panel

5• Click on Custom on the Initial View to set a custom extent on our

drought map
6 • Click on Modify and the zoom the map closer to the Western United
States. Click OK when you are satisfied
6. Configure Map Widget
7• Note how you can enable and disable various widgets and change the position of
those widgets on your map.
•8 Click on the Style tab and notice the controls you have
for setting the size of the map, border color and size,
etc.
•9 Every element has a name. Even though this name is
not visible to the people viewing your experience, it
may help you organize your widgets, especially if you
have many of the same type. Click on the pencil next
to “Map 1” and change the name of the map widget to
“Drought Outlook Map”
7. Configure List Widget
1 • First, we need to get a picture we can use. Open a new 4
browser tab and go to pixy.org
2 • Do a search for “Drought” and click on the picture you
want
3• If needed, close an advertisement
4 • Right-click on the image and choose “Save Image As” and
save it somewhere on your hard drive
5 • Click on the image in the top item in the list widget
6
• On the settings on the right-hand side click on
“Select an image” and then “Upload”
7 • Browse to the picture you just downloaded and click Open
7. Configure List Widget We would like to add the names of
all the States to the list so that users
can click on it and zoom there

8
Click on 11
Expand the
“Page” USA Monthly 10
Click on
Drought Map Select data

9
Click on
List 12
Click on USA States
(Generalized)
7. Configure List Widget

13• In order to sort the order of the items in the list, and
filter if needed we need to create a view. Click on the
drop-down for the data you just selected
14• Go to the Sort tab and sort by Name
15• Click
7. Configure List Widget
18
Click on Dynamic
17 Content
Click on Edit

16
Click in the top text
box in the list

19
Since we want to
display State Names,
click on “Name”
 7. Configure List Widget
22
25 • Finish the text box by tying “People in
21 Click on Dynamic Data 2017”
Click on Edit

26 • You list should now look like this:

20
Click in this text box

27
Grab the handles to
resize the entries in
23 the list
Click Population (2017)

28• Click on to test out your new list

8. Add some Action to your List Widget
1 • In the settings pane, click on Action
2 • Click on Message action – as soon as a person select
something we want the map to automatically respond and
zoom to that State.
3 • So as soon as the app experiences a change in selection,
we are asking it to do something, i.e., trigger something.
Click on
6 • Click on

7 • Click on “Zoom to”

4 • Click on 8 • Note that you can set a
zoom scale if you want:
5 • Click on Add Action

9 • Click on to test out your new list

9. Add more maps to your Map Widget
1 • Click on the map (i.e., the map widget) and go to the Content tab on the
Settings pane
2 • Click on Select Map, and then choose the Standardized Precipitation map

3 • Click on Custom Initial view and zoom a little closer to the Western US

4 • Save your map and then go to Live View and check it out

What happens when you

select a State? Do both
maps zoom?
10. Map related widget: Legend
1 • Click on the + in the top-left of the screen and drag a
legend widget onto your map
2 • Use handles in the corner to make it smaller

3 • Next, we need to tell it where to look for the data in the

legend. Click the “Drought Outlook Map” on the Content
Pane.
4 • If you wanted to change the colors, you can scroll down a
little and click on

5• Since the current colors are pretty good, I will leave it as is

6 • Make your legend widget a little taller so the entire legend
fits
7 • Save your map and then click on Live View to check it out
10. Map Related Widget: Map Layers
8 • Click on + in the top-left of your screen and then
click and drag the Map Layers widget onto the map
9 • For the Source let’s try “Interact with a Map widget”

10 • Save your map, and see how it looks

10. Map Related Widget: Bookmarks
11 • Click on the Bookmark Widget and drag it onto the
map
12 • On the settings pane click a template you like. I am
picking the list because it does not take up too much
real estate 17 Zoom and Pan your map
13 • Click on the settings pane to Boise (or another
14 • First, we need to tell the Experience which map the bookmark location)
bookmarks interact with. Click on the drop-down
and then on Drought Outlook Map
15 • Click on
16 • Rename the Bookmark, for example “Boise”
19 • Repeat process for two other bookmarks 18
20• Save your experience and test it out in Live View Click Save
11. Color your Experience: Pick your Theme
1
• Click on the painter’s pallet on the left-hand side
to display the themes.
2 • Click on the different themes to see what they

look like, and then pick one you like

12. Customize your Header
1 • Click on the image in your header
2 • On the settings pane, on the Content tab choose “Select an Image”

3 • Normally you would pick your logo, but to save some time, pick the drought
picture you used earlier
4 • Next, click on the header itself.

5 • Scroll down on the Content tab until you see the Background fill and choose a
color you like, for example black
6 • To keep the font in the header readable, click on the text in the header, and then
on the pencil.
7 • Select the text, click on the Color selector and choose white

8 • Save your experience

9 • Publish your experience. Then view your published experience.

13. Add a Second Page and embed a Web Mapping App
1• Click on Page on the left, and then add a new Page
2 • Choose the Blank fullscreen template

3 • On this page we will highlight a drought related web

application someone else made. Open a new browser tab
and go to the Living Atlas
4 • Do a search on “drought”, and then filter to show
Apps/Story Maps
5 • Scroll down a little and look for the Esri Drought Tracker (or
another app that looks interesting to you)
6
Click here and
choose “Open”
13. Add a Second Page and embed a Web Mapping App
7 • Leave the browser tab for the Drought Tracker app
open and return to your Experience editing tab
8 • Rename the Page to “Drought Tracker”

9 • Click on the + to add a new Widget. Scroll down and

add drag the embed widget onto the main screen
10 • Click on the drop-down near the top-left
corner of the embed widget and choose
to option at the bottom “Full size”
13. Add a Second Page and embed a Web Mapping App
11 • Switch to the browser tab with the Drought Tracker app and copy the URL
12 • Go back to your Experience Builder

13 14
Click on URL Right-Click in this black box
(you can just see the top
peeking out in this screen
16 shot)
Choose Plain Text
15
Click on Paste As
13. Add a Second Page and embed a Web Mapping App
17 • Below the URL slide the Auto refresh to the right
and set an interval of 60 minutes
18 • Save your Experience

19 • Publish you experience and then view your

Experience

Do you see a
problem?
14. Adding a Menu to your Experience
1 • To be able to navigate between two published pages we need to have a
Menu. Click on + and Drag a Menu Widget and snap it to the top of your
Page
2 • Note that the text for the first page is not very readable:

3• In the settings panel click on Content and click on Pills

4 • Then click on the Style tab, scroll down a little, and change the
background color to the menu items are easier to see (for example, try
a black background)

5• On the top-left hand side of your screen click on the first page
(“Drought Maps”) and also add a menu along the top.
6 • Save your Experience, Publish your experience and try it out
15. Picture Gallery
1 • Go to pixy.com and download three drought related pictures
2 • Click on Page add a page and pick the blank Fullscreen
template
3 • Click on and add a row widget along the top. This will hold
the Navigation widget later on.
15. Picture Gallery
4 • Add a Section widget (look near the bottom of the Widget list)
and drag it below the Row widget you just put in
5 • Grab the handles on the Section widget and resize it so that
it is the same width as your row
6 • On the Setting Pane, on the Content tab click on the paint
brush for View 1
15. Picture Gallery
7• Click on
8 • Click on the drought picture you used on the previous page

Click on the + to
add another view

9• Click on the paint brush for the second view and upload one of the drought pictures you downloaded
from pixy.org earlier
15. Picture Gallery
10 • Add a third view for another drought picture you download
11 • Because we added the images as view to one section, we can use the Views Navigation widget to move
between the pictures. Drag the navigation widget to the Row you placed at the top of the page earlier

12 • Since the titles of the views are not

very informative, let’s rename them
15. Picture Gallery
13 • Click on Live View to see what it looks like right now. Looks like it works, we just need to resize the Row
with the Navigation Widget a little
14 • Turn off the live view and click on the Row Widget. On the Settings pane go to the Style tab

15 • Set the height to “Auto”

16 • Save and publish your Experience

17 • Check it out!
 What’s Next?
Future Online Classes

7/20/2021: Getting Started with Maps for Office

In-Person Classes (Tentative) in 2021

in room 214 at ITS from 1-5 PM

8/19: Getting Started with AGOL part 1 and 2

9/2: Survey123 Part 1 and 2
9/7: Hub and Experience Builder
9/30: Dashboards and Story Maps

https://gis.idaho.gov/gis-services-
for-state-agencies