Skip to Main Content

Breadcrumb

Upgrading from v23.1 or older

As of v26.1.0 the internal name of this plug-in is UNITEDCODES_SPINNER_ACTIONS. Up to and including v23.1 it was UC_SPINNER_ACTIONS.

APEX identifies a plug-in by its internal name, so a new version does not replace an older installation:

  • On APEX 26.1 and later the import stops with ORA-00001: unique constraint (APEX_260100.WWV_FLOW_PLUGIN_APEXLANG_UK) violated. Nothing is installed and nothing in your application is changed.
  • On APEX 24.2 and earlier the import adds a second plug-in instead of replacing the old one. Both are listed as UC - Spinner Actions, and your existing dynamic actions keep running the old version.

There are three ways to upgrade, described in UPGRADE.md in the download:

  • Delete and re-select - remove the old UC - Spinner Actions plug-in (internal name UC_SPINNER_ACTIONS), import the new version, then re-select the action UC - Spinner Actions in every dynamic action that used it.
  • Rename inside an application export - export the application, replace UC_SPINNER_ACTIONS with UNITEDCODES_SPINNER_ACTIONS, import it back. No dynamic action has to be edited, which makes this the option to pick when an application contains many of them.
  • Run both versions side by side - keep the old plug-in under a different name while you move dynamic actions over one at a time.

Whichever you choose, it is a one-time step: all later upgrades install over the previous version normally.

Examples

Add and Remove

You can add and remove a spinner using the "Show Spinner" and "Remove Spinner" actions. The positioning of the spinner is controlled by the element you will overlay e.g. a particular region or the whole page. You will specify the particular region using the "Affected Elements" attribute or leave it blank to apply it to the whole page.

 
 

Note: calling the "Show Spinner" action multiple times on the same element, without removing it first will not not stack the spinners on top of each other i.e. the plug-in makes sure that every element has maximum one instance.

With or without overlay

By setting the "Overlay" attribute to "On Element", the overlay will cover only the element specified in the "Affected Element" attribute. Setting it to "On Page", the whole viewport will be covered and the ability to scroll the page will be disabled.

Click on one of the buttons below to display a spinner with overlay on the region/page. Note: the spinner will be automatically removed after 3 seconds.

 
 

Note: you can use the "Overlay Color" and the "Overlay Opacity" attributes to adjust the display.

Spinner Types

Through the Spinner Type attribute, there are two ways to implement custom spinners in your application. Either choose one of the numerous predefined styles - Circle, Dual Ring, Ring, Ellipsis, Roller, Hourglass, Heart, Grid - or select the "Custom" option to add your own HTML and CSS. The predefined styles are based on loading.io/css.

Custom Spinner

Working with nested regions

Adding overlay to the affected region especially useful when it comes to more complex structures.

Level One

Level Two

Level Three

Showing additional text

Add text to your spinners to give more context or let the users know there is still something happening.

You can specifiy:

  • The text via a JavaScript function
  • The interval at which it should appear (like every 6 seconds)
  • The duration how long the text is visible (like for 3 seconds)

Example Static Text

function () {
  return "Processing can take a few minutes. Please don't leave the page.";
}

Example Dynamic Text

function () {
  const diff = new Date() - window.uc.daStartDate;
    
  const totalSeconds = Math.floor(diff / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `Running for ${minutes} minutes and ${seconds} seconds`;
}

FAQ

  • How to replace all spinners application wide?

    Create a dynamic action on the Global Page (Page O) and run this plug-in on Page Load, with the "Action" attribute set to "Convert Default".