Monday 10 September 2018

IG toolbar customization using a function

IG toolbar customization


Life-saving Interactive grid tips


Reduce IG initialization code ideas

Further to my previous post just an idea on how to configure and change your Interactive Grid toolbar by also avoiding to use JavaScript initialization code for the same reason. 

Luckily you do not need to create a plugin as this has already been done by Marko Goricki.

Usually what we would do is used something similar to
function(config) {
  var $ = apex.jQuery,
  toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
 toolbarGroup = toolbarData.toolbarFind("actions4");
  // add a Download button next to the Reset button
  toolbarGroup.controls.push( {
    type: "BUTTON",
    action: "show-download-dialog"
  config.toolbarData = toolbarData;
  return config;

This example shows how to add Download button to your IG toolbars. In order to reduce this being copied across you can use On page load function similar to: 
 function addToolbarButton(groupName, regionID){
   // get plugin attributes
    var vGroup    = groupName;
    // get Region
    var vRegionId = regionID;
    // Get Widget
    var vWidget$ = apex.region(vRegionId).widget();
    // Grid created
    var toolbar = vWidget$.interactiveGrid("getToolbar");  
    var vaButton = {
        type: "BUTTON",
        action: "show-download-dialog"
    let config = $.extend(true, {}, toolbar.toolbar('option'))   
    var toolbarData =;
    var toolbarGroup = toolbarData.filter(function (group) { 
      return === vGroup 

    toolbar.toolbar('option', 'data',;
     // refresh grid


when we want to do the same but from a function. And then just trigger on page load using addToolbarButton('actions4','dept'); 

It does make more sense to use Marko's plugin so use the above as an example only. ;)

Please make sure you check out for latest plugins.   

Happy APEXing,

p.s all credits of the addButton code go to Marko. Thank you for an awesome plugin!

Thursday 6 September 2018

Life saving Interactive grid tips

AUSOUG APEX webinar series 2018 overview


Life-saving Interactive grid tips


Reduce the code using plugins

This is summary of thoughts after awesome sessions during APEX 2018 webinar series.

First I wanted to reflect on Menno's session. He had similar presentation at KScope 2018 that I missed so decided to write a blog as I learned a lot from it. 

What I didn't like there is it gave me lots to think about of projects I recently completed where we utilized interactive grids. 

Don't you hate that feeling when you know you probably need to go back and clean up. So thanks Menno for sharing your tips ;)

How many of us had to tweak intial Interactive Grid look and feel? Probably all of us. 

By now we all know among loads of declarative ways to change and configure your IG we all have seen nice touches done by people like John Snyders or other on OTN forum. 

Is it to add a custom buttons, disable some actions or configure its toolbar we ended up using JavaScript initialization code for each IG region under Attributes. Probably most of us have.

What this creates is loads of same or similar codes that need to be copied and pasted under each IG this needs to apply to. 

Usually what we would do is used something similar to
function(config) {

        config.toolbar = {};   
    config.toolbar.searchField = false;
    return config;

This example shows how to remove search field from its toolbar. Same here
 function(options) {
    --if empty create empty objects
    options.views = options.views || {};
    options.views.grid = options.views.grid || {};
    options.views.grid.features = options.views.grid.fetures || {};
    $.extend(options.views.grid.features, {
        reorderColumns: false,
        resizeColumns: false,
        sort: false       

    return options;

when we want to control our columns in grid to allow selection, reordering or sorting. 

I strongly agree with Menno that this becomes hard to maintain and above all it is not declarative. Whole point now-days is to follow low-code principals so let's see how to better achieve that. 

First idea is to trigger the same thing on page load with: 
 let gridView = apex.region('dept').widget().interactiveGrid('getViews').grid;

--if exists change attributes to false
if (gridView) {
    gridView.view$.grid('option', {
        reorderColumns: false,
        resizeColumns: false,
        columnSort: false
Okay we are a step closer but ultimately we can use plugins as Menno demonstrated. Love this beyond words, when people make something so easy so obvious.

If we wrapped this up in APEX plugin that is simple to maintain, we immediately saved our selves heaps of time re-coding it over and over again

function render (p_dynamic_action in apex_plugin.t_dynamic_action
                , p_plugin in apex_plugin.t_plugin
                ) return apex_plugin.t_dynamic_action_render_result
    l_result                apex_plugin.t_dynamic_action_render_result;
    l_result.javascript_function :=
    'function() {
        let gridView = apex.region(this.action.affectedRegionId).widget().interactiveGrid("getViews").grid;
        if (gridView) {
            gridView.view$.grid("option", {
                reorderColumns: ' || case when p_dynamic_action.attribute_01 = 'Y' then 'true' else 'false' end || ',
                resizeColumns: ' || case when p_dynamic_action.attribute_02 = 'Y' then 'true' else 'false' end || ',
                columnSort: ' || case when p_dynamic_action.attribute_03 = 'Y' then 'true' else 'false' end || '
    return l_result;
end render;
Using the above is simple as it gets and proves its point. Simple dynamic action that can serve most of your IG customization needs.


Plugin example can be downloaded here. Please note this is not a production ready example but can serve you as a template. If for nothing you know now it is possible

Thanks to very smart people and APEX community some of these have already been created for you and are publicly available so please make sure you check out for latest examples.  

Happy APEXing,

p.s all credits of the content of this blog go to Menno. May the widgets be with you!