Build an infographic-focused app in workflow mode

In this tutorial, you work for a commercial real estate company where you and your coworkers frequently view demographic information about an area as a first step in marketing and showing properties. Sharing this information helps real estate agents provide context to an area that might be chosen for commercial investment. To help your fellow agents view and share demographic information about areas of interest, you'll create a web app that displays infographics outlining demographic, community, and Tapestry data.

This tutorial was last tested on December 7, 2023.

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Experience Builder

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. Click the Content tab and click Create app.

   

   A list of apps that you can create appears.

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

   

4. On the Experience Builder home page, click Create new.

   

   A list of templates appears. You will use the Jewelry Box template. The Jewelry Box will display a list of features combined with a map.

5. On the Default tab, find the Jewelry Box template and click Create.

   

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

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

   

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

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

   

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

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

   

Add a widget to the app

The Jewelry Box template contains a map widget and a list. You won't be using the list, so you'll delete it to make room for the Business Analyst widget.

1. On the canvas, click the list widget to select it and click the Delete button.

   

2. Click Delete again to confirm that you want to delete the list.
3. Under the title, on the vertical toolbar, click the Insert button.

   

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

   

4. In the widget gallery, under Map-centric, scroll down and find the Business Analyst widget.

   

5. Drag the Business Analyst widget onto the canvas where the list used to be.

   

   The widget appears in the app.

   

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

   

   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. Next, you will expand the Business Analyst widget so it fills the entire left side of the canvas.

6. If necessary, click the Business Analyst widget to select it. Drag the bottom of it to the bottom of the canvas.

   

You have 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 have 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 linking it to the map and customizing it for your colleagues' use. You will also choose the infographics displayed in your app and the types of buffers.

1. If necessary, click the Business Analyst widget on the canvas to select it and display the Business Analyst pane.
2. Click the Select a Map widget drop-down menu and choose Map.

   

   The Business Analyst widget adds its own search tool to the map. When you include this widget, the map widget's search functionality is automatically disabled. Next, you'll remove the map's search tool.

3. Select the search bar and click Delete twice to remove it.

   

4. Click the widget on the canvas to select it again. Under Location settings, ensure United States is selected.

   

5. Click the Customize search button to edit the introduction text.

   

   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.

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

   

7. Close the Customize search pane.
8. In the Business Analyst pane, click Customize buffers.

   

   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.

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

   

10. Close the Customize buffers pane.
11. In the Business Analyst pane, click Customize infographics.

    

12. In the Customize infographics pane, for Select infographics, click the 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.

13. Uncheck the box next to Esri Infographics. Check the boxes for Demographic Profile, Demographic Summary, and Dominant Tapestry Profile.

    

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

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

    

    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.

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

    

17. Collapse the Infographic settings option.

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

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

    

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

    

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

Enable basemaps on the map widget

Next, you'll enable switching basemaps on the map widget so users can choose a basemap that best fits their needs. The app will display the organization's default basemap, but adding this functionality allows users to change the basemap while they use the app.

1. On the canvas, click the map widget to select it.

   The Map pane appears.

2. Under Tools, turn on Basemap.

   

   On the Map widget, the Basemap button appears.

   

   When a user opens the app, the default basemap will show, but they can change the basemap using this button.

3. On the ribbon, click the 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.

   

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

   

   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, next to the search bar, click the Basemap button and choose Dark Gray Canvas.

   

   The map updates to use the Dark Gray Canvas basemap.

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

   

   Note:

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

   The map zooms to the location and adds a point.

   

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

   

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

6. Click Walk time to select it.

   

   Note:

   The widget can only create one set of buffers at a time, so you must select either Drive time or Walk time.

7. Click Next.

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

   

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

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

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

   

10. Preview the remaining infographics to see their previews and then choose the Demographic profile infographic.
11. In the Infographic step, expand Esri Infographics and choose Demographic Profile.

    

12. Click Run infographic.

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

    

    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, next to 5 minute walk, click the drop-down arrow and choose 10 minute walk to explore the demographics for the population within this buffer.

    

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

14. Save the app.

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

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.

   

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

   

   The app appears in a different web browser tab.

3. On the search bar, click the Basemap button and choose Streets (Night).
4. In the widget, on the Search tab, click the Draw a point tool.

   

5. Zoom in to a location on the map, click the map to add a point, and 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.

   

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.

   

   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. On the ribbon, click the More button and choose Change share settings.

    

    The item details page for your app appears.

11. Click the 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.

    

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

In this tutorial, you have 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.

Acknowledgements

• Demographic data accessed with ArcGIS Business Analyst. Terms of use.
• Imagery Hybrid map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community
• Dark Gray Canvas map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community
• Cover photo: Tamas - stock.adobe.com