Using Several Tab Pages 
In this example, a tab page is to be created. Tab pages can also be created using frameset technology in which different Web templates are used. This example uses DHTML to create the tab page; all objects are contained in a Web template.
You cannot work with pure DHTML since the complete page is frequently reloaded for server requests. Instead, the page status must be transferred back to the server. A dedicated BW object whose attribute is set or not set to ‘hidden’ is suitable here.
The HTML tags that display the tab pages are accessed via head_TABx. X is a whole number counting up from 1.
The HTML tags for the actual display area are accessed via TABx. There is a Web item in each display area (technical name: TABx). Additional Web items can also be added. The technical names of these Web items must begin with TABx.
When switching the tab pages, a request is sent to the server that sets the hidden attribute of the appropriate Web item to ‘ ‘. All other Web items are set to hidden=’X’.
The JavaScript function set_actual_tab checks which Web item (TABx) is currently visible. The respective tab page is marked as selected for this Web item. For other Web items, the associated display area is switched to hidden.
From Release SAP BW 3.5, you can also work with the Web item Web Template as an alternative. When you do this, each display area is saved in a subtemplate. The subtemplates are inserted into the main template using the Web Template Web item and are made visible or hidden as needed. You can find more information on the Web Template Web Item under Web Template.
<!-- BW data source object tags -->
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_DATA_PROVIDER">
<param name="NAME" value="DATAPROVIDER_2">
<param name="DATA_PROVIDER_ID" value="">
DATA_PROVIDER: DATAPROVIDER_2
</object>
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_DATA_PROVIDER">
<param name="NAME" value="DATAPROVIDER_1">
<param name="DATA_PROVIDER_ID" value="">
DATA_PROVIDER: DATAPROVIDER_1
</object>
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_PROPERTIES">
<param name="TEMPLATE_ID" value="EXAMPLE_TEMPLATE_2">
TEMPLATE PROPERTIES
</object>
<HTML>
<HEAD>
<TITLE>BW Web Application</TITLE>
<link href= "/sap/bw/mime/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
<!--
/* function goto_tab: Show all items, starting with tabname, Hide all other items */
function goto_tab(tabname) {
SAPBWOpenURL(SAP_BW_URL_Get()+'&item=TAB*&multi=X&hidden=X&cmd_1=item%3d'+tabname+'*%26hidden%3d %26multi%3dX');
}
/* DHTML function to set correct span-Tag visible
For each Tab in Tab-Header (head_TAB) check, if item TABx is visible
If Item is visible set Header as selected
Otherwise set corresponding span-Tag to not visible */
function set_actual_tab() {
i=0;
do {
i++;
if (document.getElementById('head_TAB'+i) != null) {
/* Check if Object tag is hidden */
var prop = SAPBWGetItemProp('TAB'+i);
var hidden=true;
if (prop != null){
for(j=1;j<prop.length;j++){
if (prop[j][0] == "HIDDEN") hidden = (prop[j][1]=='X');
}
}
if (hidden) {
document.getElementById("TAB"+i).setAttribute('style', 'display:none;visibility:false;',false);
}
else {
document.getElementById("head_TAB"+i).setAttribute('className', 'SAPBEXTbsTABsel',false);
}
}
} while (document.getElementById('head_TAB'+i) != null)
}
-->
</script>
</HEAD>
<BODY>
<table cellspacing="0" cellpadding="5" border="0" id="tabheader">
<tr>
<td class="SAPBEXTbsTab" id="head_TAB1"><A href="javascript:goto_tab('TAB1')">Tab 1</A>
</td>
<td class="SAPBEXTbsTab" id="head_TAB2"><A href="javascript:goto_tab('TAB2')">Tab 2</A>
</td>
</tr>
</table>
<table width="100%" class="SAPBEXTbsBdyEdg"cellspacing="0" cellpadding="5" border="0">
<tr>
<td valign="top" >
<span id="TAB1">
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="GET_ITEM">
<param name="NAME" value="TAB1">
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID">
<param name="DATA_PROVIDER" value="DATAPROVIDER_1">
ITEM: TAB1
</object>
</span>
<span id="TAB2" >
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="GET_ITEM">
<param name="NAME" value="TAB2">
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID">
<param name="DATA_PROVIDER" value="DATAPROVIDER_2">
<param name="HIDDEN" value="X">
ITEM: TAB2
</object>
</span>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
/* This function call is needed to set the correct state */
set_actual_tab();
-->
</script>
</BODY>
</HTML>
If you want to copy the coding from the example, you need to remove the space between ‘ =’ and ‘ “ ‘ in the BW object tags.