Create an Experience Builder app

You'll create a web experience app using ArcGIS Experience Builder. You'll start with a template, then add and configure widgets to set up the app.

Create a web experience from a template

First, you'll create a web app. You'll start with a template then set up the app.

  1. Sign in to your ArcGIS organizational account.
    Note:

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

  2. On the ribbon, click Content.

    Content button

  3. Click Create app.

    Create app button

    A list of apps that you can create appears.

  4. Choose Experience Builder from the drop-down list.

    Experience Builder option

    The Experience Builder home page opens in a new tab.

  5. If the Express mode window appears, click Got it.
  6. Click Create new.

    Create new button

    A list of templates appears. You'll use the JewelryBox template. This template will display a list of features combined with a map.

  7. In the search bar, type Jewelry.
  8. For the JewelryBox template, click Create.

    Pocket template

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

  9. On the top ribbon, click Untitled experience and type or copy and paste Real estate demographics.

    Renamed app title

    You'll ensure that you can see the entire canvas.

  10. In the lower right corner of the screen, click the Fit width to current window button.

    Fit width to current window button

    Now you can see the entire canvas, including unused space. Next, you'll enable editing of this template.

  11. At the top of the layout, click the Lock layout toggle button to turn off locking of the layout.

    Lock layout toggle button

Add a widget to the app

The JewelryBox template contains a map widget. You'll add a Business Analyst widget.

  1. In the pane to the left of the map, click the Add widget button.

    Add widget button

    The Add widget pane appears, displaying a gallery of widgets grouped by type.

  2. In the Add widget pane, under Map centric, scroll down and click the Business Analyst widget.

    Business Analyst widget

    The widget appears in the app.

    Widget added to app

    Also, the Business Analyst panel appears with Workflow mode selected by default.

    Workflow mode

    Workflow mode provides the end user with step-by-step panels for choosing a location and running an infographic. The widget in workflow mode allows you to buffer features, search, and create infographics.

You've created an app and added a widget. Next, you'll configure the widget.


Configure the Business Analyst widget and publish the app

The Business Analyst widget allows you to display demographic information in infographics and create walk- and drive-time buffers. You've already added the widget to the app. Next, you'll configure it to meet the business needs.

Tip:

At any time, you can preview and interact with your app by clicking Live view.

Configure the widget

You'll configure the Business Analyst widget for your real estate organization by customizing it for your colleagues' use. You'll also choose the infographics displayed in your app and the types of buffers.

When you added the Business Analyst widget, it added its own search tool to the map. Because of this, the map now has two search tools. You'll remove one of them.

  1. In the upper left corner of the map widget, click the search bar. Click the Delete button.

    Delete button

  2. When asked to confirm that you want to delete the widget, click Delete.

    Now, the map has only one search tool. Next, you'll customize search settings.

  3. Click the Business Analyst widget on the canvas to select it. In the Business Analyst pane, under Location settings, ensure United States is selected.

    United States option

  4. Click the Customize search button.

    Customize search button

    Other real estate agents at your company may not be familiar with the GIS terminology used in the current introduction, so you'll edit the text.

  5. In the Customize search pane, type (or copy and paste) the following text: Search for an address or location to view demographic information.

    Introductory text

  6. Close the Customize search pane.

    Location is an important factor in the real estate industry. The widget supports Rings, Drive time, and Walk time buffers. Clients of your commercial real estate company are specifically interested in understanding the people who may drive or walk to their locations, so you'll turn off the rings.

  7. In the Business Analyst pane, click Customize buffers.

    Customize buffers button

  8. Under Default settings, uncheck Rings, leaving Drive time and Walk time checked.

    Customize buffers pane

  9. Close the Customize buffers pane.

    Next, you'll customize infographics.

  10. In the Business Analyst pane, click Customize infographics.

    Customize infographics button

  11. In the Customize infographics pane, for Select infographics, click the Esri Infographics drop-down menu.

    Esri Infographics drop-down menu

    A list of potential infographics appears. You can choose the infographics that are most important to your business. For example, real estate agents at your company frequently use demographic profiles, demographic summaries, and Esri Tapestry Segmentation profiles, so you'll include those infographics.

  12. Uncheck the box next to Esri Infographics to deselect all infographics. Check the boxes for Demographic Profile, Demographic Summary, and Dominant Tapestry Profile.

    Select infographics parameters

    Next, you'll simplify the infographic interface for the real estate agents' needs.

  13. Close the Customize infographics pane.
  14. In the Business Analyst pane, expand Infographic settings.

    Infographic settings option

    A list of options for infographics appears. Real estate agents you work with typically show such visualizations as pictures or PDFs on their tablets, so you can remove extra options they don't need.

  15. Turn off the Dynamic HTML export and Excel export options.

    Infographic settings parameters

  16. Collapse the Infographic settings option.

    Next, you'll change the theme of the app to enhance its appearance.

  17. Under the title, on the vertical toolbar, click the Theme button.

    Theme button

  18. Experiment by clicking some of the themes to see how they affect the app. After you've clicked a few themes, select the Vivid theme.

    Vivid theme

    You've configured the widget to be more specific to the real estate industry and your needs.

  19. On the ribbon, click the Save button.

    Save button

Test the app in live mode

Next, you'll test the app before publishing. You'll add a location by clicking the map.

  1. On the top ribbon, click Live view.

    Live view button

    The app changes to the live view and the button changes color to indicate that the app is in live view.

    Live view mode active

    Live view allows you to use the app in the same way the app user will and ensure everything works properly before publishing and sharing.

    For testing purposes, you'll change the basemap to Dark Gray Canvas so it is easier to see the buffers.

  2. On the map, in the upper right corner, click the Basemap Gallery button. In the Basemap Gallery pane, choose Dark Gray Canvas.

    Dark Gray Canvas basemap

    The map updates to use the Dark Gray Canvas basemap.

  3. Close the Basemap Gallery pane.
  4. In the Business Analyst widget, on the search bar, type 835 s coast highway and choose the location in Oceanside, CA.

    Address search bar

    Note:

    Alternatively, you can designate a location by adding a point to the map.

    The map zooms to the location and adds a point.

    Point on map at Oceanside

  5. At the bottom of the widget, click Next.
  6. In the Buffers step, click both Walk time and Drive time to confirm there are 5-, 10-, and 15-minute buffers for each.

    Drive time settings

    You can only create buffers for drive time or walk time, so you must choose the one you want.

  7. Click Walk time to select it.

    Walk time option

  8. Click Next.

    The map applies buffers around the location representing walk times of 5, 10, and 15 minutes.

    Buffers on the map

  9. On the Infographics tab, click the Select infographic drop-down menu.

    A list of infographics appears. You can point to the icon next to the name to see a preview of what the infographic will look like.

  10. For the Dominant Tapestry Profile infographic, point to the preview icon.

    Infographic preview

  11. Preview the remaining infographics. When finished, choose the Demographic profile infographic.
  12. Click Run Infographic.

    The infographic displays demographic variables for a 5-minute walk time from the location.

    Infographic with demographic profile

    The infographic provides detailed demographic information about the population within the 5-minute walk time of the location. By adding a widget, configuring it to meet your needs, and adding a location, you can find out demographic information about potential clients in seconds.

  13. In the infographic window, click 5 minute walk and choose 10 minute walk.

    10 minute walk option

    The values in the infographic change to reflect a greater population.

    Now that you have tested and saved the app, you are ready to publish it so your coworkers can use it in their work.

  14. If necessary, save the app.

Publish and share the app

Now that you have tested the app, the last thing to do is publish and share it so others can access it.

  1. On the ribbon, click the Publish button.

    Publish button

    The app is published. You'll view the published app to see what users will see.

  2. On the ribbon, click the More button and choose View published item.

    View published item option

    The app appears in a different web browser tab.

  3. Click the Basemap Gallery button and choose Streets (Night). Close the Basemap Gallery pane.
  4. In the widget, on the Search tab, click the Draw a point tool.

    Draw a point button

  5. Zoom in to a location on the map and click the map to add a point. Click Next.
  6. On the Buffers tab, accept the default Drive time buffers and click Next.
  7. On the Infographics tab, choose the Demographic Summary infographic and click Run Infographic.

    Example infographic

  8. Return to the web browser tab where your app is in edit mode.
  9. On the ribbon, click More and choose Copy published item link.

    Copy published item link option

    You have copied the link to your published app and can share it. However, the default sharing setting is for the owner, so no one else can access the app until you change the settings. You can get to the app's item details page in ArcGIS Online from the app.

  10. Click the More button and choose Change share settings.

    Change share settings option

    The item details page for your app appears.

  11. Click the Share button.

    Share button

    The Share window appears with various options for sharing. Currently, only the owner of the app can access it, but you can change a setting to share it with your organization or with everyone (the public).

  12. In the Share window, click Organization and click Save.

    Share to Organization

    Now the app is shared so other members of your organization can use it.

In this tutorial, you created an app, added the Business Analyst widget, configured both to suit your business needs, tested the app, and published and shared it for others to use. Fellow real estate agents will find value when using this app, as demographic data within the desired drive and walk times is easily discoverable and can help them make data-driven decisions.

You can find more tutorials in the tutorial gallery.