Oracle APEX Navigation Badges

Matt MulvaneyMatt Mulvaney
3 min read

I recently released this APEX Plugin which enables you to add Badges/Counters to practically anywhere in APEX.

On release, two different people asked me the same question:

Can it be added to the Side Navigation Menu?

The answer is yes, and this is how you do it - although there is a native method.

Pretius APEX Badge Plugin Method

  1. Create a Page 0 Dynamic Action like this:

  2. Add an Execute JavaScript Code True Action

     /* 
      * Pre-render all tree nodes to the DOM without expanding them
      * This forces the TreeView to render the HTML for all nodes (including collapsed submenus)
      * while maintaining their current expanded/collapsed state.
      */
     $("#t_TreeNav").treeView("find", {
         depth: -1,  // Search through all levels
         findAll: true,
         match: function() {
             return true;  // Match all nodes
         }
     });
    
  3. Create a Pretius APEX Badge [Plug-In] True Action, which must be after the one above, with the following settings:

     $(".t-Body-nav").find(".a-TreeView-label").filter(function() {
         return $(this).text() === "Employees";
     })
    
  4. It should now look like this:

  5. Add some CSS to Theme Roller. Choose either one of these:

    Option 1: Make only Sub-menu Badges smaller

     /* Smaller Padding for Sub-Menus */
     .t-Body-nav .a-TreeView-label[aria-level]:not([aria-level="1"]) .notification-badge {
       padding: 0.1rem 0.25rem;
     }
    

    Option 2: Make all Navigation Badges Smaller

     .t-Body-nav .a-TreeView-label .notification-badge {
       padding: 0.1rem 0.25rem;
     }
    

    Still not looking good? Try playing around with the padding numbers (above) or Vertical Position attribute in the Plugin Attributes

  6. Run the page:

Tip: If, for example, you add an Employee through a Modal/Drawer and Refresh the IR. Then the IR shows 15 Employees, but your Navigation Menu still says 14. You can refresh the Badge on Dialog Close using the JavaScript below.

apex.event.trigger(window,'theme42ready');

Native APEX Badge Method

  1. Create hidden item on Page 0 named P0_DEPT_COUNT

  2. Create a Shared Components > Application Computation like this:

  3. Change the Navigation List Entry to a label like this - the square brackets are important here:

     Departments [&P0_DEPT_COUNT.]
    
  4. Run the page:

Conclusion

Here are the two approaches side by side.

The Amber is the Plugin method and the Blue is the Native approach

There are Pros and Cons of each method

Pretius APEX Badge Plugin Method

Pros

  • Can add CSS styles, colors, etc

  • Is refreshable with apex.event.trigger(window,'theme42ready');

Cons

  • More complex configuration & requires an amount of JavaScript

  • Slower to render as its a Dynamic Action/AJAX Callback

Native APEX Badge Method

Pros

  • Simpler Configuration. No JS or CSS (although needs page zero items & application computations)

  • Faster to render as its rendered on page show

Cons

  • Cannot add CSS styles, colors, etc

  • Not refreshable without reloading the page

ENJOY!

What’s the picture? It’s the stepping stones at Bolton Abbey. Big jump at the end! - Visit Yorkshire!

1
Subscribe to my newsletter

Read articles from Matt Mulvaney directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Matt Mulvaney
Matt Mulvaney

With around 20 years on the job, Matt is one of the most experienced software developers at Pretius. He likes meeting new people, traveling to conferences, and working on different projects. He’s also a big sports fan (regularly watches Leeds United, Formula 1, and boxing), and not just as a spectator – he often starts his days on a mountain bike, to tune his mind.