how do I use javascritps in birt

So I found this script here <a data-ipb='nomediaparse' href='http://birtworld.blogspot.com/2010/02/birt-crosstab-scripting.html'>http://birtworld.blogspot.com/2010/02/birt-crosstab-scripting.html</a>that I think will do what I need it to do.
<pre class="_prettyXprint _lang-">
function onCreateCell( cellInst, reportContext )
{
if( cellInst.getCellType() == "aggregation"){
//Can refernce value using getDataValue or
if( cellInst.getDataValue("PRODUCTLINE") == "Planes" ){
//set color to bluegray
cellInst.getStyle().setBackgroundColor("RGB(169,170,226)");
}
//by using reportContext.evaluate
//if( reportContext.evaluate("measure['amount']") > 50000 )
if( cellInst.getDataValue("amount_DateGroup/quarter_ProductGroup/PRODUCTLINE") > 50000 ){
cellInst.getStyle().setBackgroundColor("Green");
cellInst.getStyle().setColor("White");
}
}
}</pre>
So now that I have this script what now? where do I place it and how do I tell birt that I want to use this script at the appropriate time(after the design phase and before the report gets saved.)?

Find more posts tagged with

Comments

android272

can this be done outside the report designer? I can not find any resources on how to use javascript to change how my report is styled after the design phase. I have found lots of examples of what you can do in javascript but nothing about how to get started. How do you tell birt to use my javascripts. Do I place them in a folder that birt knows to look at? I have found some things talking about this resource folder.

JFreeman

There are method calls in the ReportDesignHandle class that can set the javascript to be used in the specified method of the report design.

Take a look at the API doc here: <a data-ipb='nomediaparse' href='http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.birt.doc.isv/model/api/org/eclipse/birt/report/model/api/ReportDesignHandle.html'>http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.birt.doc.isv/model/api/org/eclipse/birt/report/model/api/ReportDesignHandle.html</a>

android272

So I think I ant to use the setBeforeRender option in the ReportDesignHandle.
<pre class="_prettyXprint _lang-">
designHandle.setBeforeRender("if( cellInst.getDataValue(\"source\") == \"DC\" ){cellInst.getStyle().setBackgroundColor(\"RGB(169,170,226)\");}"); //$NON-NLS-1$
</pre>
<pre class="_prettyXprint _lang-">
designHandle.setBeforeRender("if(this.getValue() != null && this.getValue() > 100 ) { this.getStyle().backgroundColor='red'; }"); //$NON-NLS-1$
</pre>
<pre class="_prettyXprint _lang-">
designHandle.setBeforeRender("path/to/my/Script.js"); //$NON-NLS-1$
</pre>
none of the above works. Am I trying the right method or using this one right?

JFreeman

If I recall, you are wanting to use this function while iterating over all of the cells in a table to apply various styling depending on conditions?

android272

Yes I would like to be able to make a script dynamically format/style my reports. So if the value of a cell = this set the background color to yellow and the text color white. the problem is that this will be based upon user input so I will not know what they want highlighted or the color(background, text, border) or if they want a border or if they want to change the text to say something different.
 
But for now I know what cells I want to highlight yellow. I can build the rest from there.

android272

We got this figured out. Thanks for your help.

JFreeman

Looking closer at the example you have pointed to initially, that is built for a crosstab versus a table which means there will be some minor differences in the code and how to use it.
 
I was able to get a simple version of it working.
 
First, you are going to need to add some code to you program to add the external JS file with the formatting function as a resource.
For example:
<pre class="_prettyXprint _lang-js">
IncludeScript is = StructureFactory.createIncludeScript();
is.setFileName("format.js");
PropertyHandle propertyHandle = reportDesignHandle.getPropertyHandle(ReportDesign.INCLUDE_SCRIPTS_PROP);
propertyHandle.addItem(is);
</pre>
Then you will need to add the script to call this function into the onCreate of the data items in the cell of the table.
For example:
<pre class="_prettyXprint _lang-js">
data.setOnCreate("onCreateCell(this, reportContext);");
</pre>

JFreeman

Well looks like you beat me to it while I was writing that up.
 
I'm glad you got it figure out.

android272

So I am trying to set a cells background color if its value is before/after a certain date and equal to that date. I am still new to JavaScript and adding Birt to the mix is not helping. I have the following code and I know that 2013-01-11T00:00:00 is in the report, its the first cell in the date column. But it is not doing anything. should I convert ether this.getValue() or 2013-01-11T00:00:00 to a date object?
<pre class="_prettyXprint _lang-">
data.setOnRender("if(this.getValue() === '2013-01-11T00:00:00') { this.getStyle().backgroundColor='red' }");
</pre>
The problem with converting ether of these to a date object is that "this.getValue()" will not always be a date and '2013-01-11T00:00:00' will be replaced with a variable that will also change for each cell/column. I would need to conditionally check if they are dates and then format them to dates.
 
I am also going to need to format the date as '2013-01-11T00:00:00' is not a good format. I was thinking that I would need to do this in the data.setOnCreate as I think access only to the cells values is available at render. and you have access the data and can modify it onCreate. right?
 
again I am going to have to check if it is in this 2013-01-11T00:00:00 format. probably use this regex "([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})". Does anyone know how to format dates in birt? I would like to it be in "ddmmyyyy" format. I also hear that Java8 has some nice new time/date features.

android272

[BIRT 4.2.2] - Not sure if this will work for formatting my dates. but heres what I got. This method passes a script to data.setOnCreate(). 
<pre class="_prettyXprint _lang-">
private static void formatDates(Map<String, String> map, DataItemHandle data) throws SemanticException {
StringBuilder sb = new StringBuilder();

sb.append("var date = new Date(this.getValue()); if(date === \"([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})\") {" + Formatter.format(row["this.getValue()"],'ddmmyyyy') + "}");

data.setOnCreate(sb.toString());
}
</pre>
I would like test this however I am getting an error cased by the 'ddmmyyyy' that says "Invalid character constant"

JFreeman

Is the column you are using this.getValue() on set as a Date for the data type of the column?
If not, this may be the cause of the error you are getting. trying to pass a date format patter to a non date object is going to cause issues.
 
Also, be careful in JavaScript with === vs ==
You may be also hitting issue due to type differences.
Take a look at this page for reference: <a data-ipb='nomediaparse' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness'>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness</a>

android272

the column that I am trying to use this.getValue() on is a mysql Datetime or timestamp. I don't know right now I don't have access to the database to find out. someone told me that is what they are.
 
they are not strings so I don't think my regex will work. when the report runs they come back as '2013-01-11T00:00:00' but I want them to be in this format 'ddmmyyy'.

android272

Looking at my code some more and this is way more complicated that I originally thought.

JFreeman

I was actually wondering about the data type defined on the column within the data set in your report. There may be a mismatch happening there where the column in the data set of the report is defined as String instead of a Date.
 
Also, instead of dd/mm/yyyy, try dd/MM/yyyy and if you get a different result.

android272

So I have a few things getting passed into my report. two of them is an SQL Select statement as a string, and a json string. The SQL string is what birt uses to get the data I need to populate the report. The json string is what I am using to determine how to highlight the report.
 
I recently found out that the dates in the data base are formatted like this '2013-01-11T00:00:00' and the dates coming back from my json string is a unix date formatted like this "new Date(1234567890123)".
 
So when I was trying to evaluate wither this.getValue() == or === value, it would have never given me the resault I wanted as '2013-01-11T00:00:00' != "new Date(1234567890123)".
 
What I am working on now is creating a function that will format the data.onCreate as the data is put into the report. Then when I go to apply the style I will format what is coming from the json string to the desired format. This way when I apply the highlight to it both this.getValue() and value will be in the same format.
 
Here is what I have so far on my formatDate(). This will be called as the data gets put into the report.
<pre class="_prettyXprint _lang-">
private static void formatDates(Map<String, String> map, DataItemHandle data) throws SemanticException {
StringBuilder sb = new StringBuilder();

sb.append("var date = new Date(this.getValue()); if(date === \"([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})\") {" + Formatter.format(row["this.getValue()"],'dd/MM/YYYY') + "}");

data.setOnCreate(sb.toString());
}
</pre>
This is where I am stuck right now. any idea how to format these dates?

android272

Bump.. Does anyone know how to evaluate cells and change their text?

JFreeman

Are you still needing assistance with this one?

android272

Yes this is a big one. I need to be able to evaluate whether a cells value is a date which currently spits out '2013-01-11T00:00:00' format and then change it to "01/11/2013" if the time is T00:00:00 or "01/11/2013[some time format]" if the time is set. I tried to find out if "this.getValue() instanceof date" then change the background color of the cell to red. but this did not work. once I can do this I need to change the value of the cell. I had a line of code before that could change the value of a cell but I can not find it. I think it was something like "this.setValue()".... I don't remember what it was.

JFreeman

Will the date always be in the format "yyyy-mm-ddThh:mm:ss"?
Do any other calculations need to be performed on the dates other then changing the format?
 
Depending, it may be simpler to perform some string operations to manually parse the date/time into your desired format instead of using date and formatter operations.

android272

So there we might need to check to see if there is a time stamp that is not "T00:00:00". we are assuming that if we see this time stamp that time was not set so it can be dumped. but if there is a time stamp that differs from this then the user must have set it. So in that case we would like to format the time stamp as well. I have not got a format for what time must be set in, I think it would "hh:mm" and maybe in 12 hour time.
 
I am all for easy. so maybe something like this? Date.parse(this.getValue()) to get the dates epoch time then turn that into the date format I want?

JFreeman

Per my previous post, if the format is always same when reading in the date and no additional calculations need to be made on the date object in the cell after formatting, then using some string operations to manually parse/format the date should do what you need.
 
For example:
<pre class="_prettyXprint _lang-js">
var date = this.getValue().toString();
var time = date.substring(date.indexOf("T")+1);
var date = date.substring(0, date.indexOf("T"));

var dateFormatted = date.substring(date.indexOf("-")+1, date.lastIndexOf("-")) + "/" + date.substring(date.lastIndexOf("-")+1) + "/" + date.substring(0, date.indexOf("-"));

if(time != "00:00:00"){
var hours = parseInt(time.substring(0, time.indexOf(":")));
if( hours >= 12){
if(hours != 12){
hours = hours - 12;
}
dateFormatted = dateFormatted + " " + hours.toString() + time.substring(time.indexOf(":"), time.lastIndexOf(":")) + " PM";
}else if (hours == 0){
dateFormatted = dateFormatted + " 12" + time.substring(time.indexOf(":"), time.lastIndexOf(":")) + " AM";
}else{
dateFormatted = dateFormatted + " " + hours.toString() + time.substring(time.indexOf(":"), time.lastIndexOf(":")) + " AM";
}
}

this.setDisplayValue(dateFormatted);
</pre>