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!

No comments:

Post a Comment