Skip to main content

Enhancing UX with Recently Visited Pages Navigation in APEX

 

In this solution, I leverage Oracle APEX data dictionary views particularly the workspace activity log to capture detailed navigation audit information for each user within a given application. 

This audit data includes which pages users visit, how frequently they access them, and their overall navigation patterns.

Using this information, I create a Dynamic List in Shared Components, which automatically generates entries based on the most recently accessed pages for the logged-in user. 

This list is then displayed on the Home page as a personalized dashboard.

The result is a dynamic, user-specific "Recently Used Pages" dashboard that updates in real time. 

Each user sees a tailored set of pages they frequently or recently visited, allowing them to quickly navigate back to their most relevant screens. 

This is especially valuable for APEX applications where users routinely work across many pages and need faster access without searching through lengthy menus.

Overall, this approach improves usability, reduces navigation time, and enhances productivity—making it particularly helpful for users who interact with multiple pages within a single APEX application.

Step 1: Create a new Dynamic List from Shared Components.

             Navigate to: Shared Components > Lists > Create > Dynamic.

Step 2: Choose SQL Query as the source option.

Step 3: Paste the following query:

SELECT 

null              AS c1_level,

PAGE_TITLE        AS c2_name_for_label,

'f?p=' || :APP_ID || ':' || PAGE_ID || ':' || :APP_SESSION AS c3_target_url,

null              AS c4_is_current,

CASE 

WHEN PAGE_ID = 10 THEN 'fa fa-id-card'

ELSE 'fa fa-check' -- if you want add more icons

END               AS c5_icon_name,

VIEW_CNT          AS c6_badge

FROM (

SELECT 

p.PAGE_TITLE,

p.PAGE_ID,

COUNT(*) AS VIEW_CNT

FROM APEX_WORKSPACE_ACTIVITY_LOG l

JOIN APEX_APPLICATION_PAGES p

ON p.APPLICATION_ID = l.APPLICATION_ID

   AND p.PAGE_ID        = l.PAGE_ID

WHERE l.APPLICATION_ID = :APP_ID

  AND l.VIEW_DATE      >= SYSDATE - 3

  AND l.APEX_USER      = UPPER(:APP_USER)

  AND p.PAGE_ID NOT IN (9999, 1, 39)

  AND p.PAGE_MODE = 'Normal'

GROUP BY p.PAGE_TITLE, p.PAGE_ID

ORDER BY VIEW_CNT DESC

)

WHERE ROWNUM < 15; -- Adjust the limit as needed for convenience

Step 4: Go to the Home Page and create a List Region (choose from the Region Type options) using the Content Block template. If you want a smaller region tile, use the template options—three sizes are available: Small, Medium, Large.

Step 5: Under the Source property of the region, select the Dynamic List you created.

Step 6: In the List Region Attributes section, APEX provides several appearance options such as Badge List, Cards, Tabs, etc.

Choose Cards and configure the following settings under Card Appearance:

General             – Use Template Defaults & Apply Theme Colors

Style                 – Featured

Icons                 – Display Icons

Layout              – 3 Columns (or any layout you prefer)

Body Text         – Hidden (we don't need additional content)

Icon Shape        – Circle

Animation         – Color Fill (Raise Card is also available)

Step 7: Run the application, navigate through a few pages, and return to the Home Page.

Your Recently Viewed Pages dashboard will now display automatically based on your activity.


Screenshot:-

Demo_Link

Comments

Post a Comment

Popular posts from this blog

Reusable JS Functions for Field Validation in Oracle APEX Forms

 These reusable JavaScript functions provide client-side validation for Oracle APEX forms, improving data accuracy before submission. They allow developers to enforce mandatory fields and ensure certain fields contain only numeric values . By using these functions, APEX forms become more user-friendly and robust , reducing the chance of invalid data entry. Step 1: Create a Static Content region on the Global Page using the Blank with Attributes template. Step 2: Paste the following code into the HTML Source section of the region. <script>     function validateInputField(inputFieldId, pageItemName, errorMessage) {         $(inputFieldId).focusout(function() {             var itemValue = apex.item(pageItemName).getValue();             apex.message.clearErrors(pageItemName);             if (!itemValue) {               ...
Post a Comment
Read more

Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake. In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications. Step 1: Create a Static Content region and set it to Blank with Content under the region attributes. Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function. function applyHolidayFormatterToDateItems(itemNames) {   const holidayList = [   ...
Post a Comment
Read more

Adding Custom Buttons to Oracle APEX Date Picker Footer (Set Start and End of Month)

In Oracle APEX, the built-in Date Picker is simple and functional — but sometimes, users need quick shortcuts for commonly used dates. For example, setting the first or last day of the current month with just one click can save time and reduce input errors. In this post, we’ll enhance the Oracle APEX Date Picker by adding two custom buttons — “Set Month Start” and “Set Month End” — directly inside the date picker footer. Using a small piece of jQuery code, you can seamlessly integrate these buttons without modifying the native APEX components. By the end of this guide, your Date Picker will not only look smarter but also provide a faster and more user-friendly experience.  ⚙️ This customization is created for learning purposes. Paste the below code on execute when page loads (js) apex.jQuery(document).on('focus', '#P20_START_DATE', function() {   var intervalId = setInterval(function() {     var $footer = apex.jQuery('.a-DatePicker-footer');     if ($f...
Post a Comment
Read more