Use url parameters, but open in modal - Help!

Ask the community
#1

I am at the end of my rope on this one :sweat_smile: and it seems like it must be fixable, but even after talking to customer support twice, I am stuck on the same thing. Hopefully someone here has a workaround!

Here’s the issue - I have multiple places in my site where I’d like the user to open another page that is also in Softr but use url parameters on that page.

For example, open a form to update status, but the url of the form has url parameters to prefill some of the form fields, i.e. https://project.softr.io/form-page?prefill_Thing1=Value1&prefill_Thing2=Value2

Or as another example, open a detailed view of a list item, but the detailed view uses a presearch of a larger table to show just the item we want to focus in on, i.e. https://project.softr.io/list-page?search-for=ThingIWantToShow

Here’s the issue - as far as I can see, you can only open a page in a modal… just the whole page, no prefill or search for parameters allowed… and that’s fine, I can handle with a dynamic url, but if one chooses to open a url the only options are to open in a new tab or in the same window, no modal

I got desperate enough to attempt putting my own code block, but I can’t figure out how to define a custom button class (to open my dynamic url) that I could then use in the existing list or grid views that I want to put the dynamic modal link into.

Basically I want a button, appearing in an existing list or grid block, that opens a modal with a url parameter modified version of another page in softr. Does anyone have any ideas how to accomplish this? I’m about to throw away the whole site after weeks of work because this is really a showstopper on several key user flows… I’m sending my users out to page after page because I can’t keep them in the same flow without modified url modals :sob:

#2

Hi. I feel your pain. I just spent a little while poking around to see if there is an obvious way to do this with custom code, but I don’t think there is.

If I absolutely had to do this, the path I would try to follow is to watch that click being handled, and figure out how Softr’s JavaScript is getting the URL of the page to display for the modal, and add the URL parameters to it.

Unfortunately, doing this by debugging at run time(i.e., without access to the Softr source code) is beyond my JavaScript forensic skills.

#3

Kim,

Had the same requirement ie show modal on button click (if I am understanding this correctly)

Add this code to Code Inside Footer

This is for the use case of a list block with a button to show list details.

1 Set the button to open external url, we will be changing this to the modal.

2 Change the code css-1fkrmw4 to to the class on the <a> tag for the button.
To get this, right click on the button and click inspect.

3 To change modal size use one of sm, md, lg, xl in place of ‘lg’

<script>
window.addEventListener('load', function() {
setTimeout(function() {
 modal=document.getElementsByClassName("css-1fkrmw4");
 [].forEach.call(modal, function (e) { 
    e.setAttribute("onclick", "openSwModal('" +e.href +"','lg');return false;");
    e.href="#";});
    }, 3600);
});
</script>
1 Like