Is there any way to have an inline filer be set by default?
I have the same question 
Well, almost. I’d want someone who lands on the site either by directly typing in the host (without parameters) or coming from google to have an initial value for one of the filters. Using URLs only works for direct links.
I think we would need to add this as a feature request
@artur curious if this might see the light of day anytime soon? We have a list of events filtered by “past” and “upcoming” - would be great if we could set list to auto filter to only show “upcoming” events by default but preserve the users ability to show “past” events.
I think now one option could be to do it via custom code. like after the block is loaded click on the filter automatically
Oh interesting, where would this code snippet go? In the page header? Any further direction on getting my hands on such a code snippet?
Howdy! I needed to do this too, so I figured out a way. And it works!
An expert coder could probably come up with a better solution, but I’m kind of an amateur with javascript.
I was basically making an inbox, where you’d be able to filter between sent and received, but I wanted the “received” filter to be clicked by default. So here’s what I did.
First of all, if you have multiple sets of filters on your list, the first thing you’ll need to do is make sure you style the filter that contains the button you want to click a little differently. This will make Softr identify it with a unique class. Your filter won’t have a unique class if it is styled exactly the same as the other filters.
In my case, I changed the text color of the filter options from #616161 to #616162.
To the naked eye, it still looks exactly the same as the others, but since the hex code is slightly different, this filter now has a unique class. Below is the HTML of the two filter buttons:
<div class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeSmall MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-outlinedDefault tag css-w16716" tabindex="0" role="button"><span class="MuiChip-label MuiChip-labelSmall css-u95dmd">Received</span><span class="MuiTouchRipple-root css-w0pj6f"></span></div>
<div class="MuiButtonBase-root MuiChip-root MuiChip-outlined MuiChip-sizeSmall MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-outlinedDefault tag css-w16716" tabindex="0" role="button"><span class="MuiChip-label MuiChip-labelSmall css-u95dmd">Sent</span><span class="MuiTouchRipple-root css-w0pj6f"></span></div>
See how at the end of the first divs, they have the class of css-w16716? That is unique to this one filter set.
Now what I want it to do is click the element “span.css-u95dmd” in the first instance of an element with the class of “css-w16716.”
In my case, I want to first option to be clicked, but you can just change one thing in the code below to change it to the 2nd, 3rd, 4th, or whatever…
You would put this in the PAGE SETTINGS > CUSTOM CODE > CODE INSIDE HEADER
<script>
window.onload=function(){
document.querySelector(".css-w16716:nth-of-type(1) span.css-u95dmd").click();
};
</script>
All you have to do is replace those CSS classes with the unique classes on your page, and change the (1) to whatever number your button is on the list.
Here’s a screenshot that might help:
Hope that works for you, enjoy!
1 Like
This has been very helpful. However, I’m struggling to get it to work - but I have a dropdown menu instead of a direct button. Do you know how I would change the code in order to work with a dropdown menu and selecting the first option