Skip to main content

How to Use the Number Selector to Filter Multiple Layers in Your Dashboard

ArcGIS Dashboards are a great option for users to display, analyze and monitor their data. Dashboards provide many options for customizing your project, such as category selectors, number selectors and data selectors. The number selector is an interactive element that allows users to filter data dynamically based on numerical criteria, such as specific numerical values or a range of values. This blog will dive into the configuration and use of the number selector to filter multiple layers in your dashboard.

Practical example

Imagine you are managing infrastructure monitoring data across Canada. You have two layers: one for inspection reports of research stations and another for inspection reports of weather monitoring stations. By using the number selector, you can filter these layers based on the scores assigned during inspections. For instance, you could set a range to display only those research stations and weather monitoring stations that ranked between 0 and 15 on a specific scale. This allows you to quickly identify facilities that might need maintenance or repairs, helping you prioritize infrastructure improvements and ensure safety.

Preparing the dashboard 

  1. Add your Web Map 

If you have not already added your Web Map to the dashboard, begin by selecting the Web Map of your choice. To do so, click the plus button to add it, then configure any map settings to suit your needs.

Screenshot showing initial view of the Dashboard and how to add a Web Map by clicking on the plus sign in the middle of the screen and choosing ‘Map’

Initial view of setting up the Dashboard

Screenshot showing the configuration options for the Web Map within the Dashboard, such as a legend, scale bar, compass, etc.

Initial view of setting up the Dashboard

To effectively filter your data using number selectors, start by ensuring that the necessary layers are included in your web map. For this example, we will focus on two layers: one for inspection reports of research stations and another for weather monitoring stations. Each of these layers must contain a field of the number type, which will hold the values you want to filter by—specifically, scores from the inspections. 

By confirming that your layers are properly set up with the appropriate number-type fields, you will be ready to implement filters that enhance user interaction and allow for a more dynamic exploration of your data on the dashboard. 

  1. Add a Sidebar 

Navigate to your dashboard, and if it does not have one already, add either a sidebar or a header. For this example, we will add a sidebar.

NOTE: A selector can only be added to the header and sidebar in the desktop view and to the drawer in the mobile view. These include the category, number and date selectors.

Screenshot showing how to add a Sidebar by clicking on the plus sign in the View pane, followed by the plus sign on the left-hand side, and choosing ‘Sidebar’
Using the plus sign from the View pane to add a Sidebar

  1. Configure the Sidebar 

Within the General tab of the sidebar settings, you can give it a title, description, set the text color and foreground color and optionally configure the sidebar to be a collapsible pane.

Screenshot showing the general configuration options for the Sidebar, such as title, description, text colour, etc.
Sidebar general settings

Adding an accessible name in the Accessibility tab would help ensure the application is usable by everyone. This enhancement can make a significant difference in user experience! 

Screenshot showing the accessibility configuration options for the Sidebar, such as an accessible name
Sidebar accessibility settings

Click Done to save your edits. 

TIP: Once you close the sidebar settings, you can always reopen it by hovering over the three dots of the sidebar and clicking on the settings icon.

Screenshot showing how to re-open the Sidebar settings after it is closed, which is done by hovering over the 3 dots of the Sidebar to get the settings icon to appear.

Hovering over the 3 dots to get the sidebar settings icon to appear

Setting up the number selector

  1. Add the Number Selector 

  • Click on the ‘Add element’ button from the View pane on the left-hand side.

  • Add the element to the sidebar from the previous step.

  • Choose the number selector.

Screenshot showing how to add a number selector by clicking on the plus sign within the Sidebar and choosing ‘Number selector’
Using the plus sign from the Sidebar to add a number selector

  1. Configure the Selector 

Give the number selector a label and configure the rest of the settings. For this example, we will choose ‘Range’ as the input type and we will enable the option to reset and clear the selector.

Screenshot showing the number selector settings, such as giving it the label “Filter based on range”, choosing ‘dropdown’ as the presentation mode, choosing ‘spinner’ as the display type, choosing ‘range’ as the input type, enabling the option to ‘show reset and clear’, etc.

Number selector settings

You may click on the value formatting drop-down arrow and configure the style, decimal places and other formatting parameters. For this example, we will stick with the defaults.

Scroll down to finish setting up the range of values the number selector will use to filter. For this example, we will use a range of 0-15 and an increment of 1.

Screenshot showing the number selector settings (continued), with the value formatting left as the defaults and a range set from 0 to 15 (which is the range of values the number selector will use to filter the layers)
Setting the range of values in the number selector settings

  1. Set Up Actions 

  • Next, open the Actions tab.

  • Enable each layer you want the number selector to filter. For this example, we will not enable the “Render only when filtered” option.

  • Choose a field for each layer that will be used to filter the range of values. 

Screenshot showing the actions settings of the number selector, which is where the layers are enabled to be used by the number selector and the field is selected by which the number selector will use to filter the values based on the 0-15 range set previously

Actions settings of the number selector

Click Done to save the number selector. 

TIP: Once you close the number selector settings, you can always reopen it by hovering over the three dots of the selector and clicking on the settings icon.

Screenshot showing how to re-open the number selector settings after it is closed, which is done by hovering over the 3 dots of the right-hand side of the number selector to get the settings icon to appear
Hovering over the 3 dots to get the number selector settings icon to appear

  1. Results 

Finally, you can view the dashboard and see the results of the number selector filtering the two layers based on the specified fields with a range of 0-15. Thus, only the features that have a value between 0-15 are displayed.

Screenshot showing the final results: the number selector only displaying features that have a value between 0-15 from the specified fields

Results showing the number selector only displaying features that have a value between 0-15 from the specified fields

Because we enabled the option to reset and clear the selector in step 2 of ‘setting up the number selector’, we can clear the filter and see all the features.

Screenshot showing how clicking the ‘clear’ button clears the number selector filter, so all features are now displayed

Clearing the number selector which clears the filter, so all features displayed

Conclusion

The number selector in ArcGIS Dashboards is a powerful tool for filtering data. Configuring it to filter multiple layers allows users to build dynamic and interactive dashboards that provide valuable insights into your spatial data.

About the Author

Hillary Elliott is an Associate GIS Analyst at Esri Canada. She focuses on providing support to clients for Esri’s desktop GIS technology. Hillary has a bachelor’s degree in Human Environment and Geospatial Technologies from Concordia University and a graduate diploma from Fleming College’s GIS Applications Specialist program. Her passion for GIS started in her bachelor’s degree and continues to grow each day. In her free time, she enjoys being active, going on adventures and spending time with family and friends.

Profile Photo of Hillary Elliott