Come costruire finestre modali in Oracle APEX

In questa articolo ti mostrerò come puoi creare in Oracle APEX finestre modali o dialog form, ovvero finestre costruite all’interno di una pagina APEX che si sovrappongono al contenuto della pagina stessa, catturando dunque l’attenzione dell’utente che sta usando l’applicazione.

Queste finestre risultano perfette quando vuoi focalizzare l’attenzione dell’utente su un messaggio importante o una funzionalità specifica.

Non a caso, vengono utilizzate spesso quando vuoi chiedere all’utente una conferma, magari prima di eliminare un record dal database oppure avviare un programma che effettua operazioni delicate sui dati.

Come creare una finestre modale in un Interactive Report

Il primo metodo che voglio mostrarti è sicuramente quello più immediato.

Per creare una finestra modale possiamo usare la procedura guidata di creazione di un Interactive Report + Form che ho spiegato dettagliatamente in questo tutorial.

In questo caso, la finestra modale che viene creata serve per aggiornare i campi di un record di database.

• Accedi all’APP Builder e clicca Create Page
• Seleziona Form e poi l’opzione Report with Form
• Dopo aver inserito le proprietà principali del modulo (Report Type, Report Page Name e Form Page Name) seleziona la opzione Form Page Mode = Modal Dialog

• Inserisci l’Origine Dati

• Specifica la colonna Primary Key da utilizzare (o in alternativa seleziona l’opzione ROWID) e premi Create
• Alla fine della procedura dovresti vedere due nuove pagine della tua applicazione
  • Report Page (Normal)
  • Form Page (Modal)

Report Page

• Apri la definizione della pagina Report Page

• Seleziona il bottone CREATE

• Vai alle proprietà del Page Button dove puoi notare che l’Action è Redirect to Page in this Application
• La pagina target è la numero 4, ossia la nostra Form Page di tipo modale. Clicca sulla proprietà Target

• Le proprietà importanti da tenere a mente sono:
  • Page: indica la pagina di destinazione
  • Set Items: da qui puoi andare a specificare eventuali parametri da passare alla pagina di destinazione.

• Seleziona l’Interactive Report e vai in Attributes
• Vai alla sezione Link e clicca sulla proprietà Target

• In questo caso vengono passati dei parametri alla Form Page
  • P4_ID è il Page Item della Form Page su cui va scritto un valore
  • ID è il Page Item della Report Page da cui deve essere letto il valore

• Seleziona sempre l’Interactive Report ed espandi il nodo Dynamic Action

• Come puoi notare, APEX ha creato automaticamente una Dynamic Action che scatta all’evento Close Dialog e che aggiorna l’Interactive Report.

• Questo garantisce che tutte le volte che modifichi un record tramite una Form Page, alla chiusura della finestra di dialogo i dati nel report vengono aggiornati automaticamente.

Form Page

• Apri la definizione della pagina Form Page

• Seleziona il bottone CANCEL.

• Come puoi notare il sistema ha creato una Dynamic Action che implementa l’azione Cancel Dialog

• Clicca su Processing

• Seleziona il Processo Close Dialog

Come creare una finestra di dialogo modale (Confirm Dialog)

Costruire manualmente una finestra modale non è difficile: proviamo a creare insieme una finestra di conferma (Dialog Form).

• Accedi all’APP Builder e crea una Blank Page
• Seleziona la proprietà Page Mode = Modal Dialog e premi Next

• Seleziona l’opzione Do not associate this page with a navigation menu entry e premi Next

• Premi Create Page
• Apri la definizione della Dialog Form e crea una nuova Page Region di nome Message

• Proprietà della Page Region
  • Type: Static Content
  • Text: inserisci il messaggio che preferisci

• Vai alla proprietà Appearance e seleziona il template Blank with Attributes

• Crea una nuova Page Region di nome Buttons

• Vai in Appearance > Template e seleziona il template Buttons Container

• Vai in Template Options e seleziona le seguenti proprietà

• Crea due Page Buttons
  • Cancel
  • Confirm

• Se vuoi puoi allineare a sinistra il bottone Cancel e a destra il bottone Confirm usando la proprietà Horizontal Alignment

• Seleziona il bottone Cancel e crea una Dynamic Action di tipo Cancel Dialog

• Proprietà dell’Action

• Seleziona il bottone Confirm e verifica che siano impostate queste proprietà
  • Action: Submit Page
  • Execute Validation: Yes

• Vai in Page Processes e crea due nuovi processi
  • Execute Confirm Action: in questo Process andrai ad implementare le istruzioni che desideri vengano eseguite se l’utente preme il bottone Confirm
  • Close Dialog: chiude la Dialog Form una volta che il processo Execute Confirm Action è completato

Quello che rimane da fare è richiamare la dialog page dalla pagina principale

• Accedi alla APP Builder e seleziona la Page dalla quale deve essere aperta la Dialog Page
• Crea il componente (un Page Button oppure un Page Link, dipende dalle tue esigenze) che deve scatenare l’apertura della Dialog Form

• Vai in Behavior > Action e seleziona l’opzione Redirect to Page in this Application
• Clicca sulla proprietà Target

• Specifica la Dialog Form che deve essere aperta. Se necessario inserisci eventuali parametri che devono essere passati alla Dialog Form

• Avvia la Page Preview e verifica che la Dialog Form funzioni come ti aspetti

Come personalizzare una finestra modale

Completiamo questo tutorial con qualche trucco per personalizzare una pagina modale.

• Seleziona la Page Root della pagina

• Vai alle in Appearance e seleziona il template Modal Dialog

• Seleziona l’opzione Stretch to Fit Window per far si che la pagina modali si adatti alle dimensioni della finestra del browser

• Oppure, vai nella sezione Dialog per definire delle dimensioni specifiche