Sometimes we want to pre-filter our lists with url parameter so that users can click on a url and see specific category of list items shown. e.g. let’s say we have list of activities and we want to show all Yoga activities via direct link.
The code below does exactly that picks a parameter from url called category (can be changed too) and then selects respective tag from the filters automatically.
<script>
document.addEventListener("DOMContentLoaded", function() {
const category = getUrlParam('category');
if(category) {
const existCondition = setInterval(function() {
if ($('div[data-value="' + category.trim() + '"]').length) {
$('div[data-value="' + category.trim() + '"]').click();
clearInterval(existCondition);
}
}, 100);
}
function getUrlParam(name) {
const url = new URL(window.location.href);
return url.searchParams.get(name);
}
});
</script>
1 Like
Another use case for pre-filtered lists is maintaining the search query of a user when going ‘back’ from clicking into a details page (when the desired behavior is not opening the details page into a new window) … if I’m able to get this script to work properly, I’m still going to write a bit of JS to handle going back in the browser history on click to achieve this, really wish this eventually a native feature!
Hello there!, I tried this but is only working on Safari. While I load the URL on Chrome it doesn’t work. Any advice?
PD: The use case is to load segmented data for a service summary is sent to the client.
Cheers!!!
Now this is supported by default. Here is a doc: https://docs.softr.io/building-blocks/listings/list-filtering-with-url
2 Likes
Thanks for the tips … but It doesn’t work in my application (https://necole720.softr.app/testUpdate?niveau=Ligue2)
I added the following code in the custom code of my page :
The alerts DB1, DB2, DB3 and DB4 appear but the click() function has no effect 
Can you help me ?
<script>
document.addEventListener("DOMContentLoaded", function() {
alert("DB1");
const category = getUrlParam('niveau');
if(category) {
alert("DB2");
const existCondition = setInterval(function() {
if ($('div[data-value="' + category.trim() + '"]').length) {
alert("DB3");
$('div[data-value="' + category.trim() + '"]').click();
alert("DB4");
clearInterval(existCondition);
}
}, 100);
}
function getUrlParam(name) {
const url = new URL(window.location.href);
return url.searchParams.get(name);
}
});
</script>Hello Jerome,
Please note that there is a known issue with the option, we are currently working to fix this. I will let you know once the update is launched.
Thanks!
Has this been fixed?
hello @Suzie , where should this code place? header custom code? if this code works, the URL should be change. is it correct?
This code should be placed in the header custom code, yes!
1 Like
Hi @matthieu_chateau thank you for your reply. I tried to implement in my website here https://www.petfriendly123.com/
when I click “Hotel”, what is the correct response? the url should change to Pet Friendly Jakarta Bogor Bandung Bali?
Didn’t use it since a long time, but no, if I remember well.
First use case : you will redirect a prospect, by entering the correct url with the correct filter to show him what interests him/her, inside a prospection message (so, it will come from an interaction completely outside of your app).
Second use case : you have a button inside your Softr website/app, that, for any reason, needs to redirected to a page with a list… with a specific filter. Let’s say: because this button is part of a block dedicated to a segmented type of user (aka one of your user groups set up in the app settings)
Other use cases can be found, I’m sure.
But why don’t you use this instead : List filtering with URL - Softr Docs ? 
1 Like
@hidex.dev when I check the url you shared
https://www.petfriendly123.com/?filter-by-Type=Hotel
it seems to be working fine
Do you face issues ?
Normally one would put such links in the footer for SEO and quick access
Hey mate, seems like the url is case-sensitive and I am unable to change the fonts to uppercase nor use = in the url.
Also if deployed successfully
- Can we change it to a custom url, for programmatic seo
- is that a redirect to the new url ?