Panoramica:
(AGGIORNAMENTO 12/04/07: Aggiunta di un'altra risorsa interessante alla fine collegamento a un altro blog che affronta questo tramite una web part molto interessante)
Questo Blog viene descritto come creare un grafico a barre in SharePoint. Questo funziona in ambienti WSS e MOSS come dipende solo la web part visualizzazione dati.
L'approccio generale è come segue:
- Creare un elenco o raccolta di documenti che contiene i dati che si desidera grafico.
- Posto la libreria del documento associato / personalizzati elencati su una pagina e convertirlo in una web part visualizzazione dati (DVWP).
- Modificare XSL del DVWP per generare il codice HTML che mostra come un grafico.
Scenario business / Installazione:
Ho creato un elenco personalizzato con la colonna titolo standard e una colonna aggiuntiva, "Status". Questo modelli (molto semplicisticamente) un' "autorizzazione di spesa" scenario dove il titolo rappresenta il progetto e lo stato di un valore dall'elenco dei:
- Proposto
- Nel processo di
- In fase di stallo
L'obiettivo è quello di produrre un grafico a barre orizzontale interattivo che mostra questi codici di stato.
Io ho compilato la lista e sembra che questo:
Creare Web Part visualizzazione dati:
Creare il DVWP aggiungendo l'elenco personalizzato in una pagina (pagina del sito nel mio caso) e seguire le istruzioni qui (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Oltre a creare semplicemente il DVWP, Abbiamo anche bisogno di impostare la proprietà di spostamento per visualizzare tutte le righe disponibili. Per me, Questo sembra qualcosa di simile:
A questo punto, Chiudo sempre SPD e il browser. Quindi riaprire la pagina utilizzando il browser. Questo consente di evitare accidentalmente rovinando il layout di parte web nella pagina.
Modificare il XSLT:
Ora è il momento di modificare il XSLT.
Io uso sempre visual studio per questo. (Vedere qui per una nota importante su intellisense che ti aiuterà molto).
Creare un progetto vuoto aggiungere quattro nuovi file (sostituire le parole "originale" e "New" se del caso):
- Original.XSLT
- New.XSLT
- Params.xml originale
- Params.xml nuovo
Nel mio caso, sembra che questo:
Modificare la parte web e copiare il params e XSL all'originale"" versione di Visual Studio.
Qui l'obiettivo è quello di causare il XSL trasformare i risultati che otteniamo indietro dalla query DVWP in HTML che esegue il rendering come un grafico.
A tal fine, Aiuta a in primo luogo considerare che cosa il codice HTML dovrebbe essere simile prima di noi rimaniamo confusi dalla follia che è conosciuta come "XSL". (Per essere chiari, di seguito è semplicemente un esempio; non digitare o copiare e incollare in visual studio. Fornisco un colpo completo punto di partenza per questo più tardi nel write-up). Il grafico di esempio seguente viene eseguito il rendering come HTML immediatamente dopo:
HTML corrispondente:
<html> <corpo> <centro> <Table width = 80%> <TR><TD><centro>Grafico a barre orizzontali</TD></TR> <TR> <TD align = "center"> <table border = "1" larghezza = 80%> <TR> <larghezza TD = 10%>Aperto</TD> <TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 50%><TR bgcolor = colore rosso><TD> </TD></TR></tabella></TD> </TR> <TR> <larghezza TD = 10%>Chiuso</TD> <TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD> </TD></TR></tabella></TD> </TR> <TR> <larghezza TD = 10%>In fase di stallo</TD> <TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD> </TD></TR></tabella></TD> </TR> </tabella> </TD> </TR> </tabella> </corpo> </html> |
Ho usato un approccio morto semplice per creare il mio bar impostando il colore di sfondo di una riga su "red".
Qui il Take-Away è questo: Alla fine, tutto quello che stiamo facendo è la creazione di HTML con righe e colonne.
Modello XSLT:
Ho copiato il codice XSLT che genera un grafico a barre orizzontale. È abbastanza ben commentato così non aggiungerà molto qui tranne queste note:
- Ho iniziato con il valore predefinito XSL che SharePoint Designer mi ha dato quando ho creato il DVWP.
- Sono stato in grado di tagliare questo da SPD 657 linee di 166 linee.
- Non pasticciare con il file XML dei parametri (quale è separato da XSL e saprete che cosa voglio dire quando si va a modificare il DVWP stesso; ci sono due file che è possibile modificare). Tuttavia, al fine di semplificare l'it, Ho fatto rimuovere quasi tutti da XSL. Questo significa che se si vuole fare uso di tali parametri, Hai solo bisogno di aggiungere loro le definizioni di variabili torna al XSL. Che sarà facile, poiché avrete le definizioni di variabili XSL originale nel progetto visual studio.
- Si dovrebbe essere in grado di copiare e incollare questo direttamente nel progetto visual studio. Poi, rimuovere le mie chiamate e inserire le proprie chiamate a "ShowBar".
- Il drill-down funziona creando un <href> In questo modo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Questa tecnica può essere utile in altri contesti. In un primo momento, Ho pensato che avrei bisogno di conformarsi a un formato più complesso: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ma nel mio ambiente che non è necessario. URL dell'elenco viene passato a noi da SharePoint quindi questo è abbastanza facile da generalizzare.
Qui è:
<xsl:StyleSheet Versione="1.0" escludere-risultato-prefissi="RS z o s ddwrt dt msxsl" |
I risultati:
il XSL da sopra genera questo grafico:
Dettaglio dei dati sottostanti cliccando sul codice di stato:
Riflessioni conclusive:
Questo può essere generalizzato?
Mi piace questo concetto grafico, ma odio il fatto che devo andare e fare così tanto di mano-codifica. Ho dato un piccolo pensiero per se può essere generalizzato e sono ottimista, ma io sono anche un po' timoroso che potrebbe esserci un muro di mattoni da qualche parte lungo il percorso che non offre alcun lavoro intorno. Se qualcuno ha delle buone idee su questo, si prega di fare una nota nei commenti o email me.
Grafici verticali:
Si tratta di un grafico a barre orizzontale. È certamente possibile creare un grafico verticale. Abbiamo solo bisogno di modificare il codice HTML. Vorrei iniziare allo stesso modo: Creare una rappresentazione HTML di un grafico a barre verticale e poi capire come ottenere che tramite XSL. Se qualcuno è interessato a che, Io potrei essere convinto a provarlo e risolvere i nodi. Se qualcuno lo ha già fatto, per favore fatemelo sapere e sarò contento di link al tuo blog 🙂
Credo che la sfida con un grafico verticale è che le etichette del grafico sono più difficili da gestire, ma certamente non impossibile.
Campo nome Gotcha:
Ci sono almeno due cose da guardare fuori con i nomi di campo..
Primo, un nome di campo con uno spazio deve essere sottoposto a escape in XSL. Questo sarà probabilmente un problema qui:
<xsl:variabile nome="totalProposed"
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Proposto'])" />
Se il tuo Status"" colonna è in realtà denominato "codice di stato" quindi è necessario fare riferimento ad esso come "Status_x0020_Code":
<xsl:variabile nome="totalProposed"
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status_x0020_Code) = 'Proposto'])" />Secondo, e io sono un po ' sfocata su questo, ma devi anche essere in allerta per le modifiche di nome di campo. Se il nome il campo "codice di stato" e poi in seguito, rinominarlo in "AFE Status", il nome"interno" non cambia. Il nome interno sarà ancora "codice di stato" e deve essere fatto riferimento come "Status_x0020_Code". Le "altre risorse" link possono aiutare a diagnosticare e correggere questo tipo di problema.
Info su quel colore:
Ho scelto "rosso" perché è piacevole per me al momento. Non sarebbe un grosso problema a mostrare diversi colori in modo da fornire più appena una descrizione visiva di un numero, ma anche fornire un utile indicatore KPI. Per esempio, Se la percentuale di "stallo" AFE è > 10% poi Visualizza rosso, in caso contrario mostrarlo in nero. Uso <xsl:scegliere> per eseguire questa operazione.
Altre risorse:
- Determinare il nome interno (e altre utili informazioni) per i dati in un elenco: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Visualizza tutti i dati forniti da SharePoint (il XML non elaborato): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Ottenere l'espressione XPATH di una colonna specifica: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Un altro approccio utilizzando OWA(?). Non ho scavato in esso, ma sembra essere molto promettente, soprattutto per i grafici a torta: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Trasformando felice!
<fine />