Open the experience

You’ll start by opening the experience that was created in the earlier tutorial.

  1. 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.

  2. 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.

  3. Click the Create new button.

    Create new button

  4. Click the ArcGIS Online tab.

    ArcGIS Online tab

  5. In the search bar, type estuary tutorial template 2.
  6. On the American River Marine Estuary Tutorial Template 2 card, click the Create button.

    Create button on the American River Marine Estuary template card

    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.

    Full view of the experience template

  7. On the builder toolbar, click the title and rename it American River Marine Estuary.

    Experience title

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.

  1. On the side toolbar, click the Page button.
  2. At the top of the Page pane, click the Window tab.

    Window tab

    You can add multiple pages and multiple windows to an experience. This experience will have one of each.

  3. Click the Add window button. Scroll down and click Sidebar.

    Sidebar template

    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.

  4. In the Outline section, expand Column 2.

    Outline with Column 2 expanded

    The column widget contains two text widgets.

  5. In the Outline section, click Text 2 to select it.

    On the canvas, the Title text is selected.

    Title text selected in the window

    You don’t need a title for your window, so you’ll delete this widget.

  6. In the Outline section, point to Text 2. Click the More button and click Delete.

    Delete option in the More menu

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.

  1. 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

  2. On the canvas, double-click the remaining text widget to edit it. Right-click and choose Paste as plain text.

    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.

  3. In the text widget, highlight Encounter Marine Park. In the Text 3 pane, click the Link button.

    Link button

  4. In the Set link window, for Link to, choose URL. For URL, paste https://www.parks.sa.gov.au/parks/encounter-marine-park.

    URL settings

  5. 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.

  6. In the Text 3 pane, click the Font color button. Click the blue box.

    Theme colors

  7. 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.
  8. Change the font color of the hyperlink to blue.

    Hyperlinked text

  9. Edit the text to include your name and the current date.
  10. On the builder toolbar, click Save.

Add an image

Next, you'll add an image of a locator map to the window.

  1. Click the image widget. In the Image pane, click Select an image.

    Select an image button

  2. In the Select an image pane, click the URL tab and paste https://www.arcgis.com/sharing/rest/content/items/11b62ea3ef81427dbf6315563f17c810/data.

    Image URL

  3. 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.

    Locator map in the window

    Its labels are not legible because the map is too small. You’ll make the window wider so the map can expand.

  4. In the Page pane, click Window to select it.

    Window element

    Tip:

    Alternatively, on the canvas, click the gap between the image and the text.

    The Window pane appears.

  5. In the Position & Size section, for W, type 340 and press Enter.

    Width set to 340 pixels

    The window becomes wider. You’ll also make the image widget taller.

  6. Click the image widget. Drag its bottom edge until the entire map is visible.

    Drag handle on the bottom of the image widget

    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.

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

  8. 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.

  9. In the Outline section, click Column 2.

    Column 2 selected in the Outline section

  10. On the canvas, dragging handles appear on the widget. Drag the top one down until it is positioned below the locator map.

    Drag handle on the top of the column widget

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.

  1. On the side toolbar, click the Theme button.

    Theme button

  2. At the bottom of the Theme pane, click Customize.
  3. Above Primary, click the blue edit button.

    Edit button

  4. For HEX, type #27a3ad and press Enter.

    Color set to #27a3ad

    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 .

    Text widget below the image widget

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.

  1. On the side toolbar, click the Page button. At the top of the Page pane, click the Page tab.

    Page tab

    The window disappears. You can now continue editing the page instead of the window.

  2. On the canvas, point to the header and click Edit header.
  3. On the side toolbar, click the Insert button. In the Insert widget pane, click the Search button and type button.
  4. Drag the Button widget onto the canvas. Drop it on the right side of the header.

    Button widget dragged to the header

    Don’t worry if the button isn’t placed exactly as you want it. You’ll tidy its size and position later.

  5. In the Button 2 pane, for Text, erase the existing text and type About this map. Press Enter.

    Button text set to About this map

    The text on the button updates. Next, you’ll connect the button to the window.

  6. In the Button 2 pane, click Set link.
  7. In the Set link pane, for Link to, choose Window.

    Link to set to Window

    There is only one window in this experience, so you do not need to make a choice for Select a window.

  8. Click OK.

    Finally, you’ll test the button and the window.

  9. On the builder toolbar, click Live view.
  10. Click the About this map button.

    About this map button

    The window appears.

  11. At the top of the window, click the close button.

    Close button

    The window closes.

  12. 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.