Creating Embeddable Tabbed Interface

3 minutes to read

Tabbed interfaces improve user experience as they can provide a user with lots of functions in a limited space. In Caspio, you can create a tabbed interface that is easily deployable on multiple webpages with nested iFrame deployment. This method is applicable to any DataPages. In our article we will combine a Submission Form, a Report, and a Chart.

Steps:

Create your Submission Form, Report, and Chart DataPages.
Deploy each DataPage using the URL method and note the URLs as they will be used in the next steps.
Create an HTML DataPage that will contain the tabbed interface.

- In the Page Design screen, insert the following code into your HTML Page:

Modify the code for the following customizations:

- Text of the tabs: Change the text of the tabs that is located in the list items within the ul tag with the “menu” id. The default text for the tabs is “Tab 0”, “Tab 1” & “Tab 2” and is highlighted in orange.
- URL of the tabs: Replace “URL of Tab #” with the corresponding URL links into the source attribute of each iframe.

- Color of the tabs: The styling code for the tabbed control is located between the style tags. You can change the CSS without affecting any of the tabbing behavior.
- Make the tab content resizable: To make the tab control resizable, copy and paste the following code into your webpage header. A small handle graphic will appear in the bottom-right corner indicating the control is now resizable. The CSS definition to style these handles is: .ui-resizable-handle. .

Further customizations

The sample code includes three tabs. You can add more by duplicating the sample. Each tab consists of a control and iframe content. Add a new control by adding a new list item line in the “menu” ul. Make sure to increment the channel number by one, and customize the visible text.

Add content for your new tab by duplicating the last sample iframe. Increment the ID and customize the source (src) attribute to include the URL of your content.

This sample shows a tabbed interface with independent DataPages. If you wanted to query / filter all of the records dynamically you could use a Details Report instead of an HTML page and pass the search criteria to the nested iframes using parameters.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
document.addEventListener('DataPageReady', function (event) {
$( ".content" ).resizable({
animate: true, animateEasing: 'swing', animateDuration: 500
});
});
</script>

code2

<style>
 .ui-resizable-helper { border: 1px dotted gray; }
 ul#menu { width: 100%; height: 43px; background: #007c62; font-size: 0.8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
 ul#menu li { display: block; float: left; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
 ul#menu li a {color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; }
 ul#menu li a:hover { color: #333; }
 .content{display:block; width:700px; height:700px; padding:30px; border:2px solid gray; overflow:hidden; position:relative;}
 .ChannelView{ width:100%; height:100%; margin-bottom:100%;}
 </style>
 
 <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";
 }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>