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.
- 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.
A list of apps that you can create appears.
-
Choose Experience Builder from the drop-down list.
The Experience Builder home page opens in a new tab.
- If the Express mode window appears, click Got it.
- Click Create new.
A list of templates appears. You'll use the JewelryBox template. This template will display a list of features combined with a map.
- In the search bar, type Jewelry.
- For the JewelryBox template, 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.
- On the top ribbon, click Untitled
experience and type or copy and paste Real estate demographics.
You'll ensure that you can see the entire canvas.
- 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.
- 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 JewelryBox template contains a map widget. You'll add a Business Analyst widget.
- In the pane to the left of the map, click the Add widget button.
The Add widget pane appears, displaying a gallery of widgets grouped by type.
- In the Add widget pane, under Map centric, scroll down and click the Business Analyst widget.
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.
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.
- In the upper left corner of the map widget, click the search bar. Click the Delete button.
- 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.
- Click the Business Analyst widget on the canvas to select it. In the Business Analyst pane, under Location settings, ensure United States is selected.
- Click the 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.
-
In the Customize search pane, type (or copy and paste) the following text: Search for an address or location to view
demographic information.
- 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.
- In the Business Analyst pane, click Customize buffers.
- Under Default settings, uncheck Rings, leaving Drive time and Walk time checked.
- Close the Customize buffers pane.
Next, you'll customize infographics.
- In the Business Analyst pane, click Customize infographics.
- 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.
- Uncheck the box next to Esri Infographics to deselect all 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.
- Close the Customize infographics pane.
- 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.
- Turn off the Dynamic HTML export and Excel export options.
- Collapse the Infographic settings option.
Next, you'll change the theme of the app to enhance its appearance.
- Under the title, on the vertical toolbar, click the Theme button.
- 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've configured the widget to be more specific to the real estate industry and your needs.
- 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.
- 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.
- On the map, in the upper right corner, click the Basemap Gallery button. In the Basemap Gallery pane, choose Dark Gray Canvas.
The map updates to use the Dark Gray Canvas basemap.
- Close the Basemap Gallery pane.
- 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.
- At the bottom of the widget, click Next.
- 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.
- Click Walk time to select it.
- Click Next.
The map applies buffers around the location representing walk times of 5, 10, and 15 minutes.
- 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.
- For the Dominant Tapestry Profile infographic, point to the preview icon.
- Preview the remaining infographics. When finished, choose the Demographic profile infographic.
- 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.
- In the infographic window, click 5 minute walk and choose 10 minute walk.
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.
- 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.
- On the ribbon, click the Publish button.
The app is published. You'll view the published app to see what users will see.
- On the ribbon, click the More button and choose View published item.
The app appears in a different web browser tab.
- Click the Basemap Gallery button and choose Streets (Night). Close the Basemap Gallery pane.
- In the widget, on the Search tab, click the Draw a point tool.
- Zoom in to a location on the map and click the map to add a point. Click Next.
- On the Buffers tab, accept the default Drive time buffers and click Next.
- On the Infographics tab, choose the Demographic Summary infographic and click Run Infographic.
- Return to the web browser tab where your app is in edit mode.
- 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.
- 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 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.