[news.eclipse.birt] Re: Using external javascript files

[Jason Weathersby <jasonweathersby@xxxxxxxxxx>]

Rafal,

This is possible using the text element.  The only issue is that it will 
not sort across pages.  The attached example uses the text element to 
define the script.  It could have easily included the script.

Jason

<?xml version="1.0" encoding="UTF-8"?>
<report xmlns="http://www.eclipse.org/birt/2005/design"; version="3.2.15" 
id="1">
    <property name="createdBy">Eclipse BIRT Designer Version 
2.2.1.r221_v20070924 Build &lt;2.2.0.v20070924-1550></property>
    <property name="units">in</property>
    <property name="comments">Copyright (c) 2007 &lt;&lt;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">
            <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">
            <list-property name="columnHints">
                <structure>
                    <property name="columnName">ORDERNUMBER</property>
                    <property name="displayName">ORDERNUMBER</property>
                </structure>
                <structure>
                    <property name="columnName">PRODUCTCODE</property>
                    <property name="displayName">PRODUCTCODE</property>
                </structure>
                <structure>
                    <property name="columnName">QUANTITYORDERED</property>
                    <property name="displayName">QUANTITYORDERED</property>
                </structure>
                <structure>
                    <property name="columnName">PRICEEACH</property>
                    <property name="displayName">PRICEEACH</property>
                </structure>
                <structure>
                    <property name="columnName">ORDERLINENUMBER</property>
                    <property name="displayName">ORDERLINENUMBER</property>
                </structure>
            </list-property>
            <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>
        </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>
        <style name="detail" id="48">
            <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="49">
            <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="50">
            <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>
        <text id="42">
            <property name="contentType">html</property>
            <text-property name="content"><![CDATA[<script>
var sortcol =2;
var testArray = new Array();


function tableSort(a, b) {
    var x = a.cells[sortcol].innerHTML.toLowerCase();
    var y = b.cells[sortcol].innerHTML.toLowerCase();
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}



function rowCopy( a, b ){

  cellcnt = b.cells.length;
  //alert("A = "+ a.innerHTML);
  //alert("B = "+ b.innerHTML);

  for( ii=0; ii<cellcnt; ii++ ){
 	b.cells[ii].innerHTML = a.cells[ii].innerHTML;
  }

}


function sortTable(id, col, rev) {

  sortcol = col;
  var tbl = document.getElementById(id);
  var ctbl = tbl.cloneNode(true);

  //alert( ctbl.rows[0].cells[0].innerHTML );
  var tRows = ctbl.rows
  var ctRows = tbl.rows



  //var testArray = new Array(tRows.length-2);
  //var testArray = cloneObject(tRows);
  for( var i =1; i < tRows.length-1; i++ ){
   testArray[i-1] = tRows[i];
  }
  testArray.sort( tableSort );

  for( var x = 0; x < testArray.length; x++ ){
	rowCopy( testArray[x], ctRows[x+1] );
  }

}



</script>
]]></text-property>
        </text>
        <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="9">
                    <property name="style">headerfooter</property>
                    <cell id="10">
                        <label id="11">
                            <text-property 
name="text">ORDERNUMBER</text-property>
                        </label>
                        <text id="43">
                            <property name="contentType">html</property>
                            <text-property 
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 0, 1)">]]></text-property>
                        </text>
                    </cell>
                    <cell id="12">
                        <label id="13">
                            <text-property 
name="text">PRODUCTCODE</text-property>
                        </label>
                        <text id="44">
                            <property name="contentType">html</property>
                            <text-property 
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 1, 1)">]]></text-property>
                        </text>
                    </cell>
                    <cell id="14">
                        <label id="15">
                            <text-property 
name="text">QUANTITYORDERED</text-property>
                        </label>
                        <text id="45">
                            <property name="contentType">html</property>
                            <text-property 
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 2, 1)">]]></text-property>
                        </text>
                    </cell>
                    <cell id="16">
                        <label id="17">
                            <text-property 
name="text">PRICEEACH</text-property>
                        </label>
                        <text id="46">
                            <property name="contentType">html</property>
                            <text-property 
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 3, 1)">]]></text-property>
                        </text>
                    </cell>
                    <cell id="18">
                        <label id="19">
                            <text-property 
name="text">ORDERLINENUMBER</text-property>
                        </label>
                        <text id="47">
                            <property name="contentType">html</property>
                            <text-property 
name="content"><![CDATA[<input type="Radio" value="Sort"
onclick="sortTable('MyTable', 4, 1)">]]></text-property>
                        </text>
                    </cell>
                </row>
            </header>
            <detail>
                <row id="20">
                    <property name="style">detail</property>
                    <cell id="21">
                        <data id="22">
                            <property 
name="resultSetColumn">ORDERNUMBER</property>
                        </data>
                    </cell>
                    <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>


Rafal Wojtowicz wrote:
> Hi,
> I was wondering if it's possible in BIRT to make client-side sortable 
> tables using external .js scripts, like tablesort.js . 
> http://tetlaw.id.au/upload/dev/sortabletable/
>
> All the script needs is to add an attribute to the table:
> <table class="sortable scroll">
> and import tablesort.js file into the html code of the report.
>
> If it's possible, where do I put declaration of external .js file how to 
> make additional table attributes?
>
> Rafal