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 = 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!
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!
