Passing Parameter from Parent URL to Embedded tabs

[rgiljohann]

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? 

[Franchiser]

@rgiljohann

I am not sure onto what you are trying to achieve?  Do you want to update a parameter in the URL, or add it if it doesn't exist, but keep any other variables the same value?

 

[rgiljohann]

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. 

[douvega]

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.

[DefinitelyNot31337]

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

[Kurumi]

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

document.getElementById('some_frame_id').contentWindow.location.reload();

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:

<script>
 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 array.push(allHTMLTags[i]);
 }}
 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";
   frames[i].contentWindow.location.reload();

 }else{ frames[i].style.display = "none";}}}
 </script>
 
 <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>
 
 </ul>
 </div>
 
 <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>
 
 </div>
 </div>

The change is by adding this code:

frames[i].contentWindow.location.reload();