Using Javascript for a spinner in APEX

 In Oracle APEX applications, providing users with clear feedback during long-running operations is essential to ensure a smooth experience. One common approach is to display a spinner to indicate that the application is processing a request. While APEX provides built-in options, using JavaScript gives you more control and flexibility over when and how the spinner appears. By combining a bit of custom HTML, CSS, and JavaScript, you can seamlessly integrate a lightweight spinner that can be shown or hidden based on specific user actions or events within the application.

In Oracle APEX, you can use JavaScript to create and control a spinner to indicate to users that a process is underway, such as during data loading or AJAX calls. This is especially useful when you want more precise control than what is offered by the built-in APEX spinner or Dynamic Actions. Here's how to implement a custom spinner using JavaScript:

1. Add the Spinner HTML to the Page
Go to the Page Designer, and in the HTML Header or in a Static Region, insert the following HTML snippet:

<div id="customSpinner" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000;">
  <div class="spinner"></div>
</div>

You can also add a simple CSS spinner style in the Inline CSS section:

.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. Show or Hide the Spinner Using JavaScript
Use the following JavaScript functions to control visibility:

function showSpinner() {
  document.getElementById('customSpinner').style.display = 'block';
}

function hideSpinner() {
  document.getElementById('customSpinner').style.display = 'none';
}

3. Trigger the Spinner in a Button Click
If you have a button that starts a process (e.g., AJAX call or page submit), add the following call to the "Execute JavaScript Code" step in a Dynamic Action:

showSpinner();

Then, hide the spinner when the process completes using:

hideSpinner();

4. Use It in AJAX Callbacks
If you are running apex.server.process or other asynchronous actions, call showSpinner() before starting the call and hideSpinner() in the .done() or .always() callback.

Example:

showSpinner();
apex.server.process("MY_PROCESS", {
  pageItems: "#P1_ITEM1, #P1_ITEM2"
}, {
  success: function(data) {
    // handle success
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // handle error
  },
  complete: function() {
    hideSpinner();
  }
});

This approach gives you complete control over when the spinner appears and disappears, and allows full customization of the appearance and behavior using your own styles and JavaScript.

Adding a Spinner via JavaScript to an Oracle APEX Page

A spinner (loading indicator) can be added to an Oracle APEX page using JavaScript. This allows you to display the spinner when an action (such as a button click or AJAX call) starts and hide it when the action completes.

Steps to Add a Spinner Using JavaScript

1. Add a Spinner to the Page

1. Open Oracle APEX Page Designer.

2. In the Rendering pane, under Regions, add a new Static Content region.

3. Set the Static ID of the region to spinnerContainer.

4. In the Region Source, add the following HTML:

<div id="spinnerContainer" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">

    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">

        <div class="spinner"></div>

    </div>

</div>

---

2. Add CSS for Spinner Animation

1. In Page Designer, go to Page Attributes > Inline CSS.

2. Add the following CSS code:

/* Spinner Animation */

.spinner {

    width: 50px;

    height: 50px;

    border: 6px solid #f3f3f3;

    border-top: 6px solid #3498db;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

3. Create JavaScript Functions to Show and Hide the Spinner

1. In Page Designer, go to Page Attributes > Inline JavaScript (Function and Global Variable Declaration).

2. Add the following JavaScript code:

function showSpinner() {

    document.getElementById("spinnerContainer").style.display = "block";

}

function hideSpinner() {

    document.getElementById("spinnerContainer").style.display = "none";

}

4. Show Spinner on Button Click

1. Select the Button that should trigger the spinner (e.g., "Submit").

2. In Properties, scroll to the Advanced section.

3. In Attributes, add:

onclick="showSpinner();"

5. Hide Spinner When AJAX Process Completes

If your page has a process running via AJAX callback, you can modify it to hide the spinner once it completes.

1. Open the AJAX Callback Process.

2. Modify the JavaScript Code that calls it:

showSpinner();

3. 
   

apex.server.process("MY_PROCESS", {

    pageItems: "#P1_ITEM"

}, {

    dataType: "text",

    success: function(data) {

        hideSpinner();

    },

    error: function() {

        hideSpinner();

    }

});

This method allows you to dynamically show and hide a loading spinner using JavaScript. The spinner appears when a user initiates an action, and it disappears once the process completes, improving user experience by providing visual feedback during processing.

Option 3 EXAMPLE -Using JavaScript

Material APEX overwrites apex.util.showSpinner() with the same arguments, so you can use the same code as you would using Universal Theme.

Examples

// adds a spinner to the body

spinner.remove();

var spinner = apex.util.showSpinner();

// adds a spinner to #some-region

var spinner = apex.util.showSpinner("#some-region");

spinner.remove();

// adds a big spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"big"});

spinner.remove();

// adds a big blue spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"big",color:"blue"})

spinner.remove();

// adds a small yellow spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"small",color:"yellow"}); 

spinner.remove();

Using JavaScript to implement a spinner in Oracle APEX helps developers achieve a more responsive and user-friendly interface without relying solely on built-in components. Whether triggered by a button click, page submission, or AJAX callback, this method keeps users informed and engaged. With minimal code and full styling control, JavaScript-based spinners are a simple yet powerful enhancement to any APEX application.

How do I Use Dynamic Actions for a Spinner In APEX

 In Oracle APEX, providing users with visual feedback during long-running operations is essential for a smooth user experience. One effective method is to use a spinner animation to indicate that a process is in progress. By combining a simple CSS-based spinner with Dynamic Actions, you can show and hide the spinner precisely when needed—such as before a PL/SQL process begins and after it completes. This approach helps prevent multiple submissions, reduces user confusion, and adds a professional touch to your application.

In Oracle APEX, using a spinner through Dynamic Actions is a great way to give users feedback while a process is running. This is useful when you want to show a loading animation during operations such as submitting a form, invoking a PL/SQL process, or refreshing a region. You can control when the spinner appears and disappears using simple Dynamic Action events and CSS.

To implement a spinner in APEX using Dynamic Actions, follow these steps:

1. Create a Spinner Region:
   Go to the Page Designer. Add a new Static Content region at the top of your page. In the region's HTML, add this spinner markup:

   <div id="mySpinner" style="display:none;">
     <div class="spinner" style="margin:auto;"></div>
   </div>
   

   Then add this CSS in Inline CSS (under Page > CSS > Inline):

   .spinner {
     border: 6px solid #f3f3f3;
     border-top: 6px solid #3498db;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   

2. Create a Dynamic Action to Show the Spinner:
   Select the button (e.g., a Submit button).
   Under Dynamic Actions, create a new Dynamic Action:

   • Name: Show Spinner

   • Event: Click

   • Selection Type: Button

   • Button: Select your button

   • Action: Execute JavaScript Code

   • Code:

     $('#mySpinner').show();
     

3. Hide the Spinner After Process Completion:
   To automatically hide the spinner when the process finishes, create another Dynamic Action:

   • Event: After Refresh, After Submit, or use Page Load if using AJAX

   • Action: Execute JavaScript Code

   • Code:

     $('#mySpinner').hide();
     

4. Optional – Add Delay:
   If needed, you can add a delay or timeout before hiding the spinner, using:

   setTimeout(function(){
     $('#mySpinner').hide();
   }, 3000); // hides after 3 seconds
   

This approach allows you to control visual indicators precisely when needed, improving user experience by signaling that something is happening behind the scenes. The spinner is simple, reusable, and easy to customize for color, size, and position.

Adding a Spinner via Dynamic Actions in Oracle APEX

A spinner (loading indicator) can be added to an Oracle APEX page using Dynamic Actions. This allows you to display the spinner when an action (like a button click or page load) occurs and hide it when the action completes.

Steps to Add a Spinner Using Dynamic Actions

1. Add a Spinner to Your Page

1. Open Oracle APEX Page Designer.

2. In the Rendering pane, under Regions, add a new Static Content region.

3. Set the Static ID of the region to spinnerContainer.

4. In the Region Source, add the following HTML:

<div id="spinnerContainer" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">

    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">

        <div class="spinner"></div>

    </div>

</div>

2. Add CSS for Spinner Animation

1. In Page Designer, go to Page Attributes > Inline CSS.

2. Add the following CSS code:

/* Spinner Animation */

.spinner {

    width: 50px;

    height: 50px;

    border: 6px solid #f3f3f3;

    border-top: 6px solid #3498db;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

3. Create Dynamic Actions to Show and Hide the Spinner

Dynamic Action 1: Show Spinner on Button Click

1. Select the Button that triggers the action (e.g., "Submit").

2. In Dynamic Actions, click Create and set:

• Event: Click

• Selection Type: Button

• Button: Choose the button (e.g., "Submit")

3. Under True Actions, click Add Action and select Execute JavaScript Code.

4. Add this JavaScript code:

5. document.getElementById("spinnerContainer").style.display = "block";

6. Click OK and save changes.

Dynamic Action 2: Hide Spinner After Process Completion

1. In Dynamic Actions, create a new action.

2. Set:

• Event: Custom Event

• Custom Event Name: apexafterclosedialog (or any custom event your process triggers)

• Selection Type: JavaScript Expression

• JavaScript Expression: document

3. Under True Actions, click Add Action and select Execute JavaScript Code.

4. Add this JavaScript code:

5. document.getElementById("spinnerContainer").style.display = "none";

6. Click OK and save changes.

Now, whenever the button is clicked, the spinner will appear. Once the process completes (or when the page refreshes), the spinner will disappear. This method improves the user experience by visually indicating that the system is processing a request.

Option 2 EXAMPLE- Using Dynamic Actions

Two Dynamic Actions are provided with the theme.

• Material APEX - Show Spinner has 3 settings:

• Affected Element: Where the spinner will be. If empty, the spinner will be on the body element.

• Size: Big or small. If empty, the spinner will have a standard size.

• Color: Red, Blue, Yellow, Green. If empty, the spinner will circle these four colors.

• Material APEX - Remove Spinners removes all active spinners from the page.

Using Dynamic Actions to control a spinner gives you full control without writing complex code. With just a few clicks in the APEX builder, you can define when the spinner appears and disappears. Whether you're submitting a page, calling a web service, or running a background process, a well-timed spinner enhances user interaction and communicates progress clearly.