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; } } }

a relatively simple question about highlighting

DQM

Hi,
I have a dynamic text field that uses javascript math random to display a number.
Now I would like to display that number in red if it is less than 50, and green if greater than 50 using a highlighting rule. 
How would I do that, or where would I find a exhaustive (complete) writeup on highlighting in Birt?
<div> </div>
I googled for hours but did not find a fitting solution.

Find more posts tagged with

Comments

nobbyktm

Hi,
click on the dynamic text field and look into the Properies Editor View and select Highlights.

DQM

Thanks, but to clarify my question:
What rule should I write in the highlighting field?
for instance, I tried ["number'] is greater than 50, and variants of that, but did not get the required result.

RRK

Hi,
 
Try this code in Control's 'OnRender'
 
Eg:
if(this.getValue()>20000) 
 this.getStyle().backgroundColor="Blue"
else if(this.getValue()<20000)
 this.getStyle().backgroundColor="Yellow"
else
 this.getStyle().backgroundColor="Green"

RRK

Also if you want to change the text/number color then use below property
this.getStyle().color="Blue"

DQM

hi Rajatk, thanks for your suggestion!
I applied your code to my dynamic text, like this:
 
if(this.getValue()>50) 
 this.getStyle().color="Green"
else if(this.getValue()<50)
 
 this.getStyle().color="Red"
 
but to my dismay the text renders "red" regardless of the value (if math random returns 7 (<50) the text turns red, and if it returns 54 (>50) the text also turns red.

RRK

Could you please share your report so that I can take a look at the condition ?

DQM

here it is.
A colleague suggested that the problem could be that the number is seen as a string, instead of an integer?

DQM

Update: it appears the solution is to use a data object instead of dynamic text. Unlike data objects dynamic text cannot be formatted as integer or string.
attached example solves it (data in left column, dynamic text in right column).
Your script works as expected now, rajatk

Thanks!

RRK

Good to hear this..

Matthew L.

I wanted to add this for future reference.
It is possible to change the element properties of a dynamic text element in the browser side (See attached rptdesign).
 
While there are a few ways to accomplish this, I've attached an example that doesn't require modifying the code in the dynamic text element itself.
This example works for the iHub3+ professional versions of BIRT only.
To accomplish this, first add a "Bookmark" to the dynamic text element properties.
Then in the designs "clientInitalize" method, add the following code to get the viewer id:
<pre class="_prettyXprint _lang-js">
try{getViewerID = this._service.id + "_";}catch(err){getViewerID="";}
</pre>
Then in the designs "onContentUpdate" method, add the following code to locate your "Bookmarked" element and extract the innerHTML value to conduct style logic against its value:
<pre class="_prettyXprint _lang-js">
if (window["__first_load"] === undefined) { //Check to see if this code has run previously for this report
window["__first_load"] = true; //If not, create a value to prevent infinite loops

var ObjElement = document.getElementById(getViewerID + "MyDynamicTextElement"); //Find our bookmarked element (with viewer ID).

if(ObjElement.innerHTML < 50) //If innerHTML value is less than 50
ObjElement.style.color = 'red'; //Change the text color to red (or '#FF0000')
if(ObjElement.innerHTML >= 50) //If innderHTML value is equal to or more than 50
ObjElement.style.color = '#008000'; //Change the text color to green (or '#008000')
}
</pre>
This should produce the output you are looking for in your example.