Eclipse Community Forums: BIRT » Set visibility at runtime with Javascript

Home » Archived » BIRT » Set visibility at runtime with Javascript

Set visibility at runtime with Javascript [message #253478]

Fri, 24 August 2007 19:12

Eclipse User

Hi,

I would like to set the visibility of a table at runtime by using
javascript.
Is there any function I should use?

Please advise,

Thank you very much,

Neil

Re: Set visibility at runtime with Javascript [message #253490 is a reply to message #253478]

Sun, 26 August 2007 07:53

Eclipse User

Neil,

1. set the id for the table to 'myTable' (through Table-Bookmark).

2. create new Style named myStyle with 'Text Block' set to Block and
assign it to this table

3. insert a Text element to the table and use HTML formating to write down:
<script>
// SETS THE TABLE VISIBILITY TO VISIBLE
//document.getElementById('myTable').style.display = 'block';
// SETS THE TABLE VISIBILITY TO UNVISIBLE
document.getElementById('myTable').style.display = 'none';
</script>

Alex

You can see download this example at:
http://e-prostor.com/birt/samples/table_visibility.rptdesign

Neil Wang pravi:
> Hi,
>
> I would like to set the visibility of a table at runtime by using
> javascript.
> Is there any function I should use?
>
> Please advise,
>
> Thank you very much,
>
> Neil
>

Re: Set visibility at runtime with Javascript [message #253584 is a reply to message #253490]

Mon, 27 August 2007 15:41

Eclipse User

Originally posted by: jasonweathersby.alltel.net

Alex,

Pretty neat way of doing this. You can also use (DEAPI/SimpleDE API
2.2) like this. In the table:

importPackage(Packages.org.eclipse.birt.report.model.api.sim pleapi);

var hr = SimpleElementFactory.getInstance().createHideRule();
hr.setFormat("all");
hr.setValueExpr("true");
this.addHideRule(hr);

The value expression can be anything that you add in the visibility
property.

Jason

Alex wrote:
> Neil,
>
> 1. set the id for the table to 'myTable' (through Table-Bookmark).
>
> 2. create new Style named myStyle with 'Text Block' set to Block and
> assign it to this table
>
> 3. insert a Text element to the table and use HTML formating to write down:
> <script>
> // SETS THE TABLE VISIBILITY TO VISIBLE
> //document.getElementById('myTable').style.display = 'block';
> // SETS THE TABLE VISIBILITY TO UNVISIBLE
> document.getElementById('myTable').style.display = 'none';
> </script>
>
> Alex
>
> You can see download this example at:
> http://e-prostor.com/birt/samples/table_visibility.rptdesign
>
> Neil Wang pravi:
>> Hi,
>>
>> I would like to set the visibility of a table at runtime by using
>> javascript.
>> Is there any function I should use?
>>
>> Please advise,
>>
>> Thank you very much,
>>
>> Neil
>>

Re: Set visibility at runtime with Javascript [message #253697 is a reply to message #253584]

Tue, 28 August 2007 12:02

Eclipse User

Originally posted by: asdf.asdf.com

Hi Jason,

Can you give us an example where a component like a table or chart is
hidden upon clicking a hyper link.

Also once we assign a book mark to an element can it be referenced like
in nor mal javascript by using the statement
document.getElementById(bookMarkName).

Thanks.

Re: Set visibility at runtime with Javascript [message #253714 is a reply to message #253697]

Tue, 28 August 2007 13:53

Eclipse User

Khan,

here's an example of hiding a table or chart upon a simple click:
http://e-prostor.com/birt/samples/toogle-visibility02.rptdes ign

Alex

Khan pravi:
>
> Hi Jason,
>
> Can you give us an example where a component like a table or chart is
> hidden upon clicking a hyper link.
> Also once we assign a book mark to an element can it be referenced like
> in nor mal javascript by using the statement
> document.getElementById(bookMarkName).
>
> Thanks.
>

Re: Set visibility at runtime with Javascript [message #253718 is a reply to message #253697]

Tue, 28 August 2007 14:13

Eclipse User

Originally posted by: jasonweathersby.alltel.net

Khan,

Alex's approach is probably best if you do not want to reload the
report. Attached is example using his method.

Jason

<?xml version="1.0" encoding="UTF-8"?>
<report xmlns="http://www.eclipse.org/birt/2005/design" version="3.2.14"
id="1">
<property name="createdBy">Eclipse BIRT Designer Version
2.2.0.v20070620 Build <2.2.0.v20070626-1003></property>
<property name="units">in</property>
<property name="comments">Copyright (c) 2007 <<Your Company
Name here>></property>
<html-property name="description">Creates a blank report with no
predefined content.</html-property>
<text-property name="displayName">Blank Report</text-property>
<property name="iconFile">/templates/blank_report.gif</property>
<data-sources>
<oda-data-source
extensionID="org.eclipse.birt.report.data.oda.jdbc" name="Data Source"
id="6">
<text-property name="displayName"></text-property>
<property
name="odaDriverClass">org.eclipse.birt.report.data.oda.sampledb.Driver </property>
<property name="odaURL">jdbc:classicmodels:sampledb</property>
<property name="odaUser">ClassicModels</property>
</oda-data-source>
</data-sources>
<data-sets>
<oda-data-set
extensionID="org.eclipse.birt.report.data.oda.jdbc.JdbcSelectDataSet "
name="Data Set" id="7">
<structure name="cachedMetaData">
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">ORDERNUMBER</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">PRODUCTCODE</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">QUANTITYORDERED</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">PRICEEACH</property>
<property name="dataType">float</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">ORDERLINENUMBER</property>
<property name="dataType">integer</property>
</structure>
</list-property>
</structure>
<property name="dataSource">Data Source</property>
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">ORDERNUMBER</property>
<property name="nativeName">ORDERNUMBER</property>
<property name="dataType">integer</property>
<property name="nativeDataType">4</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">PRODUCTCODE</property>
<property name="nativeName">PRODUCTCODE</property>
<property name="dataType">string</property>
<property name="nativeDataType">12</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">QUANTITYORDERED</property>
<property name="nativeName">QUANTITYORDERED</property>
<property name="dataType">integer</property>
<property name="nativeDataType">4</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">PRICEEACH</property>
<property name="nativeName">PRICEEACH</property>
<property name="dataType">float</property>
<property name="nativeDataType">8</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">ORDERLINENUMBER</property>
<property name="nativeName">ORDERLINENUMBER</property>
<property name="dataType">integer</property>
<property name="nativeDataType">5</property>
</structure>
</list-property>
<property name="queryText">select *
from orderdetails</property>
<xml-property name="designerValues"><![CDATA[<?xml
version="1.0" encoding="UTF-8"?>
<model:DesignValues
xmlns:design="http://www.eclipse.org/datatools/connectivity/oda/design"
xmlns:model="http://www.eclipse.org/birt/report/model/adapter/odaModel">
<Version>1.0</Version>
<design:ResultSets derivedMetaData="true">
<design:resultSetDefinitions>
<design:resultSetColumns>
<design:resultColumnDefinitions>
<design:attributes>
<design:name>ORDERNUMBER</design:name>
<design:position>1</design:position>
<design:nativeDataTypeCode>4</design:nativeDataTypeCode>
<design:precision>10</design:precision>
<design:scale>0</design:scale>
<design:nullability>Nullable</design:nullability>
</design:attributes>
<design:usageHints>
<design:label>ORDERNUMBER</design:label>
<design:formattingHints>
<design:displaySize>11</design:displaySize>
</design:formattingHints>
</design:usageHints>
</design:resultColumnDefinitions>
<design:resultColumnDefinitions>
<design:attributes>
<design:name>PRODUCTCODE</design:name>
<design:position>2</design:position>
<design:nativeDataTypeCode>12</design:nativeDataTypeCode>
<design:precision>15</design:precision>
<design:scale>0</design:scale>
<design:nullability>Nullable</design:nullability>
</design:attributes>
<design:usageHints>
<design:label>PRODUCTCODE</design:label>
<design:formattingHints>
<design:displaySize>15</design:displaySize>
</design:formattingHints>
</design:usageHints>
</design:resultColumnDefinitions>
<design:resultColumnDefinitions>
<design:attributes>
<design:name>QUANTITYORDERED</design:name>
<design:position>3</design:position>
<design:nativeDataTypeCode>4</design:nativeDataTypeCode>
<design:precision>10</design:precision>
<design:scale>0</design:scale>
<design:nullability>Nullable</design:nullability>
</design:attributes>
<design:usageHints>
<design:label>QUANTITYORDERED</design:label>
<design:formattingHints>
<design:displaySize>11</design:displaySize>
</design:formattingHints>
</design:usageHints>
</design:resultColumnDefinitions>
<design:resultColumnDefinitions>
<design:attributes>
<design:name>PRICEEACH</design:name>
<design:position>4</design:position>
<design:nativeDataTypeCode>8</design:nativeDataTypeCode>
<design:precision>15</design:precision>
<design:scale>0</design:scale>
<design:nullability>Nullable</design:nullability>
</design:attributes>
<design:usageHints>
<design:label>PRICEEACH</design:label>
<design:formattingHints>
<design:displaySize>22</design:displaySize>
</design:formattingHints>
</design:usageHints>
</design:resultColumnDefinitions>
<design:resultColumnDefinitions>
<design:attributes>
<design:name>ORDERLINENUMBER</design:name>
<design:position>5</design:position>
<design:nativeDataTypeCode>5</design:nativeDataTypeCode>
<design:precision>5</design:precision>
<design:scale>0</design:scale>
<design:nullability>Nullable</design:nullability>
</design:attributes>
<design:usageHints>
<design:label>ORDERLINENUMBER</design:label>
<design:formattingHints>
<design:displaySize>6</design:displaySize>
</design:formattingHints>
</design:usageHints>
</design:resultColumnDefinitions>
</design:resultSetColumns>
</design:resultSetDefinitions>
</design:ResultSets>
</model:DesignValues>
]]></xml-property>
</oda-data-set>
</data-sets>
<styles>
<style name="crosstab" id="4">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
<style name="crosstab-cell" id="5">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
<style name="detail" id="57">
<property name="backgroundColor">#BACAE2</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="paddingTop">0px</property>
<property name="paddingLeft">0px</property>
<property name="paddingBottom">0px</property>
<property name="paddingRight">0px</property>
</style>
<style name="headerfooter" id="58">
<property name="backgroundColor">#004080</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="fontWeight">bold</property>
<property name="color">#FFFFFF</property>
</style>
<style name="groupheader" id="59">
<property name="backgroundColor">#0080FF</property>
<property name="fontFamily">"Arial"</property>
<property name="fontSize">small</property>
<property name="fontWeight">bold</property>
<property name="color">#FFFFFF</property>
</style>
</styles>
<page-setup>
<simple-master-page name="Simple MasterPage" id="2">
<page-footer>
<text id="3">
<property name="contentType">html</property>
<text-property
name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property>
</text>
</page-footer>
</simple-master-page>
</page-setup>
<body>
<table name="mytable" id="8">
<property name="width">100%</property>
<property name="dataSet">Data Set</property>
<list-property name="boundDataColumns">
<structure>
<property name="name">ORDERNUMBER</property>
<expression
name="expression">dataSetRow["ORDERNUMBER"]</expression >
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">PRODUCTCODE</property>
<expression
name="expression">dataSetRow["PRODUCTCODE"]</expression >
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">QUANTITYORDERED</property>
<expression
name="expression">dataSetRow["QUANTITYORDERED"]</expression >
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">PRICEEACH</property>
<expression
name="expression">dataSetRow["PRICEEACH"]</expression>
<property name="dataType">float</property>
</structure>
<structure>
<property name="name">ORDERLINENUMBER</property>
<expression
name="expression">dataSetRow["ORDERLINENUMBER"]</expression >
<property name="dataType">integer</property>
</structure>
</list-property>
<expression name="bookmark">"mytable"</expression>
<column id="37"/>
<column id="38"/>
<column id="39"/>
<column id="40"/>
<column id="41"/>
<header>
<row id="60">
<property name="style">headerfooter</property>
<cell id="61">
<property name="colSpan">5</property>
<property name="rowSpan">1</property>
<text id="56">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<script>
function hidetable(){
// SETS THE TABLE VISIBILITY TO VISIBLE
//document.getElementById('myTable').style.display = 'block';
// SETS THE TABLE VISIBILITY TO UNVISIBLE
document.getElementById('mytable').style.display = 'none';
}
</script>
<form>
<INPUT Type="BUTTON" name="mybutton" Value="hide"
onClick='hidetable()'></INPUT>
</form>]]></text-property>
</text>
</cell>
</row>
<row id="9">
<property name="style">headerfooter</property>
<cell id="10">
<label id="11">
<text-property
name="text">ORDERNUMBER</text-property>
</label>
</cell>
<cell id="12">
<label id="13">
<text-property
name="text">PRODUCTCODE</text-property>
</label>
</cell>
<cell id="14">
<label id="15">
<text-property
name="text">QUANTITYORDERED</text-property>
</label>
</cell>
<cell id="16">
<label id="17">
<text-property
name="text">PRICEEACH</text-property>
</label>
</cell>
<cell id="18">
<label id="19">
<text-property
name="text">ORDERLINENUMBER</text-property>
</label>
</cell>
</row>
</header>
<group id="42">
<property name="groupName">NewTableGroup1</property>
<property name="interval">none</property>
<property name="sortDirection">asc</property>
<expression name="keyExpr">row["ORDERNUMBER"]</expression>
<structure name="toc">
<expression
name="expressionValue">row["ORDERNUMBER"]</expression>
</structure>
<property name="repeatHeader">true</property>
<property name="hideDetail">false</property>
<property name="pageBreakAfter">auto</property>
<property name="pageBreakBefore">auto</property>
<property name="pageBreakInside">auto</property>
<header>
<row id="43">
<property name="style">groupheader</property>
<cell id="44">
<data id="55">
<property
name="resultSetColumn">ORDERNUMBER</property>
</data>
</cell>
<cell id="45"/>
<cell id="46"/>
<cell id="47"/>
<cell id="48"/>
</row>
</header>
<footer>
<row id="49">
<cell id="50"/>
<cell id="51"/>
<cell id="52"/>
<cell id="53"/>
<cell id="54"/>
</row>
</footer>
</group>
<detail>
<row id="20">
<property name="style">detail</property>
<cell id="21"/>
<cell id="23">
<data id="24">
<property
name="resultSetColumn">PRODUCTCODE</property>
</data>
</cell>
<cell id="25">
<data id="26">
<property
name="resultSetColumn">QUANTITYORDERED</property>
</data>
</cell>
<cell id="27">
<data id="28">
<property
name="resultSetColumn">PRICEEACH</property>
</data>
</cell>
<cell id="29">
<data id="30">
<property
name="resultSetColumn">ORDERLINENUMBER</property>
</data>
</cell>
</row>
</detail>
<footer>
<row id="31">
<cell id="32"/>
<cell id="33"/>
<cell id="34"/>
<cell id="35"/>
<cell id="36"/>
</row>
</footer>
</table>
</body>
</report>

Khan wrote:
>
> Hi Jason,
>
> Can you give us an example where a component like a table or chart is
> hidden upon clicking a hyper link.
> Also once we assign a book mark to an element can it be referenced like
> in nor mal javascript by using the statement
> document.getElementById(bookMarkName).
>
> Thanks.
>

Re: Set visibility at runtime with Javascript [message #253721 is a reply to message #253714]

Tue, 28 August 2007 14:14

Eclipse User

Originally posted by: asdf.asdf.com

Thanks thats exactly what I was looking for!

Re: Set visibility at runtime with Javascript [message #253733 is a reply to message #253714]

Tue, 28 August 2007 14:38

Eclipse User

Originally posted by: asdf.asdf.com

Alex,

Thats agreat example Alex, I tried focus on the chart when it was shown by
using element.focus(),the control doesnt seem to focus on the chart area,
can anybody let me know.

Thanks.

Re: Set visibility at runtime with Javascript [message #253737 is a reply to message #253718]

Tue, 28 August 2007 14:40

Eclipse User

Originally posted by: asdf.asdf.com

Thanks Jason,

I am having problem focusing on the toggled component like a chart in
Alex's example i.e when the chart is displayed I would like the control to
be there.

Can you please let me know?

Thanks.

Previous Topic:	Restart viewer in Designer
Next Topic:	Cache Configuration

Goto Forum:

-=] Back to Top [=-

Current Time: Thu Jul 17 14:17:37 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter