Expand/Collapse section

Hi,

How can I create Expand/Collapse section using Design Engine API ?
I want to create 'about' section that looks like a link.
When I click on this link 'about text' will be shown below the link(html) and when I click
again the text will be hidden.

Thanks a lot.

Find more posts tagged with

Comments

mwilliams

The easiest way will be to use an HTML text box and create a link that will call script to hide/show a div that contains your text. If you need an example, let me know your BIRT version.

andreyo

Thanks Michael,

My BIRT version is 4.2.1
Can I do this in Java code, without running scripts?
What I did is :

label = factory.newLabel( null );
label.setText( "About This Report:" );
// create link to the next row
Action ac = StructureFactory.createAction();
ActionHandle a = label.setAction(ac);
a.setLinkType(DesignChoiceConstants.ACTION_LINK_TYPE_BOOKMARK_LINK);
a.setFormatType(DesignChoiceConstants.ACTION_FORMAT_TYPE_HTML);
a.setTargetBookmark("\"about\"");

addLabel(1, 1, grid, label);

label = factory.newLabel( "aboutText" );
label.setText("_About This Report:_".replace("_", "\n") + input.getAboutText());
label.setBookmark("\"about\"");
addLabel( 2, 1, grid, label );

Now can I control the show/hide for row 2 label with the link?

andreyo

Thanks Michael,

My BIRT version is 4.2.1
Can I do this in Java code, without running scripts?
What I did is :

label = factory.newLabel( null );
label.setText( "About This Report:" );
// create link to the next row
Action ac = StructureFactory.createAction();
ActionHandle a = label.setAction(ac);
a.setLinkType(DesignChoiceConstants.ACTION_LINK_TYPE_BOOKMARK_LINK);
a.setFormatType(DesignChoiceConstants.ACTION_FORMAT_TYPE_HTML);
a.setTargetBookmark("\"about\"");
// add label to the grid. row 1 cell 1
addLabel(1, 1, grid, label);

label = factory.newLabel( "aboutText" );
label.setText(input.getAboutText());
label.setBookmark("\"about\"");
addLabel( 2, 1, grid, label );

Now can I control the show/hide for row 2 label with the link?

Thanks,
Andrey

mwilliams

I think you'll have to have a client side script to show hide the section on click, by the user.

mwilliams

I think you'll have to have a client side script to show hide the section on click, by the user.

andreyo

I see.
Can you give me an example with a script?

Thanks,
Andrey

Here ya go.

Thank you !

You're welcome!

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="112432" data-time="1355439293" data-date="13 December 2012 - 03:54 PM">
You're welcome! </blockquote>
 
Is there a way of hide and show (collapse/expand) an entire table with data with this technique ? 
I mean, can I show or hide en entire table ? 
 
Instead of 
 
<value-of>row["TEXTDESCRIPTION"]</value-of> 
 
can I do this with 
<value-of>table_with_data</value-of> 
 
? 
 
Or maybe, in the script do something like: 
 
document.getElementById("table").style.display = "none"; 
 
where 'table' is the id (or some table element identifier) to hide or show the element ? 
 
Here <a class='bbc_url' href='http://orb-data.com/knowledge-base/tips/tivoli/tcr-and-birt/birt-report-writing-expanding-and-collapsing-sections.html'>http://orb-data.com/knowledge-base/tips/tivoli/tcr-and-birt/birt-report-writing-expanding-and-collapsing-sections.html</a> is an example but still not working for me. 
 
Thanks in advance

mwilliams

Yeah. If you select the table, go to the bookmark section of the property editor, and enter "table" for the bookmark, you can now call this element in your client side script with document.getElementById("table");

linucksrox

Could you please elaborate on this? I added the "table" bookmark to the table, and then modified the show/hide script to the following: 
<pre class='_prettyXprint _lang-auto _linenums:0'>if(value == 1){
document.getElementById("show").style.display = "none";
document.getElementById("hide").style.display = "block";
document.getElementById("table").style.display = "block";
}
else{
document.getElementById("show").style.display = "block";
document.getElementById("hide").style.display = "none";
document.getElementById("table").style.display = "none";
}</pre>
but there is no effect on the table when clicking show/hide. What am I missing?

mwilliams

The example above works for you, right? Can you attach your report design, so I can see what all you're doing?

linucksrox

Well, I realized I needed to put quotes around "table" for the bookmark, and now it is working like I expected, except the table is not hidden by default. How can I do this?
Also, how can you apply this idea to a table's detail rows, so that you can click the row and expand to show even more detail below that row? For example, making the product description a clickable show/hide link that displays even more rows underneath that are relevant to that product like prices over time, etc.
EDIT: I almost have what I'm trying to do, except it only works for row #0. Here's what I have so far:

mwilliams

Here's a devshare showing a different approach to exapnding and collapsing sections.

http://www.birt-exchange.org/org/devshare/designing-birt-reports/1242-expandablecollapsible-groups-by-drill-through/

It's done in a drill through. This would re-run the report, but if you use the paginated viewer, this will be the only solution that will work, if you have groups that span over pages. If no group of lines spans over pages, client side script will work. You might take a look at this devShare:

http://www.birt-exchange.org/org/devshare/designing-birt-reports/1126-collapse-groups-client-side/

linucksrox

Thank you very much, that points me in the right direction. It looks like I'll need to go with the drill through approach.