In questo articolo ci occuperemo del nuovo componente web Dash (DSH) , disponibile dalla versione 1.16.5 di Web.UP.

Lo scopo del componente Dash è la rappresentazione grafica di un numero con associato un testo descrittivo, un’unità di misura e un’icona.

Layout

Sono stati predisposti 8 diversi Layout che definiscono diverse modalità di disposizione delle caratteristiche precedentemente elencate. Per impostare il layout utilizzare l’attributo di setup SelectLayout. In caso non sia stato specificato viene assunto SelectLayout=”1″.

Qui sotto un’immagine (presa dallo Showcase dei componenti) con sezioni corrispondenti a tutti i layout attualmente implementati.

Dash Layout disponibili

 

 

 

Vediamo come inserire una sezione contenente un Dash negli 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.DSH Tit="*NONE" 
::G.SET.DSH SelectLayout="4" IconColor="R255G000B000" ValueColor="R255G000B000"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_DSH) 2(;;DSH_004)

I dati vengono forniti con un xml di matrice. Qui sotto l’xml dell’esempio (generato dal servizio di prototipazione B£SER_46):

<?xml version="1.0" encoding="UTF-8"?><UiSmeup Testo="WETEST_DSH WEB : Prototipi DSH - "> <Service Titolo1="" Titolo2="WEB : Prototipi DSH" Funzione="F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_DSH) 2(;;DSH_004) INPUT()" Servizio="B£SER_46" TSep="." DSep="," IdFun="1212095143906" NumSes="690913"/>
 <Griglia>
 <Colonna Cod="VAL" Txt="Valore" Lun="5;2" IO="O" Ogg="NR"/>
 <Colonna Cod="UM" Txt="Unità di misura" Lun="4" IO="O" Ogg="**"/>
 <Colonna Cod="DES" Txt="Descrizione" Lun="50" IO="O" Ogg="**"/>
 <Colonna Cod="ICO" Txt="Icona" Lun="50" IO="O" Ogg="**"/>
 </Griglia>
 <Righe>
 <Riga Fld="2,86|%|Admissions Count|VO;COD_SOS;000165"/>
 </Righe>
 <Setup>
 <Program Context="B£SER_46\WRK.SCP\WETEST_DSHDSH_004"/>
 </Setup>
 <UIPopup/> <Setup>
 <Program Context="B£SER_46\WRK.SCP\WETEST_DSHDSH_004">
 <EXB>
 <UserSetups Exist="No"/>
 </EXB>
 <UserSetups Disabled="Yes"/>
 </Program>
 </Setup>
</UiSmeup>

 

Dinamismi

Il componente supporta il dinamismo sull’evento click.

 

Dati

E’ possibile indicare al componente Dash le colonne da cui prendere i dati utilizzando i seguenti attributi di setup.

  • IconColName
  • UmColName
  • TextColName
  • ValueColName

In caso questi attributi non vengano compilati il componente si aspetta una griglia con 4 colonne che devono contenere, in ordine, valore, unità di misura, descrizione e icona.

E’ anche possibile forzare uno o più caratteristiche direttamente tramite  il setup utilizzando gli attributi:

  • ForceIcon
  • ForceValue
  • ForceUM
  • ForceText

Questo significa che forzando da setup tutte le caratteristiche è possibile definire una sezione Dash senza una funzione associata che fornisca i dati.

 

Operazioni di aggregazione

Normalmente la matrice che fornisce i dati al componente è una matrice con una sola riga.

È però possibile utilizzare una matrice con più righe ed effettuare una funzione di aggregazione sui dati della colonna contente il valore utilizzando l’attributo ValueColName.

Le operazioni disponibili sono:

  • SUM (Somma)
  • AVG (Media)
  • MIN (Minimo)
  • MAX (Massimo)

Qui un esempio di utilizzo con l’operazione di somma:

 

::G.SEZ Pos(1) 
::G.SUB.DSH Tit="*NONE" 
::G.SET.DSH SelectLayout="4" IconColName="ICON" UmColName="UM" TextColName="SUM" ValueColName="SUM(NVAL)" 
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_DSH) 2(;;DSH_010)

 

Si segnala anche l’attributo di setup NumberFormat per forzare il numero di decimali del valore:

 

::G.SEZ Pos(1) 
::G.SUB.DSH Tit="*NONE" 
::G.SET.DSH SelectLayout="4" NumberFormat="10;1"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_DSH) 2(;;DSH_001)

 

Soglie

È possibile impostare delle soglie, in base alle quali varia il colore del valore mostrato, tramite gli attributi di setup Thresh1 e Thresh2.

I valori inferiori a Thresh1 saranno rappresentati in verde, quelli compresi tra le due soglie in giallo e quelli superiori alla seconda soglia in rosso.

 

 

Dash soglie