Cognos 10 Report Studio Tutorial

Hide Header

In this article, we will learn How to hide IBM Cognos Viewer default Header? We are going to use JavaScript for this. The code may not work on new version of IBM Cognos Reports. Following image shows before and after status.

For this tutorial, we are using IBM Cognos 10.2.1 with Go Sales Query FM Modal and Report Studio. In our demo Report, we have a Report Header, List and Report Footer. The code we are sharing is also going to work in a Blank Report.

Before JavaScript code let's first execute our report once.

Next, we need to open browser developer options

Use the appropriate option as per your Browser
Internet Explorer: Use F12
 

Chrome & Opera: Use Ctrl + Shift +C

Firefox: Use Ctrl+Shift+I

If developer option is opened use selection tool and select the Header.

You can now check the HTML Code for the selected element. We are interested in the table cell with id "CVHeaderRS". Copy the id we will use it to hide the entire cell.

Next, we will open our Report and add an HTML Item with following source code.

<script>
hideHeader()
function hideHeader()
{
	//To test our Java Script function Called
	//alert(1);
	//JavaScript getDocumentById function to set HTML Style display property to none. 
	//It will hide the element.
	document.getElementById('CVHeaderRS').style.display="none";
	//To test our JavaScript function Completed
	//alert(2);

}
</script>

 

Most of the time my manager is not happy with the JavaScript solution. The manager always asks for an alternative. Let's check How to control visibility using CSS. This time instead of JavaScript we will use CSS classes to control the visibility. 
Note: For CSS trick we need to perform all the above steps.
Please again check the image for the HTML Code of the header. The header is in a table cell with class "topRow".
Replace HTML Item content with following code.

<style>
.topRow{
display:none;
}
</style>

Following image shows the output.

As per the image above, our options for running reports are also gone. Let's fix it, we want our options to run reports. Use the following code and add it to HTML Item.

<style>
.mainHeader1,.headerBannerLip,#headerBack
{
  display:none;
}
</style>

 

Now, we have two options for Hiding toolbar or Header for IBM Cognos Viewer JavaScript or CSS. Choose what you like.
Following is the download for Report.xml

FileTypeSizeDownload
Cognos Report Viewer Hide Header.xmlNA9422Login to Download
...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add