Build an infographic-focused app in preset mode

In this tutorial, you work for the state health department. You and your coworkers frequently view demographic and health-related information about an area as a first step in targeting outreach and departmental initiatives. Sharing this information helps your organization provide context to an area that might be chosen for health department programming. To help your fellow health department workers view and share information about areas of interest, you'll create a web app that displays infographics highlighting demographic, health, and insurance data.

This tutorial was last tested on December 8, 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 and add widgets

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

Create a blank web experience

You'll start by creating a blank web experience 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.

   

3. Choose Experience Builder.

   

4. On the home page, click Create new.

   

   The Template page appears, displaying a gallery of template options. Templates are preset layouts and themes for the apps you create. For this app, you'll use the Blank template.

5. On the Default tab, find the Blank fullscreen template and click Create.

   

   The app opens in the builder, showing a blank canvas. You'll rename your app with a more meaningful title.

6. On the ribbon, click Untitled experience 1 and type State health demographics.

   Note:

   The default title may vary.

   

   The web experience is now ready for you to add widgets. The widgets are categorized based on their functionality, such as Map centric, Data centric, or Page elements.

Add widgets to the app

Next, you'll add the Business Analyst widget, a map widget, and a text widget to the app.

1. On the Insert widget pane, under Map centric, drag the Business Analyst widget onto the canvas.

   

   The Business Analyst pane appears on the right, with Workflow mode selected by default. Workflow  mode provides the app user with steps for choosing a location and running an infographic. However, you know the specific infographic you need and the specific locations (counties in your state) that you want to view, so you'll use Preset mode instead.

2. In the Business Analyst pane, under Mode, click Preset.

   

   Next, you'll complement the Business Analyst widget with the Map and Text widgets.

3. From the Insert widget pane, in the Map centric section, drag the Map widget to the canvas.

   

4. From the Page elements section, drag the Text widget to the canvas.
5. Arrange the Text and Map widgets so they are the same width and take up roughly one-third of the canvas on the left side. Resize the Business Analyst widget to use the remaining space on the canvas.

   

   Now the appearance of the app is balanced. You can always modify the placement of the widgets, but this looks good for now.

You created an app in Experience Builder, added three widgets to it, and designed the appearance of your app and the placement of the widgets. The widgets currently have default functionality assigned to them. Next, you'll customize the configuration of the widgets to meet your business needs.

Configure the Business Analyst widget and publish the app

The Business Analyst widget allows you to display infographics in an app. You have added the Business Analyst widget and set it to use preset mode, which allows you to embed an infographic and predefine the default location, as well as the buffer type and units for point locations.

Note:

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

Configure the widgets

You'll configure the Business Analyst widget for your health department project by linking it to the map and setting the predefined location. You'll also choose the infographic displayed in your app and set a title.

1. On the canvas, click the Business Analyst widget to select it

   The Business Analyst pane appears. In this pane, you can configure the widget to your preferences.

2. From the Select a Map widget drop-down menu, choose Map.

   

3. Under Location settings, ensure United States is selected and click Set a location.

   

   The Set a location pane appears. In this pane, you can define the geographic area for your infographics. For this example, you'll use the University of Kansas Health System hospital as your location.

4. In the search field, type 1700 SW 7th St. and click the search result that is in Topeka, Kansas.

   

   The location is added to the map and will be the default location when users access your application. Next, you'll set up the buffers that will be used in calculating the demographic information for the infographics.

5. In the Business Analyst widget pane, click Set buffers.

   

   The Set buffers pane appears.

6. In the Set buffers pane, click Drive time and click Apply.

   

   Next, you'll choose the default infographic shown in your app. Since the goal of the app is to show demographic and health-related information, you'll select an infographic with those variables.

7. In the Business Analyst pane, click Select an infographic.

   

   The Select an infographic pane appears.

8. Expand the Esri Infographics category and choose Health Care and Insurance Statistics.

   

   The infographic appears in the widget.

   

   Next, you'll give the app a title and description to give context to app users.

9. Double-click the Text widget and type Health Care and Insurance Report.

   

10. In the Text widget, highlight the text. In the Text pane, change the font size to 28 px, click the Bold button, and click the Center button to align the text to the center.

    

    On the canvas, the text updates.

    

11. On the ribbon, click the Save button.

    

    You have configured the app to your liking and are now ready to look at it in Live view mode and publish it.

Publish ans share the app

Next, you'll view the app as a user would see using Live mode. Then you'll publish, test, and share the app.

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.

2. In the map widget, in the search bar, type Wesley Medical Center and choose the result on 550 N Hillside Street in Wichita, Kansas.

   

   The map zooms to Wesley Medical Center and applies buffers around the location representing drive times of 5, 10, and 15 minutes. The infographic displays health care and insurance variables for a 5-minute drive time from the facility.

   

3. On the title bar for the infographic, click the 5 minute drive drop-down menu and choose 10 minute drive.

   

   The infographic updates to show demographics in the 10-minute buffer.

   

   Now that you have tested your app and it works well, you'll publish it so you can share it.

4. On the ribbon, click the Save button and then click the Publish button to publish your application.

   

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

   

   Another web browser tab opens and the app appears.

6. Test the app by searching for a medical facility.
7. Return to the other browser tab where your app is in edit mode.
8. On the ribbon, click the More button 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.

9. On the ribbon, click the More button and choose Change share settings.

   

   The item details page for your app appears.

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

11. 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 created a web app focused on showing infographics for a specific location that the user enters. You added the Business Analyst widget and other widgets, configured them, tested the app, and published and shared it. Now others can use your app to discover health care and insurance information about a medical facility of their choice.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Demographic data accessed with ArcGIS Business Analyst. Terms of use.
• World Imagery layer sources: Esri, Maxar, Earthstar Geographics, and the GIS User Community
• Cover photo: deberarr - adobe.stock.com