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

    Content button

  3. Click Create app.

    Create app button

  4. Choose Experience Builder.

    Experience Builder option

  5. On the ArcGIS Experience Builder home page, click Create new.

    Create new button

    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.

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

    Blank fullscreen template

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

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

    Renamed app

    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.

    Business Analyst widget on the canvas

    The Business Analyst pane appears on the right, with Workflow mode selected by default. This  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.

    Preset mode

    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 onto the canvas.

    Map widget on the canvas

  4. From the Page elements section, drag the Text widget to the canvas.
    Tip:

    If you have difficulty finding a widget, you can search for it at the top of the Insert widget pane.

  5. Click the Text widget to select it. Drag its right handle until it is the same width as the Map widget.
  6. Position the Text widget at the upper left corner of the canvas. Position the Map widget directly under it and resize it until its height reaches the bottom of the canvas.
  7. Resize the Business Analyst widget to use the remaining space on the canvas.

    App layout

    Now the appearance of the app is balanced, with the Text and Map widgets creating a column that takes up about a third of the canvas, and the Business Analyst widget taking up the rest. 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. Next, you'll configure the widgets you added. Then, you'll publish the app.

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 setting a predefined location on the map. 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. By default, the Business Analyst widget is linked to the Map widget. You'll set a default location for the map.

  2. In the Business Analyst pane, under Location settings, ensure United States is selected. Click Set a location.

    Set a location button

    Note:

    The Data source parameter lists the source and vintage of the data used by your widget. Any infographics you create are dependent on this parameter. By default, the parameter is set to the most recent Esri data, which is suitable for your purposes.

    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.

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

    Address search results

    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.

  4. In the Business Analyst widget pane, under Buffers, click Rings.

    Rings button

    The Set buffers pane appears.

  5. In the Set buffers pane, click Drive time.

    Drive time buffer options

    Drive time buffers have additional parameters based on whether you want to calculate the drive time going away from or toward the facility. You also have the option to use traffic data. You'll leave these parameters unchanged.

  6. Click Apply.

    The map updates to show 5-, 10-, and 15-minute drive time areas around the facility. These areas will be the basis of your app's infographics, which will show demographic information about the areas.

    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, under Infographics, click Select an infographic.

    Select an infographic button

    The Select an infographic pane appears.

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

    Health Care and Insurance Statistics infographic option

    The infographic appears in the widget.

    Example infographic

  9. Close the Select an infographic pane.

    Because you're configuring this app in preset mode, you have some options for infographics that aren't available in workflow mode. You'll turn on one of those options, which allows users to click the map to drop a pin and calculate an infographic for it. This option will help users who wish to view infographics for areas not centered around the facility.

  10. In the Business Analyst pane, expand Infographic settings. Turn on Run on map click.

    Run on map click option

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

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

    Text widget with new text

  12. Highlight the text you typed. In the Text pane, change the font size to 24 px.

    Text size parameter set to 24 px

  13. Click the Bold button and click the Center button.

    Text settings

    On the canvas, the text updates.

    Updated text in widget

  14. On the ribbon, click the Save button.

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

    Live view option

    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.

  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.

    Medical center search results

    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.

    Preview of the app

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

    10 minute drive option

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

    Infographic for 10-minute drive time

    You'll also test the Run on map click option you enabled.

  4. Click anywhere on the map.

    A pin is placed where you clicked. Drive times are calculated around the pin and the infographic updates to show demographic information for the area.

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

  5. If necessary, save the app.
  6. On the ribbon, click the Publish button.

    Publish button

    Your app is published.

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

    View published item option

    Another web browser tab opens and the app appears.

  8. Test the app by clicking a location on the map and confirming it creates drive-time areas for the location and updates the infographic.
  9. Return to the other browser tab where your app is in edit mode.
  10. On the ribbon, click the More button 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.

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

    Change share settings option

    The item details page for your app appears.

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

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

    Share window

    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.