Jump to content
  • 0
rgiljohann

Passing Parameter from Parent URL to Embedded tabs

Question

I have successfully deployed an embedded tabbed interface using the Caspio article. I have 3 tabs. From my search page, I have successfully passed a parameter to my parent URL, however, I am looking for a way to have the tab URLs updated by that parameter as well. Is there a way to do that? 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

The way I had it configured, was one parent page with 3 tabs of child URLs. I literally had the same set up as the Caspio demo "embedded tabbed reports". My issue was that I could not pass parameters to those 3 child URLs since they were embedded in the parent URL so they did not filter correctly. 

Share this post


Link to post
Share on other sites
  • 0

I assume you are using the iFrame deployment method. If that is the case, you need to pass the parameters to the iframe src attribute.

For example <iframe src="yourdomain.com?parameterA=value..."

To grab the parameters from the parent URL, then you will need some JavaScript. Please follow these instructions.

  1. Add a unique ID to each iframe. <iframe id="frame1" ...
  2. Then, add the following JS to the web page that hosts your tabbed interface:
    <script>
    var urlParams = new URLSearchParams(window.location.search);
      
    document.getElementById("iFrame1").src = "yourdomain.com?parameterName=" + urlParams.get('the URL Parameter Name');
    document.getElementById("iFrame2").src = "yourdomain.com?parameterName=" + urlParams.get('the URL Parameter Name');
    document.getElementById("iFrame2").src = "yourdomain.com?parameterName=" + urlParams.get('the URL Parameter Name');
    </script>

    Assuming your parent URL is similar to this: yourdomain.com?myParameter=Abc then the corresponding JS line would be like this:

    document.getElementById("iFrame1").src = "yourdomain.com?
    myParameter=" + urlParams.get('myParameter'); //This will create the correct source and will pass the parameter to the iFrame.

Share this post


Link to post
Share on other sites
  • 0

Hi rgiljohann,

 

If you are passing parameters after a form submission, you can actually just simply just pass it via Caspio Bridge by checking OnExit. Iframes can get bridge/internal parameters too.

 

If that's not the case (e.g. the link generated from Reports DataPage), here's a below is a nice little script I came up with. Just put it anywhere in your HTML webpage (just don't put this in the iframed DataPage or it will not work):

<script>
document.addEventListener("DOMContentLoaded", function() {
    var loc = window.location.href;
    var qstrings = loc.slice(loc.indexOf('?'));

    document.querySelectorAll('iframe').forEach(function(elem){
    elem.src += qstrings
    });
});
</script>

What it does is: it just appends the query string of the parent to all of the iframes' src.

 

Hope this helps.

 

Regards,

DN31337

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×