GEOG 865
Cloud and Server GIS

Creating a web editing application

PrintPrint

In the previous sections of this lesson, you have laid all the groundwork for allowing web-based editing of your GIS datasets. You've set up the database, prepared the maps, and published a web service that allows editing. Your final step is to make a web application that allows editing.

Web editing can be a successful or frustrating experience for users depending on how the web services and app are designed. You already did some work with your web services to make them easy to visualize and understand. For example, you made only a few layers editable and verified that a feature template was available, so that users could create only certain types of features and have some of the attributes pre-set.

In the same way that you made simple, focused services for editing, you also need to make a simple, focused application. An application that has too many buttons, functions, or GIS lingo can seem over-complicated to field workers and other professionals in your organization who may need to perform web editing. Fortunately, it's a lot easier to make a simple web app than a complex web app.

In this lesson, you'll build a web editing applications using the ArcGIS Homepage (which we'll abbreviate as WABA for simplicity). WABA will let you build in a what-you-see-is-what-you-get (WYSIWYG) environment so you can quickly and easily create an app. For those of you that are interested in going beyond the simple functionality WABA has an "extensible framework" which means you can build your own custom widgets and themes if you have some programming knowledge. We won't cover those extensions in this class but you should know that you're not limited to the tools and templates that Esri provides. 

Creating the web map

Before we start creating the app, let's assemble the web map that we want to display inside of it. You'll do this using the same ArcGIS.com map viewer that you used in the previous lesson.

  1. On any machine, open a web browser to the ArcGIS Hompage and sign in using the Esri developer account you created in the previous lesson.
  2. At the top of the screen, click Map to open tha map viewer.
  3. Follow the procedure you used in the previous lesson in "Viewing your service in a web map" to add the following layers to the map:
      - Esri imagery in the background
      - BighornReference map service on top of that
      - BighornHabitat feature service on top of everything
  4. Save this map as BighornWebMap. You can now close arcgis.com.

Downloading and configuring Web AppBuilder

Follow these steps to download and configure the Web AppBuilder. The instructions below are a simpler adaptation of the Esri ones here at the Web AppBuilder for ArcGIS page.

  1. Log into your EC2 instance and open a web browser to the Web AppBuilder for ArcGIS page.
  2. Click Download SDK to download the Web AppBuilder installation package on your EC2 instance.
  3. Unzip the downloaded file and double-click the startup.bat file. The batch file starts a Node.js server in the Command Prompt window (which you should leave open). You'll also see the Web AppBuilder in your default browser with http://[yourmachinename]:3344/webappbuilder. This URL and your machine name are important; you will use them in future steps.
  4. In the provided box, enter the URL that you specified when you created your ArcGIS developer account in Lesson 2 (remember that you were supposed to have written this down).

    The next box prompts you to enter the app ID, but you don't have one yet. You'll now perform a few steps in order to get an app ID.
  5. On your EC2 instance, open a new browser window to arcgis.com and log in with your ArcGIS developer account.
  6. Go to My Content. click Add Item, and choose An Application.
  7. In the Application dialog box, change the following items. Keep the default values for the rest of the items:
      - URL—Enter http://[yourmachinename]:3344/webappbuilder substituting the machine name you see in your Web AppBuilder web browser. It should look like example: http://win-u9emvn0jmpu:3344/webappbuilder although your machine name will be different. Be careful when you type this in, because it will be a huge hassle if you get this wrong.
      - Title—Enter something that makes sense to you, such as Web AppBuilder for ArcGIS.
      - Tags—Enter something that is easy to search, such as Registered Web AppBuilder.
  8. Click Add Item.
  9. On the Item Details page, click the Settings tab. Scroll down to the App Registration section and click Register.
  10. On the Register dialog box, for App Type, keep the default value.
  11. On the Register dialog box for Redirect URIs, add http://[yourmachinename] and https://[yourmachinename], subsituting your own machine name as you see it in the Web AppBuilder brower's address bar. Examples: http://win-u9emvn0jmpu and https://win-u9emvn0jmpu.
  12. Click Register.
  13. Copy the app ID you see under App Registration. Save this into a safe place somewhere in a text file in case you ever need it again.
  14. Return to your Web AppBuilder browser, paste the app ID into its text box, and click Continue.
  15. Provide your credentials if you're not already logged in, or click Approve on the Request for Permission dialog box.

Creating the web app using Web AppBuilder

Now that you've got Web AppBuilder set up, you can get down to the business of creating your web app. The following instructions were written with Web AppBuilder version 2.4 and may require minor adaptation for later versions.

  1. Open Web Appbuilder, confirm the URL of your developer account, and sign in if necessary using your ArcGIS developer account.

  2. Open a browser window to arcgis.com and sign in with your developer account.

  3. Click the Content menu.

  4. Click Create > App > Using the Web AppBuilder.

  5. Choose 2D, enter a title (e.g. BighornSheepEditingApp), tags (again at least one is required) and a summary (e.g. Bighorn Sheep editing app using ArcGIS Online), click OK.

    You will see the Web AppBuilder for ArcGIS screen and then you'll be redirected to a webpage displaying a theme and other graphical styles.

  6. Choose a style and color scheme that you like. I'll leave it up to you to be creative. 

    The important elements live under the Map and Widget tabs. We'll start with the Map tab.

  7. Click the Map tab and click Choose Web Map.

  8. Select the BighornWebMap you created above and click OK.

    This will bring in all the layers that you configured in the ArcGIS.com map viewer. That's all you need to do for the map design. Now let's add some widgets.

  9. Click the Widget tab and click Set the widgets in this controller and then the +.

  10. From the list of widgets that appears, add the Edit and Measurement widgets. Also feel free to choose a couple of others.

  11. Click Save in the bottom of the pane and then Launch. The web app will open in a new browser tab (it might take a few seconds to start). Take a quick look around.

  12. Now go to your own local computer (not your EC2 instance) and log in to arcgis.com. Click Content, then click your BighornSheepEditingApp and click View Application.

    From a look at the URL, you will see that your web app is running on ArcGIS online servers; however, it is still depending on services that are running on your EC2 instance. When you stop your instance, this app will not work as expected.

    If you wanted to download the source code for this app and host it on your own web server, you could easily do that using the Download icon that appears on each app in the Web AppBuilder home page.

  13. Test out your Web App thoroughly by reading and following along below.

    Now that you have your app created, you can use your widgets to edit some of the underlying data. If you click the Edit widget, a sidebar window will appear with the list of editable layers within your feature layer. If you select the Sightings you can add in some new sightings and some attributes. Try it!

    You can also add a wilderness area by drawing a polygon on the map (follow the on-screen instructions). You can use the controls at the bottom of the edit window to modify those changes (just like you might in the Edit window of ArcMap).

    When you're done editing, click the X in the upper right of the window. These changes will be saved back to the server version.  You could open your database and look at it in ArcMap on the EC2 instance to prove that this is the case.

  14. Take a couple of screenshots that give a tour of your ArcGIS Online app and its editing functionality. Show how you made the app uniquely yours in design.
  15. When you have finished with the above, use Cloud Builder to stop your ArcGIS Server site.