Forum Stats

  • 3,770,127 Users
  • 2,253,073 Discussions
  • 7,875,336 Comments

Discussions

Extending the IG Actions Menu

drosso
drosso Member Posts: 19
edited Mar 4, 2020 3:44AM in APEX Discussions

Hello,

I'm trying to extend the default actions menu of an IG by adding a menu voice labeled "Upload" (I want my users to be able to upload records from a .csv file and I don't want to add a button outside the existing menu).

I've found this javscript code in the IG documentation that seemed a good starting point:

function( options ) {

     options.initActions = function( actions ) { 

     // Hide all elements associated with the show help dialog action

     actions.hide( "show-help-dialog" ); 

     // Add a keyboard shortcut to the show filter dialog action

     actions.lookup( "show-filter-dialog" ).shortcut = "Ctrl+Alt+F";

     actions.update( "show-filter-dialog" ); 

     // Add new actions, either singularly passing in an actions object as shown here, or in // multiple by passing an array of action objects

     actions.add( {

          name: "my-action", label: "Hello", action: function( event, focusElement ) {

               alert( "Hello World!" ); }

          } );

     };

     return options;

}

The problem is that while hiding and updating actions work as expected, there is no way to add the "Hello" action: what am I doing wrong ?

Thank you.

John Snyders-OraclePavel_pKeyserSven W.

Best Answer

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,408 Employee
    edited Mar 3, 2020 3:36PM Accepted Answer

    Building on Sven and Keyser's answers here is what my code would look like:

    function(config) {

        var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();

        toolbarData.toolbarInsertAfter( "show-download-dialog", {

            type: "action",

            action: "hello-world"

        } );

        config.toolbarData = toolbarData;

        config.initActions = function( actions ) {

            actions.add( {

              name: "hello-world",

              label: "Hello World",

              icon: "fa fa-smile-o",

              action: function( event, focusElement ) {

                  apex.message.alert( "Hello World!" );

              }

            } );

        };

        return config;

    }

    Using JSON.parse(JSON.stringify(...)) to copy an object is expensive and you don't need to do that. Just create a new object. If you need to copy an object see jQuery extend function.

    Regards,
    -John

    Pavel_pKeyserJoe Kerr

Answers

  • Pavel_p
    Pavel_p Member Posts: 2,311 Gold Trophy
    edited Mar 3, 2020 10:32AM

    Hi,

    whatever you're doing wrong, I'm making the same mistake. @John Snyders-Oracle, please could you take a look at this example the Add action really works and if so, what exactly we are supposed to do to make it work? I tried to paste the code to IG's JavaScript Initialization Code (APEX 19.2) and I can just confirm that the Help menu is hidden, the keyboard shortcut works but the Hello action is nowhere to be found.

    Regards,

    Pavel

  • Sven W.
    Sven W. Member Posts: 10,534 Gold Crown
    edited Mar 3, 2020 1:00PM

    adding a new action to the list of possible actions, doesn't mean that the action is also shown inside some menu (or used by some button). John has written about it. I think this is the most relevant blog entry: https://hardlikesoftware.com/weblog/2017/01/24/how-to-hack-apex-interactive-grid-part-2/

    "An action is a named behavior along with its UI state (state includes hidden/shown, enabled/disabled, label, icon, and shortcut key). The toolbar and menus just provide the UI for invoking an action, or for toggle and radio group actions setting or getting its value. This is why you typically don’t need to specify things like the icon or label because it is taken from the action."

    Drosso has defined the named behaviour, but the UI representation is missing.

    John Snyders-Oracle
  • Keyser
    Keyser Member Posts: 829 Bronze Trophy
    edited Mar 3, 2020 3:30PM

    as Sven says, you've done the action but not the menu item

    this is my attempt at it, I'm new to Apex, it isn't perfect, I'm happy for people to criticise it (constructively ), but it works for me

    function(config) {       config.initActions = function( actions ) {        actions.hide("show-aggregate-dialog");        actions.lookup("show-filter-dialog").shortcut = "Ctrl+Alt+F";        actions.update("show-filter-dialog");        actions.lookup("save").shortcut = "Ctrl+Alt+S";        actions.update("save");               actions.add( {          name: "do-the-keyser-menu",          label: "Keyser",          icon: "icon-ig-save-as",          action: function( event, focusElement ) {              alert( "Hello World!" ); }          } );    }       var download,    toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();    download = toolbarData.toolbarFind( "show-download-dialog" );    var v_keyser = JSON.parse(JSON.stringify(download));    v_keyser.action = "do-the-keyser-menu";    toolbarData.toolbarInsertAfter( "show-download-dialog", v_keyser );    config.toolbarData = toolbarData;       return config;}

    pastedImage_6.png

    Sven W.
  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,408 Employee
    edited Mar 3, 2020 3:36PM Accepted Answer

    Building on Sven and Keyser's answers here is what my code would look like:

    function(config) {

        var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();

        toolbarData.toolbarInsertAfter( "show-download-dialog", {

            type: "action",

            action: "hello-world"

        } );

        config.toolbarData = toolbarData;

        config.initActions = function( actions ) {

            actions.add( {

              name: "hello-world",

              label: "Hello World",

              icon: "fa fa-smile-o",

              action: function( event, focusElement ) {

                  apex.message.alert( "Hello World!" );

              }

            } );

        };

        return config;

    }

    Using JSON.parse(JSON.stringify(...)) to copy an object is expensive and you don't need to do that. Just create a new object. If you need to copy an object see jQuery extend function.

    Regards,
    -John

    Pavel_pKeyserJoe Kerr
  • Keyser
    Keyser Member Posts: 829 Bronze Trophy
    edited Mar 3, 2020 3:51PM
    Using JSON.parse(JSON.stringify(...)) to copy an object is expensive and you don't need to do that. Just create a new object. If you need to copy an object see jQuery extend function.

    thanks for the advice John, i'll do that in future

  • drosso
    drosso Member Posts: 19
    edited Mar 4, 2020 3:44AM

    Wow, thank you so much to all of you!

  • Joe Kerr
    Joe Kerr Member Posts: 6 Blue Ribbon

    Sorry if this is a dumb question, but I have tried various combinations and have been unable to figure out how to add additional menu items to the Action Menu, i.e. add more than one. Can you provide an example?

    This is very helpful

    thanks

    Joe