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.
- Sign in to your ArcGIS organizational account.
Note:
If you don't have an organizational account, see options for software access.
- On the ribbon, click Content.
- Click Create app.
-
Choose Experience Builder.
- On the ArcGIS Experience Builder 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.
- 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.
- On the ribbon, click Untitled experience and type State health demographics.
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.
- 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. 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.
- In the Business Analyst pane, under Mode, click Preset.
Next, you'll complement the Business Analyst widget with the Map and Text widgets.
- From the Insert widget pane, in the Map centric section, drag the Map widget onto the canvas.
- 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.
- Click the Text widget to select it. Drag its right handle until it is the same width as the Map widget.
- 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.
- Resize the Business Analyst widget to use the remaining space on the canvas.
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.
- 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.
- In the Business Analyst pane, under Location settings, ensure United States is selected. Click Set a location.
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.
- 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.
- In the Business Analyst widget pane, under Buffers, click Rings.
The Set buffers pane appears.
- In the Set buffers pane, click Drive time.
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.
- 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.
- In the Business Analyst pane, under Infographics, click Select an infographic.
The Select an infographic pane appears.
- Expand the Esri Infographics category and choose Health Care and Insurance Statistics.
The infographic appears in the widget.
- 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.
- In the Business Analyst pane, expand Infographic settings. Turn on Run on map click.
Next, you'll give the app a title and description to give context to app users.
- Double-click the Text widget and type Health Care and Insurance Report.
- Highlight the text you typed. In the Text pane, change the font size to 24 px.
- Click the Bold button and click the Center button.
On the canvas, the text updates.
- 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 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.
- 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.
- 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.
- 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.
You'll also test the Run on map click option you enabled.
- 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.
- If necessary, save the app.
- On the ribbon, click the Publish button.
Your app is published.
- On the ribbon, click the More button and choose View published item.
Another web browser tab opens and the app appears.
- Test the app by clicking a location on the map and confirming it creates drive-time areas for the location and updates the infographic.
- Return to the other browser tab where your app is in edit mode.
- 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.
- On the ribbon, click the More button and choose Change share settings.
The item details page for your app appears.
- 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).
- 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.