Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Display Font Awesome Icon within interactive grid cell

Kimani SnyderMar 4 2024

Apex 23.1.4

I'm trying to see whats the best way to go about displaying a font awesome icon within an interactive grid cell.

I have an interactive grid that is pre-populated from a previous page

This is how it works

Page 1: The user can select payment amounts, and if they will be monthly or quarterly throughout the year.

Page 2: A. **PRE RENDERING PROCESS: ** pl/sql calls a procedure with the values the end user previously selected.

             **B. DYNAMIC ACTION EVENT:**  Page Load

This code loads the JSON data into the grid

var widget = apex.region('grid_left').widget();
var grid = widget.interactiveGrid('getViews','grid');
var model = grid.model;
var myJSONString = $v('P_JSON_DATA');
var myObject = JSON.parse(myJSONString);

var pendingIND = "fa fa-clock-o pending-color",
distrIND = "fa fa-check distrib-color",
lateIND = "fa fa-clock-o late-color",
blankIND = "",
className= "",
paymentIndicator = "";

model.clearData();

if (myJSONString != null){

for ( var i = 5; i <= myObject.length-6 && i >= 0; i--) {
var obj = myObject[i];
var cell = $(this);

var myNewRecordId = model.insertNewRecord();

var myNewRecord = model.getRecord(myNewRecordId);

//update the grid with the values from the JSON data
model.setValue(myNewRecord, 'PROJECTED_DATE', obj.projected_date.toString());

if ( obj.projected_amount) {
model.setValue(myNewRecord, 'PROJECTED_AMOUNT', obj.projected_amount.toString());
}

//get the payment indicator
paymentIndicator = obj.payment_indicator;

if (paymentIndicator == 'P'){
className = pendingIND;
} else if (paymentIndicator == 'D'){
className = pendingIND;
} else if (paymentIndicator == 'L'){
className = pendingIND;
}

//now set the icon on the cell
defaultGridColumnOptions = {
cellTemplate: '<span class="'+ className +'">'+'PAYMENT_INDICATOR'+'</span>'
};
// model.setValue(myNewRecord, 'PAYMENT_INDICATOR', obj.payment_indicator.toString());

};
} //end if

So in my code obj.payment_indicator will return certain values, and the font awesome icon will be based off of that.

I do realize that the defaultGridColumnOptions should probably not go here, but i tried many different things

What happens is the PAYMENT_INDICATOR cell is just blank.

Any ideas on how to accomplish this?

This post has been answered by Kimani Snyder on Mar 5 2024
Jump to Answer
Comments
Post Details
Added on Mar 4 2024
5 comments
707 views