Oracle APEX - Error in action for 'xxx'. TypeError: Cannot read property 'dialogClass' of undefined

Question

I have a custom button on my IG that should open a modal dialog page. Here is the code I use:

function(config) {
   var $ = apex.jQuery,
     toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
     toolbarGroup = toolbarData.toolbarFind("actions4"); 


     toolbarGroup.controls.push( {
         type: "BUTTON",
         label: "My Button",    
         action: "my-action",
         hot: true
     });

    config.toolbarData = toolbarData;

     config.initActions = function( actions ) {     
         actions.add( {
         name: "my-action",
         label: "My Action",
         action: function(event, focusElement) {
             javascript:apex.navigation.dialog('f?p=&APP_ID.:2:&SESSION.');
         }
      } );

   }
   return config;
}

When I run the page and click the button I get an error in the console:

Error in action for 'my-action'. TypeError: Cannot read property 'dialogClass' of undefined

How can I fix it?

Answer 1

If you look at the JavaScript documentation, you have to provide additional parameters to apex.navigation.dialog function:

https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/apex.navigation.html#.fn:dialog

    apex.navigation.dialog(
      url,
      {
        title: 'Orders',
        height: '480',
        width: '800',
        modal: true,
        resizable: true
      },
      'a-Dialog--uiDialog',
      $('#mybutton_static_id')
    );