Monday 18 July 2016

Comments Differentiation in Oracle APEX

Comments Differentiation is some recent requirement as new advancements in CSS been implemented. Customer requires differentiation in Image when some comment been added. It has been  implemented with css and little Jquery.

Step:1: Include following icon tag in Link Text in report column attributes
<i class="fa fa-comments-o fa-3x icon-grey" aria-hidden="true"></i>

Step:2: Create hidden column to find comments exists for particular row.

Step:3: Include following JQuery for color differentiation:

       Create Dynamic Action as Execute Javascript Code
       Event : After Refresh and Page Load
       $("#report_del_item .t-Report-report td[headers='GENERAL_COMMENTS']").each(function(){
var c = $(this).children("input[name='f17']").val();
if (c.length != 0)
{
     $(this).closest('tr').find("td[headers='GENERAL_COMMENTS'] a").children("i").css({"color":"red"});
}
});
#report_del_item  - Static Id of Report.
td[headers='GENERAL_COMMENTS'] - Represents General Comments Column

$(this).children("input[name='f15']") - Represents general comments hidden column , Children been specified as all hidden columns will be children to last visbile/display column.

.closest('tr')  - Finds closest table row <tr>
.children(i)   -  Represents child icon tag inside parent general comments
.css         - Adds style element to selector

Output:

You can notice General Comments to see Comments Differentiation 



No comments:

Post a Comment