Button with Spinner/Progress Indicator

-

In this blog I will be explaining, how to show a Button with Spinner/Progress Indicator in Oracle APEX.

In Oracle APEX, by default the spinner will be displayed on the page but in one of my requirements I had to display the spinner in a button instead of displaying it in the page. So I followed the below steps to achieve it.

1) Create a Region in the page,

2) Create a Button in the region. (In this example: P37_PROGRESS_BUTTON)

3) Add the class custom-button-spinner in the Appearance -> CSS Classes section of the button. 


4) Add the below code in the Execute When Page Loads section of the page.

$(document).on("click",".t-Button.custom-button-spinner",function(){
    $element = $(this);
    $element.addClass("apex_disabled");
    $element.find(".t-Button-label").append('<span aria-hidden="true" class="fa-spinner fa fa-anim-spin margin-left-sm js-custom-spinner"></span>');
});

Note: 

  • The above code uses the fa-spinner class to show the spinner.
  • fa-spinner can also be replaced with fa-refresh (or) fa-circle-o-notch to show the spinner in a different way.
  • When the button is clicked the button is automatically disabled until the page is reloaded. If this is not required, the line "$element.addClass("apex_disabled");" can be removed.
  • The class js-custom-spinner can be used to customize (change color, size etc..) of the spinner.
5) But this does not remove the default APEX spinner. It will still show when the button is clicked. To remove the default spinner add the below CSS code in the CSS -> Inline section of the page.
.u-Processing {
   display: none !important;
}
Note: The above code will remove the default APEX spinner for the entire page.



Click here for DEMO

Happy CODING !!!

Thank you :)

Comments

  1. StewJanuary 19, 2022 at 7:11 AM

    This looks very cool and if I'd seen this last week, I would have used it for an app. Thanks!

    ReplyDelete
  2. RASHIDJuly 20, 2024 at 3:12 AM

    hi dear i have problem to using this will u plz help?

    ReplyDelete

Post a Comment

Popular posts from this blog

Display and Edit CLOB Content in Oracle APEX

-
Image
In this post I will be explaining how to display  and edit a CLOB content in Oracle APEX.  Please follow the below steps: 1) Create a table T_EMPLOYEE CREATE TABLE T_EMPLOYEE ( EMP_ID NUMBER, EMP_NAME VARCHAR2(100), DESCRIPTION CLOB ); 2) Insert the required data into the T_EMPLOYEE table.                           3) Create a page in the application.  (In this example Page - 5) 4) Create another page with the Page Mode as Modal Dialog (In this example Page - 6)   5) Create a region and two items in Page - 6. The Items are:     P6_EMP_ID -> Type -> Hidden  (Value Protected: No)     P6_EMP_DESCRIPTION ->   Type  ->  Text Area   (or) Rich Text Editor 6) Now navigate back to Page - 5 and create a Region ( Type -> Interactive Report ) 7) Paste the below code in the Source -> SQL Query of the I...
Read more

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX

-
Image
In this blog I will be explaining how to restrict users from typing only numbers/decimal values in a Number/Text Item in Oracle APEX. 1) Create a Region .    2) Create an Item in the page (Type: Text Field or Number Field ). 3) To allow only Numbers, paste the below code in the Page ->  Execute When Page Loads Section . $("#P30_NUMBER_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; var charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; });   Note: Replace P30_NUMBER_FIELD_ITEM with your Item name. 4) To allow only Decimal values, paste the below code in the  Page  ->  Execute When Page Loads Section . $("#P30_DECIMAL_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; if ( event.which != 0 && (event.which < 48 || event.whic...
Read more

Copy the value of an Item to Clipboard in Oracle APEX

-
APEX does not provide an inbuilt functionality to copy the value of a page item to clipboard . Use my plug-in Copy To Clipboard to achieve or if it has to be achieved via code p lease follow the below steps :- For visible Items: 1) Create an  Item in the APEX page. (In this example the Item is P1_ITEM) 2) Create a button. (In this example the button is P1_COPY) 3) Create a Dynamic action          Event:  Click         Selection Type:  Button         Button:  P1_COPY 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*to select the text field*/ $("#P1_ITEM").select(); /*to copy the text inside the text field*/ document.execCommand("copy"); /*to show success message (Optional)*/ apex.message.showPageSuccess('Copied to Clipboard!'); For hidden Items: Step 1,2 and 3 i...
Read more