Page URL - URL Parameters - webcomponents

Ask the community
1

I’m building a App in Softr and using a webcomponent from Shoelace. When I place a form in a ‘Drawer’ I can’t use the url parameters on that page in a hidden field. I want tot collect the recordID witch is in the url. Somebody?

2

Hi @jaspijk - I’m not familiar with Shoelace, so can you say a bit more about what you mean by “you can’t use url parameters when you put a form in a drawer” – where is the problem actually occurring?

3

OK, I took a quick look at Shoelace, it’s very cool.

Trying to reproduce your setup: on a Softr page, I added a custom code block with a Shoelace drawer containing a Shoelace form. I’m not sure what the next step from here would be, can you advise?

Also, was it a Shoelace form that you were trying to put into the drawer, or a Softr form, or some other kind of form?

4

Hi @dcoletta, thanks for Your quick respons. It’s a Softr form I’m trying out in the drawer. On the form there is a hidden field witch containing {URL_PARAM:recordId}. When I use the form on the page itself the {URL_PARAM:recordId} is stored in the hidden field (using it in Make) When I place the form into the drawer the hidden field keeps empty…

5

Are you placing the Softr form into the drawer by copying and pasting its embed code?

6

Yes I do

7

OK I think I have reproduced your setup. Just to confirm: there are two Softr pages involved. One page is a page that has a list details block and also has a custom code block with the drawer that contains the embdded form; the other page is the page where the embedded form lives.

If that is what you have, then I can see what the problem is. The hidden field’s value (the record ID) is not accessible to the embedded form, because the embedded form does not itself have a list details block on it.

I can see a couple of different possible ways to work around this problem.

One would be to put an invisible list details block on the form, that points to the same table, and pass the recordId parameter into the embed’s URL (as a query string). I played around with this for a second and couldn’t get it to work, but I am not ready to rule it out as a possibility.

The other would be, instead of using another list details block, to write some more JavaScript inside the embed iframe that reads the value from a querystring parameter, and then writes it into the hidden field.

Any of that make sense?

8

Thanks! I tried the first one. That didn’t work although it seems logical. The second one… I’m a real no-coder :blush: Can You help me with the JavaScript and how to put it in the embed iframe…

12

I found this:

        let myIframe = document.getElementById("myIframe");
        let url_string = "https://ads.mrvirk.com/";
        let width = "728";
        let height = "90";
        let geo = "uk";

        let adsURL = url_string+"?geo="+geo+"&size="+width+"x"+height;
        console.log(adsURL);
        myIframe.src = adsURL;
13

Yes, that is the right direction!

Here is what worked for me.

  1. In the hidden field of the Softr form, set its value to the custom value {URL_PARAM:recordId}. (Looks like you already did this.)
  2. Copy onto the clipboard the embed code of the Softr form block you want to use.
  3. Paste that embed code inside the <sl-drawer> element in the page that has the drawer on it
  4. Right underneath that embed code, paste in the script below:
<script>
  const embedURL =
    "/shoelace-embedded-form?recordId=" + 
    new URLSearchParams(location.search).get('recordId');
    document.getElementById('softr-a248fb8d-6b9b-4033-b1a3-92eb77f89387-form1').src = embedURL;
</script>
  1. Edit the script, replacing shoelace-embedded-form with the slug of the page that has your embedded form on it; and replacing softr-a248fb8d-6b9b-4033-b1a3-92eb77f89387-form1 with the actual id of your embed.

Let me know how this goes!

2 Likes
14

David. Thank You very much. I’ll try it later on. I’ll let You know or ist’s working. Jacques

15

Hi @dcoletta. It also works for me. Very very many thanks.

1 Like