Overzicht:
(UPDATE 12/04/07: Een andere interessante bron toegevoegd aan het einde te koppelen aan een andere blog dat dit via een zeer interessante webonderdeel adressen)
Deze blog entry wordt beschreven hoe u een staafdiagram in SharePoint. Dit werkt in zowel WSS en MOSS omgevingen zoals het hangt alleen af van het webonderdeel voor gegevensweergave.
De algemene aanpak is als volgt:
- Maken van een lijst of documentbibliotheek die de gegevens bevat die u wilt grafiek.
- Plaats de bijbehorende documentbibliotheek / aangepaste lijst naar een pagina en het omzetten in een webonderdeel voor gegevensweergave (DVWP).
- De DVWP de XSL voor het genereren van HTML-code als een grafiek toont wijzigen.
Bedrijfsscenario / Setup:
Ik heb een aangepaste lijst met de standaard titelkolom en één extra kolom, 'Status'. Deze modellen (zeer simplistisch) "vergunning voor kosten" scenario waar de titel het project en de Status van een waarde uit de lijst met vertegenwoordigt:
- Voorgesteld
- In proces
- Vastgelopen
De doelstelling is het produceren van een interactieve horizontale staafgrafiek waarin deze statuscodes.
Ik heb de lijst gevuld en het ziet er als volgt:
Webonderdeel Gegevensweergave maken:
De DVWP door de aangepaste lijst toe te voegen aan een pagina maken (pagina van de site in mijn geval) en volg de instructies Hier (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Naast de DVWP eenvoudig te maken, We moeten ook het wisselbestand instelt zodat alle beschikbare rijen. Voor mij, Dit ziet er iets als dit:
Op dit punt, Ik sluiten altijd EPD en de browser. Ik open vervolgens opnieuw de pagina met behulp van de browser. Dit voorkomt het per ongeluk mucken het web deel lay-out op de pagina.
Het XSLT-bestand wijzigen:
Het is nu tijd om het XSLT-bestand wijzigen.
Ik altijd gebruikt u visual studio hiervoor. (Zie Hier voor een belangrijke opmerking over intellisense die u een hoop helpen zal).
Ik maak een leeg project vier nieuwe bestanden toevoegen (vervangen van de woorden "origineel" en "New" in voorkomend geval):
- Original.XSLT
- New.XSLT
- Originele Params.xml
- Nieuwe Params.xml
In mijn geval, het ziet er als volgt:
Het webonderdeel wijzigen en kopiëren de params en XSL naar de origineel"" versie in Visual Studio.
Het doel hier is om te veroorzaken de XSL te transformeren de resultaten die we terug uit de query DVWP in HTML maakt als een grafiek.
Te dien einde, het helpt om eerst overwegen hoe de HTML-code eruit moet komen te zien voordat we krijgen verward door de waanzin die bekend als "XSL staat". (Om duidelijk te zijn, het volgende is gewoon een voorbeeld; niet deze typen of kopiëren/plakken in visuele studio. Ik verstrek een volledige slag vertrekpunt voor die verderop in de write-up). De volgende steekproef grafiek wordt weergegeven volgens de HTML-code direct na:
Overeenkomstige HTML:
<HTML> <lichaam> <Center> <tabel breedte = 80%> <tr><TD><Center>Horizontale staafgrafiek</TD></tr> <tr> <TD align = "center"> <tabelrand = "1" breedte = 80%> <tr> <TD breedte = 10%>Open</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 50%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> <tr> <TD breedte = 10%>Gesloten</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 25%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> <tr> <TD breedte = 10%>Vastgelopen</TD> <TD><tabel-cellpadding ="0" Cellspacing ="0" border = 0 breedte = 25%><TR bgcolor = rood><TD> </TD></tr></tabel></TD> </tr> </tabel> </TD> </tr> </tabel> </lichaam> </HTML> |
Ik gebruikte een dode eenvoudig benadering van mijn bars maken door het instellen van de achtergrondkleur van een rij 'Red'.
De take-away hier is dit: In het einde, alles wat we doen is het creëren van HTML met rijen en kolommen.
Sjabloon XSLT:
Ik heb de XSLT die een horizontale staafgrafiek genereert gekopieerd. Het is vrij goed commentaar dus ik zal niet veel hier met uitzondering van deze nota's toevoegen:
- Ik begon met de standaard XSL die SharePoint Designer gaf me toen ik voor het eerst de DVWP gemaakt.
- Ik was in staat om te bezuinigen dit uit de SPD 657 lijnen te 166 lijnen.
- Ik prutsen niet met de parameters XML-bestand (die losstaat van de XSL en je weet wat ik bedoel als je naar de DVWP zelf wijzigen; Er zijn twee bestanden die u kunt wijzigen). Echter, om te vereenvoudigen het, Ik bijna alle van hen verwijderen uit de XSL. Dit betekent dat als je wilt om gebruik van deze parameters, u hoeft hun variabele definities opnieuw toevoegen aan de XSL. Dat zal gemakkelijk zijn aangezien zul je de oorspronkelijke XSL-variabele definities in uw visual studio-project.
- U moet zitten kundig voor kopieer en plak deze direct in uw visual studio-project. Vervolgens, Verwijder mijn oproepen en plaats uw eigen oproepen naar "ShowBar".
- De drill down werken door het creëren van een <een href> Als dit: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Deze techniek kan worden van waarde in andere contexten. Op het eerste, Ik dacht dat ik zou moeten voldoen aan een meer complexe indeling: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, maar in mijn omgeving dat is niet nodig. De lijst-URL wordt doorgegeven aan ons door SharePoint dus dit is vrij eenvoudig om te generaliseren.
Hier is het:
<XSL:Stylesheet Versie="1.0" uitsluiten-resultaat-voorvoegsels="RS z o s ddwrt dt msxsl" |
De resultaten:
De XSL van bovenaf genereert deze grafiek:
Boor neer aan de onderliggende gegevens door te klikken op de statuscode:
Gedachten sluiten:
Dit kan worden gegeneraliseerd?
Ik hou van deze grafische concept, maar ik haat het feit dat ik moet gaan en doen zo veel hand-codering. Ik heb een beetje denken aan of het kan worden gegeneraliseerd gegeven en ik ben optimistisch, maar ik ben ook een beetje bang dat er mogelijk een bakstenen muur ergens langs het pad dat zal niet een werk-around bieden. Als iedereen heeft een aantal goede ideeën op dit, Maak een notitie in de commentaren of e-mail me.
Verticale grafieken:
Dit is een horizontale staafgrafiek. Het is zeker mogelijk een verticale grafiek maken. We moeten alleen de HTML-code wijzigen. Ik zou start op de dezelfde manier: Maak een HTML-weergave van een verticale staafdiagram en vervolgens erachter te komen hoe om die via XSL. Als iemand geïnteresseerd in die is, Ik kan worden overgehaald om uitproberen en werken uit the kinks. Als iemand heeft dat al gedaan, laat het me weten en ik leg graag een link naar uw blog 🙂
Ik denk dat dat de uitdaging met een verticale grafiek is dat de labels voor de grafiek moeilijker zijn te beheren, maar zeker niet onmogelijk.
Veld naam Gotcha's:
Er zijn ten minste twee dingen om uit te kijken voor met uw veldnamen.
Eerste, de naam van een veld met een spatie moet worden ontsnapte in de XSL. Waarschijnlijk zal dit een probleem hier:
<XSL:variabele naam="totalProposed"
Selecteer="Graaf(/dsQueryResponse/rijen/rij[normaliseren-ruimte(@Status) = 'Voorgesteld'])" />
Als uw Status"" kolom heet eigenlijk "Status Code" dan moet u verwijzen naar het als "Status_x0020_Code":
<XSL:variabele naam="totalProposed"
Selecteer="Graaf(/dsQueryResponse/rijen/rij[normaliseren-ruimte(@ Status_x0020_Code) = 'Voorgesteld'])" />Tweede, en ik ben een beetje vaag op dit, maar je moet ook op de waarschuwing voor de veldnaam wordt dan gewijzigd. Als u de naam van het veld "Status Code" en later op, Hernoem het naar "AFE Status", de interne naam"" verandert niet. De interne naam zal nog steeds worden "Status Code" en moet worden verwezen als "Status_x0020_Code". De "andere middelen" links kan helpen opsporen en corrigeren van dit soort probleem.
Over die kleur:
Ik pakte "rood" omdat het is prettig voor mij op dit moment. Het zou niet een big deal voor het weergeven van verschillende kleuren zodat er meer dan slechts een visuele beschrijving van een getal, maar ook om een nuttige KPI. Bijvoorbeeld, Als het percentage van de "vastgelopen" AFE van is > 10% dan Toon het rode, anders laten zien in het zwart. Gebruik <XSL:Kies> om dit te bereiken.
Andere bronnen:
- De interne naam bepalen (en andere goede info) voor de gegevens in een lijst: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Toon alle gegevens verstrekt door SharePoint (de ruwe XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Krijgen de XPATH-expressie voor een bepaalde kolom: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Een andere benadering met OWA(?). Ik heb niet gegraven in het, maar ziet er veelbelovend, vooral voor cirkeldiagrammen: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Gelukkig transformeren!
<einde />
Deze pagina voltooid de taak die was ik op zoek naar bijna.
Ik heb een groep die wil de enquête van de SharePoint-lijst gebruiken om te maken een wekelijkse poll. De vangst? Ze willen niet om code te zien… Of het systeem verandert elke keer dat ze sturen de poll (gepland voor een wekelijkse update).
Ik was in staat om sluit deze aan op de enquête-lijst en de grafiek te maken op de eerste kolom van het antwoord. Al wat ik kan niet voorspellen zijn de waarden en labels die zij nodig zullen hebben zich vooruit het bewegen. Om het te maken nog erger wellicht ze min of meer antwoorden beschikbaar elke week.
Ik zal kijken elders net in geval, maar heeft iedereen een manier gevonden om rijen en labels gebaseerd off van het aantal beschikbare opties en dynamisch instellen deze plaats hard coderen de verwachte waarden maken?
Bedankt Paul. Zeer nuttig. Dankzij uw werk, Ik was in staat om een grafiek bar kolom toevoegen aan een bestaande DVWP (bijvoorbeeld. voor taken) zeer gemakkelijk met slechts een paar regels van uw code.
In SharePoint Designer, Ik ingevoegd een gegevensweergave met de titel en % kolommen uit een takenlijst voltooien. Ik zet de cursor in een van de cellen en klik met de rechtermuisknop. Ik selecteer een kolom rechts invoegen. In de codeweergave, Ik vond de <TD> en vervangen de <XSL:-element voor tekst in de cel met uw code:
<tabel-cellpadding ="0" Cellspacing ="0" grens ="0"
breedte = "{ronde(@ PercentComplete * 100)+1}%">
<TR stijl = "background-color:rode">
<XSL:tekst uitschakelen-uitvoer-ontsnappen = "yes"><![CDATA[ ]]></XSL:tekst>
</tr>
</tabel>
Opmerking veranderde ik de rij kleurcode van bgcolor = "rood" stijl = "background-color:rood"
Ook, was in staat om te selecteren een van de kolommen in mijn lijst (@ PercentComplete) in plaats van "$ BarPercent"
Greg
Een andere methode (met behulp van alleen de Gebruikersinterface van SharePoint):
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">
Selecteer "count =(/dsQueryResponse/rijen/rij[normaliseren-ruimte(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish plaatste dit in mei 2006. Ik heb geprobeerd in MOSS 2007 en het werkt goed. Toegevoegd aan GAC, moest execadmsvcjobs en iisreset…
Grote post, Bedankt!
Grote post, Bedankt!
Hallo Paul!
Mooi werk! Ik had ook zoiets in mijn hoofd om SharePoint-lijsten op een grafische manier te bekijken 😉
Ik heb een ‘Dashboards gebruiken in SharePoint’ vraag. Wij zijn een militair hospitaal dat de MOSS-standaard gebruikt voor ons intranet en we willen graag een dashboard bouwen voor onze Commandogroep om 'realtime’ indien mogelijk. Een van de belangrijkste punten is het bekijken van de real-time huidige werklast binnen de faciliteit en letterlijk kijken het omhoog en omlaag wijzigen (wellicht te klikken “vernieuwen”/F5).
Dank u bij voorbaat,
Kan je iets nuttigs met jQuery te volbrengen dit effect. Email me op Galvin.Paul@Gmail.com en I be happy te proberen en een hand geven.