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

APPin5Minuti

Creare APP Gestionali con Oracle APEX e Low-Code

Crea Applicazioni Gestionali con Oracle APEX e gli strumenti Low-Code.

Come personalizzare la Pagina di Login di una Applicazione APEX

Luglio 26, 2021

Oggi voglio affrontare un problema molto comune per i designer e web developer: la progettazione della pagina di login e registrazione ad un portale, nel nostro caso sviluppato con Oracle APEX.

Devi sapere, infatti, che ci sono alcuni piccoli accorgimenti che vale la pena tenere a mente quando sviluppi una applicazione con Oracle APEX ed in particolare, quando vuoi creare una pagina di login bella e funzionale.

Partiamo dal dire che tutte le applicazioni APEX nascono con una pagina di login di default, che sicuramente fa il suo dovere, ma che per i più esigenti potrebbe essere scarna ed in generale poco accattivante.

Abbiamo un logo (standard), un campo per inserire la username e la password ed il bottone per effettuare il Log On.

Se si tratta di una applicazione aziendale, potrebbe essere anche accettabile.

Ma se la tua intenzione è quella di creare un’applicazione più evoluta e completa, sono necessarie alcune modifiche come inserire un logo, creare una form di registrazione e modificare aspetto e colori affinché rispecchino il brand.

Insomma, realizzare qualcosa di simile a questo:

In questo articolo ti spiegherò come personalizzare la login page di una applicazione APEX.

IN QUESTO ARTICOLO

  • Prima di iniziare
  • Cosa sapere sulla pagina Login di una applicazione APEX
  • Come modificare il logo della pagina di login
  • Come modificare lo sfondo della pagina di login
  • Come modificare i campi Username e Password
  • Come nascondere il logo o il nome dell’applicazione
  • Come personalizzare il bottone Sign In
    • Come cambiare l’aspetto di un bottone usando il Theme Roller
    • Come cambiare l’aspetto di un bottone usando la Color Palette
    • Come cambiare l’aspetto di un bottone usando CSS personalizzato
  • Come aggiungere un testo alla Login Page
  • Come aggiungere un link alla form di registrazione
  • Come aggiungere un link per il recupero password
  • Conclusioni

Prima di iniziare

Per modificare l’aspetto di una pagina APEX faremo uso di CSS: anche se non sei un esperto non devi preoccuparti perché ti fornirò tutti gli script da inserire.

Per maggiori dettagli su come importare il CSS all’interno di una applicazione APEX puoi leggere questo articolo.

Inoltre, collegandoti a questo link puoi vedere una pagina di login DEMO che ho creato appositamente per questo tutorial.

Cosa sapere sulla pagina Login di una applicazione APEX

Quando crei una qualsiasi applicazione in APEX viene automaticamente creata una pagina di login standard. Come prima cosa ti spiego come individuarla.

  • Accedi all’APP Builder
  • Inserisci nel campo di ricerca la parola chiave Login Page e premi GO

  • Quello che dovresti ottenere come risultato è la pagina 9999 – Login Page. Clicca sull’icona della pagina
  • Se osservi la struttura della pagina dovresti riconoscere i suoi componenti principali
    • P9999_USERNAME: campo username
    • P9999_PASSWORD: campo password
    • P9999_REMEMBER: checkbox “Remember Me”
    • LOGIN: bottone per eseguire l’autenticazione
  • Come puoi notare esiste un altro componente chiamato Language Selector che viene visualizzato quando l’applicazione è multilingua
  • Clicca sul tab Processing per scoprire alcune informazioni interessanti.
  • Clicca su processo Login
  • Se andiamo a guardare le proprietà del processo scopriamo che viene usato il seguente script PL-SQL.

Ti ho già spiegato come puoi utilizzare l’autenticazione social con Linkedin, Facebook o Google: tutti questi metodi prevedono di inserire le credenziali attraverso la pagina di login del servizio scelto.

Se invece preferisci usare la tua pagina di login personalizzata lo potrai fare andando a scrivere il codice per eseguire l’autenticazione direttamente in questo punto: esploreremo questa possibilità in un’altra occasione.

Per il momento concentriamoci sulle modifiche estetiche.

Come modificare il logo della pagina di login

La prima cosa che faremo sarà sostituire il logo di default con uno personalizzato.

  • Accedi all’APP Builder e clicca su Shared Components
  • Clicca su Files > Static Application Files
  • In questa sezione puoi caricare tutti i file statici che la tua applicazione deve utilizzare. Ad esempio potresti caricarci i CSS, le icone e le immagini.
  • Clicca su Upload File.
  • Seleziona il file da caricare e premi Upload.
  • Se il file che viene caricato correttamente dovresti vedere un messaggio di conferma.
  • Il campo Reference mostra la stringa che dovrai utilizzare per referenziare questo file, nel mio caso è #APP_IMAGES#appin5minuti-logo.png
  • Se clicchi sul nome del file puoi vederne il contenuto

A questo punto possiamo inserire il logo nella pagina di login.

  • Accedi all’APP Builder e seleziona la Login Page.
  • Clicca sul nodo radice della pagina
  • Nel pannello delle proprietà vai alla sezione CSS > Inline ed inserisci il seguente codice CSS
    • background-image: qui andrai ad inserire l’URL del file logo che hai caricato, ovvero il campo Reference che abbiamo visto poco fa.
    • width: larghezza in pixel
    • height: altezza in pixel
span.t-Login-logo { 
    background-image: url(#APP_IMAGES#appin5minuti-logo.png);
    background-size: cover;
    width: 150px;
    height: 150px;
}
  • Esegui la preview per vedere il risultato

Come modificare lo sfondo della pagina di login

Puoi anche personalizzare il background di tutta la pagina di login.

  • Sempre dalla proprietà CSS > Inline della pagina di login (dove hai inserito il codice per modificare il logo), inserisci il codice CSS per modificare il background.
  • Ad esempio, questo è il codice CSS per avere uno sfondo con colori sfumati (in gergo si parla di gradiente)
.t-PageBody--login {
    background: rgb(216,71,39);
    background: linear-gradient(315deg, rgba(216,71,39,1) 9%, rgba(0,48,73,1) 43%);
}
  • Puoi creare la tua combinazione di gradiente preferita usando, ad esempio, il sito cssgradient.io.
  • Se esegui la preview, questo è il risultato finale
  • Ovviamente puoi anche usare una immagine come sfondo della pagina; in tal caso dovrai
    • Caricare il file nella sezione Static Application File come fatto per l’immagine del logo.
    • Modificare il CSS della pagina di login usando il seguente codice CSS
.t-PageBody--login {
    background-image:url(#APP_IMAGES#appin5minuti-background.jpg);
    background-repeat: no-repeat;
    background-size : cover;
    background-position: center;
}
  • Questo è il risultato

Come modificare i campi Username e Password

Con un po’ di codice CSS possiamo modificare l’aspetto dei campi username e password

  • Apri la definizione della pagina di login e clicca sul nodo radice
  • Vai sempre alla sezione CSS > Inline ed inserisci il seguente codice CSS
#P9999_USERNAME , #P9999_PASSWORD  {
    background-color: #0e0d0d00;
    color: rgba(0,48,73,1);
    border-bottom-color: rgba(216,71,39,1);
    border-width: 0 0 3px 0;
}
  • Questo è il significato degli attributi
    • background-color: colore dello sfondo
    • color: colore del testo
    • border-bottom-color: colore del bordo inferiore
    • border-width: larghezza del bordo
  • Questo è il risultato finale

Come nascondere il logo o il nome dell’applicazione

La pagina di login sfrutta uno specifico template APEX che permette alcune configurazioni di base.

Vediamole insieme.

  • Apri la definizione della pagina Login Page
  • Clicca sul componente che contiene i campi username e password

Vai alla sezione Appearance e clicca su Template Options.

  • Seleziona l’opzione Login Header: Hidden
  • Con questa opzione non verrà mostrato né il logo, né il titolo dell’applicazione
  • Le altre opzioni di configurazione del template sono:
    • Icon and Title: mostra logo e titolo dell’applicazione
    • Icon: mostra solo il logo
    • Title: mostra solo il titolo dell’applicazione
    • Hidden: nascondi sia logo che titolo dell’applicazione

Come personalizzare il bottone Sign In

Come cambiare l’aspetto di un bottone usando il Theme Roller

Il modo più immediato e semplice per modificare il bottone Sign-In è tramite il Theme Roller.

  • Avvia l’applicazione in modalità Preview
  • Nella parte inferiore del browser o a lato (puoi decidere dove preferisci posizionarlo) dovresti vedere un menù, visibile solo in modalità Preview. Clicca su Theme Roller.
  • Vai alla sezione Buttons per modificare l’aspetto dei bottoni.
  • In questo caso ho modificato il colore dei bottoni Hot e ho smussato gli angoli.
  • Clicca su Save As e salva le modifiche al tema
  • Assegna un nome al tema e clicca Save
  • Clicca Set As Current per attivare il nuovo tema.
  • Questo è il risultato finale

Usare il Theme Roller è sicuramente un ottimo metodo per personalizzare l’aspetto di una applicazione APEX.

La cosa importante che devi tenere a mente è che le modifiche sono globali all’interno della tua applicazione.

Questo vuol dire che tutti i bottoni che userai di tipo Hot erediteranno questo aspetto: questo può essere una cosa positiva o negativa in funzione delle tue esigenze.

Non preoccuparti, ci sono alcun trucchi che puoi utilizzare per ovviare a questo problema: vediamo insieme com modificare l’aspetto di un bottone senza usare il Theme Roller

Come cambiare l’aspetto di un bottone usando la Color Palette

Per comodità ho creato un secondo bottone sign-in come copia di quello originale.

  • Essendo entrambi hot-buttons ne ereditano, come puoi immaginare, l’aspetto previsto nel Theme Roller.
  • Vai alle proprietà del bottone Sign In 2.
  • Vai alla proprietà Appearance > CSS Classes ed inserisci il valore u-color-1 (tra un attimo ti spiego cosa rappresenta)
  • Esegui la preview per vedere il colore del secondo bottone diverso da quello di default

Cosa rappresenta u-color-1?

Si tratta di una classe CSS che richiama uno dei colori previsti nella Palette dell’applicazione.

Per gestire e modificare la Palette di colori dell’applicazione:

  • Apri il Theme Roller in modalità Preview
  • Vai alla sezione Palette: in questo punto puoi definire e gestire la palette di colori della tua app. Ciascun colore della Palette è identificato da un numero (da 1 a 15) e potrai richiamare il colore usando la relativa classe CSS
    • Color 1: u-color-1
    • Color 2: u-color-2
    • Color 3: u-color-3
    • ecc…

A questo link puoi trovare tutte le classi CSS standard previste per modificare il colore di riempimento del bottone, il colore dello sfondo, del bordo e del testo senza dover scrivere codice CSS custom.

Ad esempio, per modificare il colore ed il testo i un bottone potresti usare due classi CSS diverse (u-color-10 e u-color-11-text).

Questo è il risultato

Come cambiare l’aspetto di un bottone usando CSS personalizzato

L’ultima opzione che voglio spiegarti è sicuramente quella più complicata, ma che ti da il massimo delle possibilità.

  • Apri la definizione della Login Page
  • Clicca sul nodo radice della pagina e vai alla sezione CSS > Inline.
  • Inserisci il seguente codice CSS che definisce una nuova classe CSS (che si chiama appin5minuti-login-btn ma che tu puoi chiamare come preferisci).
.appin5minuti-login-btn {
    background: #009EDB !important;
    font-size: 20px !important;
    color:rgba(0,48,73,1) !important;
    border-radius: 15px !important;
}
  • Con questa classe CSS vado a definire le seguenti proprietà
    • background: colore del bottone
    • font-size: dimensione del testo
    • color: colore del testo
    • border-radius: spigoli del bottone
  • Clicca sul bottone da personalizzare
  • Vai alla proprietà CSS Classes ed inserisci la classe CSS che abbiamo appena definito
  • Esegui la Preview per vedere il risultato dove lo sfondo del bottone è cambiato così come la dimensione del font e il colore del testo.
  • Ovviamente puoi aggiungere tutte le funzionalità CSS che preferisci. Ad esempio, ho inserito il seguente codice CSS che cambia l’aspetto del bottone quando ti posizioni con il mouse (proprietà on-hover)
.appin5minuti-login-btn:hover {
  background: rgba(0,48,73,1) !important;
  color:rgb(255, 255, 255) !important;
}
  • Quando posizioni il puntatore del mouse sul pulsando Log In 2 vedrai il suo aspetto cambiare

Come aggiungere un testo alla Login Page

Talvolta è utile inserire delle brevi istruzioni a video, come nel seguente esempio

Un modo veloce per fare questo è inserendo l’html direttamente nella pagina.

  • Apri al definizione della Login Page e seleziona il componente Login
  • Vai alle proprietà Header and Footer > Header Text ed inserisci il codice HTML che desideri mostrare
  • Salva ed esegui la Preview

Come aggiungere un link alla form di registrazione

Normalmente tutte le applicazione web più comuni richiedono all’utente di registrarsi per usare il servizio. In questo articolo ho spiegato come creare una form di registrazione.

Vediamo come possiamo richiamarla dalla nostra pagina di login.

  • Apri la definizione della Login Page
  • Crea un nuovo pulsante di nome REGISTER
  • Apri la definizione del pulsante ed imposta le seguenti proprietà
    • Label: inserisci la label che vuoi visualizzare
    • Button Position: Edit
    • Button Template: Text
    • Template Options > Style: Display as a link
  • Vai alla sezione Behavior ed imposta la seguenti proprietà
    • Action: Redirect to Page in this Application
    • Target: inserisci la pagina che hai implementato per gestire la registrazione.
  • Esegui la preview dell’applicazione. Al di sotto del bottone Sign In dovresti vedere il link per aprire la form di registrazione.
  • Se clicchi sul link dovresti vedere questo risultato

Come aggiungere un link per il recupero password

Una delle caratteristiche di una Login Page fatta bene è la presenza di un link per il recupero o reset della password.

Non è mia intenzione spiegare in questo post come creare una form di password recovery. Ti mostrerò, invece, come collegarla alla tua form di login.

In questo caso, ha senso mettere il link vicino al campo Password, come in questo esempio

  • Apri la definizione della Login Page
  • Seleziona l’item page dove viene inserita la password
  • Vai alla sezione Help > Inline Help Text ed inserisci il codice HTML con il link alla pagina che avrai creato per il recupero della password
  • Esegui la preview per vedere il risultato

Conclusioni

Bene! Questo è tutto per questo tutorial.

Adesso hai a disposizione tante informazioni utili che ti aiuteranno a progettare una login Page su Oracle APEX bella e funzionale.

Se hai suggerimenti o commenti, fammelo sapere!

Ti invito a condividere questo articolo se lo hai trovato interessante e ad iscriverti alla pagina Linkedin di APPin5Minuti.

Se poi vuoi approfondire le tue conoscenze su Oracle APEX e non solo, dai un’occhiata ai tanti tutorial che settimanalmente pubblico sul sito.

Un abbraccio

Daniele

TI POTREBBE INTERESSARE:

  • CPQ in Oracle APEX
  • Come migrare le applicazioni da Oracle Forms ad Oracle APEX
  • Come sviluppare applicazioni sicure con Oracle APEX
  • Come gestire i files su Object Storage da Oracle APEX
  • Costruiamo un CRM con Oracle APEX
  • Come costruire Workflows Approvativi in Oracle APEX

css, 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 di Oracle APEX 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.

Se vuoi saperne di più inizia da qui.

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 automation autonomous database build apps cpq crm css cyber security database dynamic layout facebook flowform flows4apex google google cloud interactive grid interactive report javascript list microsoft microsoft access mobile oracle oracle apex oracle cloud oracle rest data service ords pl-sq PL-SQL power apps product configurator sales configurator security social login software gestionale sql theme roller ux woocommerce wordpress workflows

COMMENTI RECENTI

  1. Daniele Trasarti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Sabatino, grazie per l'apprezzamento. Riguardo alla tua domanda ti consiglio di usare Oracle Cloud. Puoi creare un account gratis…

  2. Sabatino Iannazzo su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Daniele, complimenti per la guida, mi hai aperto un mondo! volevo chiederti se con Apex e Oracle Database Express…

  3. Laura su Autenticazione a 2 Fattori basata su TOTP (Time-based One-time Password) con Oracle APEX

    Ciao, trovo molto interessante il tuo articolo. Hai qualche suggerimento per l'autenticazione con spid? pensi di fare qualche guida al…

  4. Mario Volpetti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ottima spiegazione e complimenti per la semplicità che ai usato. Sono riuscito a farlo anche io con un foglio excel…

  5. Riccardo Liviabella su Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti

    Ciao Daniele e grazie per le tue interessanti spiegazioni. E' da un pò di anni che lavoro su Appsheet e…

  6. Daniele Trasarti su Come costruire Workflows Approvativi in Oracle APEX

    Ciao Bhavin, I think you badly copied PL-SQL because the one you provided is not correct. Fix the script and…

  7. Daniele Trasarti su Applicazione di Prenotazione Appuntamenti in Oracle APEX

    Grazie mille Franca!

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