Interactive Grids more customization

Previous article about customization of interactive grids was about updating the default buttons, their look and text. Not even week passed, when I was in need to add some explanation text to the toolbar of interactive grid. Obviously there was always option to use jQuery and DOM modification, but I didn’t know how that will behave on the region only refresh and so on. Thus I decided to fulfil at least partly my promise and dig little bit deeper into the JavaScript of interactive grids.

Toolbar of interactive grid is basically the same as the one for interactive report and as such all below might apply for the interactive reports as well, but I didn’t test it. Inside the function for the apex toolbar widget, you’ll find function _buildGroupContainer. This is quite important function as the controls on the toolbar are in groups. All examples will be done in the group 3, which is group where you can find the “add new rows” button, if you allow inserting new rows for your interactive grid. As with the configuration of the buttons in previous article, all the code below will go to the JavaScript Initialization Code field in the advanced section of interactive grid attributes. Also – the general code (see below) is same for all the examples, just the individual controls will change.

function(config) {
  let $             = apex.jQuery,
      toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(), // Copy the default toolbar
      toolbarGroup  = toolbarData.toolbarFind("actions3"); // Get the group you want to put your controls into

  // NEW TOOLBAR CONTROL ELEMENTS GO HERE

  config.toolbarData = toolbarData;
  return config;
}

Static

Static is one of the easiest controls. It simply adds the static text to the toolbar (exactly what I was looking for as I mentioned it in the beginning). You have to provide the text and optionally you can specify the id of the element. If you provide the ID in options, your <span> will inherit your interactive grid region static ID combined with toolbar ID and  your specified ID – in the example below would the ID looked like this: id="regionID_ig_toolbar_static".

toolbarGroup.controls.push({type: "STATIC",
                            label: "TEST",
                            id: "static"
                           });

And results shown on the toolbar would be:

Because of the size of toolbar and line-height of <span> element, you’ll probably have to do small touch in css to vertically align it so it looks little bit better, but that I’ll leave to your creativity.

Text

As you expect, this control will put text field into your toolbar. The customization of this field is better.

toolbarGroup.controls.push({type: "TEXT",
                            label: "TEST",
                            id: "static",
                            placeholder: "placeholder",
                            enterAction: "show-help-dialog",
                            size: "20",
                            maxChars: "2000"
                           });

Label option sadly doesn’t create the label for the field, but it puts the text into title of the input element, so it displays if you hover over the field as a tooltip. ID works the same way as it works for static control type, placeholder is self explanatory as well as size and max character counts. Enter action (here I put to show help dialog of interactive grid) is an action, which happens when you press enter while in the field. Finally the results:

Select

Inserting select into the interactive grid toolbar is little bit more intricate. Basic options remains the same as in previous examples – ID is the same and title goes again into the hover over tooltip. The difference starts for the action, which indicates, what happens when you select individual option. The script below will give you the rough idea how to implement it.

toolbarGroup.controls.push({type: "SELECT",
                            title: "text",
                            id: "static",
                            action: "my-action"
                           });

config.initActions = function(actions){
  actions.add({
    name: "my-action",
    choices: [{ label: "A", value: "1" }, { label: "B", value: "2" }],
    action: function(event, focusElement) {
      var e     = document.getElementById("regionID_ig_toolbar_static"),
          value = e.options[e.selectedIndex].value,
          text  = e.options[e.selectedIndex].text;
      alert(value + ' - ' + text);
    }
  });
};

This select box will contain two options – A (returning 1) and B (returning 2). When you select some option, it will call our defined “my-action”, which will show alert box with the information of the selected value. You can be cleverer and do much more with it, but for the sake of example it’s probably enough. As always the result will be:

Menu

There might be reason for you to disable the action menu for interactive grid, but you want to build yours menu instead. The interactive grid JavaScript API has you covered. It’s slightly more complicated than the select option. Some of the options here are simple: ID, label, icon. We have there few Boolean options – namely icon before label, icon only, hot and disabled. Where the real fun with menu begins, is the definition of the menu items.

toolbarGroup.controls.push({type: "MENU",
                            id: "static",
                            label: "My Menu",
                            icon: "icon-ig-save-as",
                            iconBeforeLabel: true,
                            iconOnly: false,
                            hot: true,
                            disabled: false,
                            action: "custom-menu",
                            menu: {
                              items: [{
                                type: "action",
                                action: function(){ alert('action 1');},
                                label: "action 1",
                                icon: "fa fa-home",
                                disabled: false
                              }, {
                                type: "separator"
                              }, {
                                type: "action",
                                action: function(){ alert('action 2');},
                                label: "action 2",
                                icon: "fa fa-apex",
                                disabled: true
                              }]
                            }
                          });

“Menu items” is an object which contains the array of the items. Each item has its own type, action, label and other options as shown in the code above. First action is allowed and it will show alert with the text “action 1”, it’s followed by separator and then action 2 which is disabled.

Button

Button will be probably the most used of all these options to add onto the interactive toolbar. You can define your own action as in the select list example.

toolbarGroup.controls.push({type: "BUTTON",
                            id: "static",
                            label: "My Button",
                            icon: "icon-ig-save-as",
                            iconBeforeLabel: true,
                            iconOnly: false,
                            hot: true,
                            disabled: false,
                            action: "my-action"
                         });

config.initActions = function(actions){
  actions.add({
    name: "my-action",
    action: function() {
      alert('My Action!');
    }
  });
};

Just like in the previous examples, this one simply calls mine defined “my-action”, which only creates alert on the page.

Radio Button Group

Similarly to select list radio button group is almost the same. I won’t be getting much into details as you can read them above.

toolbarGroup.controls.push({type: "RADIO_GROUP",
                            title: "text",
                            id: "static",
                            action: "my-action"
                           });

config.initActions = function(actions){
  actions.add({
    name: "my-action",
    choices: [
      { label: "A", value: "1", title: "Title A" },
      { label: "B", value: "2", title: "Title B" }
    ],
    action: function(event, focusElement) {
      alert(focusElement.value);
    }
  });
}

I have to admit, that in our template I never worked with radio groups. I usually end up using select lists instead of radio buttons as it take less space in the application and the functionality is basically the same if you disable multiple selection. For that I was surprised how it looked like on the toolbar, but it might vary based on what template you’re using.

Toggle

Last type for you to put on the toolbar is toggle. Until I tried this option, I didn’t even realize there is already one on the interactive grid toolbar. You’re right if you guessed the “edit” button. In fact it’s the toggle to either enter into edit mode or quit it. When I realized that it was only one step to replicate this toggle via JavaScript.

toolbarGroup.controls.push({type: "TOGGLE",
                            id: "static",
                            label: "My Edit",
                            action: "edit"
});

I won’t be showing you the results of the code this time, as it’s just another edit button.

Have you found any other options I didn’t include? Did you use the JavaScript API for toolbars in interesting way? Share it in the comments below. Next time, I’d like to have a look on the interactive grid data model, how are data stored and how to manipulate them and maybe some validations on top of what’s available in the APEX Application Builder.