Add details section to IG

 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.

As you can see, I have selected only three columns for IG columns and the other columns are shown in details section.

To add the details section, follow these steps:

1- Add a  column of type Link to your IG and adjust the following settings.

* set "Link Text" to <i class="fa fa-list"></i>

* 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

Demo

I hope you enjoyed reading this blog post.