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