Oracle APEX Navigation Badges


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
Create a Page 0 Dynamic Action like this:
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 } });
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"; })
It should now look like this:
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
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
Create hidden item on Page 0 named P0_DEPT_COUNT
Create a Shared Components > Application Computation like this:
Change the Navigation List Entry to a label like this - the square brackets are important here:
Departments [&P0_DEPT_COUNT.]
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!
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.