CALL US NOW:

1-401-727-2400 U.S.
1-905-532-0440 Canada

Creating Tabbed Reports in Report Studio

By Robert Edis, Senior BI Consultant

Business Problem:

User does not want to navigate between separate prompt pages as that requires too many mouse clicks and looks old fashioned. They want to move between collections on prompts either on a single prompt page or the main report page.

Using a Prompt Page allows the user to achieve this result with only one mouse click on the Run button, takes advantage of the inbuilt functionality and behavior of a Prompt Page, and does not interfere with a clean look and feel on the report page. Does not allow the user to run report and see results based on defaults initially.

Using a Report Page allows the user to achieve this result with no additional mouse clicks and displays an initial report result based on defaults without user having to enter prompt values. Does not allow for use of inbuilt Prompt Page functionality and may cause standard prompt button behavior to change.

Both options require a significant amount of JavaScript and may not work the same across browsers. The solution shown here was developed and tested on Microsoft Internet Explorer 9.

Solution:

Add tab panels to a single prompt page. Example uses the Go Sales (Query) package.

Note that conditional blocks or version 10.2.2 tabs are not used. This solution has been tested on Internet Explorer 9 only and I cannot provide assurance that it will work the same way in other web browsers.

Figure 1 – as rendered when run

  1. Create a new list report in Report Studio.
  2. Add a Prompt Page then open it for editing.
  3. Add a block to the page body. Name it “blkTabs”.
  4. Add a table to the block (2 rows, 1 cell). Name it “tblTabs”.
  5. In row one, cell one of tblTabs add another table. (1 row, 3 cells). Name it “tblTabsHdr”.
  6. In the first cell add the following:
    1. An HTML item. Add Description “Tab Headers”. Add the code <span id=”tabHeaders”>. This begins a span with an identifier that can be reference in the JavaScript.
    2. A block after the HTML item. Name it “blkTabNames”. In this block add text items, one for each tab you require. Name each text item as “txtTabn” where n is an integer starting with 1.
    3. An HTML item after the block. Add Description “End tab headers”. Add the code </span>. This closes the span. A span is an HTML object use to contain an area on a page.
  7. In the next cell add an HTML item use the Description “Finish button”. Note this is only required if you want to hide the default navigation buttons on the Prompt Page or if you need to execute some JavaScript before the Finish action. Add the code
    <input type=”button”
    style=”padding: 3px; font-weight: bold; font-size: 10pt; font-family: Arial, Serif; background-color: #669900; color: white; border: 1px solid silver;” onclick=” [add your JS code or function call here]; promptAction(‘finish’);” value=”Submit”> [you can use a different label than “Submit”].
  8. The third cell is just a spacer to make it easier to control the layout.
  9. In row two, cell one of tblTabs add the following:
    1. An HTML item. Description “Tab content”. Code <span id=”tabContent”>.
    2. A block for each tab after the HTML item. Name them “blkTabn” where n is an integer starting with 1. Format the blocks (BG colour, font, size, border, etc.) per reqquirements.
    3. An HTML item after the last block. Description “End tab content”. Code </span>.
  10. Below the block blkTabs add:
    1. An HTML item. Description “Tab styles”. Code <span id=”styleMaker” style=”display:none”>. The display:none hides the content of the span area.
    2. A table named “tblStyles”, (1 row, 3 cells).
    3. In each cell add a text item with the following names and text:
      1. Name: “txtSlctTab”, Text: “Selected Tab”.
      2. Name: “txtUnslctTab”, Text: “Unselected Tab”.
  • Name: “txtHover”, Text: “Hover”.
  1. Format each cell with the background color, foreground color, font, border, etc. you want. These will be the way the tab buttons will be rendered on the page.
  2. Add a Text Box prompt control below the table tblStyles. Not required, parameter name as “currentTab”, name as “currentTab”. This is used to record which tab the user selects.
  3. An HTML item. Description “End tab styles”. Code </span>.
  4. An HTML item. Description “Tab functions”. This could also be placed above the block blkTabs. Use code below: (note: text box smaller than contained text. Select all, copy and paste to text editor to view).
<script>/*initialise Tabs*/
var headersDiv = document.getElementById(“tabHeaders”);
var theHeaders = headersDiv.getElementsByTagName(“span”);
var contentDiv = document.getElementById(“tabContent”);
var allDivs = contentDiv.getElementsByTagName(“div”);
var theContent = new Array();
/***** theContent will contain all relevant divs */for(var di = 0; di < allDivs.length; di++)
{
if(allDivs[di].parentNode.id&&allDivs[di].parentNode.id==”tabContent”)
{
theContent.push(allDivs[di]);
}
}var theStyles = document.getElementById(“styleMaker”);
var allTabStyles = theStyles.getElementsByTagName(“td”);
var selectedTab = allTabStyles[0].style.cssText, unselectedTab = allTabStyles[1].style.cssText, hoverTab = allTabStyles[2].style.cssText;/*first tab is selected by default. currentTab does not yet have a value. */theHeaders[0].style.cssText = selectedTab;
theHeaders[0].tabID = 0;/***** Starts at 1 to set all other tabs to be unselected */for(var thIdx = 1; thIdx < theHeaders.length; thIdx++)
{
theHeaders[thIdx].style.cssText = unselectedTab;
theHeaders[thIdx].tabID = thIdx;
theHeaders[thIdx].onclick = function()
{
clickTab(this.tabID);
cognos.Report.getReport(‘_THIS_’).prompt.getControlByName(‘currentTab’).setValues([{‘use’:this.tabID}]);
}

theHeaders[thIdx].onmouseover = function(){this.style.cssText = hoverTab;this.style.cursor = “pointer”;};
theHeaders[thIdx].onmouseout = function(){this.style.cssText = unselectedTab;this.style.cursor = “default”;};
}

for(var ci = 1; ci < theContent.length; ci++){ theContent[ci].style.display = “none”;}

/*End of tabs initialization*/

 

if(cognos.Report.getReport(‘_THIS_’).prompt.getControlByName(‘currentTab’).getValues().length)
{
clickTab(cognos.Report.getReport(‘_THIS_’).prompt.getControlByName(‘currentTab’).getValues()[0].use)
}

 

function clickTab(id)

{
//loop through headers
for(var i = 0; i < theHeaders.length; i++)
{
if(i != id)
{
theHeaders[i].style.cssText = unselectedTab;
theHeaders[i].onclick=function(){clickTab(this.tabID);};
theHeaders[i].onmouseover=function() {this.style.cssText=hoverTab;this.style.cursor=”pointer”;};
theHeaders[i].onmouseout=function() {this.style.cssText=unselectedTab;this.style.cursor=”default”;};
}
else
{
theHeaders[i].onmouseover=””;
theHeaders[i].onmouseout=””;
theHeaders[i].style.cssText=selectedTab;
cognos.Report.getReport(‘_THIS_’).prompt.getControlByName(‘currentTab’).setValues([{‘use’:id}]);
// Update hidden control with curr tab index
}

}

 

//loop through content

for(var j=0;j<theContent.length;j++)
{
if(j!=id) { theContent[j].style.display=”none”; }
else { theContent[j].style.display=”block”; }
}

}

 

</script>

  1. If you don’t want to see the default navigation buttons then select the page footer and set the Box Type property to “None”.
  2. Test the results by running the report.

At this point your report should look something like the below. Now it’s time to add content to the tab panels.

To use this technique on the report page instead of a prompt page add an additional tab header and block to the beginning of the series. The block should be hidden. The tab label can be something like “Results”. Move the blkTabs block to the report page header below the title or the page body above the list.

Click here for Report Studio Report Specification

 
 
 
 
 

Contact Us

E-mail: cci.info@lighthousecs.com

USA
Phone: (401) 727-2400
Fax: (401) 727-4998

Canada
Phone: (905) 532-0440
Fax: (905) 532-0683