Lab 3: Using Web AppBuilder for ArcGIS

Introduction

For this lab, the goal is to utilize the Web AppBuilder service for ArcGIS through scenarios. The first scenario helps incorporate XYZ concepts when using the service. The first scenario says that the student has been employed at a geospatial analytics company and is tasked to build a web app for viewers to see historic natural disasters (hurricanes and earthquakes in this case). The requirements for the application are as follows:

• Provide pop-up windows for earthquakes and hurricanes.
• Set the entire U.S. as the opening extent.
• Establish bookmarked locations for predefined areas.
• Allow users to compare attributes for selected earthquakes.
• Allow users to query for features based on attributes.
• Display appropriate logo, title, subtitle, and links in the application's banner.
• Allow users to build elevation profiles within earthquake prone zones for earthquake potential risk analysis.

Methods

Section 1 - Design Web AppBuilder and initial widgets

To start this lab, the student navigated to ArcGIS Online and logged in with their credentials. Then, selecting Create > Using the Web AppBuilder option from the Content dropdown menu, a new web app was created. The title given to this app was Natural Disasters of the United States_Student'sLastName (see figure 1).

Figure 1: Create new web app.

Next, the data from the previous lab was used for this application. The Map tab in the developer window was selected and the Natural_Disasters_Student'sLastName map was chosen (steps 1, 2, and 3 in figure 2).

Figure 2: Choose Natural_Disasters_Student'sLastName from selections.

Then, under the Theme tab, a Theme, Style, and Layout were chosen. I selected Foldable Theme, Green as the style, and the first layout option (see figure 3).

Figure 3: Choose theme, style, and layout for web app.

Once the layout was chosen, widgets were added to the web app. This was done by selecting the Widget tab in the developer window, Widget 1, and Basemap Gallery (see figure 4).

Figure 4: Select widget for Widget 1.

The same steps for adding a widget were repeated two more times to add a Measurement and Bookmark widget. The default bookmark widget needed some revising however, so when hovering over the widget, a pencil icon displayed. This was clicked to Configure the Widget (see figure 5).

Figure 5: Configuring a widget (measurement widget shown).

Two bookmarks were configured for this app. One was titled Western States and the other, Eastern States. Either bookmark focused on their respective sides of the country as an efficient way to navigate throughout the app. Once the titles, thumbnails, and extents were set for each book mark, they were added to the widget by clicking OK (see figure 6).

Figure 6: Setting title, extent, and thumbnail to bookmark location.

Then, the Attributes tab was selected in order to edit the Attributes Title and Subtitle, as well as add a Custom Logo. The title was set to "Historic Earthquakes and Hurricanes", the subtitle "Designed by Student'sName", and the logo set to the UWEC logo (see figure 7).

Figure 7: Branding the web app.

After that, a Link to the UWEC Geography & Anthropology Department was added to the web app, which displays on the banner while using the app (see figure 8).

Figure 8: Adding custom link.

Section 2 - Configure additional widgets

Logging into ArcGIS Online and navigating to the web app just created was how this section started. In the Options dropdown (displayed as ellipses located on right side of app) Edit Application was selected. The web app opened and the Widget tab was selected. The widgets in the Header Controller were set (see figure 9).

Figure 9: Configure header controller widgets.

The widgets created in the last section were added to the Header Toolbar of the app. Chart, Draw, and Query were added. The chart widget needed to be configured, so under the Configure Chart window, Add New was clicked, the Map option was selected as the Data Source, and the Earthquakes feature was selected to be configured first (see figure 10).

Figure 10: Configure Chart widget.

The settings shown in figure 11 were set for the earthquakes chart.

Figure 11: Settings for earthquakes chart.

Along with magnitudes, the DEPTH_KM field was also selected and configured to read as "Depths(km)". Next, the Display fields were set. This is the data that pops-up when a user clicks on a hurricane path or earthquake point. For the earthquake display fields, Depth (km), Magnitude, and Year were set.

Part 2 - Customizing Web AppBuilder

Section 1 - Start Web AppBuilder for ArcGIS

To start this portion of the lab, the student logged in to ArcGIS Online with their credentials and under My Content selected Add Item > An application. The application was given a URL, title, and tags. Next, the app was registered so that it can be edited only with the App ID (see figures 12 and 13).

Figure 12: Register app.

Figure 13: App ID.

 Once the app was registered, the natural disasters web app just created in part 1 was used as the application data for the new application.

Section 2 - Customizing the Web AppBuilder Developer Edition

This section started by importing the Elevation profile widget from the previous lab into the new web app. Then, the widget was configured. The color, among other properties, were edited to be different than the default and saved. A sample elevation profile was taken and downloaded from the app as a JPEG and exported as a CSV file to ensure the functionality of data export within the app.

Results

Link to web app

I found this application to turn out quite well and offers a lot of information to its users. It was really interesting to see the potential with this app developer. With a wide selection of widgets, data display features, and exporting/downloading capabilities, this app was easy to create, easy to use, and accessible to anyone with a computer. 

Sources

ESRI Web AppBuilder
Dr. Cyril Wilson