Help with a Custom Widget - Icons for Filters

[ZachBodenner]

Hello,

This is a long shot but I'll give it a go. I have never developed a custom widget for experience builder and to be very honest don't really know where to start. I have a thing I want to do though, but even if I did know where to start with custom widgets, I'm not sure I would know what to do next. 

Get Ireland Active has a really cool activity finder that I want to repurpose for our City's Park Finder app. The main thing I want to take away is that this application uses a custom filter widget where the buttons show a icon as opposed to text, and they are grouped into three major color-coded categories.

I've spoken with someone from the Get Ireland Active team, who let me know that ESRI Ireland built the custom widget for them, but as it was a pay-for-service, ESRI Ireland would not be willing to share the code for it. Very understandable, if a bit disappointing. 

So, are you willing to help me reproduce something like this? Is this something that can be deconstructed and rebuilt to some extent? Of course I don't need everything to be identical, but it would be cool to build something similar.  I imagine that it's a bit involved for a forum given my lack of experience, so if you are interested, I'm accepting DMs on the topic as well, with the idea that I will post updates and results here.

Also a special thanks to Darragh at Get Ireland Active for taking the time to talk to me about the app and check with ESRI Ireland about it.

Thanks!

[JeffreyThompson2]

If you are willing to give up on the no text buttons, everything else can be accomplished OOTB. 

In the Filter Widget, you can change the Icons. Use the Plus sign to add your own Icon. Also note that there is a dropdown for more Icons at the top of the Icon Picker.

You can change the Label, but it can't be blank. It also won't accept just hitting the space bar.

The groupings can be accomplished by using multiple Filter Widgets with Divider Widgets in between. This could also be a good time for an Accordion.

[ZachBodenner]

Thanks Jeffrey, I have experimented with some these configuration points but I'm left unsatisfied - maybe you have some other ideas. 

So a couple of things:

1. the filter text color and size is not adjustable. I imagine this can be accomplished somewhere in the widget code when I download and unpack the experience? I imagine I could just type a small character like a period and then make the text color the same as the background. 

2. the filter pill itself is stuck at one size. I like the Get Ireland Active app because the icons are much bigger than what the filter allows for OOTB. I've tried adjust the dimensions of the png I use and despite a gigantic image (pictured) the actual icon remains the same in the filter. 

Generally, the filter widget doesn't have as many of the aesthetic design elements exposed like other widgets, and I've always wondered why.

3. to that end, I like the hover color and 'alt text' (really just the name of the activity or w/e) that shows when hovering over the filter pill in the app. That's something that I would guess definitely needs a custom widget, or some heavy editing to the widget after downloading?

[JeffreyThompson2]

If you are really focused on the aesthetics, you are going to need a custom widget. I also generally recommend building from scratch rather than trying to customize an ESRI widget, especially if you are trying to build for a single application rather than a general solution. 

You should be able to build your own filter widget by making buttons that apply a definitionExpression.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definiti...

[ZachBodenner]

Welp, I jumped down the rabbit hole on the custom widget, and I must admit I did not take your advice and I started with a copy of the OOTB filter widget. Mostly I did this because I simply do not know how to javascript and need it so seldomly that it doesn't seem super worth my time to learn in depth. 

Anyway, I'm getting on a ways! I at least got the pill buttons, icons, and removal of text going well. The next step is to work on some of the hover behavior. Hopefully I'll be able to package and make it available for someone else to use, assuming, you know, it works.

[ZachBodenner]

Arg it's so close to being great!

I had a lot of success with the styling, but the issue now is that all of my points are on the same layer, but multiple filter widgets default to using the AND operator against each other. So I can set the Activities filter to be like 'Baseball' OR 'Basketball', but as soon as I introduce a filter item from the amenities filter, everything disappears from the map. Don't suppose you know a way round that one?

[JeffreyThompson2]

Somewhere in the Filter Widget (I haven't looked at the code, so I don't know where.), there must be a bit of logic that checks the layer for a definitionExpresssion and then adds the one generated by the Filter Widget with an AND statement. Search around until you find it and make it OR.

[ZachBodenner]

Continuing to update this thread, it turns out that the property to manage multiple queries at once is much deeper in the ExB code as opposed to the individual filter widget. What I had to do was actually edit the jimu-core file. It is a very very long file, but I found the location of the mergeQueries (or queryMerge, can't remember specifically at the moment) manager on line 3891 of the document after unminifying it:  s = a.length > 1 ? a.map((e) => `(${e})`).join(" and ") : a[0];

Switch that to OR does that trick. I expect the knock-on consequence is that will apply to every app I work with in this environment, which means that I'll have to switch it back to AND after I'm done developing this app. Unfortunately, if all that is true, that means I wouldn't be able include that behavior in a custom widget on its own. 

So, now I'm at a place where I like the styling of the buttons and I got the behavior that I want out of the filter (with a few quirks here and there). The next thing I tried was to add a section in the config panel where I can adjust the hover color of the filter buttons at build-time, rather than hardcoding it into the widget styling. I managed to get the color picker into panel, but the changes aren't actually being applied. After a lot of frustration, I put it down for a while, but I'll take another swing at it eventually.