IBM Support

Using JQUERY to add styling to an OrgNodes tag in an Impact Operator View

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"&gt;
</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.

image

 

 

 

 

[{"Business Unit":{"code":"BU053","label":"Cloud & Data Platform"},"Product":{"code":"","label":""},"Component":"","Platform":[{"code":"","label":""}],"Version":"","Edition":"","Line of Business":{"code":"","label":""}}]

UID

ibm11079955