Monday, 10 September 2018

IG toolbar customization using a function

IG toolbar customization

 

Life-saving Interactive grid tips

 

Reduce IG initialization code ideas


Futher 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 = config.data;
    var toolbarGroup = toolbarData.filter(function (group) { 
      return group.id === vGroup 
    })[0] 
   
    toolbarGroup.controls.push(vaButton);

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

}

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 apex.world for latest plugins.   

Happy APEXing,
Lino 

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

    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!

Monday, 25 June 2018

AUSOUG APEX webinar series 2018

AUSOUG APEX webinar series 2018

 

Great speakers, great content! 

 

Running from mid July to late October 2018


Together with AUSOUG and awesome APEX community I am glad to announce APEX 2018 webinar series.


As Oracle APEX fans we gather to learn together and from each other. 

This year we will have PL/SQL and APEX sessions too. 

Amazing sessions and speakers
  • Connor McDonald Oracle Developer Advocate @ORACLE, Australia
  • John Watson Oracle Certified Master @Skillbuilders, USA
  • Shakeeb Rahman Design Lead for APEX @Oracle, USA
  • Dimitri Gielis Oracle ACE director and founder of AOP and APEXR&D, Belgium
  • Scott Spendolini Oracle ACE director and Vice President of the APEX Practice @Viscosity North America
  • Niels de Bruijn Oracle ACE director @MT AG, Germany 
  • Jackie Mcllroy Senior APEX developer @INSUM,USA 
  • Menno Hoogendijk Oracle ACE Associate @Qualogy, Netherlands
  • Tyson Jouglet APEX expert @Skillbuilders, USA
  • Maxime Tremblay apex.world Member of the Year 2016 @Momentum Technologies, Canada
  • Simon Hunt, Oracle ACE Associate @apextestautomation, UK
  • Aljaz Mali, Oracle ACE Associate @Abakus Plus, Slovenia
  • Jerry Ward co-founder @Viscosity North America 
  • Lino Schildenfeld Oracle ACE Associate @APEX R&D, Australia
Register now
You can register directly using links below or through AUSOUG website.

Scheduled sessions:
July 10, 2018 06:00pm AEST
July 17, 2018 08:00pm AEST
July 24, 2018 09:00pm AEST
July 31, 2018 09:00pm AEST
August 09, 2018 06:00pm AEST
August 14, 2018 09:00pm AEST
August 21, 2018 06:00pm AEST
August 28, 2018 06:00pm AEST
September 06, 2018 09:00pm AEST
September 10, 2018 06:00pm AEST
September 18, 2018 06:00pm AEST
September 25, 2018 06:00pm AEST
October 02, 2018 09:00pm AEST
October 09, 2018 09:00pm AEST

*As additional sessions are scheduled this blog will be updated.

Happy APEXing,
Lino