🚀Make Your APEX App Smarter with User Preferences

-

🚩Introduction 

  • In real-world Oracle APEX applications, delivering a personalized user experience is essential for improving usability and efficiency. Different users often have different preference - such as the number of rows displayed in a report, default filter values, or UI settings like theme and layout. Instead of forcing all users to work with the same defaults, Oracle APEX provides a built-in mechanism called User Preferences to store and retrieve user-specific settings.

  • User preferences allow developers to save small pieces of information for each user and reuse them across sessions. This helps create applications that feel more dynamic and tailored without requiring complex database designs. By leveraging user preferences, developers can significantly enhance user satisfaction while keeping the application logic simple and maintainable.

📑 Why This Approach Is Needed

In Oracle APEX applications, users interact with the system in different ways based on their roles, habits, and requirements. A one-size-fits-all interface often leads to inefficiency and a poor user experience.

Using user preferences becomes important when:

  • Users want to customize how much data they see (e.g., rows per page)

  • Default values in forms should be remembered for each user

  • Filters and report settings need to persist across sessions

  • UI settings like theme, layout, or language should be user-specific

  • Applications need to provide a personalized experience without extra tables

This approach ensures flexibility, reduces repetitive user actions, and improves overall usability.

⚙️ What are User Preferences?

User preferences in Oracle APEX are key–value pairs stored for each user. These values are saved internally by APEX and can be accessed anytime during a session or even across sessions.

Each preference includes:

  • User Name
  • Preference Name
  • Preference Value

These preferences are lightweight and ideal for storing small pieces of user-specific data.

👉 Use Case: Personalizing UI Using User Preferences

In Oracle APEX, user preferences help store individual user settings like report rows, filters, or defaults. The application can then use these values to adjust the UI for each user, providing a more personalized and efficient experience.

In this blog, we will see how to capture and store the theme preference (Dark Mode / Light Mode) from the user using the user preference concept in Oracle APEX.

Step 1: 

In the page designer, create a region of type static content and change the slot position to Breadcrumb bar. Create one button under this region and change the slot position to Next and give the static id for the button BTN_THEME. This is just to demonstrate the concept, you can design in your own way while doing the hands on.

 Step 2: 

Create one page item and select the type as Hidden. We going to store the user preference value either Dark Mode / Light Mode with in this page item. 

Step 3: 

Now create the dynamic action for the button of type Click event and create the true action of type Execute Javascript Code and call the following javascript function.

switchTheme();


Next create another true action of type Execute Server-side Code and store the user preference value using the apex_util package.

//Store the User Preference value using SET_PREFERENCE

APEX_UTIL.SET_PREFERENCE(
  p_preference => 'USER_PREF', -- Your own name for refering the value
  p_value      => :P35_USER_PREF,  -- Hidden Page item
  p_user       => :APP_USER
); 

The User Preference can be stored usign the APEX_UTIL.SET_PREFERENCE  built in package. In this we are using three parameters, p_preference is used to refer the value stored. It acts as the key to access the value stored. You can name that in your own way according to your requirement. The value should be given in the p_value parameter,  In our case we are storing the value in the hidden page item. 
The user preference is stored based on the user, so we need to provide the user to whom this preference value should be stored, so we are passing the user value usign the APP_USER in p_user parameter.

Step 4: 

Now while the page is loading at the initial stage, we need to retrieve the user preference and we need to set the theme. To do this, create the process in the pre-rendering and copy the following code. 

 :P35_USER_PREF := APEX_UTIL.GET_PREFERENCE(      
                       p_preference => 'USER_PREF', 
                       p_user       => :APP_USER  
                     );

we are using the APEX_UTIL.GET_PREFERENCE package to retrieve the user preference value  and storing the value in the Hidden page item.

Step 5: 

Now as a final step, we need to add the required CSS and javascript code, to switch the themes dynamically. Copy and paste the below javascript code in the page Function and Global Variable Declaration section and CSS code in the Inline CSS section.

//Function and Global Declaration Section 

function applyTheme(theme) {
    var btn = document.getElementById("BTN_THEME"); // Static ID of Button
    var icon = btn.querySelector("span.t-Icon");

    if (theme === "dark-mode") {
        document.body.classList.add("dark-mode");
        icon.classList.remove("fa-moon-o");
        icon.classList.add("fa-sun-o");
    } else {
        document.body.classList.remove("dark-mode");
        icon.classList.remove("fa-sun-o");
        icon.classList.add("fa-moon-o");
    }

    apex.item("P35_USER_PREF").setValue(theme);
}

function switchTheme() {
    var currentTheme = document.body.classList.contains("dark-mode") ? "dark-mode" : "light-mode";
    var newTheme = (currentTheme === "dark-mode") ? "light-mode" : "dark-mode";
    applyTheme(newTheme);
}

document.addEventListener("DOMContentLoaded", function() {
    var userPref = apex.item("P35_USER_PREF").getValue();
    
    if (userPref === "dark-mode" || userPref === "light-mode") {
        applyTheme(userPref);
    } else {
        var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
        applyTheme(prefersDark ? "dark-mode" : "light-mode");
    }
});


        
/* Inline CSS Section */

/* Default (Light Theme) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: hsl(210, 100%, 40%);
  --btn-bg-color: hsl(210, 100%, 40%);
  --btn-text-color: #ffffff;       
}

/* Dark Theme */
.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
  --primary-color: #4dabf7; 
  --btn-bg-color: #1e1e1e;
  --btn-text-color: #ffffff; 
}

/* Apply variables */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--primary-color);
}

.t-HeroRegion {
  background-color: #e6e6e6;
}
 
#BTN_THEME {
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color);
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  opacity: 0.85;
}

Step 6: 

Now save and run the page, you will see the button rendered in the page, clicking on the page, it will toggle the theme between light / dark mode and stores the value. Once when you logged out and login again the stored theme will be retrieved and theme will be set respectively.


🔥 Conclusion

Thus, in Oracle APEX, we can efficiently capture and store user specific settings using the APEX_UTIL.GET_PREFERENCE and APEX_UTIL.SET_PREFERENCE APIs without relying on any external plugins. This approach allows us to store preferences such as theme selection (dark/light mode) at the user level and retrieve them seamlessly across sessions. This can deliver a personalized user experience while keeping the implementation simple, maintainable, and fully integrated within the APEX framework.

Comments

Post a Comment

Popular posts from this blog

🔍 Extending Smart Search Filter for Multiple Regions

-
Image
🚩Introduction  In Oracle APEX, the Smart Search filter is a convenient feature that allows users to quickly search data in a Classic Report or Cards region without writing custom code. However, this functionality is limited to a single region , which can be restrictive when a page contains multiple regions that should respond to the same search input. In this tutorial, you will learn how to extend the Smart Search filter to work with multiple regions on the same page . We will implement a solution that allows one Smart Search input to drive filtering across multiple Classic Report ,Cards regions etc. By the end of this tutorial, you’ll have a clear, reusable approach for coordinating search behavior across regions, improving both usability and consistency in your Oracle APEX applications without breaking the declarative nature of APEX. 📑 Why Extending the Smart Search Filter Is Needed The built-in Smart Search filter in Oracle APEX works well when a page contains a single sear...
Read more

💡 Designing Dynamic QuickPicks in Oracle APEX

-
Image
🚩Introduction  Oracle APEX provides Quick Picks as a convenient way to allow users to populate page items with predefined values using a single click. While static Quick Picks are useful, real-world applications often require these values to be generated dynamically based on business rules, user roles, or underlying data. This blog explores how to implement Dynamic Quick Picks in Oracle APEX page items , enabling developers to build more intelligent, flexible, and user-friendly forms by driving Quick Pick values directly from database queries and runtime logic.  📑 Why Dynamic Quick Picks Are Needed   Static Quick Picks in Oracle APEX are useful for simple filtering, but Dynamic Quick Picks become essential when: Filter values must be generated at runtime based on current data, user role, or context Applications require data-driven filters instead of hardcoded values The same Quick Picks must adapt across multiple pages or regions Filter options depend ...
Read more

📌Track Active Tab switch in Region Display Selector without any plugins

-
Image
🚩Introduction  In Oracle APEX applications, Region Display Selector components helps to organize multiple regions efficiently. However, APEX does not provide a built-in declarative option to detect which tab is active when users switch between them, making it challenging to trigger conditional logic based on tab selection. This can be solved by creating the custom dyanamic action to capture the tab change. This approach enables dynamic actions like refreshing regions or executing custom logic whenever a tab becomes active, without requiring any plugins. 📑Why It is Essential to Track Tab Selection in Region Display Selector In APEX applications, pages often organize multiple regions under a Region Display Selector to separate content like Details, History, or Reports. While this improves layout, users actions on different tabs often require specific logic to run, such as refreshing a region, loading dynamic content, or updating page items. Without capturing which tab is active, de...
Read more