Way to pre-search list based on url parameter

Ask the community
1

Sometimes one needs to open a list page with url parameter that upon opening performs a search based on url parameter. The code below helps to achieve exactly that. (It needs to be inserted into page settings custom code area)

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const query = getUrlParam('query');
        if(query) {
            const existCondition = setInterval(function() {
                if ($('div.sw-js-list-container').length || $('div.sw-js-single-item-container').length) {
                    $('.sw-js-list-search-input').val(query);
                    $('.sw-js-list-search-input').keyup();
                    clearInterval(existCondition);
                }
            }, 100);
        }

        function getUrlParam(name) {
            const url = new URL(window.location.href);
            return url.searchParams.get(name);
        }
    });
</script>
1 Like
2

Can you provide an example URL?

3

https://your-domain-goes-here/listing-page-with-search?query=findme

pretty much appending → ?query=value

1 Like
4

Is there anyway to select multiple parameters for one query in the URL?

5

Hey @dodonerd,

Unfortunately, it is not possible yet. However, we have it in our future plans :slight_smile:

2 Likes
7

Unfortunately, the code above doesn’t appear to be working within the new studio update

neither does the amended version supplied by @artur shown below

image

Can we look into this?

As this was working well with our cloud phone system opening up contact details via the url

image

I know @artur was looking into this but since the Slack channel has been closed not been able to follow up on messages

8

@Dan is your page with List or Table block ?

9

:wave: @artur the page is a list block…

10

@Dan we are looking into this. It’s a newer version of a block (completely changed internally) we will add the filter options soon and let you know

11

Ok thanks @artur i really believe if we can get this working properly you should look to promote it… intergrating cloud phone systems with Softr makes sense in so many ways for business portals

Thanks again Dan

12

@Dan can you pls try this ? https://your-domain-goes-here/listing-page-with-search?search-for=findme

13

Thanks @artur will give it a try and let you know

1 Like
14

This code is now working really well @artur and seems much quicker in carrying out a search :+1:

1 Like
15

Thanks for letting us know @Dan

16

It doesn’t work with list block :frowning:

Generally speaking I would expect softr blocks to allow us to initialise their state.
If not, the snippet above sounds like a “good enough” solution if you know which event you want to dispatch but as I said this doesn’t seem to be working currently.

17

@mislavlukach this is the new way: List Filtering with URL – Softr Help Docs

18

Thanks @artur,
My apologies for not reading the docs more carefully.

I have a followup question regarding the same ability for dropdowns (both single and multiselect). I can’t make it work by using the “filter-by-=” approach and I can see in the docs mentioned my filters need to be inline.

So select and multiselect are not supported?

19

To answer my own question - both select and multiselect seem to be supported but make sure to use value specified in “Filter by” dropdown in softr admin.
I was using filter name but it wasn’t working.

Is there any way @artur to make HTML inputs, select to automatically insert their selection state into the URL?
Otherwise I’ll have to listen to these changes and manually create query params.