Assignment 9: Widgets
Introduction to Widgets
AS.430.619 Advanced Web Development
This assignment will introduce the concept of the user interface and the incorporation of a UI
class in ArcGIS API 4.8, as well as incorporating multiple widgets into your application.
Widgets are an easy way to “plug and play” more complex elements into your application with
little code. In fact, they’re so easy to use that this week we’ll be asking you to practice in the
ArcGIS Sandbox then add various different widgets to the application you’ve been building since
the Introduction module to the ArcGIS JavaScript API.
Step 1: User Interface
Navigate and read through the API Reference for the DefaultUI Class:
https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html
1.) Navigate to https://developers.arcgis.com/javascript/latest/sample-
code/sandbox/sandbox.html?sample=simple-ui
This is a great example of the utilization of the UI class, as it provides a really easy way to place
and stack widgets without needing too much CSS code.
Scroll through the code to the end of the require function and find the code that adds a logo and
search box to the user interface.
2.) Change the code to move the logo object to the bottom left and the search to the bottom
right. Also replace the logo with an image of your choice.
Step 2: Popup Widget
Navigate to and read through the API Reference for both the Popup Widget and the
PopupTemplate:
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html
https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html
Because Popups are a default Widget in every View, they don’t need to be formally added to the
application. However, the standard popup gets pretty boring pretty quickly. Whenever you use a
FeatureLayer, you also have the ability to customize a Popup using the data in the
FeatureLayer and styling the contents using HTML.
If you don’t already have a FeatureLayer included in your application, add one to the Map. Then
create a PopupTemplate object that incorporates at least one data field from the FeatureLayer
you’ve chosen into its content and set the Popuptemplate on the FeatureLayer.
Step 3: Legend Widget
Refer to the documentation for the Legend widget and incorporate the widget into your
application. Be sure to use the UI class for placement.
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
Step 4: Choose a Widget
Refer to the documentation for one more widget of your choosing and incorporate it into your
application.
When you’ve finished the above steps, zip your project files and upload the zip file to
Blackboard.
