Oversigt:
(OPDATERING 12/04/07: Tilføjet en anden interessant ressource i slutningen sammenkædning med en anden blog, der løser dette via en meget interessant webdel)
Dette blogindlæg beskriver, hvordan du opretter et søjlediagram i SharePoint. Dette virker i både WSS og MOSS miljøer som det afhænger kun af webdelen datavisning.
Den overordnede tilgang er som følger:
- Oprette en liste eller et dokumentbibliotek, der indeholder de data, du vil afbilde.
- Sted det tilknyttede dokumentbibliotek / brugerdefineret liste på en side og konvertere det til en webdelen Datavisning (DVWP).
- Ændre den DVWP XSL til at generere HTML, vises som en graf.
Forretningsscenario / Installationsprogrammet:
Jeg har oprettet en brugerdefineret liste med kolonnen standard titel og en ekstra kolonne, "Status". Denne modeller (meget simplistisk) "tilladelse til udgift" scenario hvor titlen repræsenterer projektet og Status en værdi fra listen over:
- Foreslået
- I processen
- Gået i stå
Målet er at producere en interaktiv vandrette søjlediagram, der viser disse statuskoder.
Jeg har udfyldt listen og det ser sådan ud:
Oprette webdelen datavisning:
Oprette en DVWP ved at føje den brugerdefinerede liste til en side (webstedsside i mit tilfælde) og følg instruktionerne Her (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Ud over blot at oprette DVWP, Vi skal også angive egenskaben personsøgning til at vise alle tilgængelige rækker. For mig, Det ser nogenlunde sådan her:
På dette punkt, Jeg lukke altid SPD og browseren. Jeg derefter åbne igen siden ved hjælp af browseren. Derved undgår du ved et uheld mucking op del Weblayout på siden.
Ændre XSLT:
Det er nu tid til at ændre XSLT.
Jeg bruge altid visual studio til dette. (Se Her for en vigtig bemærkning om intellisense, der vil hjælpe dig med en masse).
Jeg oprette et tomt projekt tilføje fire nye filer (erstatte ordene "Original" og "New" som det er relevant):
- Original.XSLT
- New.XSLT
- Oprindelige Params.xml
- Ny Params.xml
I mit tilfælde, Det ser sådan ud:
Redigere webdelen og kopiere params og XSL til "oprindelige" version i Visual Studio.
Målet her er at forårsage XSL at omdanne de resultater, vi får tilbage fra forespørgslen DVWP til HTML, der gengiver som en graf.
Til dette formål, Det hjælper til at først for at overveje, hvordan HTML-koden skal se ud, før vi blive forvirret af de sindssyge, der er kendt som "XSL". (At være klar, følgende er blot et eksempel; ikke skrive det eller copy/paste i visual studio. Jeg giver et fuld slag udgangspunkt for senere i skrive-up). Følgende eksempel grafen er gengivet som HTML umiddelbart efter:
Tilsvarende HTML:
<HTML> <kroppen> <Center> <tabel bredde = 80%> <Tr><TD><Center>Vandret søjlediagram</TD></Tr> <Tr> <TD align = "center"> <tabel border = "1" bredde = 80%> <Tr> <TD bredde = 10%>Åben</TD> <TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 50%><TR bgcolor = rød><TD> </TD></Tr></tabel></TD> </Tr> <Tr> <TD bredde = 10%>Lukket</TD> <TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 25%><TR bgcolor = rød><TD> </TD></Tr></tabel></TD> </Tr> <Tr> <TD bredde = 10%>Gået i stå</TD> <TD><tabel cellpadding ="0" CellSpacing ="0" Border = 0 width = 25%><TR bgcolor = rød><TD> </TD></Tr></tabel></TD> </Tr> </tabel> </TD> </Tr> </tabel> </kroppen> </HTML> |
Jeg brugte en død simpel tilgang til at skabe min barer ved at indstille baggrundsfarven for en række til "rød".
Den takeaway her er dette: I sidste ende, alt, hvad vi gør er at skabe HTML med rækker og kolonner.
Skabelon XSLT:
Jeg har kopieret den XSLT, der genererer en vandret bar graf. Det er ret godt kommenteret så jeg ikke vil tilføje meget her bortset fra disse noter:
- Jeg startede med standarden XSL, at SharePoint Designer gav mig da jeg oprettede DVWP.
- Jeg var i stand til at skære det fra SPDS 657 linjer til 166 linjer.
- Jeg har ikke rodet rundt med parametre XML-fil (som er adskilt fra XSL og du ved hvad jeg mener når du går til at ændre DVWP, selv; der er to filer kan du ændre). Dog, for at forenkle det, Jeg har fjernet næsten alle af dem fra XSL. Dette betyder at hvis du ønsker at gøre brug af disse parametre, Du skal blot tilføje deres variable definitioner tilbage til XSL. Der vil være let, da du vil have de oprindelige XSL-variable definitioner i din visual studio-projekt.
- Du burde være i stand til at kopiere og indsætte det direkte i din visual studio-projekt. Derefter, fjerne mit kald og indsætte dine egne opkald til "ShowBar".
- Boret ned værker ved at skabe en <en href> Som dette: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Denne teknik kan være af værdi i andre sammenhænge. I første omgang, Jeg troede, jeg skulle svare til et mere komplekst format: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, men det er ikke nødvendigt i mit miljø. Listens URL-adresse sendes til os af SharePoint, så det er ganske let at generalisere.
Her er det:
<XSL:stylesheet version="1.0" Udeluk-resultat-præfikser="RS z o s ddwrt dt msxsl" |
Resultaterne:
XSL ovenfra genererer denne graf:
Foretag detaljeopløftning til de underliggende data ved at klikke på statuskoden:
Afsluttende tanker:
Dette kan generaliseres?
Jeg elsker denne graftegning koncept, men jeg hader det faktum, at jeg er nødt til at gå ind og gøre så meget hånd-kodning. Jeg har givet en lille tanke til om det kan generaliseres og jeg er optimistisk, men jeg er også lidt bange, at der kan være en mur eller andet sted langs den sti, der ikke vil tilbyde en arbejde-omkring. Hvis nogen har nogle gode idéer på dette, venligst gøre en note i kommentarer eller e-mail mig.
Lodret grafer:
Dette er en horisontal søjlediagram. Det er bestemt muligt at oprette en lodret diagram. Vi skal bare ændre HTML-koden. Jeg ville starte på samme måde: Oprette en HTML-repræsentation af et lodret søjlegraf og derefter finde ud af hvordan man får der via XSL. Hvis nogen er interesseret i at, Jeg kunne blive overtalt til at prøve det og arbejde ud the kinks. Hvis nogen har allerede gjort det, fortæl mig det, så link jeg til din blog 🙂
Jeg tror, at udfordring med en lodret Graf er, at etiketterne for grafen er sværere at administrere, men bestemt ikke umuligt.
Feltet navn Gotcha:
Der er mindst to ting til at se ud med din feltnavne.
Første, et feltnavn med en plads er at være undsluppet i XSL. Dette vil sandsynligvis være et problem her:
<XSL:variabel Navn="totalProposed"
Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status) = 'Foreslog'])" />
Hvis din "Status" kolonne hedder faktisk "statuskode" så er du nødt til at henvise til det som "Status_x0020_Code":
<XSL:variabel Navn="totalProposed"
Vælg="Grev(/dsQueryResponse/rækker/række[normalisere plads(@Status_x0020_Code) = 'Foreslog'])" />Anden, og jeg er lidt fuzzy på dette, men du skal også være på vagt for feltnavnet ændres. Hvis du navngiver din felt "statuskode" og så senere på, omdøbe den til "AFE Status", det "interne navn" ændrer ikke. Det interne navn vil stadig være "statuskode" og skal blive refereret til som "Status_x0020_Code". "Andre ressourcer" links kan hjælpe med at diagnosticere og løse slags problemer.
Om at farve:
Jeg tog "rød" fordi det er glædeligt for mig i øjeblikket. Det ville ikke være en big deal at vise forskellige farver for at give mere end blot en visuel beskrivelse af en række, men skal også indeholde et nyttig KPI. For eksempel, Hvis procentdelen af "gået i stå" AFES er > 10% derefter vise det røde, ellers Vis det i sort. Brug <XSL:Vælg> at opnå dette.
Andre ressourcer:
- Bestemme det interne navn (og andre gode info) til data i en liste: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Vis alle de data, der leveres af SharePoint (den rå XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Få XPATH-udtrykket for en specifik kolonne: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- En anden metode bruge OWA(?). Jeg har ikke gravet ind i det., men ser lovende ud, især for cirkeldiagrammer: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Happy omdanne!
<afslutning />