Dashboard Lesson Part 2, cont.

In this part of the walkthrough, we're going to create a dashboard that shows a map of the violation data, a count of the violations shown, and charts showing breakdowns of the violations by facility type and violation type. We'll also add a sidebar allowing the user to filter the data by municipality and provide the ability to filter the data temporally.

I screwed up and created Dashboard Lesson Part 2 without putting it in a book. Now I can't access it and will need help getting that text added to the top of this page...

B. Add a header

Click the View button (monitor icon) on the strip of buttons running along the left side of the Dashboards interface.

Here you'll see that your web map is situated in the body of your dashboard and that other configurable parts of the dashboard include a header and a sidebar. We will use both, but let's start with the header.
Click the Header tab and then Add header.
The default Title is not very friendly. Change it to something like Allegheny County Health Violations, 2014-present.

Note while we're here that it's possible to add a Logo, which appears in the upper-left of the header. We don't actually work for Allegheny County, but if we did, we might insert the county logo here. We'll add to the header later, but for now let's add a sidebar.
Click Done to have the header added and return to the View panel.

C. Add a sidebar with a clickable list of municipalities

Click the Sidebar tab, then Add sidebar.
Leave the Title empty.
Toggle the Collapsible sidebar switch to on and click Done.

Note that the sidebar is added to the dashboard, with a small arrow button on its right allowing the user to collapse/expand it. A pushpin also appears in the upper right of the sidebar, allowing the user to pin it in place so that it doesn't collapse inadvertantly.

Also note that an Add selector button now appears on the Sidebar tab on the View panel.
Click the Add selector button. You have the ability to add a Category selector, Number selector, or Date selector. Choose Category selector.

A Category selector dialog will appear. We could manually input options here, using the Defined values option, but that would certainly be tedious with well over 100 municipalities. Let's instead pull the names from the Municipalities layer.
Choose the Features option, then the Municipalities layer.

Quick note: On my first iteration of developing this dashboard, I created a new data expression here, basing it on the Violations layer. I created a list of municipalities using a short Arcade expression that returned a distinct list of values from the Municipal field. This worked great from a filtering standpoint. However, a natural follow-up action to build in would be to zoom in to features associated with the selected municipality. Unfortunately, that is not an option; to get the zoom action, you must base your option list on values pulled from a feature layer with geometries. So that is the approach we'll take here.
For the Template, specify {field/municipal}.
For the Sort by option, specify the municipal field again.

Note that the Maximum categories option defaults to 50. We have ~160, so we'll need to increase this.
Change the Maximum categories to 200.

The selector defaults to a dropdown list. Let's instead configure it so that all the names appear at once along the full length of the sidebar.
Click the Selector tab, then set the Presentation mode to Inline.

We can now see multiple options, but the list is truncated due to the Maximum height option being set to Compact.
Change the Maximum height option to None. You should see the options fill the little sidebar preview. The complete list can be accessed by scrolling.
Set the selector's label to Choose a municipality/ward.
Click the Add icon button, then the Points of Interest category. In the third row of icons, you should find a building with a flag on top, reminiscent of a government building. Choose that icon and click OK.

Lastly, it will be good to offer an option for displaying all municipalities.
Toggle on the None option switch.
We'd like this option to appear at the top of the list, so leave the Placement set to First.
Change the Label for none option to All.

Before leaving the Selector tab, note the Selection setting. We'll stick with the default Single option, but note that it's possible to allow the user to select Multiple options.
Now click the Actions tab. This is where the magic ~~happens~~ is configured. 😊 Note the several actions available for us to implement When the selection changes (i.e., when the user picks a municipality). A few of these seem applicable here.
Expand the Flash area, then toggle on the switch associated with your violations map.
Click Done to close the Category selector dialog and return to the main interface.

You should see an alphabetized list of municipalities (and Pittsburgh wards) fill the sidebar.
Test that clicking a municipality causes it to flash on the map. And while you're at it, play with the collapsing/expanding/pinning of the sidebar.

Now let's configure two other actions (Filter and Zoom). We could have made these settings before dismissing the Category selector dialog, but it's good to see how to get back there.
Hover the mouse over the sidebar. You'll see two ... buttons. The one in the upper left is for accessing properties of the sidebar as a whole. The one slightly below that and to the right is associated with the category selector.
Hover over that second button and click the gear icon.
Click the Actions tab. Each of the actions will have 0 active targets, with the exception of the Flash action you just applied.
Click the Zoom action and flip the switch for your violations map.

Now we'll configure the Filter action so that the map displays only the violations that occurred in the selected municipality.
Click the Filter action and toggle on the switch associated with the Violations layer.

A few options will appear. Render only when filtered (off by default) would cause the map to initialize with no points shown; they'll only be added when the user selects a municipality. Leaving that option turned off, which is what we'll do, causes the map to initialize with all points shown.

The critical setting to make here is to specify the Source and Target fields.
For Source field, choose the municipal field. Your options on this list come from the Municipalities layer, which the selector was based upon.
For Target field, choose municipal here also. Your options on this list come from the Violations layer, which you just chose as the target for this action.
Click Done to apply your settings and return to the main interface.
Test the filtering/zooming behavior by selecting municipalities from the list.

In your first test, you may note that the map is zoomed to the selected municipality, but that a lot of points still appear outside the boundaries of that municipality. This has to do with the size of the dataset (400K+ points). After 10-20 seconds, you should see the map appear as expected. And after that, subsequent selections should produce filtering with much better performance. There is clearly some sort of indexing that happens on the first filtering.

In the next section we're going to add year selection options and while doing so initialize the dashboard to display just the most recent year of data. That should mitigate this performance issue by reducing the points being drawn by roughly a factor of 10.

D. Add year selection options

Recall that the violation data includes the date the inspection took place (in the inspect_dt field). We can allow end users to filter the points shown based on this field. One place we could put the year selection options is in the sidebar, though that would really only make sense if we reset the municipality selector's Maximum height property to Compact or Extended (so that the year selector could be seen without scrolling down). It's also possible to add selectors to the header, which is a nice way of using some vacant screen real estate. That's what we'll do in this walkthrough.

Click the View button to access the page elements, then on the Header tab.
Click Add selector, then Date selector.

We have lots of different approaches we could take with filtering by date. One possibility is to configure a slider that allows for displaying a single year of data, with one end of the slider being the dataset's earliest year of data (2014) and the other end being the most recent year available. This would limit the user to displaying one year of data at a time. Another possibility is to configure a slider that allows for defining a start year and an end year. The app would display all violations recorded in that time range. We'll take this latter approach as it offers the user greater flexibility. (We could also make it possible to enter a range of dates rather than years, but we'll go with years. Having to specify two dates with a date picker would be a bit tedious.)
For the Label, enter Year(s) of Violation.
For the Type setting, select Date picker.
Under the Date picker heading, set the Display mode to Slider, the Input type to Range, and the Resolution to Year.

Next we need to define the limits of the date picker. The simplest approach would be to stick with the default Defined values option and manually enter a Minimum of 1/1/2014 and a Maximum reflecting the end of the dataset. However, we can configure the date picker so that the range of the dataset is determined automatically and any addition of new violation data will not require updating the picker.
Change the Limits from option from Defined values to Statistic.
Choose the Violations layer.
Specify the Field as inspect_dt.
Finally, set the Default option to Current period and last.

Feel free to experiment with other Default options. You should see how the picker will appear in the preview to the right of the window. With the 'Current period and last' option, you should see a single year as both the start and end of the year range (e.g., 2025-2025).
Test the behavior of the date picker in the preview.

The user can click on a circle on the slider (referred to as a thumb) to adjust the year range. The picker is initialized with the start and end year being the same, so while there are actually two thumbs, it will appear at first that there is only one. Dragging it to the left will reveal the other thumb. That second thumb could also be dragged left (to create a range like 2018-2020, for example). And once the two thumbs have been dragged to different years, the user can click on the line between the two thumbs to keep the same range, but shift both the start and end year at once.

This behavior, along with a range appearance like 2025-2025, could be confusing to end users. Alternatively, you could configure two separate date pickers, one for the start year, the other for the end year. In a real-world scenario, you may want to ask a focus group to evaluate both options and implement the one preferred by the group.

Now let's "wire up" the picker to the map.
Click the Actions tab, then expand the Filter action.
Toggle the Violations switch to on.
Click Done to return to the main interface.
Test that the new date picker filters the violation data as expected. You may want to choose a municipality like Bethel Park to get a clearer view of the points changing.

jed124 Sat, 05/23/2026 - 10:23