🚀 Enhancing UX in Oracle APEX: Custom Modal Loader with Duplicate-Submit Protection

Posted by on

  

 

When building Oracle APEX applications, one of the common UX issues developers encounter is duplicate submissions. Users often click a submit button multiple times, especially when backend processes are slow or the feedback is unclear. This can lead to data inconsistencies, repeated actions, or errors in the application.

In this blog, I’ll walk you through how to implement a custom modal-style loader that not only improves user experience but also prevents accidental duplicate submissions.


Why Duplicate Submits Happen

  1. Slow backend processes

    • Complex PL/SQL operations, integrations with external systems, or heavy reports can take a few seconds or more to complete.

    • During this time, users may think the application is unresponsive and click the submit button again.

  2. APEX default spinner limitations

    • Oracle APEX provides a small spinner as feedback for page submits or AJAX calls.

    • However, it often doesn’t block interaction, so users can still click buttons or trigger actions multiple times.

  3. Dynamic buttons and AJAX calls

    • Modern applications frequently use buttons that are dynamically generated or processes that run via AJAX.

    • Users can inadvertently trigger multiple calls because the default spinner does not cover all scenarios.


The Solution: Custom Modal-Style Loader

To address this, I implemented a custom modal loader that:

  • Appears immediately on page load

  • Shows for any button click, page submit, or AJAX process

  • Blocks user interaction while processing

  • Replaces the APEX default spinner

  • Provides custom messages and styling for clarity

This approach ensures that users see a clear visual cue while the application is processing, and cannot click buttons repeatedly.


Demo Video:





Step 1: Add Loader HTML

Place this in Page 0 (Static Content Region) so it applies globally:



Step 2: Add CSS

This styles the loader as a centered modal dialog with a dark theme:




Step 3: Add JavaScript

This ensures the loader works for page load, all buttons, and AJAX processes:


Benefits of This Approach

  • Prevents duplicate submissions → users cannot accidentally click multiple times.

  • Improves UX → visual feedback during slow processes reassures users.

  • Global and reusable → works on all pages, buttons, and AJAX calls without manual attachment.

  • Customizable → text, colors, and style can be tailored to your app.

  • Blocks interaction safely → prevents inconsistent data and errors.

Conclusion

A simple modal loader can dramatically improve user experience in Oracle APEX applications, especially when dealing with slow processes or dynamic buttons. By replacing the default spinner and preventing duplicate submissions, your app becomes more professional, reliable, and user-friendly.



Comments

Post a Comment