nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

AJAX based Reports

jha

hi guys

is it possible to design a report which is using ajax to retrieve additional data?

e.g.

+ ROW1
+ ROW2
+ ROW3

now when I click the + i want to retrieve additional data that will be displayed under the ROW I clicked.

+ ROW1
foobar...
foobar...
+ ROW2
+ ROW3

another question: does birt support sorting data at runtime? (when the report is already displayed by the browser)

thanks in advance

Find more posts tagged with

Comments

johnw

Not exactly, but there are some tricks you can use to do that. If you retrieved all the data at once for each row, you can use Javascript to set the styles of all the subrows to hidden. Then, then the user clicks on the +, it will set the style to show for that row. Take a look at the following example. There is a combination of using BIRTS BOOKMARK properties, and Javascript to do something similar. If you run the report, and click on any of the rows, it will show/hide the details. The example is below in XML (I cannot attach a rptdesign file for some reason).

In terms of re-sorting, that would require a lot of Javascript trickery without re-running the report. If re-running the report to resort is acceptable, take a look at the following blog post. Be sure to read the comments, as I updated the code to work with newer versions of BIRT in the comments section. http://digiassn.blogspot.com/2007/05/birt-strong-suit-is-in-realm-of-online.html

John

<?xml version="1.0" encoding="UTF-8"?>
<report xmlns="http://www.eclipse.org/birt/2005/design" version="3.2.17" id="1">
<property name="createdBy">Eclipse BIRT Designer Version 2.3.2.r232_20090202 Build <2.3.2.v20090218-0730></property>
<property name="units">in</property>
<property name="iconFile">/templates/blank_report.gif</property>
<property name="bidiLayoutOrientation">ltr</property>
<data-sources>
<oda-data-source extensionID="org.eclipse.birt.report.data.oda.jdbc" name="Data Source" id="6">
<property name="odaDriverClass">org.eclipse.birt.report.data.oda.sampledb.Driver</property>
<property name="odaURL">jdbc:classicmodels:sampledb</property>
<property name="odaUser">ClassicModels</property>
<property name="OdaConnProfileName"></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">CUSTOMERNUMBER</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">CUSTOMERNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">CONTACTLASTNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">CONTACTFIRSTNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">CITY</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">6</property>
<property name="name">STATE</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">7</property>
<property name="name">POSTALCODE</property>
<property name="dataType">string</property>
</structure>
</list-property>
</structure>
<property name="dataSource">Data Source</property>
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">CUSTOMERNUMBER</property>
<property name="nativeName">CUSTOMERNUMBER</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">CUSTOMERNAME</property>
<property name="nativeName">CUSTOMERNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">3</property>
<property name="name">CONTACTLASTNAME</property>
<property name="nativeName">CONTACTLASTNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">4</property>
<property name="name">CONTACTFIRSTNAME</property>
<property name="nativeName">CONTACTFIRSTNAME</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">5</property>
<property name="name">CITY</property>
<property name="nativeName">CITY</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">6</property>
<property name="name">STATE</property>
<property name="nativeName">STATE</property>
<property name="dataType">string</property>
</structure>
<structure>
<property name="position">7</property>
<property name="name">POSTALCODE</property>
<property name="nativeName">POSTALCODE</property>
<property name="dataType">string</property>
</structure>
</list-property>
<property name="queryText">select
CLASSICMODELS.CUSTOMERS.CUSTOMERNUMBER,
CLASSICMODELS.CUSTOMERS.CUSTOMERNAME,
CLASSICMODELS.CUSTOMERS.CONTACTLASTNAME,
CLASSICMODELS.CUSTOMERS.CONTACTFIRSTNAME,
CLASSICMODELS.CUSTOMERS.CITY,
CLASSICMODELS.CUSTOMERS.STATE,
CLASSICMODELS.CUSTOMERS.POSTALCODE
from
CLASSICMODELS.CUSTOMERS</property>
</oda-data-set>
</data-sets>
<styles>
<style name="crosstab-cell" 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" 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>
</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>
<text id="91">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>]]></text-property>
</text>
<table id="8">
<property name="height">2.71875in</property>
<property name="width">5.260416666666667in</property>
<property name="dataSet">Data Set</property>
<list-property name="boundDataColumns">
<structure>
<property name="name">CUSTOMERNUMBER</property>
<property name="displayName">CUSTOMERNUMBER</property>
<expression name="expression">dataSetRow["CUSTOMERNUMBER"]</expression>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">CUSTOMERNAME</property>
<property name="displayName">CUSTOMERNAME</property>
<expression name="expression">dataSetRow["CUSTOMERNAME"]</expression>
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">CONTACTLASTNAME</property>
<property name="displayName">CONTACTLASTNAME</property>
<expression name="expression">dataSetRow["CONTACTLASTNAME"]</expression>
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">CONTACTFIRSTNAME</property>
<property name="displayName">CONTACTFIRSTNAME</property>
<expression name="expression">dataSetRow["CONTACTFIRSTNAME"]</expression>
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">CITY</property>
<property name="displayName">CITY</property>
<expression name="expression">dataSetRow["CITY"]</expression>
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">STATE</property>
<property name="displayName">STATE</property>
<expression name="expression">dataSetRow["STATE"]</expression>
<property name="dataType">string</property>
</structure>
<structure>
<property name="name">POSTALCODE</property>
<property name="displayName">POSTALCODE</property>
<expression name="expression">dataSetRow["POSTALCODE"]</expression>
<property name="dataType">string</property>
</structure>
</list-property>
<column id="47">
<property name="width">1.5208333333333333in</property>
</column>
<column id="48">
<property name="width">3.8541666666666665in</property>
</column>
<header>
<row id="9">
<cell id="10">
<label id="11">
<property name="fontWeight">bold</property>
<property name="textAlign">left</property>
<text-property name="text">CUSTOMERNUMBER</text-property>
</label>
</cell>
<cell id="12">
<label id="13">
<property name="fontWeight">bold</property>
<property name="textAlign">left</property>
<text-property name="text">CUSTOMERNAME</text-property>
</label>
</cell>
</row>
</header>
<detail>
<row id="24">
<expression name="bookmark">"hoverItem-" + row.__rownum</expression>
<list-property name="highlightRules">
<structure>
<property name="operator">eq</property>
<property name="backgroundColor">#C0C0C0</property>
<expression name="testExpr">(row.__rownum % 2)</expression>
<simple-property-list name="value1">
<value>0</value>
</simple-property-list>
</structure>
</list-property>
<cell id="25">
<data id="26">
<property name="resultSetColumn">CUSTOMERNUMBER</property>
</data>
</cell>
<cell id="27">
<data id="28">
<property name="resultSetColumn">CUSTOMERNAME</property>
</data>
</cell>
</row>
<row id="54">
<cell id="55">
<property name="colSpan">2</property>
<property name="rowSpan">1</property>
<grid id="58">
<property name="backgroundColor">#8080FF</property>
<property name="width">100%</property>
<expression name="bookmark">"pop-Up-" + row.__rownum</expression>
<column id="59">
<property name="width">1.5520833333333333in</property>
</column>
<column id="60"/>
<row id="61">
<cell id="62">
<label id="81">
<property name="backgroundColor">white</property>
<property name="fontWeight">bold</property>
<text-property name="text">Contact Last Name</text-property>
</label>
</cell>
<cell id="63">
<data id="76">
<property name="backgroundColor">white</property>
<property name="resultSetColumn">CONTACTLASTNAME</property>
</data>
</cell>
</row>
<row id="64">
<cell id="65">
<label id="82">
<property name="backgroundColor">white</property>
<property name="fontWeight">bold</property>
<text-property name="text">Contact First Name</text-property>
</label>
</cell>
<cell id="66">
<data id="77">
<property name="backgroundColor">white</property>
<property name="resultSetColumn">CONTACTFIRSTNAME</property>
</data>
</cell>
</row>
<row id="67">
<cell id="68">
<label id="83">
<property name="backgroundColor">white</property>
<property name="fontWeight">bold</property>
<text-property name="text">City</text-property>
</label>
</cell>
<cell id="69">
<data id="78">
<property name="backgroundColor">white</property>
<property name="resultSetColumn">CITY</property>
</data>
</cell>
</row>
<row id="70">
<cell id="71">
<label id="84">
<property name="backgroundColor">white</property>
<property name="fontWeight">bold</property>
<text-property name="text">State</text-property>
</label>
</cell>
<cell id="72">
<data id="79">
<property name="backgroundColor">white</property>
<property name="resultSetColumn">STATE</property>
</data>
</cell>
</row>
<row id="73">
<cell id="74">
<label id="85">
<property name="backgroundColor">white</property>
<property name="fontWeight">bold</property>
<text-property name="text">Zip Code</text-property>
</label>
</cell>
<cell id="75">
<data id="80">
<property name="backgroundColor">white</property>
<property name="resultSetColumn">POSTALCODE</property>
</data>
</cell>
</row>
</grid>
</cell>
</row>
<row id="92">
<cell id="93">
<property name="colSpan">2</property>
<property name="rowSpan">1</property>
<text id="89">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<script>
////////////////////////////////////////////////////////////////////////////////////////////////////////
//insert all report interactivity functions here
function showHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>()
{
document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").style.display = "block";

var fadeIn = dojo.fadeIn({node: document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").id, duration: 1000});
fadeIn.play();
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////

function hideHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>() {
document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").style.display = "none";

var fadeOut = dojo.fadeOut({node: document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").id, duration: 1000});
fadeOut.play();
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////
var wasClicked_<VALUE-OF format="###0">row.__rownum</VALUE-OF> = false;

function clickHandler_<VALUE-OF format="###0">row.__rownum</VALUE-OF>()
{
if (wasClicked_<VALUE-OF format="###0">row.__rownum</VALUE-OF>)
{
wasClicked_<VALUE-OF format="###0">row.__rownum</VALUE-OF> = false;
hideHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>();
}
else
{
wasClicked_<VALUE-OF format="###0">row.__rownum</VALUE-OF> = true;
showHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>();
}
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////
function initHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>() {
document.getElementById("hoverItem-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").onclick = clickHandler_<VALUE-OF format="###0">row.__rownum</VALUE-OF>;

document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").style.display = "none";

var fadeOut = dojo.fadeOut({node: document.getElementById("pop-Up-<VALUE-OF format="###0">row.__rownum</VALUE-OF>").id, duration: 1000});
fadeOut.play();
};

///////////////////////////////////////////////////////////////////////////////////////////////////////////
//add event overrides here
setTimeout('initHint_<VALUE-OF format="###0">row.__rownum</VALUE-OF>()', 100);
</script>
]]></text-property>
</text>
</cell>
</row>
</detail>
<footer>
<row id="39">
<cell id="40"/>
<cell id="41"/>
</row>
</footer>
</table>
</body>
</report>