In questo articolo ci occuperemo dei nuovi componenti Organigramma (OGN) e Mind Map (MIN). Li trattiamo insieme in quanto sono due rappresentazioni grafiche alternative della struttura albero e quindi presentano diverse analogie oltre ad essere utilizzabili per scopi simili.

Si tenga presente che sono due componenti implementati in Web.UP e non supportati in Looc.UP. Per approfondimenti ulteriori rispetto a quanto qui presentato è possibile consultare lo Showcase di Web.UP alle sezioni Organigramma e Mind Map.

Organigramma

Un organigramma è la classica rappresentazione grafica delle strutture organizzative, utilizzata generalmente nelle aziende per indicare l’organizzazione gerarchica interna. Ad esempio nell’area riservata di Sme.UP è possibile consultare l’organigramma aziendale alla sezione Coordinamento. Qui parte della pagina è costruita proprio utilizzando il nuovo componente OGN.

 

Vediamo come creare un semplice organigramma con gli script di scheda di Sme.UP.

L’organigramma necessita di essere popolato con una struttura dati ad albero, con dati che possono derivare da FUN o da una lista di D.OGG.

Questo è un esempio di un semplice script di scheda (con dati popolati da una fun):

::G.SEZ Pos(1)
::G.SUB.OGN Tit="*NONE" 
 ::D.FUN.STD F(TRE;B£SER_46;WRK.SXM) 1(MB;SCP_SET;WETEST_OGN) 2(;;OGN001)

I dati ad albero dell’esempio (generati dal servizio di prototipazione B£SER_46) sono i seguenti:

<Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="SANCOS" Testo="Sanfilippo Mauro" Fld="" Leaf=""> 
  <Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="DELGIO" Testo="Delbono Giovanni" Fld="" Leaf=""> 
     <Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="CASFRA" Testo="Casetta Francesco" Fld="" Leaf=""/>
    <Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="VERFRA" Testo="Verzelletti Francesco" Fld="" Leaf=""/>    
    <Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="ZAMCHI" Testo="Zambelli Chiara" Fld="" Leaf=""/>
  </Oggetto>
  <Oggetto Nome="" Tipo="CN" Parametro="COL" Codice="FIOGIA" Testo="Fioletti Gianluca" Fld="" Leaf=""/>
</Oggetto>

Questo è il risultato grafico. Si noti come ad ogni livello gerarchico venga assegnato dal sistema un colore diverso.

Può essere molto utile definire dinamismi alla selezione di un item dell’organigramma.

Questo è lo script dell’esempio precedente a cui è stato aggiunto un dinamismo che mostra nel componente Label della sezione 1B i dati dell’item cliccato.

::G.SEZ Pos(1)
::G.SEZ Pos(1A)
::G.SUB.OGN Tit="*NONE" 
::G.DIN Where="LAB01" When="select"
::D.FUN.STD F(TRE;B£SER_46;WRK.SXM) 1(MB;SCP_SET;WETEST_OGN) 2(;;OGN001)

::G.SEZ Pos(1B)
::G.SUB.LAB Tit="*NONE" Id="LAB01" Load="D"
::D.OGG D(Aggiornato alle: [*NOW] - T1: [T1] - P1: [P1] - K1: [K1])

Si segnalano anche due attributi di setup interessanti da poter utilizzare per personalizzare maggiormente l’organigramma, ovvero:

  • ShowIcon: se uguale a ‘Yes’ permette di mostrare le icone dell’oggetto, le quali possono anche essere sovrascritte con l’attributo I (esempio I=”VO;COD_AGG;000004″)
  • Collapsible: se uguale a ‘Yes’ permette di chiudere o aprire i nodi dell’organigramma

Questo è il risultato dell’esempio aggiungendo anche tali due opzioni e chiudendo il nodo azzurro di destra.

 

Mind map

La mind map (mappa mentale) è, come l’organigramma, una rappresentazione grafica di una struttura gerarchica. E’ nata come tecnica per prendere appunti ma i suoi ambiti si sono rapidamente estesi al brainstorming, alle tecniche di memorizzazione e a qualsiasi rappresentazione visiva di concetti correlati. Potrebbe quindi anche essere usata come strumento alternativo all’organigramma per rappresentare gerarchie aziendali.

Questo è un esempio di un semplice script di scheda del componente MIN, con la stessa fun e quindi gli stessi dati dell’esempio precedente relativo all’organigramma:

::G.SEZ Pos(1)
::G.SUB.MIN Tit="*NONE" 
 ::D.FUN.STD F(TRE;B£SER_46;WRK.SXM) 1(MB;SCP_SET;WETEST_OGN) 2(;;OGN001)

Nella figura sottostante si mostra il risultato grafico dello script. Si nota come, a differenza dell’organigramma, viene visualizzato solo il primo livello di espansione.

L’espansione può continuare cliccando sull’item di cui si ha interesse approfondire la gerarchia. Nella figura sottostante si mostra il risultato grafico dopo il click del secondo nodo giallo.

I dinamismi associabili al componente Mind Map sono di due tipi: al click e al doppio click.

In questo script il codice iniziale viene arricchito di un dinamismo al click e uno al doppio click che mostrano i dati dell’item cliccato rispettivamente nei componenti Label delle sezioni 1B1 e 1B2.

::G.SEZ Pos(1)
::G.SEZ Pos(1A)  
::G.SUB.MIN Tit="*NONE" 
::G.DIN Where="Tg01" When="Click"
::G.DIN Where="Tg02" When="DblClick"
::D.FUN.STD F(TRE;B£SER_46;WRK.SXM) 1(MB;SCP_SET;WETEST_MIN) 2(;;TRE_COLLAB)

::G.SEZ Pos(1B)
::G.SEZ Pos(1B1) Dim(300)
::G.SUB.OUT Tit="TARGET DEL DINAMISMO AL CLICK. Visualizzazione dati collaboratore [K1]" Id="Tg01" Load="D"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_MIN) 2(;;[K1])
::G.SEZ Pos(1B2) Dim(300)
::G.SUB.OUT Tit="TARGET DEL DINAMISMO AL DOUBLECLICK. Visualizzazione dati collaboratore [K1]" Id="Tg02" Load="D"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_MIN) 2(;;[K1])

Il calcolo dei nodi della mind map può anche essere dinamico. L’espansione dinamica deve essere configurata nel setup del componente tramite l’attributo di setup DynExpand=Yes. Essa avviene in nodi non foglia (ovvero con Leaf diverso da Yes). In questi casi vengono utilizzate per l’espansione le funzioni definite nelle Exec dei nodi. Se invece il nodo è foglia e contiene una funzione in Exec essa viene lanciata sul click del nodo.

<Oggetto Nome="" Tipo="" Parametro="" Codice="A" Testo="Root" Fld="" Leaf="">
  <Oggetto Nome="" Tipo="" Parametro="" Codice="B" Leaf="" Exec="{EXEC DI ESPANSIONE}"/>
  <Oggetto Nome="" Tipo="" Parametro="" Codice="C" Leaf="Yes" Exec="{EXEC DI ESECUZIONE}"/>
 </Oggetto>