In questo tutorial voglio mostrarti come recuperare le righe selezionate in una Interactive Grid Oracle APEX usando il componente Row Selector.

Per aiutarti, ho preparato una semplice pagina di demo (che puoi visualizzare a questo link)

Utilizzeremo 3 oggetti:

• Employees: Interactive Grid che mostra un elenco di dipendenti
• Selected Employees: Interactive Report che mostra l’elenco dei record che sono stati selezionati nell’Interactive Grid Employees
• Current Selection: Static Content contenente alcuni campi tecnici che ci serviranno per implementare la selezione.

Per fare questo esercizio ho usato la tabella S_EMP di cui qui sotto puoi trovare lo script. Se vuoi puoi crearla nella tua applicazione per fare insieme questo esercizio.

CREATE TABLE  "S_EMP" 
   (	"ID" NUMBER(7,0) CONSTRAINT "S_EMP_ID_NN" NOT NULL ENABLE, 
	"LAST_NAME" VARCHAR2(25) CONSTRAINT "S_EMP_LAST_NAME_NN" NOT NULL ENABLE, 
	"FIRST_NAME" VARCHAR2(25), 
	"USERID" VARCHAR2(8), 
	"START_DATE" DATE, 
	"COMMENTS" VARCHAR2(255), 
	"MANAGER_ID" NUMBER(7,0), 
	"TITLE" VARCHAR2(25), 
	"DEPT_ID" NUMBER(7,0), 
	"SALARY" NUMBER(11,2), 
	"COMMISSION_PCT" NUMBER(4,2), 
	 CONSTRAINT "S_EMP_COMMISSION_PCT_CK" CHECK (commission_pct IN (10, 12.5, 15, 17.5, 20)) ENABLE, 
	 CONSTRAINT "S_EMP_ID_PK" PRIMARY KEY ("ID")
  USING INDEX  ENABLE, 
	 CONSTRAINT "S_EMP_USERID_UK" UNIQUE ("USERID")
  USING INDEX  ENABLE
   )
/
ALTER TABLE  "S_EMP" ADD CONSTRAINT "S_EMP_DEPT_ID_FK" FOREIGN KEY ("DEPT_ID")
	  REFERENCES  "S_DEPT" ("ID") ENABLE
/
ALTER TABLE  "S_EMP" ADD CONSTRAINT "S_EMP_MANAGER_ID_FK" FOREIGN KEY ("MANAGER_ID")
	  REFERENCES  "S_EMP" ("ID") ENABLE
/
ALTER TABLE  "S_EMP" ADD CONSTRAINT "S_EMP_TITLE_FK" FOREIGN KEY ("TITLE")
	  REFERENCES  "S_TITLE" ("TITLE") DISABLE
/

STEP 1: Crea una Interactive Grid

Crea una region di tipo Interactive Grid con queste proprietà

• Title: Employees – Interactive Grid
• Type: Interactive Grid
• SQL Query: vedi sotto

select ROWID,
       ID,
       LAST_NAME,
       FIRST_NAME,
       USERID,
       START_DATE,
       COMMENTS,
       MANAGER_ID,
       TITLE,
       DEPT_ID,
       SALARY,
       COMMISSION_PCT
  from S_EMP

• Vai in Attributes e seleziona l’opzione Edit.
• Attiva le specifiche operazioni che vuoi abilitare (Add, Update, Delete) come meglio credi. In questo esercizio non attiverò nessuna di queste opzioni.

• Avendo attivato l’opzione Edit, automaticamente verranno creati nell’Interactive Grid 2 nuovi elementi: un Row Selector ed un Row Action.

STEP 2: Crea i Page Item in cui scrivere i record selezionati

Crea due Page Item che utilizzeremo per salvare le righe selezionate. In particolar modo nel Page Item P9_EMPS andremo a scrivere una stringa costruita come concatenazione degli ID di ciascun impiegato, ciascuno dei quali delimitato dal carattere “:”

Qualcosa di simile a questo:

:<exmployee_id1>:<exmployee_id2>:<exmployee_id3>:<exmployee_id3>:....

• Page Item P9_EMPS: memorizza le righe selezionate
  • Name: PX_EMPS
  • Type: Hidden
  • Value Protected: No

• Page Item P9_EMP: ultima riga selezionata
  • Name: PX_EMP
  • Type: Hidden
  • Value Protected: No

STEP 3: Crea un Interactive Report per visualizzare i records selezionati

Creiamo un Interactive Report per mostrare un modo per recuperare via SQL i record che sono stati selezionati nell’Interactive Grid.

Lo stesso metodo lo potrai utilizzare, ad esempio, in una procedura PL-SQL che deve eseguire delle elaborazioni sui record selezionati.

• Name: Selected Employees – Interactive Report
• Type: Interactive Report
• SQL Query: vedi sotto

select
    userid,
    last_name,
    first_name
from
    s_emp
where
    userid in (
        select
            t.column_value as employee_id
        from
            table ( apex_string.split(rtrim(ltrim(:p9_emps, ':'), ':'), ':') ) t
    )

• Page Items To Submit: P9_EMPS

STEP 4: Crea una Dynamic Action che recupera le righe selezionate nella Region Employees

Questo è il punto più importante del tutorial. Usando del semplicissimo codice JavaScript andremo a recuperare le righe che sono state selezionate dall’utente nella griglia.

• Seleziona l’Interactive Grid

• Crea una nuova Dynamic Action
  • Name: da_select
  • Event: Selection Change [Interactive Grid]
  • Selection Type: Region
  • Region: Employees

• Seleziona la Dynamic Action da_select che abbiamo appena creatore e definisci una True Action
  • Action: Execute JavaScript Code
  • Code: Inserisci il seguente codice JavaScript:

var i, i_empids = ":", i_empid,
model = this.data.model;
for ( i = 0; i < this.data.selectedRecords.length; i++ ) {
    i_empid = model.getValue( this.data.selectedRecords[i], "USERID");   
    i_empids += model.getValue( this.data.selectedRecords[i], "USERID") + ":";
}
apex.item( "P9_EMPS" ).setValue (i_empids);
apex.item( "P9_EMP" ).setValue (i_empid);

Il codice JavaScript che abbiamo creato andrà a scrivere nel campo P9_EMPS la concatenazione di tutti i record (colonna USERID) che sono stati selezionati, mentre nel campo P9_EMP andrà a scrivere il riferimento all’ultimo record selezionato.

STEP 5: Crea una True Action per aggiornare l’Interactive Report

L’ultimo pezzetto della nostra applicazione permette di far si che l’Interactive Report Selected Employees si aggiorni automaticamente in funzione delle selezioni che vengono fatte.

In generale non hai bisogno di creare sempre un Interactive Report. In questa applicazione di demo è una funzionalità puramente dimostrativa che ho creato per farti vedere come visualizzare le righe selezionate attraverso del semplice codice SQL.

• Action: Refresh
• Selection Type: Region
• Region: Selected Employees – Interactive Report (creato nello STEP-3 di questo tutorial)

Questo è il risultato