Prehľad:
(AKTUALIZÁCIA 12/04/07: Na konci, ktoré odkazujú na inom blogu, že to rieši cez veľmi zaujímavá webová časť pridáva ďalší zaujímavý zdroj)
Tento blog vstupe popisuje, ako vytvoriť stĺpcový graf v službe SharePoint. To funguje v WSS a MOSS prostredí záleží len na webovú časť zobrazenia údajov.
Celkový prístup je takto:
- Vytvorenie zoznamu alebo knižnice dokumentov, ktorá obsahuje údaje, ktoré chcete zobraziť v grafe.
- Miesto priradená knižnica dokumentov / vlastný zoznam na stranu a previesť ju do webová časť zobrazenia údajov (DVWP).
- Upraviť DVWP XSL na generovanie HTML, ktorý zobrazuje ako graf.
Obchodné scenáre / Nastavenie:
Vytvoril som vlastný zoznam s štandardný názov stĺpca a jeden ďalší stĺpec, "Stav". Modely (veľmi zjednodušene) Povolenie"pre náklad" scenár, kde názov predstavuje projekt a stav hodnotu zo zoznamu:
- Navrhované
- V procese
- Zastavil
Cieľom je vytvárať interaktívne horizontálny stĺpcový graf, ktorý ukazuje tieto stavové kódy.
Som obývané zoznamu a to vyzerá takto:
Vytvoriť webová časť zobrazenia údajov:
Vytvoriť DVWP pridaním vlastného zoznamu na stránku (stránky v mojom prípade) postupujte podľa pokynov tu (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Okrem jednoducho vytvoriť DVWP, Musíme tiež nastaviť vlastnosť stránkovanie Ukázať všetky voľné riadky. Pre mňa, Vyzerá to asi takto:
V tomto momente, Vždy zavrieť, SPD a prehliadač. Potom re-otvorení stránky pomocou prehliadača. Tým sa zabráni náhodne nakladanie horniny do rozloženie webovej časti na stránke.
Upraviť XSLT:
Teraz je čas na zmenu XSLT.
Vždy používam visual studio pre tento. (Pozrite si tu pre dôležitá poznámka o intellisense, ktorá vám pomôže veľa).
Vytvoriť prázdny projekt pridať štyri nové súbory (nahradiť slová "pôvodný" a "New" podľa potreby):
- Original.XSLT
- New.XSLT
- Originálne Params.xml
- Nové Params.xml
V mojom prípade, Vyzerá to, že to:
Upraviť webovú časť a kopírovanie params a XSL na pôvodnú"" verzia programu Visual Studio.
Cieľom je spôsobiť XSL pri transformácii výsledkov sme sa vrátili z DVWP dotazu do HTML, ktorý vykreslí ako graf.
Na tento účel, to pomáha najprv zvážiť, čo HTML by mal vyzerať skôr, než sme sa zmiasť tým, šialenstvo, ktoré je známe ako "XSL". (Aby bolo jasno, Toto je len príklad; Nechcem písať, alebo kopírovať/vložiť do programu visual studio. Ja poskytne plnú ranu východiskový bod pre ktoré neskôr v write-hore). Tieto vzorky graf je vykreslený ako HTML ihneď po:
Zodpovedajúci HTML:
<HTML> <telo> <centrum> <Tabuľka šírka = 80%> <TR><TD><centrum>Vodorovný pruhový graf</TD></TR> <TR> <Zarovnať TD = "na stred"> <orámovanie tabuľky = "1" šírka = 80%> <TR> <TD šírka = 10%>Otvorené</TD> <TD><Tabuľka cellpadding ="0" cellspacing ="0" hranicu = 0 width = 50%><TR bgcolor = červená><TD> </TD></TR></Tabuľka></TD> </TR> <TR> <TD šírka = 10%>Zatvorené</TD> <TD><Tabuľka cellpadding ="0" cellspacing ="0" hranicu = 0 width = 25%><TR bgcolor = červená><TD> </TD></TR></Tabuľka></TD> </TR> <TR> <TD šírka = 10%>Zastavil</TD> <TD><Tabuľka cellpadding ="0" cellspacing ="0" hranicu = 0 width = 25%><TR bgcolor = červená><TD> </TD></TR></Tabuľka></TD> </TR> </Tabuľka> </TD> </TR> </Tabuľka> </telo> </HTML> |
Použil som mŕtvy jednoduchý prístup k vytvoreniu moje tyče nastavenie farby pozadia riadka do "červenej".
Take-away tu je: V závere, všetko robíme vytvára HTML s riadky a stĺpce.
Šablóny XSLT:
Som skopíroval XSLT, ktorá vytvára horizontálny stĺpcový graf. Je to pomerne dobre komentované, takže nebude pridávať veľa tu okrem týchto poznámok:
- Začal som s predvolenú šablónu XSL, ktoré program SharePoint Designer mi dal, keď som najprv vytvoril DVWP.
- Bol som schopný znížiť z SPD je 657 riadky 166 riadky.
- Som nechcel neporiadok okolo s parametre súboru XML (ktorý je oddelený od XSL a budete vedieť, čo mám na mysli, keď idete na úpravu DVWP, sám; tam sú dva súbory, ktoré môžete upravovať). Avšak, s cieľom zjednodušiť, Som odstrániť takmer všetky z XSL. To znamená, že ak chcete, aby použitie týchto parametrov, Stačí pridať svoje variabilné definície XSL. Ktoré budú ľahko budete mať originálny XSL variabilné definície v projekte programu visual studio.
- By ste mali byť schopní skopírovať a vložiť priamo do projektu programu visual studio. Potom, odstrániť moje hovory a vložte hovorov do "ShowBar".
- Vnáranie diela vytvorením <a href> ako toto: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Táto technika môže byť hodnota v iných súvislostiach. Na prvom mieste, Myslel som, že budem musieť zodpovedať formátu zložitejšie: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ale v mojom prostredí, ktoré nie je potrebné. Adresa URL zoznamu je odovzdaný nás SharePoint tak je to docela jednoduché zovšeobecniť.
Tu je:
<XSL:Stylesheet verzia="1.0" vylúčiť-výsledok-predpony="r o z s ddwrt dt msxsl" |
Výsledky:
XSL zhora generuje tento graf:
Prejdite na podkladových údajov kliknutím na Stavový kód:
Záverečné myšlienky:
Môže to zovšeobecniť?
Milujem tento grafická koncept, ale nesnáším skutočnosť, že musím ísť a urobiť toľko ruka-kódovanie. Dal som trochu myslel, že či to zovšeobecňovať a ja som optimistický, ale ja som trochu strach, že môže byť tehlovej stene niekde po ceste, ktorá nebude ponúkať žiadne práce-asi. Ak má niekto nejaké dobré nápady na tomto, Skontrolujte poznámku v komentároch alebo napíšte mi.
Vertikálne grafy:
To je horizontálny stĺpcový graf. To je určite možné vytvoriť vertikálne graf. Rovnako musíme zmeniť HTML. By začať rovnakým spôsobom: Vytvorte HTML zastúpenie vertikálne stĺpcový graf a potom zistiť, ako sa dostať, že cez XSL. Ak niekto má záujem, ktorý, Mohli presvedčiť, aby to vyskúšať a pracovať mimo kinks. Ak už niekto urobil to, please let me know and I’ll gladly link to your blog 🙂
Myslím, že problém s vertikálne graf je, že menovky grafu sú ťažšie zvládať, ale vôbec nie nemožné.
Pole Názov Gotcha:
Existujú minimálne dve veci dávať pozor s názvami polí.
Prvá, názov poľa s priestorom má unikli v XSL. To bude pravdepodobne problém tu.:
<XSL:premenná meno="totalProposed"
Vyberte="Počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status) = "Navrhuje"])" />
Ak váš Status"" stĺpec sa v skutočnosti volal "Stavový kód" potom budete musieť odkaz ako "Status_x0020_Code":
<XSL:premenná meno="totalProposed"
Vyberte="Počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status_x0020_Code) = "Navrhuje"])" />Druhý, a ja som trochu fuzzy v tejto, ale musíte byť v strehu pre pole Názov zmeny. Ak názov poľa "Stavový kód" a potom neskôr, premenovať na "AFE Status", "interný názov" nemení. Interný názov bude stále "Stavový kód" a musí byť uvedený ako "Status_x0020_Code". "Iné zdroje" Odkazy môžu pomôcť diagnostikovať a opraviť tento druh problému.
O tom, že farba:
Som si vybral "červený" pretože je to potešujúce pre mňa v túto chvíľu. Nebolo by veľký problém ukázať rôzne farby tak, aby poskytla viac než len vizuálny opis niekoľkých, ale aj poskytovať užitočné KPI. Napríklad, Ak percento "zastavil" AFE to je > 10% potom to show červená, inak Ukázať, že v čiernej farbe. Použitie <XSL:Vyberte> na dosiahnutie tohto cieľa.
Iné zdroje:
- Určenie interný názov (a iné dobré info) pre údaje v zozname: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Zobraziť všetky údaje poskytované služby SharePoint (základný súbor XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Získajte výraz XPATH určitý stĺpec: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Iný prístup pomocou OWA(?). Nie som sa pustil do neho, ale vyzerá sľubne, najmä pre koláčové grafy: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Šťastný transformácia!
<koniec />
Na tejto stránke takmer dokončená úloha hľadal.
Mám skupinu, ktorá chce využiť zoznamu SharePoint prieskumu vytvoriť Týždenný Anketa. Úlovok? Nechcú vidieť kód… Alebo zmena systému, zakaždým, keď pošlú Anketa (plánované Týždenná aktualizácia).
Bol som schopný sa pripojiť tento zoznam prieskumov a vytvoriť graf na prvý stĺpec odpoveď. Čo nemôže predvídať, aj keď sú hodnoty a menovky, ktoré budú musieť dopredu. Aby to bolo horšie môžu mať viac či menej odpovedí k dispozícii každý týždeň.
Budem hľadať inde len v prípade, ale má niekto našiel spôsob, ako vytvoriť riadky a menovky, ktoré vychádza z počtu dostupných možností a dynamicky toto nastavenie namiesto tvrdo kódovanie hodnoty očakávané?
Vďaka Paul. Veľmi užitočné. Vďaka vašej práce, Bol som schopný pridať stĺpec grafu bar pre existujúce DVWP (napr.. úlohy) veľmi ľahko s len pár riadkov kódu.
V programe SharePoint Designer, Vložená zobrazenie údajov s názvom a % úplného stĺpce zo zoznamu úloh. Umiestniť kurzor do jednej bunky, a kliknite pravým tlačidlom myši. Som vyberte Vložiť stĺpec vpravo. V zobrazení kódu, Našiel som <TD> a nahradiť <XSL:textový prvok vo vnútri bunky s vaším kódom:
<Tabuľka cellpadding ="0" cellspacing ="0" hranicu ="0"
Šírka = "{kola(@PercentComplete * 100)+1}%">
<TR štýl = "Farba pozadia:červená">
<XSL:textu vypnúť-výstupný-únik = "yes"><![CDATA[ ]]></XSL:text>
</TR>
</Tabuľka>
Poznámka, som zmenil kód farby riadkov z bgcolor = "červená" štýl = "Farba pozadia:červená"
Tiež, bol schopný vyberte jeden zo stĺpcov v zozname (@PercentComplete) namiesto "$BarPercent"
Greg
Ďalšou metódou (pomocou len používateľského rozhrania služby 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">
Vyberte = "počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status)= "VL."])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish tohto vyslaný v máji 2006. Snažil som sa v meste MOSS 2007 a funguje to dobre. Pridané do GAC, musel execadmsvcjobs a iisreset…
Skvelé miesto, vďaka!
Skvelé miesto, vďaka!
Ahoj Pavla!
Pekná práca! I also had something like this in my mind to view SharePoint lists in a graphical way 😉
I have a ‘Using Dashboards in SharePoint’ Otázka. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ Ak je to možné. Jedným z hlavných bodov je prezeranie real-time aktuálne pracovné vyťaženie v rámci zariadenia a doslova pozerať hore a dole meniť (Kliknutím “obnoviť”/F5).
Ďakujem vopred,
Môžete urobiť niečo užitočného s jQuery dosiahnuť tento efekt. Mi na email Galvin.Paul@Gmail.com a ja budem rád, aby sa pokúsila dať ruku.