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) {

    if(!config.toolbar){
        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
is
    l_result                apex_plugin.t_dynamic_action_render_result;
begin
    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 apex.world for latest examples.  

Happy APEXing,
Lino 

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