Jump to content
  • 0

Passing Parameter from Parent URL to Embedded tabs



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? 

Link to comment
Share on other sites

5 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. 

Link to comment
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:
    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');

    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.

Link to comment
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):

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

    elem.src += qstrings

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


Hope this helps.




Link to comment
Share on other sites

  • 0

 Hi - Just wanted to share this specific code to refresh/reload the iFrame in your DataPage.


Reference: https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe

This can be applicable to this article: https://howto.caspio.com/tech-tips-and-articles/create-embeddable-tabbed-interface/

This article provides a script for Tabbed interfaces. As the script is using iFrames, every change of tab - the DataPage will remain as it is. If you are using a Report DataPage, it will not load the new data. As a workaround, you can edit the code that will reload the iFrame with every click of the tab.

Updated script:

 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 return array;}
 function channel(n){
 var frames = getElementByClass("ChannelView");
 var length = frames.length;
 for(var i = 0; i < length; i++)
 { if(frames[i].id == ("viewer"+ n))
 { frames[i].style.display = "inline";

 }else{ frames[i].style.display = "none";}}}
 <div style="display:block; text-align:left;">
 <div style="display:block;">
 <ul id="menu">
 <li><a onclick="channel(0)">Tab 0</a></li>
 <li><a onclick="channel(1)">Tab 1</a></li>
 <li><a onclick="channel(2)">Tab 2</a></li>
 <div class="content">
 <iframe frameborder=0 id="viewer0" class="ChannelView" src="URL of Tab 0" style="display:inline"></iframe>
 <iframe frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
 <iframe frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>

The change is by adding this code:



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...