Oracle APEX 5.1 – Implementing a Select List in the Interactive Grid’s toolbar

In order to complete this task, it would be required to write some JavaScript code. It might seem complex, but don’t worry. I will keep it as simple as possible.

Before we start, we will need an Interactive Grid region implemented on a page. Now, we will go to the Attributes > Advanced > JavaScript Code area. This is where we will write the following code:

function (config) {
    /* declare variables */
    var $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), // get the default toolbar in the form of an array
        toolbarGroup = toolbarData[toolbarData.length - 2]; // get the desired array element or group, which usually are also arrays

    /* push a new element in the array */
    toolbarGroup.controls.push( {
        type: "SELECT", // set the element's type
        id: "my-select", // set an id for the element
        action: "my-action" // set a custom action or an already existing one
    });

    /* update the current toolbar's configuration */
    config.toolbarData = toolbarData;

    /* initialize a custom action */
    config.initActions = function( actions ) {
        actions.add( {
            name: "my-action",
            choices: [{ label: "A", value: "1" }, { label: "B", value: "2" }],
            action: function(event, focusElement) {
                /* custom action */
                /* it gets the currently selected value in the Select List and displays the value in an alert */
                var e = document.getElementById("test_ig_toolbar_my-select");
                var strUserValue = e.options[e.selectedIndex].value;
                var strUserText = e.options[e.selectedIndex].text;
                alert(strUserValue + ' ' + strUserText);
            }
        } );
    };

    /* return the new Interactive Grid's configuration */
    return config;
}

Now, lets check the code in more detail. The declaration of the variables should be self-explanatory, so I will start where the new element is being added in the toolbar. You can see that, I’ve selected the type as ‘SELECT’. This is a keyword, which APEX uses to determine which item to create. It could receive various other values such as ‘BUTTON’, ‘TEXT’, ‘TOGGLE’ etcetera. Feel free to explore all your options by adding ‘console.log(“config”, config);’ in the previously mentioned code and looking into the ‘toolbarData’ option.

function (config) {
    console.log("config", config);
    // ...
}

Furthermore, I’ve added a unique id to my element and I’ve binded an action to it. Due to the fact that my action is a custom one, the name must be the same with the one that I am initializing later on. The triggering moment of the action defers based on the element’s type. For example, for a ‘BUTTON’ it would trigger the action on-click, whereas in our case it would trigger it on-change.

Now, I will go straight to initializing the custom action. You might have seen that the actions for the ‘BUTTON’ element simply contain a name and the function it triggers. In our case, we would need also a set of choices. That’s right! These are also defined while initializing the ‘SELECT’ element’s action. We will simply need to pass an array of objects, each consisting of a label and a value.

My action doesn’t do anything spectacular at the moment, it just displays the currently selected element’s label and value. However, you could use the APEX’s JavaScript API to trigger a dynamic action. The following URL should point you in the right direction:

https://docs.oracle.com/database/121/AEAPI/javascript_api.htm#AEAPI29444

Furthermore, the choices could also be dynamically added, as long as you have a string of the wanted array (for example: ‘[{ label: “A”, value: “1” }, { label: “B”, value: “2” }]’). All you would need to do is adapt the current code, by using the JSON.parse function:

function (config) {
    // ...
    /* initialize a custom action */
    config.initActions = function( actions ) {
        actions.add( {
            name: "my-action",
            choices: JSON.parse('[{ label: "A", value: "1" }, { label: "B", value: "2" }]'),
            action: function(event, focusElement) {
                /* custom action */
                /* it gets the currently selected value in the Select List and displays the value in an alert */
                var e = document.getElementById("test_ig_toolbar_my-select");
                var strUserValue = e.options[e.selectedIndex].value;
                var strUserText = e.options[e.selectedIndex].text;
                alert(strUserValue + ' ' + strUserText);
            }
        } );
    };
    // ...
}

For extra information, please check: https://www.w3schools.com/js/js_json_parse.asp

Furthermore, anyone who is interested in enhancing the Interactive Grid’s functionality might find it worthwhile to check the following 4 part article:

[dt_list style=”1″ bullet_position=”middle” dividers=”true”][dt_list_item image=””]http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid-part-1/[/dt_list_item][dt_list_item image=””]http://hardlikesoftware.com/weblog/2017/01/24/how-to-hack-apex-interactive-grid-part-2/[/dt_list_item][dt_list_item image=””]http://hardlikesoftware.com/weblog/2017/02/20/how-to-hack-apex-interactive-grid-part-3/[/dt_list_item][dt_list_item image=””]http://hardlikesoftware.com/weblog/2017/03/31/how-to-hack-apex-interactive-grid-part-4/[/dt_list_item][/dt_list]

Good luck coding!