Oracle Apex 20: How to Display a Spinner on Button Click Using JavaScript

Sometimes, when a button is clicked in an Oracle Apex application, it can take some time for the next page to load. During this time, users may think that the application is no longer working, resulting in frustration or confusion.

A simple solution to this problem is to display a spinner or a loading icon on the button click event. This gives users a visual indication that the application is processing their request and prevents them from clicking the button multiple times.

Step-by-Step Instructions

In this tutorial, we will show you how to display a spinner on button click using JavaScript in Oracle Apex 20.

1. Add a Button

First, we need to add a button to our page. Navigate to the page where you want to add the button and select the 'Button' component from the 'Regions' section.

2. Add a Dynamic Action

Next, we need to add a dynamic action to the button. Select the 'Dynamic Actions' section and press the 'Create' button.

3. Choose the Event

Choose the 'Click' event for the dynamic action.

4. Define the Action

Now, we'll define the action that we need to perform. Select 'Action' > 'Execute JavaScript Code'.

5. Write the JavaScript Code

Finally, we can write the JavaScript code that we need to execute. In this case, we will display a spinner or a loading icon when the button is clicked.

var spinner$ = apex.util.showSpinner();

This code will show a spinner on the page. You can customize the spinner by passing different arguments while calling the showSpinner() method.

You can also hide the spinner when the page is loaded by adding the following code to the 'Page Load' dynamic action:

apex.util.hideSpinner(spinner$);

6. Save and Run

Now that we have added the button and the dynamic action, we can save the page and run the application. When you click on the button, the spinner should be displayed.

Conclusion

In this tutorial, we showed you how to display a spinner or a loading icon on button click using JavaScript in Oracle Apex 20. This is a simple yet effective way to improve the user experience of your application. You can use this technique in many other scenarios to provide feedback to users when the application is processing their requests.

The code snippets mentioned above are written in JavaScript and can be used in the dynamic action in Oracle Apex 20. These snippets can be customized according to user requirements to improve the functionality of the application.