custom:api_js_opengworgcharttab [GeowebFramework]

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
====== Apertura gwOrgChart ======

La gwOrgChart è una particolare tipologia di scheda descritta [[gwusermanual:interface:schede#gwOrgChart|qui]].

===== openGwOrgChartTab() =====
Per aprire questa tipologia di tab è esposta l'apposita function openGwOrgChartTab().

==== Parametri ====
  * **params** Object, required. Contains all parameters
  * **title** String, optional, default Strina vuota
  * **tabIndex** Integer, optional, default null

=== Parametri dentro params ===
  * **relationName**: String, required. E' il nome della tabella/vista appositamente preparata per erogare i dati della gwOrgChart.
  * **entityid**: String, required. Chiave dell'elemento root dal quale si vuole fra partire il grafo (può anche essere un elemento a sua volta discendente da altre entità, le quali verranno escluse)
  * **pan**: Boolean, optional, default false. flag che abilita fin dall'inizio la funzionalità di pan (che può essere abilitata anche in seguito da comando in toolbar)
  * **zoom**: Boolean, optional, default false. flag che abilita fin dall'inizio la funzionalità di zoom (che può essere abilitata anche in seguito da comando in toolbar)
  * **depth**: Integer, optional, default 999. Intero rappresentante la profondità massima del grafo. Gli elementi di livello superiore a depth (con elemento root = livello 1) NON verranno visualizzati
  * **visibleLevel**: Integer, optional, default 999. Intero rappresentante la profondità iniziale del grafo. Gli elementi di livello superiore a visibleLevel (con elemento root = livello 1) saranno visualizzati, se presenti, solo agendo sulle frecce di espansione degli elementi figlio oppure tramite il button in toolbar 'Exapand All'
  * **verticalLevel**: Integer, optional, default null. Intero rappresentante la profondità del grafo, a partire dalla quale, in ottica di migliorarne la leggibilità, gli elementi vengono visualizzati in verticale.
  * **direction**: String, optional, default 't2b'. Possibili valori: [**'t2b'**, **'b2t'**, **'l2r'**, **'r2l'**]. Determina la direzione nella quale si sviluppa il grafo. Rispettivamente 
    * dall'alto verso il basso (default)
    * dal basso verso l'alto
    * da sinitra verso destra
    * da destra verso sinistra
  * **updateOnChangeInGwClassNameList**: String, optional, default null. Lista di gwClassName, separati da virgola (',') tali per cui la scheda si aggiorna in automatico di fronte ad un  evento di insert/update/delete su quelle classi
  * **openDetailOnDClick** Boolean, optional, default false. Quando è a true e sono presenti gw_class_name e item_id sul DB, viene aperto il relativo dettaglio di classe al doppio click
  * **nodeWidth** Integer, optional, default 130 (px). Quando impostato rappresenta la width, in pixel, applicata a tutti i nodi dell'orgChart


==== Esempi ====
Apertura scheda con valori di default:
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

La scheda si aggiorna rispondendo agli eventi di tre classi
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	updateOnChangeInGwClassNameList: 'gwClassName1,gwClassName2,gwClassName3'
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

zoom, pan , verticalLevel 3 abilitati (e comunque sia modificabili dalla toolbar in seguito all'apertura)
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	pan: true,
        zoom: true,
        verticalLevel: 3
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

Il massimo numero di livelli visualizzati è 3
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	depth: 3
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

All'inizio vengono visualizzati aperti solo i primi 3 livelli. Nel caso ce ne fossero altri è comunque sia possibile espanderli tramite le apposite frecce che compaiono su on hover del mouse sul nodo
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	visibleLevel: 3
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

grafo da sinistra a destra
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	direction: 'l2r'
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

apertura dettaglio classe al doppio click
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	openDetailOnDClick: true
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

nodi larghi 200 px
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	nodeWidth: 200
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>

esempio di utilizzo di tutti i parametri
<code javascript example.js>
    var params = {
    	relationName: gwClassName,
    	entityid: itemId,
    	pan: true,
        zoom: true,
        depth: 5,
        visibleLevel: 3,
        verticalLevel: 4,
        direction: 't2b',
        openDetailOnDClick: true,
        updateOnChangeInGwClassNameList: 'gwClassName1,gwClassName2,gwClassName3',
        nodeWidth: 180
    };
    var title = 'GwOrgChart ('+itemId+')';
    openGwOrgChartTab(params, title);
</code>