Uno spinner è un componente grafico che ha lo scopo di avvisare l’utente quando il sistema sta eseguendo una elaborazione in background come, ad esempio, una procedura PL-SQL.

Quando viene visualizzato uno spinner, chi sta utilizzando l’applicazione, sa che il sistema sta facendo qualcosa e, quindi, deve aspettare che l’elaborazione sia completa.

In questo breve tutorial voglio spiegarti come mostrare uno spinner usando la funzione JavaScript apex.util.showSpinner().

Come mostrare uno Spinner quando viene eseguita una Dynamic Action PL-SQL

Supponiamo che tu voglia eseguire del codice PL-SQL attraverso una Dynamic Action.

Esistono diverse opzioni, in questo tutorial te ne spiegherò 3.

STEP 1: crea una Action per mostrare lo Spinner

Se vuoi, puoi ancorare lo spinner ad una specifico oggetto (regione o item) della tua pagina. In questo caso la prima cosa da fare è impostare lo Static ID.

• Seleziona la regione su cui vuoi mostrare lo spinner

• Vai in Advanced ed inserisci uno Static ID

Adesso possiamo richiamare lo spinner dall’azione dinamica.

• Seleziona la Dynamic Action e configurala con 3 Actions.
• La prima e la terza Actions serviranno rispettivamente per avviare lo spinner e per disattivarlo
• La seconda Action eseguirà la logica di cui hai bisogno (ad esempio eseguire una procedura PLSQL)

• Inserisci la prima Action che serve per avviare lo spinner
  • Action Type: Execute JavaScript Code
  • Code: inserisci il codice seguente dove region_1 è lo Static ID dell’oggetto su cui deve essere mostrato lo spinner

var lSpinner$ = apex.util.showSpinner( $( "#region_1" ) );

• Il risultato che dovresti ottenere è il seguente

• Una seconda possibilità è sempre tramite la funzione apex.util.showSpinner in cui però non è specificato l’ID di una regione.

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

• In questo caso lo spinner viene mostrato al centro della pagina.

• Un’altra opzione, molto interessante, consiste nell’usare l’istruzione apex.widget.waitPopup();

 apex.widget.waitPopup();

• Usando questa funzione la pagina viene bloccata. In questo modo l’utente è obbligato ad aspettare che l’elaborazione sia completata.

STEP 2: crea una Action per eseguire la Procedura PL-SQL

• Inserisci la seconda Action, che deve contenere la logica di business che vuoi implementare.
• In questo esempio ho creato un semplice timer PL-SQL

STEP 3: crea una Action per rimuovere lo Spinner

• Crea l’ultima Action che serve per rimuovere lo spinner
  • Action Type: Execute JavaScript Code
  • Code: inserisci il codice seguente

$("#apex_wait_overlay").remove();
$(".u-Processing").remove();