This devshare submission qualifies for
BIRT Style Contest<br />
<br />
Hello everyone,
<br />
Just think how awesome would be a birt report if it can dynamically change the style according to various factors like
<br />
- Time of the Day<br />
- A particular Day ( say Christmas or NewYear)<br />
- According to a Report Parameter<br />
<br />
An easy approach to this is using BeforeFactory Method ... Letme explain a typical Example.(I am using birt 3.2.22, some features may not work in older versions)
<br />
I have a report parameter, say TotalScore . Some element in my report should change the color intensity according to the parameter value...say yellow when its below 10 <br />
and move to Red once the TotalScore approach 100.... I have designed something like that and its attached with this submission
<br />
<br />
Another thing which i have done was providing different styles to the report according to some variables which can store either a date or a particular time of the day...
<br />
<br />
To make it more clear lets put it in this way.. my style should vary according to the time of the day.. say morning one style, afternoon one and so on...this can also be done with the same approach
<br />
<br />
I am not soo good in the styling and also we have a limitation to the CSS which can be used.. i have two styles in my code on which you can play around to create more <br />
styles..
<br />
<br />
All elements can be given styles(table-detail,table-header,grid etc)<br />
<br />
<br />
Now coming to the detail..
<br />
<br />
In the XML Source you can add one tag which is like
"<method name="beforeFactory"><![CDATA[ ]]></method>"
<br />
in the CDATA section you can write your javascript code...<br />
we can use reportContext.getDesignHandle() method to get the design handle<br />
and after that you can call methods like addCss() with the handle to dynanically add styles to your report<br />
<br />
<br />
eg :
dh = reportContext.getDesignHandle();
if ( params["myParam"] == "hello"){
dh.addCss("style2.css");}
else{
dh.addCss("style1.css");
}
<br />
this will check the value of report parameter "myParam" and add stylesheet style2.css or style1.css to the report
<br />
each of them are external stylesheet and you can define styles for your component in these stylesheets..<br />
In the attachments i have two sample stylesheets which adds styles to table(table detail,header and footer) and a chart<br />
you can define styles to other components also<br />
<br />
<br />
Another appraoch of dynamic styling is by creating some predefined styles in birt itself and changing the properties on dynamically...<br />
this can be achieved using designHandle
reportContext.getDesignHandle().findStyle("table-header").setProperty("backgroundColor", "#4c5dfa");
<br />
<br />
<br />
this code will get the designHandle and it will look up for the style defined on element table-header and it will set the property background color to some color.. You can set properties like background images etc to make your report more interesting Using java script you can change the values according to your parameters and apply dynamically
<br />
This is also done in my report which is attached to make it simple my report is very generic and i have included all features in a single report...i have used one variable and one report parameter.. the variable can be initialised to the current date and in the method we can check for date and apply the style accoridngly
<br />
<br />
eg :
if ( vars["DateVar"] == ){
dh = reportContext.getDesignHandle();dh.addCss("christmas.css");}
you can use native java script method to set date in date variable
you can use native java script method to get the time of the day and set styles accordingly
eg:use this javascript to set variable
(new Date()).getHours()
<br />
and now you can check this in the code
<br />
eg:
dh = reportContext.getDesignHandle();
if ( vars["TimeVar"] < 12){
dh.addCss("morning.css");
}
else{//afternoon
dh.addCss("afternoon.css");}
<br />
And now try this... an interesting styling done with javascript
<br />
we have three parameters min,max and valuejust paste the below code in before factory method and see the magic (create one table in your design and create a custom predifined style for table-header)
<br />
<br />
var diff = getNormalizedDiff(params["min"].value, params["max"].value, params["value"].value);
var color = getColor(diff);
reportContext.getDesignHandle().findStyle("table-header").setProperty("backgroundColor", '#'+color);
function getNormalizedDiff(min, max, value) {
var median = (min + max) / 2; var diff = value-median;
var normalizedDiff = (diff/median);
return normalizedDiff;
}
function getColorComponent(val) {
var hexColor = val.toString(16);
if(hexColor.length == 1) {
hexColor = "0" + hexColor;
}
return hexColor;
}
function getColor(diff) {
if(diff > 0){
var increase = Math.round(diff * 255);
var colorComponent = getColorComponent(255 - increase);
return colorComponent + "FF" + colorComponent;
}
else {
var decrease = Math.round(-diff * 255);
var colorComponent = getColorComponent(255 - decrease);
return "FF" + colorComponent + colorComponent;
}
}
<br />
we get different colors for different parameter values...<br />
<br />
Now its your turn ...You can play around and explore all possibilities...<br />
Any clarrification let me know....<br />
<br />
Arjun
