Get started with ArcGIS Experience Builder

You work for a housing rights advocacy group and you've been asked to create an interactive data visualization that allows users to explore housing in their own communities. Starting with a web map detailing how United States housing is divided on the local level, you'll create an interactive, colorful web app allowing users to explore housing in their area. You'll use ArcGIS Experience Builder, which allows you to build custom web layouts without writing any code. Your goal is to build a layout that meets the following criteria:

• The map should be the main focus of the app.
• The app should allow users to search for their own address or areas of interest.
• The app should include dynamic text and charts to allow users to explore and interact with the data.
• The map should be paired with a journalistic story.
• The app should work on a mobile device as well as a desktop computer screen.

This tutorial was last tested on March 26, 2024.

View final result

Requirements

• User, Publisher, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Experience Builder

Turn a web map into a web app

Your team agrees that a map-focused web app is the best communication device for your story. You'll find and modify a web map, create a new web app from the map, and configure its basic layout structure.

Find a map with housing data

Instead of starting with a blank web map, you'll modify an existing one. ArcGIS Living Atlas of the World is a curated collection of geographic data and maps. It includes Esri Maps for Public Policy, a site dedicated to raising the level of spatial and data literacy in public policy. You'll search this site for data and maps related to housing policy.

1. Go to the Esri Maps for Public Policy site.

   Here you can search through data resources related to a variety of public policy topics. In this tutorial, you’re searching for a web map related to housing.

2. Click the Issues tab.

   

3. Click the Economic Opportunity tab. In the search bar, type vacant housing and press Enter.

   

4. In the search results, click the title of the web map named Owned, Rented, or Vacant Housing Units, owned by lisa_ berry.

   The map's item page appears, where you can read about the map and the data it contains. This map shows where owner-occupied housing, rented housing, or vacant housing is more prevalent. The data in this map is from the American Community Survey (ACS), which is conducted by the United States Census Bureau. This map is a good starting point for your app.

   Note:

   ACS five-year estimates are commonly used for public policy decisions and cover a wide variety of topics such as poverty, income, housing, and more. To learn more about ACS layers available in ArcGIS Living Atlas, view the Learn about your community using Census ACS layers in Living Atlas path.

   You intend to use this map in a public-facing web app, so before you continue, you'll check if there are any special restrictions or limitations on using the content.

5. Scroll to the bottom of the item page and find the Terms of Use section.

   

   The web map is licensed under the Web Services and API Terms of Use for Esri. You can learn more about these terms by clicking either View Summary or View Terms of Use. The summary explains that anyone may use this web map for both internal and external use so long as they provide attribution to Esri and its data providers.

6. Scroll up and find the Credits (Attribution) section.

   

   This is the information that you need to properly attribute the data providers. You'll use this information later.

Configure the web map

So far you have found a web map about housing occupancy that you can use as the primary content for your web app, and you verified that you have permission to use it for your specific project. Next, you’ll save a copy of the web map and reconfigure its layers to better suit the purpose of your web app.

1. Scroll to the top of the item page and click Sign In. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

2. At the top of the item page, click the Open in Map Viewer button.

   

   Note:

   If you do not see a button for Open in Map Viewer, click the arrow next to Open in Map Viewer Classic and choose Open in Map Viewer.

   The map appears.

3. On the Contents (dark) toolbar, click the Layers button.

   

   Tip:

   If you do not see a Contents toolbar, click Open in new Map Viewer at the top of the page.

   The Layers pane appears. Three layers are listed, containing housing data at the state, county, and census tract level. Each layer is configured to appear at different scales, so only the Tract layer is visible currently.

   Your advocacy group focuses on local level housing issues, so you are only interested in the census tract level data. You'll save a copy of the web map with only the Tract layer.

4. In the Layers pane, on the State layer, click the Options button. Click Remove.

   

5. Also remove the County layer.

   Only the data relevant to your web app remains. Next, you'll make sure it is visible at all scales.

6. Click the Tract layer.

   The Properties pane appears on the other side of the map.

   Tip:

   If the Properties pane is not visible, on the Settings (light) toolbar, click the Properties button.

7. Scroll down in the Properties pane. Adjust the Visible range slider until it ranges from World to Room.

   

8. On the Contents toolbar, click the Save and open button and click Save as.

   

9. In the Save window, for Title, type Housing map. In the Summary box, replace the existing text with the following:

   This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23

10. Click Save.

Create a web app

You now have a web map configured for your needs. You'll create a web app from this map with ArcGIS Experience Builder. You'll design the layout of the app with a map and a column.

1. On the Contents toolbar, click the Create app button.

   

   A list of options appear. There are several ArcGIS products that allow you to create web apps from web maps. Each offers different tools and is suitable for different situations. For this project, you want to exercise a lot of control over the appearance of the app, so it can match both the web map and your organization's style. You'll choose ArcGIS Experience Builder, because it provides the most customization control.

2. Click Experience Builder.

   A template gallery appears. For future projects, these templates can save you time by preconfiguring the layout, but for this tutorial, you’ll start with a blank canvas so you can more directly learn how to structure a layout.

3. On the Blank fullscreen card, click Create.

   

4. If a Getting started window appears, click Skip.

   ArcGIS Experience Builder appears, showing the map in the center of the canvas. You'll rename your experience with a more meaningful title.

5. On the top ribbon, click Untitled experience and type Housing Availability.

   

   Next, you'll ensure that you can see the entire canvas.

6. In the bottom right corner of the screen, click the Fit width to current window button.

   

7. If the Insert widget pane is not already visible, on the side toolbar, click the Insert button.

   

8. Scroll to the bottom of the Insert widget pane and find the Layout section.

   Layout widgets help you to arrange groups of widgets in your app. Sizing and positioning widgets neatly is often easier when they are inside of a layout widget.

9. Drag the Column widget onto the canvas.

   

10. On the Column widget's toolbar, click the position button and click Full height.

    

11. Click the position button again and click Snap to left.

    Now that the column is in place, you'll resize the map. One of the goals for your project is that the map should be the main focus of the app, so you'll make it fill the entire canvas.

12. Click the Map widget to select it. On the map’s toolbar, click the position button and click Full size.

    

    The map expands to fill the entire canvas, with a portion of it hidden behind the column. Next, you'll define the default extent of the map in the map's property settings.

13. In the Map pane, under Initial view, click Custom and click Modify.

    

    The Modify initial view window appears.

14. Zoom to your community or another area of the United States that interests you, for example, Manhattan Island in New York City.

    

15. Click OK.

    You'll make a few more configurations to the Map widget.

16. In the Map pane, under Tools, turn off Search.

    

    Later you’ll add a Search widget that you have more control over.

17. Near the bottom of the Map pane, under Tools layout, under Large and medium size, choose the second option.

    

    The map's navigation controls move to the bottom right corner of the map. Previously, they were hidden behind the column.

    Finally, you'll disable pop-ups. Later in the tutorial, you'll add widgets to show information about the number of housing units of each type in each tract. This information will make the pop-ups unnecessary.

18. At the bottom of the Map pane, under Options, turn off Enable pop-up.

    

19. On the builder toolbar, click the Save button.

    

20. Close the Map Viewer browser tab and the Esri Maps for Public Policy browser tab.

So far in this tutorial, you've found a web map, modified it for your needs, and converted it into a web app in ArcGIS Experience Builder.

Add and configure widgets

Now that you’ve configured the map, it’s time to add a few widgets to help users understand and explore the data. You’ll add Chart, Text, Search, and Menu widgets.

Add a Chart widget

You'll add a pie chart to the empty column. You'll connect the chart to the data in the map, so it displays the housing composition of the selected census tract.

1. If necessary, reopen your Housing Availability app in ArcGIS Experience Builder.

   

2. In the Insert widget pane, click the Search button and type chart.

   

3. In the search results, drag the Chart widget onto the column.

   A blank Chart widget appears in the column. The rest of the column appears transparent, since by default, it has no background color.

   

   Next, you'll configure the chart so that it displays housing information from the map.

4. In the Chart pane, click Select data.

   

5. In the Select data pane, expand Housing map and click Tract.

   

6. In the Chart pane, under Tract, click Default and choose Selected features.

   

7. Under Chart type, click Select chart and in the Chart type pane, choose Pie chart.

   

   A pie chart is appropriate for this data since it is divided into three categories (owner occupied, renter occupied, and vacant), which together add up to 100 percent of housing units.

8. In the Chart pane, under Data, set the following parameters:
   • For Category type, choose By field.
   • For Statistics, choose Sum.
   • For Number Fields, check Vacant Housing Units, Owner-Occupied Housing Units, and Renter-Occupied Housing Units.
   • For Sort by, choose Category axis.

   

   The chart shows a No data found warning. This warning appears because you chose to show selected features on the chart and there are currently no features selected.

9. On the builder toolbar, click Live view.

   

   In live view mode, you can interact with your web app as a user might. You can't select widgets and move them around.

10. On the map, click any census tract.

    Now that a census tract is selected, the pie chart turns blue and the warning disappears. You'll exit live view mode so you can continue to configure the Chart widget.

11. Turn off Live view. Click the Chart widget.

    The Chart pane reappears.

12. In the Chart pane, next to General, click the arrow to expand this section.

    

13. Turn on Legend. For Legend position, choose Bottom. For Maximum width, type 300.

    

    Next, you'll add color to the chart so that it matches the colors on the map.

14. Expand the Slices section. Under Color mode, choose By category and click the settings button.

    

15. In the Slice color pane, click B25002_003E. Erase the existing text and type Vacant housing units.
16. Rename B25003_002E as Owner-Occupied housing units and B25003_003E as Renter-Occupied housing units.

    The labels update on the chart's legend.

17. In the Slice color pane, click the color next to Vacant housing units and click More.

    

18. For Hex, type #aa7b7b and press Enter.

    

    The color updates to a muted red color.

19. Change the color for Owner-Occupied housing units to #d3c268, a yellow color. Change the color for Renter-Occupied housing units to #6b99b5, a blue color.

    The chart and its legend now match the colors of the map. If your selected census tract is yellow, the largest slice in the pie chart is also yellow.

    

    Configuring the chart to match the colors on the map makes the chart easier to read and also allows it to double as a map's legend.

20. Turn on Live view and click different tracts to observe changes in the chart.

    Note:

    A few census tracts will display only one or two slices, because they have only one or two housing types.

Configure a view for empty selections

The Chart widget will still show the No data found warning in some situations. You'll choose a census tract to act as the default feature. When the web app is first opened, the chart will display data for the default feature.

1. On the map, click an area without a census tract, for example Central Park or any water area.

   The chart returns to the No data found view. The chart will also appear like this when the web app is first opened. You can fix this problem by configuring a view for empty selections.

2. On the side toolbar, click the Data button. In the Data pane, click the Housing map card.

   

3. Under In use, click the Tract card.
4. At the bottom of the pane, check the View for empty selection check box.

   The Chart widget populates with red, blue, and yellow slices. This setting ensures that the chart does not appear empty when no feature is selected.

5. Next to the check box, click the Settings button.

   

   The View for empty selection window appears. Here, you'll choose which census tract will appear when none is selected on the map. In the following steps, you'll choose Census Tract 94 in New York County, New York. If you chose to center your map over another city, choose a tract from that area instead.

6. On the Filter tab, click Add and click Clause.

   

   An empty clause appears.

7. Click Add and Clause twice more.

   Now there are three clauses. You'll use the first clause to narrow down the data by state.

8. For the first clause, click OBJECTID and choose State. For the second menu, choose is.
9. Next to the third menu, click the Select source type button and choose Unique.

   

   Now you can choose from a list of all unique values in the State field.

10. Click the third menu. In the search bar, type new and choose New York, or your state of interest.

    

11. Configure the second clause to read County is New York County, or your county of interest. If the county does not appear in the third menu, click Search more to reveal more search results.

    Tip:

    Remember to change the source type to Unique.

12. Configure the third clause to read NAME is Census Tract 94, or a census tract in your area of interest.
13. Ensure that the control above the clauses is set to And.

    

    When And is chosen, a feature must satisfy all three of the clauses. The table shows one row for the one feature selected by the three clauses. The pie chart will show the results for this census tract when none are selected in the map.

14. Click Apply changes.

Modify the chart's appearance

You'll complete the Chart widget by adjusting some of its appearance properties. You'll start by removing the buttons from the top of the widget. These provide functions that aren't necessary in your app. You'll remove them so they don’t distract from the map's message.

1. Turn off Live view and select the Chart widget.
2. In the Chart pane, expand the Tools section. Turn off Selection.

   

   Two of the buttons disappear from the Chart widget.

3. Click the Action tab and click the Data action tab. Turn off Enable data action.

   

   The third button disappears from the chart. Next, you'll change the background color of the Chart widget.

4. Click the Content tab and expand the Appearance section. Click the background color and click More.
5. For Hex, type #000000. For A, type 75.

   

   A stands for Alpha, and controls the opacity of the color. The map is partially visible behind the Chart widget now. However, the text is almost invisible. You'll change it to white.

6. Next to Text elements, click the settings button.

   

7. In the Text elements pane, next to Legend label, click the edit button.
8. Click the black square. Under Standard colors, choose white.

   

9. In the Chart pane, expand the Slices section. Change the Outline color to black.

   

   The finished Chart widget has white text on a dark background.

   

Add a Text widget

Next, you’ll add some text to give context to the map, including a title and data acknowledgement. You'll format different parts of the text to make it more readable and add some links where users of your app can find more information about the data shown on the map.

1. On the side toolbar, click the Insert button. In the Insert widget pane, clear the search. Find the Text widget and drag it onto the column below the chart.

   

   The Text widget automatically positions itself below the Chart widget with a small gap in between.

2. Double-click the Text widget and copy and paste the following text:

   Owned, Rented, or Vacant?

   Click a Census Tract to see housing information for that area.

   Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.

   Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2015-2019 5-year estimates, Table B25002.

   Include the spaces between the lines of text. The third line of text will make more sense later, when you add dynamic elements.

   Tip:

   Use Ctrl+Shift+V or Command+Shift+V to paste the text without any formatting.

   Next, you'll change the height of the Text widget.

3. In the Text pane, click the Style tab. Next to Height, click the arrow button and choose Auto.

   

   This setting will ensure that the Text widget is always tall enough to show all of its contents and never too tall.

   Next, you'll choose the same text and background colors as the Chart widget.

4. In the Text pane, under Background, click Custom then click the Fill color. Under Recent colors, choose the semitransparent black that you created for the pie chart background.

   

5. Click the Content tab. Under Text format, click the Font color button. Under Standard colors, choose white.
6. Under Text format, click the Center button.

   

   The chart's text is now white and center aligned. Next, you'll format the first line of text—your app's title—to be larger and bolder.

7. Highlight the first line of text. On the text toolbar, click the Bold button and change the size to 25 px.

   

   Tip:

   If the text toolbar is not visible, change the font properties on the Content tab in the Text pane.

   Next, you'll include a link to a U.S. Census Bureau resource for readers who may not know what a census tract is.

8. In the second line of text, highlight the words Census Tract. In the Text pane, on the Content tab, under Text format, click the Link button.

   

9. In the Set link pane, for Link to, choose URL. For URL, copy and paste https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf.
10. For Open in, choose New window. Click OK.

    

11. Make the Census Tract text bold.

    You'll also link to more information about the American Community Survey. Your data visualization will be considered more trustworthy if it provides information about how the data was collected, and by whom.

12. In the last line of text, highlight the American Community Survey (ACS) text and link it to the following URL: https://www.census.gov/programs-surveys/acs/about.html.
13. Make the American Community Survey (ACS) text bold.

    

    Since the Text widget contains the map's title, you'll place it at the top of the column.

14. Drag the Chart widget below the Text widget.

    You'll also remove the gap between the column's items.

15. Click the empty bottom part of the column, or the gap between the Text and Chart widgets to select the column.
16. In the Column pane, for Gap, type 0 px.

    

    The Text and Chart widgets now appear as one item.

    

Add dynamic text

For the third line of text, you'll include housing information that updates to reflect selections on the map, in the same way as the chart. You saw the fields that are available in the data when you configured the pie chart. You'll display some of those fields in the Text widget.

1. Select the Text widget. In the Text pane, turn on Connect to data. Click Select data.

   

2. In the Select data pane, expand Housing map and click Tract.

   Now the Text widget has access to the housing data in the map.

3. In the Text widget, highlight the word Tract.

   You'll replace this text with dynamic content.

4. In the Text widget’s toolbar, click the Dynamic content button.

   

5. In the Dynamic content window, click the NAME field.

   

   In the Text widget, the highlighted text is replaced with {NAME}. An extra space was also added between the field and the comma.

6. Remove the extra space.

   

7. Replace the following words with the following fields:
   • Replace the word County with the County field.
   • Replace the word State with the State field.
   • Replace the word Rent with the Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent) field.
   • Replace the word Value with the Median Home Value (for Owner-Occupied Housing Units) field.

   Tip:

   To see the full name of a field, point to the field.

8. Remove any extra spaces.
9. Change all of the dynamic fields to bold.

   

10. Turn on Live view and click different census tracts on the map.

    The dynamic text updates to reflect housing information for the selected tract.

    

Add a Search widget

Earlier, you removed the search bar from the Map widget. Now you'll replace it with a Search widget. This widget offers more customization control than the built-in tool. For example, you can place it anywhere, and modify its appearance.

1. Turn off Live view. From the Insert widget pane, click the Search widget and drag it onto the map.

   

2. Place the Search widget near the top right corner of the map.

   The Search widget's default hint text is Find address or place. You'll reword this text.

3. In the Search pane, click New search source and choose Locator source.

   

   The Set locator source pane appears.

4. In the Set locator source pane, click Select utility.

   

5. In the Select utility pane, in the Organization tab, under Geocoding select ArcGIS World Geocoding Service.

   

6. In the Set locator source pane, under Search options, for Hint, type Search for your area.

   

   The hint text in the Search widget changes.

   Next, you'll connect the Search widget to the Map widget with an action.

7. In the Search pane, click the Action tab. Click Add a trigger.
8. In the Select a trigger pane, click Record selection changes.

   

9. Under Widgets, click Map. Under Select an action, click Pan to.

   

10. Close the Action settings pane.

    You'll test the search to ensure that the action was set up correctly.

11. Turn on Live view. In the Search widget, type a place name. In the search results, click one of the place names.

    

    The map zooms to the selected location.

12. On the map, near the zoom controls, click the Home button.

    

13. On the builder toolbar, turn off Live view and click Save.

Add a page

Your data visualization is now complete. Next, you’ll add the related article that your coworkers wrote. You could add a link to the story in the Text widget, but you'd prefer to make the story more obvious and feel like a part of the web app. You'll add a second page to the app and embed the story in it.

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

   

2. In the Page pane, click the Add page button and click the Blank fullscreen option.

   

   A new blank canvas appears.

3. In the Page pane, point to Page 2 and click the More button. Click Rename.

   

4. Rename Page 2 to Story. Rename Page to Map.

   

5. From the Insert widget pane, add an Embed widget to the canvas.
6. On the Embed widget's toolbar, click the position button and click Full size.

   

   For this tutorial, you'll embed How the Age of Housing Impacts Affordability, a story written by Steven Aviles on Esri’s Policy Maps team.

7. In the Embed pane, for Embed by, choose URL.
8. Paste the following URL: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.

   

   The story appears on the canvas. It was created with ArcGIS StoryMaps.

Add a Menu widget

Next, you'll add a Menu widget. This will provide a way for users to switch between the two pages of your app. To prevent the menu from hiding parts of the story, you'll add a header to the page first.

1. On the side toolbar, click the Page button. In the Page pane, click the Story page.

   

2. In the Story pane, turn on Header.

   A blue bar appears at the top of the page.

3. For Height, type 60 px.
4. Point to the header and click Edit header.

   

5. From the Insert widget pane, add a Menu widget to the page header.

   

6. Snap the Menu widget to the right side.
7. In the Menu pane, on the Content tab, for Style, choose Pills.

   

   The blue color of the header and the Menu widget don't match the rest of your app. Instead of changing colors in multiple locations, you'll change the app's theme.

8. On the side toolbar, click the Theme button. In the Theme pane, click Ink.

   

   The header changes to white and the menu pill changes to a dark gray color.

   The Menu widget allows users to switch from the story to the map. You'll add the same Menu widget to the map page so they can also switch to the story.

9. Open the Page pane and click the Map page.

   You don't need to add a header to the page, since users can pan on the map to see areas that are hidden by widgets.

10. From the Insert widget pane, add a Menu widget to the page.
11. In the Menu 2 pane, for Style, choose Pills.
12. Move the Search widget down and place it below the Menu widget.
13. Turn on Live view. Click the menu buttons to test switching between the two pages.

    

14. In the Page pane, make sure that the Make homepage button is visible next to the Map page.

    

    This button indicates which page acts as the home page. It will appear when the app is first opened.

15. Click Save.

You have created a web app with two pages, containing a map and a story. You configured Map, Column, Chart, Text, Search, Embed, and Menu widgets. You connected widgets using actions and dynamic content to help users explore housing availability.

Optimize the app for mobile devices

So far, you have achieved four of the goals for the web app:

• The map should be the main focus of the app.
• The app should allow users to search for their own address or areas of interest.
• The app should include dynamic text and charts to allow users to explore and interact with the data.
• The map should be paired with a journalistic story.

There is one remaining goal: the app should work on a mobile device as well as a desktop computer screen.

Currently, your web app looks good on a large screen only. To finish the project, you'll adjust elements until the app looks good on any screen size.

Optimize the story page for mobile

To make the story page work across different screen sizes, you'll adjust the sizing of the Menu widget from relative sizing (defined in percentages) to absolute sizing (defined in pixels).

1. If necessary, reopen your Housing Availability app in ArcGIS Experience Builder. Turn on Live view.
2. If necessary, on the app's menu, click the Story pill to view the Story page.
3. On the builder toolbar, click the Edit your page for small screen devices button to switch to small screen mode.

   

   This view emulates how your app will appear on a mobile device.

4. Scroll through the story to confirm that none of the text or maps are cut off.

   ArcGIS StoryMaps stories are already configured to resize for mobile devices. However, the Menu widget on the page header is too short to read.

   

   You could create a custom layout for small screens, but in this case, you can fix this problem by changing how the Menu widget is sized across all screen sizes. Solutions that work across all screen sizes are preferable to custom solutions for different screen sizes because they make the app easier to edit and maintain in the future.

5. On the builder toolbar, click the Edit your page for large screen devices button.

   

   It's necessary to switch to large screen mode to reconfigure widgets.

6. Turn off Live view. Click Edit header and click the Menu widget.

   

7. In the Menu pane, click the Style tab. Find the Width property.

   The Width property is defined as a percentage of the screen's width, which becomes too small on narrow screens. You'll define the width in pixels instead, so you can ensure that it's always the same size, regardless of screen size.

8. Next to Width, click the Change unit button and choose px.

   

9. Set Width to 250.00 px.

   

10. Switch to small screen mode.

    The menu is now large enough to read on the small screen.

    

Optimize the map page for mobile

Next, you'll make adjustments to the map page so it too works on all screen sizes. You'll change some elements to absolute sizing. You'll also configure a custom layout for mobile devices.

1. In the Page pane, click the Map page.

   All of the widgets are too narrow on this page. Most of the text can't be read.

   

2. On the builder toolbar, click the Edit your page for medium screen devices button to switch to medium screen mode.

   

   This view emulates how your app will appear on a tablet. It looks better, but the chart's legend and the menu are still cut off. You'll adjust their widths to absolute sizing.

3. Switch to large screen mode.
4. Select the Menu widget. In the Menu 2 pane, on the Style tab, change Width to 250.00 px.
5. Select the Search widget. Change its Width to 250.00 px.

   

6. Click below the chart to select the Column widget. Set its Width to 300.00 px.
7. Switch to medium screen mode.

   The layout changes are effective on this screen size.

   

8. Switch to small screen mode.

   

   The changes are not effective here. The map is almost entirely hidden behind the Text and Chart widgets. You discussed with your teammates and decided that the chart isn't necessary for the mobile version of your web app. You’ll hide it from view when the screen size is small. To do this, you need to create a custom layout for small screens.

9. Next to the canvas, click Custom.

   

10. In the warning pop-up window, click OK.

    Now you can make changes to the layout that will only affect the app when it's viewed on small screens. You'll hide the Chart widget so that it appears when the screen is large and disappears when the screen is small.

11. Click the Chart widget. On its toolbar, click the Move to the pending list button.

    

    The Chart widget disappears.

    It's important that you don't delete the Chart widget. Even though you are in custom mode, if you delete a widget, it will be deleted from all versions of the app. The pending list allows you to remove widgets from view without deleting them.

    Tip:

    If you accidentally deleted the Chart widget, click the Undo button on the builder toolbar. If you decide to add Chart back later, you can find it on the Insert widget pane, on the Pending tab.

    Next, you'll change the size and position of the Text widget so it no longer hides the Search and Menu widgets.

12. Click the Text widget. Drag it outside of the column and place it on the map.

    

13. Move the Column widget to the pending list.

    

14. Snap the Text widget to the bottom left corner.
15. In the Text pane, click the Style tab. Change Width to 90.00 percent and Height to 30.00 percent.

    

    This size prevents the map's navigation controls from hiding any of the text.

    

    Note:

    In custom mode, you can change the size and position of widgets without affecting other screen sizes. However, changes to other properties will be visible on all screen sizes. For example, if you choose a smaller font size for the Text widget, it will appear smaller on all screen sizes. If you want a smaller font size on small screens only, you must duplicate the Text widget, move the original widget to the pending list, and change the font size in the new widget.

Finalize and publish

To finish the project, you'll preview, publish, and share the web app.

1. On the builder toolbar, click the Save button.
2. When the Saved successfully message appears, click the Preview button.

   

   A new browser window appears with your app.

3. Test the app by exploring the map, chart, and story.
4. Resize the browser window to test the app's layout on different screen sizes.

   

5. Return to the Experience Builder editing tab. On the builder toolbar, click Publish.

   You'll also update the app's sharing settings to make it accessible to the public.

6. Click the More button and click Change share settings.

   

   The item page appears for the web app.

7. Click Share.

   

8. Click Everyone (public) and click Save.

In this tutorial, you built a multipage web app that features a map and story about housing occupancy in the United States. You added interactive widgets to enhance readers’ understanding of the data. Finally, you altered the layout to ensure that it works for screens of all sizes.

Now you and your teammates can embed your work on your housing advocacy group’s website or share links to the web app on social media.

You can find more tutorials in the Learn ArcGIS tutorial Gallery.

Acknowledgements

• Owned, Rented, or Vacant Housing Units, by Lisa Berry, Esri Maps for Public Policy and ArcGIS Living Atlas of the World.
• Data from the U.S. Census Bureau and the American Community Survey (ACS).
• How the Age of Housing Impacts Affordability, by Steven Aviles.
• Light Gray Canvas map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community