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 />
Questa pagina ha quasi completato il compito che stavo cercando.
Avere un gruppo che vuole utilizzare l'elenco SharePoint sondaggio per creare un sondaggio settimana. Le catture? Non vogliono vedere codice… O cambiare il sistema ogni volta che mandano il sondaggio (progettato per un aggiornamento settimanale).
Sono stato in grado di collegare questo alla lista Survey e creare il grafico nella prima colonna di risposta. Quello che io non posso prevedere però sono i valori e le etichette che avranno bisogno di andare avanti. Per rendere le cose peggiori possono avere più o meno le risposte disponibili ogni settimana.
Guarderò altrove solo nel caso in, ma qualcuno ha trovato un modo per creare le righe e le etichette in base al largo numero di opzioni disponibili e dinamicamente impostando questi piuttosto difficile codifica i valori attesi?
Grazie Paolo. Molto utile. Grazie per il vostro lavoro, Sono stato in grado di aggiungere una colonna di barra del grafico di un DVWP esistente (e. g. per le attività) molto facilmente con poche righe di codice.
In SharePoint Designer, Ho inserito una visualizzazione dati con il titolo e % completare le colonne di un elenco di attività. Ho messo il cursore in una delle celle e fare clic destro. I selezionare inserire una colonna a destra. Nella vista codice, Ho trovato il <TD> e sostituito il <xsl:elemento di testo all'interno della cellula con il tuo codice:
<tabella cellpadding ="0" CellSpacing ="0" confine ="0"
width = "{turno(@PercentComplete * 100)+1}%">
<stile TR = "background-color:rosso">
<xsl:testo disable-output-escaping = "yes"><![CDATA[ ]]></xsl:Testo>
</TR>
</tabella>
Nota che ho cambiato il codice di colore riga da bgcolor = "rosso" a style = "background-color:rosso"
Anche, è stato in grado di selezionare una delle colonne nella mia lista (@PercentComplete) al posto di "$BarPercent"
Greg
Un altro metodo. (utilizzando solo il SharePoint UI):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20">
selezionare = "Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish postato questo nel mese di maggio 2006. Ho provato a MOSS 2007 e funziona bene. Aggiunto ai GAC, dovuto execadmsvcjobs e iisreset…
Grande post, Grazie!
Grande post, Grazie!
Ciao Paolo!
Bel lavoro! Ho anche avuto qualcosa di simile nella mia mente per visualizzare elenchi di SharePoint in modo grafico 😉
Ho un ‘Usare Dashboard in SharePoint’ domanda. Siamo un ospedale militare utilizzando standard MOSS per la nostra Intranet e vorrebbe costruire un cruscotto per il nostro gruppo di comando vedere ' tempo reale’ Se possibile. Uno dei punti principali è visualizzare il carico di lavoro corrente in tempo reale all'interno dell'impianto e guardarlo letteralmente cambiare su e giù (potrebbe essere necessario fare clic su “aggiornamento”/F5).
Vi ringrazio in anticipo,
Si può fare qualcosa di utile con jQuery per realizzare questo effetto. E-mail me a Galvin.Paul@gmail.com e sarò felice di provare a dare una mano.