{"id":641,"date":"2022-08-12T13:42:13","date_gmt":"2022-08-12T13:42:13","guid":{"rendered":"http:\/\/wp.chaoyu.nl\/?p=641"},"modified":"2022-08-16T10:12:09","modified_gmt":"2022-08-16T10:12:09","slug":"oracle-apex-interactive-grid-with-customised-buttons-on-the-tool-bar","status":"publish","type":"post","link":"https:\/\/chaoyu.nl\/?p=641","title":{"rendered":"Oracle APEX Interactive GRID with customised buttons on the tool bar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The goal is to have a custom button on the IG toolbar but doing something other than the regular functions provided by IG, in my example I am trying to achieve two things<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>open dialog (via a button) <\/li><li>execute some custom JS codes<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><em><code>reportsGroupControls = toolbarData.toolbarFind('actions4').controls; <\/code><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See more about <mark style=\"background-color:#7bdcb5\" class=\"has-inline-color\">actions4<\/mark> <a href=\"https:\/\/docs.oracle.com\/en\/database\/oracle\/application-express\/21.2\/aexjs\/interactiveGrid.html#.toolbarData\" data-type=\"URL\" data-id=\"https:\/\/docs.oracle.com\/en\/database\/oracle\/application-express\/21.2\/aexjs\/interactiveGrid.html#.toolbarData\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<pre title=\"IG Initialization code\" class=\"wp-block-code has-small-font-size\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">function(config) {\n    var $ = apex.jQuery,\n        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),\n        reportsGroupControls = toolbarData.toolbarFind('actions4').controls;\n\n    reportsGroupControls.push({\n        type: 'BUTTON',\n        hot: true,\n        icon: 'fa fa-plus',\n        iconBeforeLabel: true,\n        action: 'open_emp_form'\n    });\n    reportsGroupControls.push({\n        type: 'BUTTON',\n        hot: true,\n        action: 'say_hello_world'\n    });\n\n    config.toolbarData = toolbarData;\n\n    config.initActions = function (actions) {\n        actions.add([{\n            name: 'open_emp_form',\n            label: 'New',\n            action: $(\"#newemp\").prop(\"onclick\")\n        },\n        {\n            name: 'say_hello_world',\n            label: 'Hello World',\n            action: function (event, focusElement) {\n                alert(\"Hello World!\");\n            }\n            \/\/ or $(\"#btn_helloworld\").prop(\"onclick\")\n        }\n        ]);\n    }\n    return config;\n}\n\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/wp.chaoyu.nl\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-15.50.05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1883\" height=\"735\" src=\"http:\/\/wp.chaoyu.nl\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-15.50.05.png\" alt=\"\" class=\"wp-image-648\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The goal is to have a custom button on the IG toolbar but doing something other than the regular functions provided by IG, in my example I am trying to achieve two things open dialog (via a button) execute some custom JS codes reportsGroupControls = toolbarData.toolbarFind(&#8216;actions4&#8217;).controls; See more about actions4 here.<\/p>\n","protected":false},"author":1,"featured_media":655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apex"],"_links":{"self":[{"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/posts\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=641"}],"version-history":[{"count":11,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/posts\/641\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/posts\/641\/revisions\/656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=\/wp\/v2\/media\/655"}],"wp:attachment":[{"href":"https:\/\/chaoyu.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chaoyu.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}