Oracle APEX: visualizzare un’icona nella colonna di un Interactive Report

In questo breve tutorial desidero spiegarti come visualizzare una icona all’interno di una colonna di un Interactive Report.

Il risultato che dovresti ottenere è qualcosa di simile a quello mostrato nella figura sotto, dove in funzione di una condizione (ad esempio lo stato di un task) viene mostrata una icona piuttosto che un’altra.

Prima di Iniziare

A questo link puoi scaricare lo script della tabella che ho usato per fare questo esercizio.

La tabella TABLE_TASKS ha la colonna COMPLETED che può assumere 2 valori:

• Y significa che il task è completato
• N significa che il task non è completato

Lo scopo di questo esercizio è quello di creare un’ Interactive Report che mostri per ogni riga, in funzione del campo COMPLETED, un’icona che rappresenti lo stato del task.

Crea un Interactive Report

• Collegati al App Builder di Oracle APEX e seleziona la pagina che vuoi modificare.
• Aggiungi un Interactive Report di nome Icon Column Sample

• Inserisci nell’Interactive Report la seguente Query SQL

select id, 
        task_name, 
        due_date, 
        completed,
        DECODE(NVL(completed, 'N'), 'Y', 'fa fa-check-circle', 'fa fa-times-circle') icon,
        DECODE(NVL(completed, 'N'), 'Y', 'green', 'red') icon_color
 from table_tasks

Come puoi notare, ho inserito due colonne aggiuntive (icon e icon_color) che fanno uso della funzione DECODE.

Se il campo COMPLETED vale Y allora viene restituito la stringa fa fa-check-circle mentre se vale N viene restituita la stringa fa fa-times-circle.

Queste due stringhe rappresentano due icone ben precise di Oracle APEX.

Puoi esplorare l’elenco completo delle icone standard di APEX collegandoti a questo link.

In alternativa, puoi installare l’applicazione gratuita Universal Theme Sample Application, che dovresti trovare sotto le Productivity Apps di APEX.

Configura l’Interactive Report

Se hai seguito tutti i passaggi dovresti aver creato un Interactive Report fatto così.

Se esegui la preview dovresti ottenere questo risultato.

• Seleziona le colonne ICON e ICON_COLOR e cambiane il tipo ad Hidden Column

• Seleziona la colonna COMPLETED

• Vai alla proprietà Column Formatting > HTML Expression e inserisci la seguente stringa HTML

<span class="#ICON#" style="color: #ICON_COLOR#"></span>

• Oracle APEX sostituirà dinamicamente le stringhe #ICON# e #ICON_COLOR# con i valori restituiti dalla query che abbiamo inserito nella definizione dell’Interactive Report.
• Salva le modifiche ed esegui la preview.

Bene! Abbiamo ottenuto quello che volevamo!

Puoi anche modificare l’HTML inserendo un testo personalizzato.

<span class="#ICON#" style="color: #ICON_COLOR#">  Stato Task: #COMPLETED#</span>

Questo è il risultato che otterresti inserendo la stringa HTML riportata sopra