Lab 3: Web AppBuilder for ArcGIS

Background:

This lab focuses on building web apps using the ESRI Web AppBuilder in both of it's varieties, ArcGIS Online, and Developer Edition running on a desktop. A web app is created with ArcGIS Online that uses a web map and feature service created in past labs, then it is attempted to be imported to Web AppBuilder Developer Edition, then when it fails it is recreated on the desktop version of the software. After this is all finished, it is uploaded to a local network server where it can then be accessed via URL.

Methods:

Part 1: Building webGIS apps through Web AppBuilder Integrated Edition

This part focuses on creating a web app for the hurricane and earthquake mapped in Lab 2. To begin, a web app was created in ArcGIS Online through the create button and the Using the Web AppBuilder option. With the Web AppBuilder open, the Foldable theme was chosen, then on the map tab the map that was created in Lab 2 from the service published in Lab 2 was chosen. The initial extent was then set to the web map's default extent, and then the Widget was opened and the basemap widget was chose for widget number 1. In the setup parameters window that opens after clicking on the basemap widget, the default parameters were used. The Bookmark and Measurement options were then chosen for the next two widgets.

 Bookmarks were then configured in the settings for the bookmarks widget by clicking on the pencil icon that appears with highlighting of the widget in the widget tray. These were created in a fashion shown in the below figure.

 Moving over to the attribute tab, the title of the app was now customized and the UWEC logo was uploaded to be included in the top bar. The procedure to do this can be interpreted from the figure below. The image that was in place of the UWEC logo was clicked in order to get the set logos window open. A link was then added using the button located under the Branding section of the Attribute tab.

After this, the app was previewed on multiple devices using the Previews button located on the side panel. Saving and returning to the content page, the app was shared, and then the app was opened again with a click on the three dots located next to the title in the list and then a selection of the edit application. In the widget tab the Set the widgets in this controller link was clicked, then the query, draw, and chart widgets were added. The chart widget was configured to use earthquakes, using the magnitude field as the value field, the location as the category label, and Bar Chart as the chart type. Another chart was then added for Earthquakes. This one was configured with location as the Category Label, depth_km as the Value field, and Depths (km) as the title.

With the query widget, a query was setup with the following expression: (other_mag1 >= 4 AND UPPER(location) LIKE UPPER('%Alaska%')) AND (year = 2000). Results were then configured to show in a presentable way for an end user. 

The widgets were now ready and were tested.

 

Part 2: Customizing Web AppBuilder for ArcGIS (Developer Edition) 

Section 1:

This application runs on locally, on the C drive. After going into the program files for the application, the startup.bat button was clicked. After startup was completed, a browser was opened, and http://localhost:3344/webappbuilder was opened to get to the GUI of the program. In the prompt, the UWEC ArcGIS online URL was entered. The app was then registered in ArcGIS Online in order to gain an App ID and gain access to the portal (which actually wasn't a portal, but the ArcGIS Online Account for the University). The application was then added by clicking on the Add Item button on the My Content Page, and clicking application. Parameters were entered as in the figure below.

To register the application, the applications page in ArcGIS Online was opened, the settings tab was clicked, then the parameters shown below were entered.

After this was done, an app id was obtained. This was in turn entered in the GUI of Web AppBuilder for ArcGIS Developer Edition, and the main interface was then able to be accessed. Because of an error with the versions of Web AppBuilder in AGO (ArcGIS Online) and Web AppBuilder Developer Edition, an import of the AGO version of the app made in part 1 could not be done. After not finding a workaround, the app was recreated in Developer Edition using the same procedures as in the AGO Web AppBuilder.

Section 2:

In this section of the lab, a new widget was added to the application that was not included in versions of the Web AppBuilder (WAB from here on). A folder containing the Elevation Profile widget was copied to the respective folder of the app as shown below.

The widget now appeared in the list of widgets in the application editor, and was added to the widget bar under the search bar.

    

The new widget's default properties were left untouched except for the colors properties. The widget was then tested to make sure it was configured properly. A line was drawn, an elevation profile was made, and then it was downloaded with the Prepare Download link shown in the figure below.

The CSV of the profile was then downloaded, and the average elevation calculated from the elevation column/field. After this was completed, a version of the application was downloaded via the link under the project on the home page of the WAB Developer Edition application. This was unzipped, then all files were copied into an appropriately named folder for the application. This folder was then copied to the deployment server, after mapping to the network drive in windows explorer. After accessing the URL of this directory, the app could be viewed http://webgis.uwec.edu/BLOUINWD/naturaldisasters_app/index.html

Results:

The end result of this lab is a web app which looks identical in its two forms (ArcGIS Online Web AppBuilder, and Web AppBuilder Developer Edition), except for the Developer Edition Developed app including an elevation profile widget. That application can be viewed at http://webgis.uwec.edu/BLOUINWD/naturaldisasters_app/index.html . This application has query functionality via the query widget accessed through the more widgets button in the top right corner of the application, chart and draw functionality through the respective widgets in the same widget access popup window, and measurement, bookmark, and elevation profile drawing through the respective widget that lie under the search bar.

Sources:

Fu, Pinde (2015), USGS, NOAA