GEOG 863:
Web Application Development for Geospatial Professionals

7.2.2 Dropdown List

PrintPrint

As you saw in the w3schools tutorial, a dropdown list is created in HTML using a select element. This Esri sample shows a simple usage of a select element to provide the user a list of floors in a building. The user selecting one of the floor options causes only the features from that floor to be displayed.

First, have a look at the HTML. As with the earlier samples, a div is created to hold the UI element (here given an id of "optionsDiv"). Within the div is the select element and its child option elements. Each option has a value attribute (which can be accessed using JS) and the text that the user sees (the text between the start and end tags). In many cases, those two strings are the same. Here, the value attribute is assigned an expression in which the floor number is just part of a larger string. We’ll come back to that expression in a moment.

In the previous sample, we saw that the addEventListener() method could be used to set up a listener for events. This sample shows an alternate method for doing the same thing involving Dojo’s on and dom modules. These modules are imported near the top of the script, while the setting up of the event listener occurs on line 158. The logic behind this statement is fairly straightforward. The on() method takes as input arguments a page element, an event to listen for, and a function to execute when the event is triggered.

The expression dom.byId("floorSelect") is basically just the Dojo version of the plain JavaScript expression document.getElementById("floorSelect"). Note that usage of the dom object and its byId() method is made possible through the importing of the dom module.

The other two arguments to the on() method in line 158 specify that if the option selected in the "floorSelect" element changes, then the function showFloors() should be executed.

The showFloors() function is defined on lines 141-156. Just as addEventListener() passes an event object on to the listener function, Dojo’s on() method here passes an event object to the showFloors() function. This object is accessible through the evt variable and has the same properties as the one returned by addEventListener(). Thus, the same expression we saw earlier (evt.target) is used to get a reference to the element the listener is attached to. Unlike the checkbox sample, where the checked property was read, here the value property is read to obtain the select element’s value (e.g., "FLOOR = '1'", "FLOOR = '2'", etc.).

The logic behind the display of the selected floor’s features is pretty clever. A forEach() loop is used to iterate through each of the layers in the scene. The entire "Building Wireframe" is meant to always be visible, so line 148 basically says to ignore that layer. For all other layers, the definitionExpression property (discussed in Lesson 6) is modified to show just the features from the selected floor.

One wrinkle in setting the definitionExpression is that the building identifying field is not the same in all the layers. Part of the solution to this problem is the buildingQuery variable defined on lines 69-74. This object variable is defined having the layer names as the keys and the corresponding expressions needed to select building Q as the values. The definitionExpression has two parts: the first, built by retrieving the appropriate building Q selection expression from the buildingQuery variable (using layer.title as the key); the second, built using the value of the selected option in the dropdown list.

An interesting point to note is the way that the "All" option is handled. It’s assigned a value of "1=1", which may seem strange at first glance. However, it makes sense when you stop to think about it. Let’s say that the loop is processing the Walls layer. That layer will have its definitionExpression set to "BUILDINGKEY = 'Q' AND 1=1". In deciding whether a feature should be included in the layer, each side of the expression will be evaluated as either true or false. The AND operator indicates that both sides of the expression must be true. The expression 1=1 is always true, which gives the desired result of all features being displayed, regardless of their FLOOR value.