Multi tab report

i want to create a multiple horizontal tab once i click a tab1 it will show report 1 when i click tab 2 i want to show report 2 without reload the entire report it is possible in Birt. please anybody help.

Find more posts tagged with

Comments

mwilliams

You could design everything in one design, then create a grid of "tabs" at the top of the report and use client side javascript to hide show the appropriate elements based on the "tab" that is selected. If you bookmark an element, you can grab it by the bookmark with getElementById("bookmark") in your client side javascript.

selvaa50

Thanks for the reply mwilliams.

It is good idea when we have 2 reports but my requirement from client want to show more than 10 reports and each have a tab option...

please help me to attach sample report...

mwilliams

What's your BIRT version?

selvaa50

Business Intelligence and Reporting Tools

Version: 4.2.2.v201301281649-ClBI9nGZcVSofEz-Xuz0n-ruJtUm
Build id: v20130206-1509

(c) Copyright Eclipse contributors and others 2000, 2007. All rights reserved.
Visit http://www.eclipse.org/birt

mwilliams

Take a look at this report design. Each table is bookmarked, as is each "tab" text box. In each text, a link is created with the href being a javascript function that you'll find in a text box at the bottom of the report. Depending on the link clicked, the background color and borders of the tabs change to give the appearance of switching tabs and the tables are hidden shown based on the selected tab as well. Run this in html.

selvaa50

Thanks for posting the example it will help me a lot...............

i want another one i have a href tag in text
<a style="text-align:center;" onmouseover='javascript:onChangeImage("OL");' href='javascript:onChange("Optical-Stock");' ><img id="TestMouseOver" src='C:\Documents and Settings\admin\Desktop\testbtn.bmp'></img></a>

when mouse over i want to change the another image here i use code

function onChangeImage(ImageName){
if(ImageName=="OL")
{
alert('Get It');
tab9="";
tab9=document.getElementById("TestMouseOver");

document.getElementById("TestMouseOver").src="C:Documents and Settings\admin\Desktop\testbtnover.bmp";

}

But it will not change the image but alert is populated

OR

how to change the Image tag source in BIRT when mouse over

Help me and let me out of the problem thank u....

mwilliams

Just load both images and set the display style of one of them to "none", then onmouseover, change the other to "none" and the one from "none" to "block". Hope this helps.

selvaa50

Thanks for the reply,

Please attach the sample report for show/hide functionality for BIRT Images.

and also how to add the Embedded Images into <img src=""> Tag.

mwilliams

For switching an image, you could do something like:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
<a style="text-align:center;" onmouseover="javascript:mouseOverImage()" onmouseout="javascript:mouseOutImage()" href="http://www.birt-exchange.org" ><img id="TestMouseOver" src="C:\Users\mwilliams\Pictures\eclipse.jpg" /><img style="display:none;" id="TestMouseOver2" src="C:\Users\mwilliams\Pictures\JAXConf.gif" /></a>
<script>
function mouseOverImage(){
document.getElementById("TestMouseOver").style.display = "none";
document.getElementById("TestMouseOver2").style.display = "block";
}

function mouseOutImage(){
document.getElementById("TestMouseOver2").style.display = "none";
document.getElementById("TestMouseOver").style.display = "block";
}
</script>
</pre>
<br />
For including embedded image data, see this:<br />
<br />
<a class='bbc_url' href='http://www.birt-exchange.org/org/devshare/designing-birt-reports/1377-inline-base64-image-in-html-output/'>http://www.birt-exchange.org/org/devshare/designing-birt-reports/1377-inline-base64-image-in-html-output/</a>

selvaa50

Wow It works great........... Thanks dude to relieve me in big trouble..

mwilliams

Not a problem. Let us know whenever you have questions!

selvaa50

hi williams,

I have done the concept whatever you told now i am having the multiple tabs each tab having the separate tables i have used the javascript to show/hide concept.

But now i am having two troubles

1. when i have export data into excel in tab2 it will show only the first tab details not the second one.

2. First tab has 3 pages, second tab has 1 page even the second page also show total pages : 3 one page has the contents and remaining two are blank. I have used the style.display="none" in javascript

Help me to solve this problem...

mwilliams

The "tabbed" look will only work in html. For Excel, you'll need to remove the links and display everything at the same time.

selvaa50

first table has 10 pages and second table has 3 pages, in that situation the tabs are not working..

when i try display="none" only the 10th page is invisible all other pages are remains blank please help me to solve the problem..

if there is no possibilities give the other possible solution for doing this..

Thanks

selvaa50

Thank u for supporting Mr.mwilliams i have solve my 2 issues by

1. when changing tab to tab the report is not reloaded that's why report not export correct data i have solve this by using javascript location.replace(newURL);

2. using the visibility property for table.

Than u so much for helping and make me a good name in my company...

mwilliams

Great! Glad to hear you got it working! Let us know whenever you have questions!

selvaa50

Total page count is not showing correct value when we export report into PDF Format

My report has 2 pages and page interval is 40

In PDF it will show like that

1 of 2
2 of 2
for further pages it will show like that
3 of 3
4 of 4 ....

In Report it is show correct value

1 of 2
2 of 2

why? how can i solve this

here i am using this code in footer : Page <value-of>pageNumber</value-of> of <viewtime-value-of>totalPage</viewtime-value-of>

mwilliams

<p>Can you try setting the page break interval to 0 to see if it solves your pdf issue?</p>