ArcGIS Experience Builder

Try group filters in ArcGIS Experience Builder

Group filters are new with the February 2024 update. I’ll show you how to use them in the out-of-the-box version of Experience Builder.

If you want to learn more about Experience Builder, I recommend this tutorial series: Design a layout in ArcGIS Experience Builder.

Background

HONG KONG, CHINA – The summer of 2023 was Hong Kong’s hottest summer ever. Extreme heat can be dangerous and even fatal. To help residents and visitors stay safe during hot weather, city officials often provide tips and resources, such as lists of air-conditioned public places.

Imagine you’re a geospatial analyst working for the Hong Kong Office of the Government Chief Information Officer. The city is creating a resource page for heat emergencies, and you are tasked with creating informative and interactive resources. You know you have access to location and attribute data for municipal facilities all over the city.

The application above is a simple tool that you could include in your resource page. It lets users view water recreation facilities (pools, beaches, and water sport centers) in each of Hong Kong’s 18 districts. Importantly, it lets users filter all four layers in the app at the same time. I’ll show you how to make that happen.

The materials for this tutorial are the following:

All data used in this tutorial comes from the data.gov.hk open data pool. Esri China (HK) utilizes public data from the pool to create layers and web maps for Esri users.

Create an app from a template

1. Start Experience Builder.

Sign-in to ArcGIS or create a free trial account. Go to experience.arcgis.com.

2. Click Create new in the top right corner.

Create new

3. Select a template from the template gallery

Browse to the ArcGIS Online tab. Search for Try group filters and click Create.

The template gallery

This is a fixed page template with a Map widget and a Widget Controller widget. The controller contains a Map Layers widget, a Legend widget, a Text widget, and, for now, a Placeholder widget.

The template open in the builder

Add group filters

1. Add a Filter widget

a. Click the widget labeled Filter by District.

For the sake of this tutorial, this is a Fixed Panel widget that contains a Placeholder widget. You could instead add a Filter widget directly to the Widget Controller widget.

b. Click Add widget.

c. Select the Filter widget. It replaces the Placeholder widget.

Add a Filter widget

2. Add a group filter

a. If necessary, click the Filter widget to open its settings on the right.

b. Click the drop-down arrow then click + New group. The Create new group panel appears.

c. Click Select data, expand the Water Recreation in Hong Kong web map, then select all four layers.

d. Under Label, delete Group 1 and type Central & Western. You’ll make one group filter for each district.

e. Optionally, remove the Icon.

Add a group filter

3. Write a group SQL expression

The Filter widget evaluates the connected data using logical expressions. Those expressions are written in Structured Query Language (SQL). You can learn more about how Experience Builder uses SQL in Experience Builder documentation.

a. Click Group SQL Expression Builder. The expression builder window appears.

Group SQL Expression Builder

b. Using the drop-down menus under Main field, choose Districts | Default and Name.

The group filter works by filtering data sources based on common values. All four layers have an attribute field that contains district names.

c. Using the drop-down menus under All fields, select the attribute field for each layer that contains district names.

Layer Attribute field with district names
Swimming Pools District
Water Sports Centres DISTRICT
Beaches District

d. Under Operator & Values, choose is for the operator and CENTRAL & WESTERN for the value. The widget is not case sensitive.

e. Click OK.

Group SQL Expression Builder

4. Add more group filters

a. You can duplicate the first filter to create the rest. Click Duplicate on your Central & Western filter.

Duplicate

b. Click the new filter to open its Create new group panel. Type Eastern for the label.

c. In the Group SQL Expression Builder, change the value to EASTERN.

d. Repeat steps 4a through 4c to create group filters for all 18 districts.

e. None of the features are in multiple districts, so you should change the AND operator to OR.

OR clause

f. To arrange the filters like the filters in the example, select Horizontal for the arrangement style. Turn on Wrap items. Select Button for the activation style.

g. Optionally, turn on the Reset all filters tool.

Filter widget settings

5. Fix a data problem

a. Turn on Live view and activate the Central & Western filter. Only the district polygon appears. If you turn off the filter, you will see that there are two swimming pools in the Central & Western district that the filter is not recognizing.

The Filter widget is not case sensitive, so that’s not the issue. If you select those swimming pools on the map and view their attributes, you will see that the value in their district field is CENTRAL AND WESTERN instead of CENTRAL & WESTERN. That’s a different string. You can fix this by using a different operator.

b. If necessary, click the Filter widget to open its settings on the right.

c. Click the Central & Western filter.

d. Open the expression builder.

e. Change the operator to contains and type Central for the value.

Change the operator and value

Both CENTRAL AND WESTERN and CENTRAL & WESTERN contain CENTRAL, so this expression returns both values. Additionally, this solution works because no other district name contains CENTRAL. If there was a district named Grand Central, then you would need a different fix, such as contains WESTERN.

f. Click OK.

g. Test the filter again. The swimming pools appear as expected.

Make the filters pan and zoom the map

Since the Map widget and Filter widget are both connected to the Water Recreation in Hong Kong web map (and specifically the same four feature layers), the filters affect the map.

You can further connect the Map and Filter widgets using message actions. Next, you’ll make your filters trigger the map to automatically zoom and pan to the filter result.

1. Add a Zoom to action

a. If necessary, click the Filter widget to open its settings on the right.

b. Click the Action tab.

c. Click Add a trigger and select Data filtering changes.

d. Select Map as the target.

e. Select Zoom to.

f. Optionally, set a custom zoom scale.

Add a Zoom to action

2. Add a Pan to action

a. Under the Data filtering changes trigger, click + Add action.

c. Select Map as the target widget.

c. Select Pan to.

Add a Pan to action

Save and preview

Click Live view to test out your filters or click Preview to open the app in a new tab.

More information

Do you have any thoughts about our new Experience Builder features? Let us know on Esri Community.

About the author

Thomas writes about ArcGIS Experience Builder and ArcGIS Maps for Adobe Creative Cloud at Esri. He earned a degree in environmental science from the University of Massachusetts Amherst. Follow him @coughlinmaps.

Connect:
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Next Article

ArcGIS Enterprise on Kubernetes at the 2024 Esri User Conference

Read this article