Alternative Filter Widget
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.
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:
