Open the experience
You’ll start by opening the experience that was created in the earlier tutorial.
- If you completed the previous tutorial, Arrange a web app layout with multiple widgets, reopen your American River Marine Estuary experience and skip to the next section.
Note:
If you don’t know how to find the experience, open ArcGIS Experience Builder and sign in with your ArcGIS account. Your experience will be listed on the Recent experiences page.
- If you did not complete the previous tutorial, open ArcGIS Experience Builder and sign in with your ArcGIS account.
Note:
If you don't have an ArcGIS account, see options for software access.
The Recent experiences page appears.
- Click the Create new button.
- Click the ArcGIS Online tab.
- In the search bar, type estuary tutorial template 2.
- On the American River Marine Estuary Tutorial Template 2 card, click the Create button.
The canvas appears, showing the experience created so far. It includes a map widget with two maps, a header with a title, and a column with three widgets: swipe, legend, and bookmark.
- On the builder toolbar, click the title and rename it American River Marine Estuary.
Add a window
You have more information to add to your experience: a locator map and credit text. However, you are afraid of overloading the layout with too much information and potentially distracting from the map. In a static layout, you can use visual hierarchy principals to ensure that important information—like the map—is noticed first, while secondary information—like credit text—is noticed last. In a web app layout, you can additionally use interactivity to control what gets noticed first.
Next, you’ll add a window to the layout to hold the locator map and credit text. The window will ensure that this secondary information is available and easy to read, without crowding the map. It won’t be visible until the user decides to reveal it.
- On the side toolbar, click the Page button.
- At the top of the Page pane, click the Window tab.
You can add multiple pages and multiple windows to an experience. This experience will have one of each.
- Click the Add window button. Scroll down and click Sidebar.
A window appears on the right side of the canvas. The rest of the canvas is darkened to make it appear as though the window is floating on top.
The window you added is a template, meaning it is already populated with a few widgets. Whenever working with a template, it’s recommended that you review its outline before making any changes, so you understand how the page or window is structured.
In the Page pane, the Outline section shows that the window contains an image, a button, and a column.
- In the Outline section, expand Column 2.
The column widget contains two text widgets.
- In the Outline section, click Text 2 to select it.
On the canvas, the Title text is selected.
You don’t need a title for your window, so you’ll delete this widget.
- In the Outline section, point to Text 2. Click the More button and click Delete.
Add text
You’ll add text to the window to credit the sources of the map data and the photos used in the bookmark widget.
- Copy the following text:
American River is a marine estuary on Kangaroo Island in South Australia. It is part of Encounter Marine Park and includes Pelican Lagoon Sanctuary Zone, a biodiversity hotspot which has been protected since 1914.
The data used in this map was derived from Estuarine Habitats of South Australia, a dataset provided by the Government of South Australia, Department for Environment and Water.
This site was created by Your Name on Current Date, following the tutorial Design a layout in ArcGIS Experience Builder.
Photo credits:
Seagrass: flickr user Paul Asman and Jill Lenoble - https://www.flickr.com/photos/pauljill/5777808662/
Seagrass/Algal: flickr user Gerry Thomasen - https://www.flickr.com/photos/gerrythomasen/174310588/
Samphire: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:sarcocornia_quinqueflora.jpg
Samphire/Atriplex/Grassland: iNaturalist user Samuel Brown - https://www.inaturalist.org/photos/31331920
Sand: flickr user Phil Whitehouse - https://www.flickr.com/photos/philliecasablanca/2051633887/
Melaleuca/Sedges: Wikimedia Commons user Melburnian - https://commons.wikimedia.org/wiki/file:melaleuca_squarrosa.jpg
Grassland: Wikimedia Commons user Kolforn - https://commons.wikimedia.org/wiki/File:Grassland_countryside,_Vale_da_Azinheira,_25_June_2016.JPG
Bare: Wikimedia Commons user Manage891a3 - https://commons.wikimedia.org/wiki/file:water_surface_lake.jpg
- On the canvas, double-click the remaining text widget to edit it. Right-click and choose Paste as plain text.
Tip:
If a Paste as plain text option is not available, press Ctrl+Shift+V or Cmd+Option+Shift+V.
The text includes some information about the estuary and provides attribution for the data and the photos. Next, you'll add hyperlinks to parts of the text.
- In the text widget, highlight Encounter Marine Park. In the Text 3 pane, click the Link button.
- In the Set link window, for Link to, choose URL. For URL, paste https://www.parks.sa.gov.au/parks/encounter-marine-park.
- Click OK.
The hyperlink has been added, but the color of the text is still black. To make the text that is a hyperlink stand out, you'll change its color to blue.
- In the Text 3 pane, click the Font color button. Click the blue box.
- In the second paragraph, highlight Estuarine Habitats of South Australia. Follow the same method as above to link this text to https://data.sa.gov.au/data/dataset/estuarine-habitats-of-south-australia.
- Change the font color of the hyperlink to blue.
- Edit the text to include your name and the current date.
- On the builder toolbar, click Save.
Add an image
Next, you'll add an image of a locator map to the window.
- Click the image widget. In the Image pane, click Select an image.
- In the Select an image pane, click the URL tab and paste https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data.
- Click outside of the text box to commit the change. Close the Select an image pane.
The image is a locator map of American River in context to the rest of Australia. It was created with ArcGIS Pro and saved as a PNG image.
Its labels are not legible because the map is too small. You’ll make the window wider so the map can expand.
- In the Page pane, click Window to select it.
Tip:
Alternatively, on the canvas, click the gap between the image and the text.
The Window pane appears.
- In the Position & Size section, for W, type 340 and press Enter.
The window becomes wider. You’ll also make the image widget taller.
- Click the image widget. Drag its bottom edge until the entire map is visible.
Now the image and the text overlap one another, making them both difficult to read. You’ll move the text down so it doesn’t interfere with the image.
- Click the text widget to select it.
There are no handles on the text widget: you don’t have the ability to move it down and away from the image.
Sometimes, you can't manually change the size or position of a widget because its size is set to Auto or Stretch. However, in this case, the text widget has a custom height size, so that is not the cause.
Tip:
To confirm that a widget has a custom height size, in its property pane, click the Style tab. Ensure Height is set to a number, rather than Auto or Stretch.
If you can't change a widget's size or position, even when it uses a Custom sizing method, check the Outline section to see if the widget is contained inside another widget.
- In the Page pane, review the Outline section.
In this case, the text is contained within a column. The column determines some aspects of the size and position of the text. In this case, you can move the text widget by moving the column widget that contains it.
- In the Outline section, click Column 2.
- On the canvas, dragging handles appear on the widget. Drag the top one down until it is positioned below the locator map.
Adjust the theme
The hyperlinks in the text widget were set to blue earlier blue. The blue color you choose was a part of the experience’s theme. Next, you’ll edit the theme to make the link color match the colors in the locator map.
- On the side toolbar, click the Theme button.
- At the bottom of the Theme pane, click Customize.
- Above Primary, click the blue edit button.
- For HEX, type #27a3ad and press Enter.
The primary color updates to the same turquoise color used in the locator map. It’s also one of the main colors in the Cover type map. The hyperlinked text and the buttons on the bookmark widget change from blue to turquoise .
Add a button and link it to the window
Next, you need to add a way for users to open the window. You’ll add a button to the header and link the button to the window.
- On the side toolbar, click the Page button. At the top of the Page pane, click the Page tab.
The window disappears. You can now continue editing the page instead of the window.
- On the canvas, point to the header and click Edit header.
- On the side toolbar, click the Insert button. In the Insert widget pane, click the Search button and type button.
- Drag the Button widget onto the canvas. Drop it on the right side of the header.
Don’t worry if the button isn’t placed exactly as you want it. You’ll tidy its size and position later.
- In the Button 2 pane, for Text, erase the existing text and type About this map. Press Enter.
The text on the button updates. Next, you’ll connect the button to the window.
- In the Button 2 pane, click Set link.
- In the Set link pane, for Link to, choose Window.
There is only one window in this experience, so you do not need to make a choice for Select a window.
- Click OK.
Finally, you’ll test the button and the window.
- On the builder toolbar, click Live view.
- Click the About this map button.
The window appears.
- At the top of the window, click the close button.
The window closes.
- On the builder toolbar, turn off Live view and click the Save button.
In this tutorial, you added a window and a button to a web app in ArcGIS Experience Builder. You learned how to edit text, add an image, link a button to a window, and change a theme color. Try the next tutorial in this series, Resize widgets for smaller screens, to learn how to customize layouts for different screen sizes.