Technical Blog Post
Abstract
Using JQUERY to add styling to an OrgNodes tag in an Impact Operator View
Body
The following example shows how to use JQUERY to set the background row color in an orgNodes tag.
Row color is set depending on field values.
1. myAlerts is an array of impact objects gathered by a GetByFilter call in an impact policy
2. The orgNodes tag in the operator view HTML files is used to display these alerts
<!--showdata:
var="myAlerts"
type="orgnodes"
format="customtable" -->
3. By adding the following JQUERY code to the head of the operator view HTML file, the orgNodes tag is traversed.
The value in the 4th <TD> cell is checked and the row(parent) color is set depending on the value.
Useful for setting row color depending on e.g severity of Alerts.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
$(document).ready(function(){
$('.orgnodes_class td:nth-child(4).orgnodes_cellclass').each(function(){
var cellVal = parseInt($(this).text())
if(cellVal == 1)
$(this).parent().css("background-color","red");
if(cellVal == 2)
$(this).parent().css("background-color","yellow");
if(cellVal == 3)
$(this).parent().css("background-color","green");
if(cellVal == 4)
$(this).parent().css("background-color","blue");
if(cellVal == 5)
$(this).parent().css("background-color","pink");
});
});
</script>
The following image is shot of the resulting orgNodes tag.
UID
ibm11079955