In this post, that is inspired by a JS code of Foad Attar I will add a details section to each row in IG to show columns.
* set "Link Attributes" to ig-subdetail-link
* Target: Select "URL" as the type and then use javascript:void(0)
as the URL.
2- Set below JS code in “Function and Global Variable Declaration” of page:
function ig_showSubdetail($elm) {
var $tr = $elm.closest('tr');
var rowid = parseInt($tr.attr('data-id'));
var ig_id = $tr.closest('.t-IRR-region').attr('id');
var ig = apex.region(ig_id).call("getCurrentView");
var cols = ig.getColumns()
.filter(a=>
a.heading != undefined
&& (a.columnCssClasses == undefined || a.columnCssClasses.indexOf('ig-subdetail-hide')==-1)
&& (a.linkAttributes == undefined || a.linkAttributes.indexOf('ig-subdetail-link')==-1)
&& (a.property == undefined || a.property!="APEX$ROW_ACTION")
)
.sort(function(a,b){ return (a.index > b.index) ? 1 : ((a.index < b.index) ? -1 : 0); });
var colVals = ig.model.getRecord(rowid);
var pData = '';
cols.forEach(function(col,i,all) {
var colVal = (colVals[col.index].d != undefined ? colVals[col.index].d : colVals[col.index]);
var colData = `<div class="col col-6"><span class="lbl">${col.heading}:</span><span class="val">${colVal}</span></div>`;
pData += colData;
});
if(!$tr.next().hasClass('ig-tr-subdetail')) {
$tr.after($('<tr class="ig-tr-subdetail">').append(`<td colspan="${cols.filter(a=> a.hidden == false).length+1}" class="ig-td-subdetail">`));
}
$tr.next().find('.ig-td-subdetail').html(`<div class="ig-subdetail-box row">${pData}</div>`);
$elm.attr('ig-subdetail-status','show');
$tr.next().show();
}
function ig_hideSubdetail($elm) {
var $tr = $elm.removeAttr('ig-subdetail-status').closest('tr');
$tr.next().hide();
}
* and then set below JS code in “Execute when Page Loads”
$(document).on('click','[ig-subdetail-link]',function(event) {
var $trg_elm = $(this);
if(!$trg_elm.attr('ig-subdetail-status'))
ig_showSubdetail($trg_elm);
else
ig_hideSubdetail($trg_elm);
})
3- Set below CSS code in “Inline” of page
.ig-subdetail-box {
max-height: 200px;
overflow: auto;
box-shadow: 0 3px 5px #d2d2d2 inset;
border-bottom: solid 2px #e2e2e2;
padding: 18px 20px;
margin: 0;
}
.ig-subdetail-box .lbl {
font-weight: bold;
display: inline-block;
margin-right: 5px;
font-size: 12px;
color: #1d4694;
vertical-align: top;
}
.ig-subdetail-box .val {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
max-width: 92%;
display: inline-block;
vertical-align: top;
white-space: normal;
}
.ig-subdetail-box.row .col {
padding: 4px 15px 6px;
}
Note: For each column that you do not want to be shown in the details section, set "Appearance-> CSS Classes" to ig-subdetail-hide
excellent
ReplyDeleteThank you for this post and demo...this is excellent and well done! Using your instructions I was able to successfully incorporate this into my IG report. Just one quick question...say I had a 2 records with the same composite key, but different values in the detail fields. Would it be possible to group the key fields into 1 record in the main report, and display the detail fields from both records in the detail view (so 1 main report having multiple detail records in the detail view)? I realize I can do this in a master-detail report, and display detail records in a dialog window, but the requirement is to have a row expander as shown here.
ReplyDelete