You may have noticed that with Interactive Grid regions there is no "RIGHT OF INTERACTIVE REPORT SEARCH BAR" display position to add buttons to. Instead Interactive Grid gives you full control over customizing its toolbar. However, doing so is a little more complicated. This example will add a Create button to the toolbar, which is a common pattern for Interactive Reports. The Create button as well as links on the ENAME column will open an APEX modal page to create, edit, or delete an Employee. This can be useful if you want to take advantage of new features of Interactive Grid such as frozen columns while keeping the existing editing pattern.

Customizing the toolbar is an advanced configuration setting. The attribute Advanced: JavaScript Code is used to specify a function that can add or change configuration options. Take a look at that attribute. Interactive Grid uses the toolbar widget which in turn uses actions. These are the same actions that the APEX menu can use to support keyboard shortcuts. This example adds a Create button to the last toolbar group and associates it with a new create-employee action. The tricky part about opening an APEX dialog is that the URL must be generated by the server. There are a few ways to do this but this example creates a hidden button with a behavior to redirect to the dialog page. The create-employee action simply borrows the hidden buttons onclick handler.

A few things to note about the Dialog Closed dynamic action: The DA listens on the body element rather than the Interactive Grid region because the hidden create button is outside the grid region. The success message from the dialog is shown with the new apex.message.showPageSuccess API. Previously this was not possible without refreshing the whole page. Lastly it shows the new API to refresh any region, although the trigger apexrefresh event method also still works.