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…

OpenText profile picture

OpenText

June 12, 20134 minutes read

Descriptive text explaining the contents of the image.

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:

Posted Image

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:

Posted Image

The example from this blog can be downloaded in the devShare

Share this post

Share this post to x. Share to linkedin. Mail to
OpenText avatar image

OpenText

OpenText, The Information Company, enables organizations to gain insight through market-leading information management solutions, powered by OpenText Cloud Editions.

See all posts

More from the author

Manutan combines digital services with the human touch to delight customers

Manutan combines digital services with the human touch to delight customers

At Manutan, we equip businesses and communities with the products and services they require to succeed. Headquartered in France, our company has three divisions, serving…

January 31, 2024 4 minutes read
Reaching new markets in Europe and beyond

Reaching new markets in Europe and beyond

How information management specialists at One Fox slashed time to market for innovative products with OpenText Cloud Platform Services At One Fox, we’ve driven some…

January 18, 2024 4 minutes read
SoluSoft helps government agencies tackle fraud faster

SoluSoft helps government agencies tackle fraud faster

Fraud, in all its forms, is a pervasive problem, spanning industries and preying on vulnerabilities in federal and state government systems. Each year in the…

November 21, 2023 3 minutes read

Stay in the loop!

Get our most popular content delivered monthly to your inbox.