Forum Stats

  • 3,782,469 Users
  • 2,254,652 Discussions
  • 7,880,082 Comments

Discussions

Categories

How to add custom Actions button to Custom Toolbar?

Leon_M
Leon_M Member Posts: 154 Blue Ribbon
edited Jul 23, 2019 6:54PM in APEX Discussions

Hello Experts,

We are on Apex 19.1

We need to create Custom Toolbar in Interactive Grid with our own Search field and buttons.

Also we need to add custom Actions button with only two options - Columns and Download.

I created Custom Toolbar in Interactive Grid Attributes using code below:

config.toolbarData = [        {            groupTogether: true,            controls: [                {                    type: "TEXT",                    id: "search_field",                    enterAction: "custom-search",                },                {                    type: "BUTTON",                    action: "custom-search"                }            ]        },        {            controls: [                {                    type: "BUTTON",                    id: "my-id",                    action: "custom-action"                }            ]                    }      ];

Do you know how can I add Actions button to this code with two options - Columns and Download?

Thank you!

Tagged:
· Share on TwitterShare on Facebook

Best Answer

  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,412 Employee
    edited Jul 22, 2019 12:57PM Accepted Answer

    Hi,

    The best way to figure this out is to see the structure that IG uses for its default toolbar. Just copy what you need. Go to a page with an IG on it and in the browser console window type:

    JSON.stringify($.apex.interactiveGrid.copyDefaultToolbar(), null, 4)

    The actions menu part might look like this:

        {<br/>         "id": "actions1",<br/>         "controls": [<br/>             {<br/>                 "type": "MENU",<br/>                 "id": "actions_button",<br/>                 "labelKey": "APEX.IG.ACTIONS",<br/>                 "menu": {<br/>                     "items": [<br/>                         {<br/>                             "type": "action",<br/>                             "action": "show-columns-dialog"<br/>                         },<br/>                         {<br/>                             "type": "separator"<br/>                         },<br/>                         {<br/>                             "type": "action",<br/>                             "action": "show-download-dialog"<br/>                         }<br/>                     ]<br/>                 }<br/>             }<br/>         ]<br/>     },

    Regards,
    -John

    Leon_M
    · Share on TwitterShare on Facebook

Answers

  • Billy Verreynne
    Billy Verreynne Software Engineer Member Posts: 28,654 Red Diamond
    edited Jul 22, 2019 1:41AM

    A very basic and simplistic way to call, from Javascript, a Dynamic Action, is to create a non-visible APEX button on the page, and assign the dynamic action to this button.

    To trigger the dynamic action from anywhere in the page, simply use a Javasacript call to click this hidden button.

    · Share on TwitterShare on Facebook
  • John Snyders-Oracle
    John Snyders-Oracle Member Posts: 1,412 Employee
    edited Jul 22, 2019 12:57PM Accepted Answer

    Hi,

    The best way to figure this out is to see the structure that IG uses for its default toolbar. Just copy what you need. Go to a page with an IG on it and in the browser console window type:

    JSON.stringify($.apex.interactiveGrid.copyDefaultToolbar(), null, 4)

    The actions menu part might look like this:

        {<br/>         "id": "actions1",<br/>         "controls": [<br/>             {<br/>                 "type": "MENU",<br/>                 "id": "actions_button",<br/>                 "labelKey": "APEX.IG.ACTIONS",<br/>                 "menu": {<br/>                     "items": [<br/>                         {<br/>                             "type": "action",<br/>                             "action": "show-columns-dialog"<br/>                         },<br/>                         {<br/>                             "type": "separator"<br/>                         },<br/>                         {<br/>                             "type": "action",<br/>                             "action": "show-download-dialog"<br/>                         }<br/>                     ]<br/>                 }<br/>             }<br/>         ]<br/>     },

    Regards,
    -John

    Leon_M
    · Share on TwitterShare on Facebook
  • Leon_M
    Leon_M Member Posts: 154 Blue Ribbon
    edited Jul 23, 2019 6:54PM

    @John Snyders-Oracle, this totally worked!

    I only removed double quotes from properties. My final working code looks like this:

    {

            id: "actions1",

            controls: [

                {

                    type: "MENU",

                    id: "actions_button",

                    labelKey: "APEX.IG.ACTIONS",

                    menu: {

                        items: [

                            {

                                type: "action",

                                action: "show-columns-dialog"

                            },

                            {

                                type: "separator"

                            },

                            {

                                type: "action",

                                action: "show-download-dialog"

                            }

                        ]

                    }

                }

             ]

          },

    Thank you!

    P.S. Recent update: It actually works with properties with or without double quotes just the same.

    · Share on TwitterShare on Facebook
  • User_DPP5K
    User_DPP5K Member Posts: 1 Green Ribbon

    @Leon_M Would you be able to provide the full code you used to create your custom actions menu? Thanks!

    · Share on TwitterShare on Facebook