Closing Non-Chained Modal Drawers Using Breadcrumbs in APEX

When building drill down interfaces in Oracle APEX, non-chained modal drawers are one way to display hierarchical data. However, requiring users to manually close each drawer one by one to return to a previous step can lead to unnecessary clicks. Here is one approach to using custom URL actions and breadcrumbs to close multiple non-chained drawer pages at once.

In my example, I have 4 drawer pages to drill down into. Because the drawers are not chained, each new drawer opens on top of the previous one. If a user drills down to the last drawer, they can easily close the previous drawers directly from the breadcrumb.

You can use an existing breadcrumb for this, but in my example, I created a totally new breadcrumb just for my drawers.

Creating the Breadcrumb

Navigate to Application Shared Components -> Breadcrumbs and click Create Breadcrumb.

Give a name to the breadcrumb and click Create.

Click New Entry.

• Set Page to the page number where you open the first drawer page.
• Give it a Short Name.
• Change Target is a to URL.
• Enter the following into URL Target:

#action$go-to-home?close-step-4&close-step-3=true&close-step-2=true&close-step-1=true

URL Target Breakdown:

• #action$ : This prefix indicates the action is triggered via the URL.
• go-to-home : This is the name of the action being triggered. This needs to be different for each breadcrumb entry.
• ?close-step-4&close-step-3=true... : These are URL parameters passed along with the action.
  The parameter values do not matter, parameter names indicate which drawers need to be closed. It might be clearer to use parameter names like close-page-<page number>=true.

Click Create and Create Another.

Adding Child Breadcrumb Entries

• Set Page to the page number of the first drawer page.
• For Parent Entry, select the breadcrumb entry created previously.
• Give it a Short Name.
• Change Target is a to URL.
• Enter the following into URL Target:

#action$go-to-step-1?close-step-4&close-step-3=true&close-step-2=true

In the URL Target, give a different action name and remove the parameter name indicating the closing of the drawer page associated with this breadcrumb entry. In this example, it was &close-step-1=true.

Click Create and Create Another.

Repeat the above steps similarly by setting the correct Page, Parent Entry, Short Name, and URL Target, except on the last child breadcrumb entry, set Target is a to - No Target -.

Adding the Breadcrumb Region to Drawer Pages

Ensure the newly created custom breadcrumb is displayed on each of the drawer pages.

Create a new region in the Slot Dialog Header and set the Type to Breadcrumb.

Under the region's Source properties, select your custom Breadcrumb.

Repeat this step for all drawer pages so the user has a consistent navigation experience as they drill down.

Configuring the First Drawer Page

Edit your first drawer page and add the following JavaScript to Execute When Page Loads:

/* Register a custom action triggered by the breadcrumb URL. */
apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    /* Close this drawer and pass the URL parameters (args) to the parent page. */
    apex.navigation.dialog.close( true, args );
  }
}]);

The name parameter is the breadcrumb entry URL action name. The action closes the drawer and passes the URL parameters as event data.

Create a Dynamic Action:

• Event: Dialog Close
• Selection Type: Region
• Region: <Select the region name where the link or button opens the next drawer page>

Edit the True Event:

• Action: Close Dialog
• Client-side Condition -> Type: JavaScript Expression
• JavaScript Expression:

/* Check if the closed dialog passed a 'close-step-1' parameter in event data. */
this.data.hasOwnProperty( "close-step-1" );

Configuring Subsequent Drawer Pages

Edit the next drawer page and add this JavaScript to Execute When Page Loads:

apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-1",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
}]);

Here we similarly add an action for the next breadcrumb entry.

Create a Dynamic Action:

• Event: Dialog Close
• Selection Type: Region
• Region: <Select the region name where the link or button opens the next drawer page>

Edit the True Event:

• Action: Execute JavaScript Code
• Code:

apex.navigation.dialog.close( true, this.data );

• Client-side Condition -> Type: JavaScript Expression
• JavaScript Expression:

this.data.hasOwnProperty( "close-step-2" );

Repeat the above steps similarly, adding actions to the page's JavaScript Execute When Page Loads and creating corresponding dynamic actions for the other drawer pages. Note that on the very last drawer page, you do not need to create a dynamic action.

Here is how the last drawer page JavaScript Execute When Page Loads looks:

apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-1",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-2",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-3",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
}]);

Conclusion

By implementing this custom breadcrumb and dynamic action logic, you give your users a seamless way to navigate out of deep drill-down paths without endless clicking. See working example in action.