Recentemente ho creato una applicazione di gestione delle Risorse Umane in azienda (a proposito se vuoi vederla ti consiglio di andare nella sezione APEXLab dove puoi trovare il link all’applicazione).

In tanti mi hanno chiesto come creare la Progress Bar che ho usato per tracciare lo stato di avanzamento di una processo di recruiting.

In effetti oggi non esiste (ancora) un componente in grado di visualizzare lo stato di avanzamento di un task ed è per questo motivo che ho deciso di costruire la mia personalissima versione di Progress Bar in Oracle APEX.

Scoprirai che è molto facile da realizzare e potrai riutilizzare questo stesso metodo per gestire tutti i flussi che vuoi. Sei pronto? Iniziamo!

Installiamo le Tabelle del Database

Partiamo dagli oggetti che devi creare nel database. Per fare questo esercizio ho deciso di creare le due seguenti tabelle:

-- create tables
create table object_data (
    id                             number generated by default on null as identity 
                                   constraint object_data_id_pk primary key,
    name                           varchar2(100 char),
    description                    varchar2(250 char)
)
;
create table object_tracking (
    id                             number generated by default on null as identity 
                                   constraint object_tracking_id_pk primary key,
    object_id                      number
                                   constraint object_tracking_object_id_fk
                                   references object_data on delete cascade,
    status                         varchar2(50 char),
    completion_date                date,
    complete                       varchar2(1 char),
    sequence                       number
)
;
-- table index
create index object_tracking_i1 on object_tracking (object_id);

La tabella object_data contiene i records degli oggetti di cui vuoi monitorare lo stato di avanzamento. Potresti usarla per gestire, ad esempio, lo stato di avanzamento delle Opportunità di Vendita di un CRM o di un Ordine di Vendita. Sentiti libero di cambiarne il nome e aggiungere tutte le colonne che ritieni necessario.

La tabella object_tracking invece serve a gestire lo stato di avanzamento del tuo oggetto.

In generale, quello che a noi interessa è far si che ogni volta che si crea un nuovo record all’interno della tabella object_data, vengano inseriti nella tabella object_tracking tutti gli stati di avanzamento che l’oggetto specifico deve attraversare. Lasciamo la colonna status_date vuota.

Per far questo puoi creare un database trigger. Qui sotto trovi un esempio che puoi personalizzare per gestire gli stati che preferisci.

create or replace TRIGGER object_data_insert_trigger
AFTER INSERT ON object_data
FOR EACH ROW
DECLARE
BEGIN
  INSERT INTO object_tracking (object_id, status, completion_date, complete, sequence)
  VALUES (:NEW.id, 'Draft', NULL, 'N', 1);
  
  INSERT INTO object_tracking (object_id, status, completion_date, complete, sequence)
  VALUES (:NEW.id, 'In Progress', NULL, 'N', 2);
  
  INSERT INTO object_tracking (object_id, status, completion_date, complete, sequence)
  VALUES (:NEW.id, 'Complete', NULL, 'N', 3);
END;

Costruiamo una Applicazione in Oracle APEX

Per mostrarti come costruire una Progress Bar ho creato una semplicissima applicazione in Oracle APEX composta da 3 pagine

• Objects Report
• Edit Object
• Object Details

La pagina Object Report è una Report Page collegata alla tabella OBJECT_DATA. Puoi usare un Interactive Report oppure un Classic Report a seconda della tue preferenze.

La pagina Edit Object è una classica Form Page che serve per creare e modificare i record della tabella OBJECT_DATA.

Pagine Object Report e Edit Object

Per creare una Report Page e la relativa Form Page puoi usare il wizard di Oracle APEX. Ecco come fare:

• Accedi all’APP Builder e clicca Create Page
• Seleziona l’opzione Classic Report

• Configura le seguenti opzioni
  • Name: Objects Report
  • Page Mode: Normal
  • Include Form Page: Yes
  • Form Page Name: Edit Object
  • Source Type: Table
  • Table/View Name: OBJECT_DATA

• Seleziona la colonna ID come Primary Key e premi Create Page

Questo è il risultato

Se non sai come si crea un Interactive Report puoi leggere questi tutorials:

• Come Salvare i Dati usando Forms e Interactive Grids in Oracle APEX
• Oracle APEX: Interactive Report + Form Tutorial

Pagina Object Details

La pagina Object Details è quella all’interno della quale visualizzeremo la Progress Bar.

• Clicca Create Page e seleziona l’opzione Blank Page. Il nome della nuova pagina sarà Object Details
• Crea nella pagina Object Details un Classic Report definito in questo modo
  • Title: Object Details
  • Type: Classic Report
  • Source > Type: SQL Query
  • SQL Query: inserisci la query indicata in figura

Come puoi notare, nella query del report ho usato il Page Item PX_ID che rappresenta l’ID del record della tabella object_data.

• Crea un nuovo Page Item di tipo Hidden chiamato PX_ID e

• Seleziona il report la Page Region Object Details e clicca su Attributes
• Configura le seguenti opzioni
  • Template: Contextual Info
  • Template Options
    • Display Items: Inline
    • Display Labels: Stacked
  • Pagination > Type: No Pagination (Show All Rows)

Se lo desideri puoi richiamare la pagina Edit Object direttamente dalla pagina Object Details.

• Dal Page Designer aggiungi un nuovo pulsante chiamato EDIT_OBJECT

• Configura le proprietà del pulsante EDIT_OBJECT
  • Button Name: EDIT_OBJECT
  • Label: Edit Object
  • Region: Object Details
  • Position: Edit
  • Action: Redirect to Page in this Application

• La pagina target sarà la pagina Edit Object che nel mio caso ha Page ID uguale 21

• Aggiungi al pulsante EDIT_OBJECT una Dynamic Action che scatta all’evento Dialog Closed e che aggiorna il report Object Details.

Questo è il risultato finale della configurazione della pagina Object Details.

L’ultima cosa che rimane per completare la configurazione base di questa applicazione consiste nel collegare la pagina Objects Report alla pagina Object Details.

• Apri la definizione della pagina Object Reports e clicca sulla colonna NAME

• Configura il link alla pagina Object Details

Creiamo una Progress Bar

Bene, finalmente possiamo creare la nostra Progress Bar e per farlo useremo uno dei miei componenti preferiti, il Classic Report

• Apri la definizione della pagina Object Details e aggiungi una nuova Page Region di tipo Classic Report

• Inserisci questa SQL Query nella definizione della Progress Bar

select ID,
       OBJECT_ID,
       STATUS,
       completion_date,
       COMPLETE,
       SEQUENCE,
       STATUS LIST_TITLE,
       (case when completion_date is not null then to_char(completion_date,'dd-mon-yyyy') else 'Click to Complete Task' end) LIST_TEXT,
       DECODE (nvl(COMPLETE,'N'),'N', 'Pending','Y','Complete')LIST_BADGE,
       DECODE (nvl(COMPLETE,'N'),'N', 'fa fa-angle-double-right','Y','fa fa-check')  icon_class,
       DECODE (nvl(COMPLETE,'N'),'N', 'u-color-30','Y','u-color-4') ICON_COLOR_CLASS,
       DECODE (nvl(COMPLETE,'N'),'N', 'pending complete-task','Y','complete undo-task') ||' recruiting-status'  LINK_CLASS,
       'status-id=' || ID link_attr,
       null link
  from OBJECT_TRACKING
 where OBJECT_ID = :P22_ID
 order by SEQUENCE

• Seleziona il Classic Report e vai in Attributes
• Selezione il Report Template chiamato Media List. Io ho deciso di utilizzare un template predefinito ma ovviamente tu puoi creare un nuovo template se lo desideri.

• Apri le opzioni del template e configurale come in figura
  • Show Badges: YEs
  • Layout: Span Horizontal
  • Icon Shape: Circle

• Crea un nuovo Page Item di tipo Hidden chiamato PX_SELECTED_STATUS

• Ricordati di impostare la proprietà Value Protected a No

• Seleziona la Page Root e carica il seguente CSS all’interno della sezione Inline CSS

.recruiting-status {
 border-radius: 7px;
 padding: 10px 10px 10px 10px;
}
.pending {
 background-color: #e7e3e3;
}
.complete {
 background-color: #55a84da2;
}

• Sempre dalla pagina Object Details clicca su Dynamic Action e crea una nuova azione dinamica chiamata complete-task

• Configura le proprietà dell’azione dinamica in questo modo:
  • Name: complete-task
  • Event Scope: Dynamic
  • Type: Immediate
  • Event: Click
  • Selection Type: jQuery Selector
  • jQuery Selector: .complete-task

• Aggiungi tre Actions in questo ordine
  • Action 1 di tipo Execute JavaScript Code
  • Action 2 di tipo Execute Server-Side Code
  • Action 3 di tipo Refresh

• Inserisci nella prima Action il seguente codice JavaScript

var status_id = this.triggeringElement.getAttribute('status-id');
apex.item( "P22_SELECTED_STATUS").setValue (status_id);

• Inserisci nella seconda Action il seguente blocco di codice PL-SQL

update object_tracking 
set complete = 'Y', completion_date = trunc(sysdate)
where object_id = :P22_ID
and id = :P22_SELECTED_STATUS;

• Utilizza la terza Action per effettuare il refresh della Progress Bar

• Crea una seconda Dynamic Action chiamata undo-task configurata in questo modo
  • Name: undo-task
  • Event Scope: Dynamic
  • Type: Immediate
  • Event: Click
  • Selection Type: jQuery Selector
  • jQuery Selector: .undo-task

Aggiungi anche in questo caso 3 Actions configurate esattamente come prima, con l’unica differenza che lo script PL-SQL da usare sarà questo

update object_tracking 
set complete = 'N', completion_date = null
where object_id = :P22_ID
and id = :P22_SELECTED_STATUS;

Abbiamo finito e qui sotto puoi ammirare il risultato finale. Cliccando su uno specifico stato della Progress Bar è possibile aggiornarne lo stato

Quando usare una Progress Bar

Questo tipo di Progress Bar può essere utilizzata in tutti quei contesti in cui vuoi tracciare lo stato di avanzamento di una attività. Vediamo alcune applicazioni concrete

Gestione delle Opportunità nel CRM

Se, ad esempio, pensiamo ad una opportunità di vendita gestita in un CRM gli stati di avanzamento potrebbero essere questi:

• New: Questo stato indica che l’opportunità è stata appena creata e il processo di vendita è all’inizio.
• Qualification: In questa fase, il venditore valuta se l’opportunità è valida e se il potenziale cliente ha un reale interesse o la capacità di acquistare il prodotto o il servizio.
• Needs Analysis: Durante questa fase, il team di vendita lavora con il cliente per comprendere meglio le sue esigenze e capire come il prodotto o il servizio offerto può soddisfarle.
• Proposal/Quote: In questa fase, il team di vendita presenta al cliente una proposta dettagliata o un preventivo, che può includere informazioni sui prodotti, i servizi, i prezzi e i termini contrattuali.
• Negotiation: Questa fase coinvolge la discussione dei termini e delle condizioni dell’accordo tra il cliente e il team di vendita, cercando di raggiungere un consenso su tutti gli aspetti dell’offerta.
• Closed Won: Questo stato indica che l’opportunità è stata convertita con successo in un accordo o in una vendita, e il cliente ha accettato i termini e le condizioni dell’offerta.
• Closed Lost: Questo stato indica che l’opportunità non è stata convertita con successo in un accordo o in una vendita, e il cliente ha scelto di non procedere con l’acquisto.

Order Tracking

L’Order Tracking è una funzionalità che consente di monitorare lo stato di avanzamento degli ordini di vendita, dalla ricezione alla consegna del prodotto o servizio. Le funzionalità di Order Tracking aiutano le aziende a mantenere una comunicazione efficiente con i clienti e a garantire la sua soddisfazione.

• Ordine Ricevuto: quando un cliente effettua un ordine, l’azienda registra i dettagli dell’ordine, come i prodotti o i servizi richiesti, le informazioni di fatturazione e spedizione, e la data prevista di consegna.
• Conferma Ordine: l’azienda conferma che l’ordine è stato ricevuto e invia una notifica al cliente, spesso tramite e-mail o SMS.
• Elaborazione Ordine: l’azienda raccoglie i prodotti richiesti dall’ordine e li prepara per la spedizione.
• Spedizione Ordine: i prodotti vengono spediti al cliente utilizzando un corriere o un servizio di spedizione.
• Consegna Ordine: il cliente riceve il prodotto o il servizio e l’ordine viene considerato completato.

Logistica e Spedizioni

Il tracking delle spedizioni è fondamentale per garantire una consegna efficiente e tempestiva delle merci e per fornire informazioni aggiornate ai clienti sulla posizione e lo stato dei loro pacchi.

• Creazione Spedizione: quando un pacco viene preparato per la spedizione, l’azienda o il mittente crea un’etichetta di spedizione che include un numero di tracking univoco. Questo numero viene utilizzato per identificare e monitorare il pacco durante tutto il processo di spedizione.
• Raccolta Pacco: il corriere raccoglie il pacco dal mittente e lo inserisce nel suo sistema logistico. Il corriere scansiona il numero di tracking del pacco, registrando la sua posizione e il momento in cui è stato raccolto.
• Trasporto e Smistamento: il pacco viene trasportato attraverso una serie di centri di smistamento e hub di distribuzione del corriere, dove viene nuovamente scansionato per registrare la sua posizione e il progresso nel sistema di spedizione.
• Consegna Pacco: una volta che il pacco è arrivato al centro di distribuzione più vicino al destinatario, viene affidato a un corriere locale per la consegna. Il corriere scansiona nuovamente il pacco al momento della consegna, segnando la spedizione come completata.