Alternative Filter Widget

ZachBodenner — Tue, 12 Aug 2025 15:12:28 GMT

Hello,

For my first 'Custom' widget, I have modified the out-of-the-box filter widget by exposing a few properties that aren't present in the filter style pane, and tailored the display of the filter to focus on using an icon as the primary way a viewer interprets the filter query.

The reason I wanted to create this was because I had a situation where I wanted to set quite a few filters without the scrolling list growing too long, but also not feeling quite so jam-packed that a pill button selection mode can sometimes seem. I took inspiration from a ESRI-developed application for Get Ireland Active that did this and I thought was a really good way to address those issues. The general interface can be seen below:

Usage:

After downloading and extracting the widget to your deployment's client/your-extensions/widgets folder, add the widget to the map. Here I have exposed three color properties to extend the styling of the filter pills. Hover Overlay will change the color of the pill when hovered over, Selected Pill Border will override the Jimu styling that determines the border color and corner-thing color once a pill is selected, and Pill Button Fill allows you to select the base fill color of the pill.

Next, since this widget focuses on an icon, you'll to choose one for your filter item.

The widget strong-arms a square icon into the rectangular pill, giving more space on the sides than on top. This is probably adjustable by more adept coders than myself, but this achieved the effect I was looking for, so I decided to keep it this way. For the app I built this for, I needed an icon set for around forty filters and I wanted to keep the sizes consistent.

The important thing about this widget is that the exposed properties will only work in horizontal arrangement style and with a button activation style. The filter still works fine regardless of the setting, but the styling will not.

And that's kind of it! It's not super extensive but it was a fun exercise to learn a bit about how these things work. I certainly took away a few tidbits, even though I still don't think I could make a custom built widget actually do anything new. Maybe that'll be my next project!

I called it the Custom Pill Filter since that seemed pretty descriptive - maybe I'll rename it something catchier later.

Future Changes?

There are a few things I haven't been able to achieve that hope to figure out in the future:

1. The default colors for the newly exposed properties are white (for the pill fill) and leveraging theme colors for the hover and outline. However, when adding a new instance of these filters to the map, the defaults are reflecting some default theme. even if I select a theme from the options, it does not get reflected in the default colors in the filter. I'd be interested to know if anyone has any insights on how to rectify that.

2. Probably a very easy fix, but I can't figure out how to change this title:

3. Finally, when first setting up a filter item, the default filter icon does not appear:

I suspect something I did changed this, but I really don't know what.

Parting Notes:

The application I'm working on that will feature this widget is not deployed yet, but I will update this post when it is so that it could serve as a demo application for this interested.

Changes/Updates:

8/11/2025 - Breaking changes at 1.18 required small tweaks to handling the popper. popperModifiers has been replaced with FallbackFlipOptions, which required changes to /runtime/utils, /runtime/filter-item.tsx/ and /runtime/widget.tsx. Additionally, something changed with the handling of the icon that I had set up in filter-item.tsx, so I reverted to the out of the box filter config on that line, and added aria-hidden:true and the size properties I had set previously. I attached an updated widget here.

Re: Alternative Filter Widget

JeffreyThompson2 — Mon, 23 Jun 2025 19:46:30 GMT

The name in the Insert Data Panel is controlled by the label property in the manifest.json.

Re: Alternative Filter Widget

ZachBodenner — Mon, 23 Jun 2025 20:01:55 GMT

Mm, that's interesting (and also what I expected to happen) because I did definitely adjust that label, and it doesn't seem to be reflected:

Re: Alternative Filter Widget

JeffreyThompson2 — Mon, 23 Jun 2025 20:32:42 GMT

The name and label properties do not update, at least not reliably, after Webpack compiles a widget for the first time.

Re: Alternative Filter Widget

ZachBodenner — Mon, 23 Jun 2025 20:34:10 GMT

Well that's certainly inconvenient but at least I'm not going crazy and I understood the setup correctly.

Re: Alternative Filter Widget

JasonBOCQUET — Mon, 30 Jun 2025 14:21:06 GMT

I have the same issue with my customize widget, i set up correctly the manifest.json but look at the result :

And i never find how to fix that ^^'

topic Re: Alternative Filter Widget in Experience Builder Custom Widgets

Alternative Filter Widget

Re: Alternative Filter Widget

Re: Alternative Filter Widget

Re: Alternative Filter Widget

Re: Alternative Filter Widget

Re: Alternative Filter Widget