Esempio di PivotTable

Introduzione

Elemento visuale che permette di disegnare tabelle pivot interattive in vari formati, sia tabellari che grafici.
È basato sul componente web PivotTable. Si possono otterenre videate come questa:

Definizione nell'IDE

Per prima cosa, nel progetto, è stata creata una libreria client chiamata Widget Pivot Table e sono state definite le sue proprietà, liste valori, eventi e metodi:

E' stato aggiunto al progetto il componente Pivot Table che utilizza la directory custom customPivotTable che contiene tutti i sorgenti javascritp necessari al funzionamento del widget Pivot Table.
Utilizzando un componente di Instant Developer per contenere il nostro oggetto Pivot Table lo possiamo poi esportare ed utilizzare in altri progetti.
All'interno del componente Pivot Table è presente la videata Test Pivot Table alla quale occorre fare riferimento nella propria applicazione, anche solo creandone un'istanza in una procedura, per far si che Instant Developer crei tutti i file javascript necessari al funzionamento del componente.

Classe wrapper lato client

Nella directory custom del componente Pivot Table sono stati copiati i file necessari al funzionamento del componente. Inoltre è stato creato un file javascript WidgetPivotTable.js contenente il codice della nostra classe wrapper.
Nella funzione WidgetPivotTable.Init vengono caricate le risorse necessarie al funzionamento del componente javascritp:

• pivot.css
• pivot.min.css
• export_renderers.min.js
• jquery.min.js
• jquery.ui.touch-punch.min.js
• jquery-ui.min.js
• pivot.min.js
• plotly_renderers.min.js
• plotly-basic-latest-min.js

Nella directory dist troviamo i file di localizzazione in lingua che vengono caricati al momento di selezione della lingua mediante la proprietà local o dalle impostazioni del browser se non indicata.
Nella funzione Realize viene creato il div che deve contenere il componente e gli viene assegnato un id con un nome generato in automatico per poi poterlo ricercare.

Funzionamento del componente

Il componente PivotTable può essere visualizzato direttamente in un frame di una videata oppure all'interno di una label di un pannello.
Per poter attivare le eventuali scrollbar sul frame che contiene il componente è possibile, nel caso di utilizzo all'interno di una label, aggiungere una classe CSS specifica come in questo codice da mettere in custom.css dell'applicazione.

.pvtContainer .frame-content-container {
  overflow: auto !important;
}

Quindi occorre impostare la classe CSS pvtContainer alla label che contiene il componete PivotTable.

Le proprietà del componente sono:

• cols
  Elenco dei nomi delle colonne della sorgente dati da includere nelle colonne della tabella pivot, separati da virgola.
• rows
  Elenco dei nomi delle righe della sorgente dati per i quali raggrupparela tabella pivot, separati da virgola.
• vals
  Elenco dei nomi delle colonne della sorgente dati da sottoporre alle funzioni di aggregazione, separati da virgola. È possibile indicare uno o due colonne a seconda dell'aggregatore scelto.
• renderName
  Permette di selezionare il tipo di visualizzazione dei dati della tabella pivot.
• aggregatorName
  Permette di selezionare la funzione di aggregazione dei dati della tabella pivot.
• colOrder
  Specifica l'ordinamento delle colonne.
• rowOrder
  Specifica l'ordinamento delle righe.
• showUI
  Se impostata a false, viene visualizzata solo la tabella pivot, senza la parte interattiva.
• unusedAttrsVertical
  Se impostato a true, le colonne non utilizzate saranno sempre elencate in verticale. Se vale false, le colonne non utilizzate saranno sempre elencate in orizzontale. Lasciare vuoto per una gestione automatica.
• hiddenFromAggregators
  Elenco dei nomi delle colonne della sorgente dati che non devono essere elencate come input per la funzione di aggregazione.
• hiddenFromDragDrop
  Elenco dei nomi delle colonne della sorgente dati che non devono essere disponibili per il drag&drop come colonne o come righe della tabella pivot.
• locale
  Codice di localizzazione per l'interfaccia ed i formati della tabella (ad esempio it, fr, eccetera). Per default viene utilizzata la lingua del browser.

Gli eventi del componente sono:

• restoreConfig
  Evento notificato ogni volta che la tabella pivot cambia configurazione.
• onCellClick
  Evento notificato quanto l'utente fa click nella tabella dei dati (solo visualizzatore tabellare).

I metodi del componete sono:

• restoreConfig
  Permette di ripristinare una configurazione precedentemente letta tramite l'evento onConfigChange
• addData
  Permette di aggiungere una riga di dati da passare al componete.