• Passa al contenuto principale
  • Passa alla barra laterale primaria
  • HOME
  • CHI SONO

APPin5Minuti

Come Creare Applicazioni Enterprise Low-Code

Impara a creare Applicazioni Aziendali grazie alle piattaforme di sviluppo Low-Code

Come costruire finestre modali in Oracle APEX

Ottobre 8, 2021

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.

IN QUESTO ARTICOLO

  • Come creare una finestre modale in un Interactive Report
    • Report Page
    • Form Page
  • Come creare una finestra di dialogo modale (Confirm Dialog)
  • Come personalizzare una finestra modale

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

TI POTREBBE INTERESSARE:

  • Product Configurator in Oracle APEX
  • Come migrare le applicazioni da Oracle Forms ad Oracle APEX
  • Come gestire i files su Object Storage da Oracle APEX
  • Come sviluppare applicazioni sicure con Oracle APEX
  • Come costruire Form Dinamiche in Oracle APEX (Dynamic Layout + APEX_ITEM)
  • Prevedere l'interesse di un cliente verso un prodotto o servizio con Oracle APEX e Machine Learning

oracle apex, ux

Interazioni del lettore

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Barra laterale primaria

BENVENUTO!

Il mio nome è Daniele Trasarti, autore di APPin5Minuti, il blog italiano che parla di piattaforme e applicazioni low-code.

Qui troverai tantissimi tutorial e risorse per imparare a sviluppare in pochissimo tempo bellissime applicazioni per gestire i dati ed i processi della tua azienda.

Pensi di non essere in grado? Perché non provi adesso a creare la tua prima applicazione in 5 minuti?

Fidati, non dovrai scrivere nemmeno una riga di codice! 

Seguimi sui social!

  • LinkedIn
  • Twitter

NEWSLETTER

Iscriviti anche tu per far parte della più grande community italiana di persone che amano sviluppare low-code!

api rest appsheet appsheet data sources appsheet views appsheet workflow bid data classic report cpq css document management system dynamic layout facebook flowform flows4apex flows for apex full stack development google google cloud google drive google workspace interactive grid interactive report javascript json linkedin list machine learning map microsoft microsoft access mobile oml oracle oracle apex oracle cloud oracle rest data service ords pl-sq PL-SQL power apps security social login theme roller ux web service

Commenti recenti

  • Giovanni su 15 Cose che avrei voluto sapere quando ho iniziato ad usare Oracle APEX
  • Daniele Trasarti su Document Management System in Oracle APEX
  • chadwick su Oracle APEX: Workflow Manager con Flows for APEX
  • Giulio su Document Management System in Oracle APEX
  • Daniele Trasarti su Come creare un servizio REST in Oracle APEX
  • fabio su Come creare un servizio REST in Oracle APEX
  • Daniele Trasarti su Applicazione di Prenotazione Appuntamenti in Oracle APEX
  • Francesca su Applicazione di Prenotazione Appuntamenti in Oracle APEX
  • Daniele Trasarti su Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti
  • nicola su Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti

Copyright © 2022 · APPin5Minuti.it · Privacy Policy · Cookie Policy