Creating a “Tabbed” HTML Report Design

I responded to a forum post the other day about having a “tabbed” output so that the user could choose what section of the report they wanted to see by selecting a tab at the top of the report.

To do this, you would set up a design with a grid at the top of the design with a single row and a column for each section/table. A HTML text box should be placed in each cell. The text box will contain a title for the section and a link that calls a javascript function that we’ll create later. The contents of the text box will look like this:

<astyle="text-align:center;"href="javascript:changeTab('Customers');">Customers</a>

Each text box is styled to be a tab. The farthest left tab is styled white with borders on the top, left, and right to appear selected. The other three tabs are grayed out with a border all the way around to appear deselected. Once this is done, our tabs will look like this:



Next, you’d create the sections of the report. In this simple example, tables for Customers, Employees, Orders, and Payments from the sample database were created. A bookmark was then added to each table to allow us to access the table in our client side script. If you had more than just a simple table, you could put each section’s elements in a grid and bookmark the grid.

Finally, a HTML text box is placed at the bottom of the report with our script. The script takes the section value from the tab link when the user clicks on it. Based on the passed value, the style for the tab is changed to show that the tab has changed. Also, the section display style is set so that the selected section is shown. Here is a look at the full script:

<script>function changeTab(tabName){if(tabName =="Customers"){

		document.getElementById("Customers").style.display ="block";

		tab = document.getElementById("CustomersLabel");

		tab.style.backgroundColor ="white";

		tab.style.borderBottomColor ="white";

			

		t1 = document.getElementById("EmployeesLabel");

		t2 = document.getElementById("OrdersLabel");

		t3 = document.getElementById("PaymentsLabel");

		t1.style.backgroundColor ="silver";

		t1.style.borderBottomColor ="black";

		t2.style.backgroundColor ="silver";

		t2.style.borderBottomColor ="black";

		t3.style.backgroundColor ="silver";

		t3.style.borderBottomColor ="black";

		document.getElementById("Employees").style.display ="none";

		document.getElementById("Orders").style.display ="none";

		document.getElementById("Payments").style.display ="none";}if(tabName =="Employees"){

		document.getElementById("Employees").style.display ="block";

		tab = document.getElementById("EmployeesLabel");

		tab.style.backgroundColor ="white";

		tab.style.borderBottomColor ="white";

			

		t1 = document.getElementById("CustomersLabel");

		t2 = document.getElementById("OrdersLabel");

		t3 = document.getElementById("PaymentsLabel");

		t1.style.backgroundColor ="silver";

		t1.style.borderBottomColor ="black";

		t2.style.backgroundColor ="silver";

		t2.style.borderBottomColor ="black";

		t3.style.backgroundColor ="silver";

		t3.style.borderBottomColor ="black";

		document.getElementById("Customers").style.display ="none";

		document.getElementById("Orders").style.display ="none";

		document.getElementById("Payments").style.display ="none";}if(tabName =="Orders"){

		document.getElementById("Orders").style.display ="block";

		tab = document.getElementById("OrdersLabel");

		tab.style.backgroundColor ="white";

		tab.style.borderBottomColor ="white";

		

		t1 = document.getElementById("CustomersLabel");

		t2 = document.getElementById("EmployeesLabel");

		t3 = document.getElementById("PaymentsLabel");

		t1.style.backgroundColor ="silver";

		t1.style.borderBottomColor ="black";

		t2.style.backgroundColor ="silver";

		t2.style.borderBottomColor ="black";

		t3.style.backgroundColor ="silver";

		t3.style.borderBottomColor ="black";

		document.getElementById("Customers").style.display ="none";

		document.getElementById("Employees").style.display ="none";

		document.getElementById("Payments").style.display ="none";}if(tabName =="Payments"){

		document.getElementById("Payments").style.display ="block";

		tab = document.getElementById("PaymentsLabel");

		tab.style.backgroundColor ="white";

		tab.style.borderBottomColor ="white";

		

		t1 = document.getElementById("CustomersLabel");

		t2 = document.getElementById("EmployeesLabel");

		t3 = document.getElementById("OrdersLabel");

		t1.style.backgroundColor ="silver";

		t1.style.borderBottomColor ="black";

		t2.style.backgroundColor ="silver";

		t2.style.borderBottomColor ="black";

		t3.style.backgroundColor ="silver";

		t3.style.borderBottomColor ="black";

		document.getElementById("Customers").style.display ="none";

		document.getElementById("Employees").style.display ="none";

		document.getElementById("Orders").style.display ="none";}}</script>

This report has to be ran in straight HTML to work. Here is what the report looks like when clicking across the four tabs:



The example from this blog can be downloaded in the devShare.