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 />
Denne side fuldført næsten den opgave, jeg ledte efter.
Jeg har en gruppe, der ønsker at bruge listen SharePoint undersøgelse til at oprette en ugentlig meningsmåling. Fangsten? De ønsker ikke at se kode… Eller ændre systemet, hver gang de sender meningsmåling (planlagt for en ugentlig opdatering).
Jeg var i stand til at forbinde det til listen undersøgelse og oprette grafen på kolonnen første svar. Hvad jeg ikke kan overskue selv er de værdier og etiketter, skal de bevæger sig fremad. For at gøre tingene kan værre de have mere eller mindre svar tilgængelig hver uge.
Jeg vil kigge andre steder bare i tilfælde, men har nogen fundet en måde at skabe rækker og etiketter baseret ud af antallet af tilgængelige indstillinger og dynamisk indstilling disse snarere end hårdt kodning forventede værdier?
Tak Paul. Meget hjælpsom. Tak for dit arbejde, Jeg var i stand til at tilføje en graf bar kolonne til en eksisterende DVWP (strømsparetilstand. for opgaver) meget nemt med blot et par linjer i din kode.
I SharePoint Designer, Jeg har indsat en datavisning med titlen og % komplet kolonner fra en opgaveliste. Jeg sætter markøren i en af cellerne og lige falde i hak. Jeg vælg Indsæt en kolonne til højre. I kodevisning, Jeg fandt den <TD> og erstattet den <XSL:tekstelement inde i cellen med din kode:
<tabel cellpadding ="0" CellSpacing ="0" Border ="0"
bredde = "{runde(@PercentComplete * 100)+1}%">
<TR stil = "baggrundsfarve:rød">
<XSL:tekst Deaktiver-output-undslippe = "yes"><![CDATA[ ]]></XSL:tekst>
</Tr>
</tabel>
Bemærk jeg har ændret række farvekode fra bgcolor = "rød" at style = "baggrundsfarve:rød"
Også, var i stand til at vælge en af kolonnerne i min liste (@PercentComplete) i stedet for "$BarPercent"
Greg
En anden metode (ved hjælp af kun 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">
Vælg = "count(/dsQueryResponse/rækker/række[normalisere plads(@Status)= 'VIA'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish postet dette i maj 2006. Jeg prøvede i MOSS 2007 og det virker godt. Tilføjet til GAC, måtte execadmsvcjobs og iisreset…
Stor post, Tak!
Stor post, Tak!
Hej Paul!
Nice arbejde! Jeg havde også noget lignende i mit sind til at se SharePoint-lister på en grafisk måde 😉
Jeg har et 'Brug af betjeningspaneler i SharePoint’ spørgsmål. Vi er et militært hospital, der bruger MOSS-standard til vores intranet og vil gerne oprette et instrumentbræt til vores kommandogruppe for at se 'realtid’ Hvis det er muligt. Et af de vigtigste punkter vist real-time nuværende arbejdsbyrden i havnefaciliteten og bogstavelig talt se det ændre op og ned (kan have til at klikke “Opdater”/F5).
Tak på forhånd,
Du kan gøre noget nyttigt med jQuery at opnå denne effekt. Email mig på Galvin.Paul@gmail.com og jeg vil være glad for at prøve og give en hånd.