Přehled:
(AKTUALIZOVAT 12/04/07: Přidána další zajímavé zdroje na konci, které odkazují na jiný blog, který to řeší prostřednictvím velmi zajímavou webovou část)
Tato položka blogu popisuje, jak vytvořit pruhový graf ve službě SharePoint. To funguje v WSS nebo MOSS prostředí závisí pouze na webovou část zobrazení dat..
Celkový přístup je následující:
- Vytvořit seznam nebo knihovnu dokumentů, která obsahuje data, která chcete graf.
- Místo přidružená knihovna dokumentů / vlastní seznam na stránku a převést ji do webové části zobrazení dat (DVWP).
- Úprava XSL DVWP pro generování HTML, který zobrazuje jako graf.
Obchodní scénář / Instalace:
Vytvořil jsem vlastní seznam s standardní název sloupec a jeden další sloupec, "Status". Tyto modely (velmi Zjednodušeně) "povolení pro výdaje" scénář, kde název představuje projekt a stav hodnotu ze seznamu:
- Navrhované
- V procesu
- Zastavil
Cílem je vytvářet interaktivní vodorovný pruhový graf, který ukazuje tyto stavové kódy.
Jsem naplněn seznamu a to vypadá takto:
Vytvořit webové části zobrazení dat:
Přidáním vlastního seznamu na stránku vytvořit DVWP (Web stránky v mém případě) a podle pokynů Tady (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Kromě jednoduše vytvořit DVWP, rovněž je třeba nastavit vlastnost stránkování a zobrazit všechny dostupné řádky. Pro mě, To je něco takového:
V tomto okamžiku, Jsem vždy blízko, SPD a prohlížeč. Já znovu otevřít stránku pomocí prohlížeče. Tím je zabráněno náhodnému komolili rozložení webové části na stránce.
Upravit soubor XSLT:
Nyní je čas Chcete-li upravit soubor XSLT.
Já vždy použít visual studio pro tento. (Viz Tady Důležité upozornění o intellisense, který vám pomůže hodně).
Vytvořit prázdný projekt přidat čtyři nové soubory (nahrazení slova "originál" a "New" podle potřeby):
- Original.XSLT
- New.XSLT
- Původní Params.xml
- Nové Params.xml
V mém případě, Vypadá to jako to:
Upravit webovou část a zkopírujte parametry a XSL do originálu"" verze v aplikaci Visual Studio.
Cílem je způsobit XSL Transformace výsledky, které jsme se vrátili z DVWP dotazu do kódu HTML, který rendruje jako graf.
Za tímto účelem, To pomáhá nejprve zvážit, co HTML by měl vypadat jako předtím, než jsme se zmást šílenství, která je známá jako "XSL". (Aby bylo jasno, je jen příklad; nechcete napsat nebo kopírovat/vložit do sady visual studio. Poskytuji plnou ránu, výchozí bod pro to později v psát-up). Následující ukázkový graf je vykresleno jako HTML, bezprostředně po:
Odpovídající HTML:
<HTML> <tělo> <centrum> <tabulka šířka = 80 %> <TR><TD><centrum>Vodorovný pruhový graf</TD></TR> <TR> <TD align = "na střed"> <ohraničení tabulky = "1" Šířka = 80 %> <TR> <TD width = 10 %>Otevřené</TD> <TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 50 %><TR bgcolor = červená><TD> </TD></TR></Tabulka></TD> </TR> <TR> <TD width = 10 %>Zavřeno</TD> <TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 25 %><TR bgcolor = červená><TD> </TD></TR></Tabulka></TD> </TR> <TR> <TD width = 10 %>Zastavil</TD> <TD><tabulka cellpadding ="0" CellSpacing ="0" hranice = 0 width = 25 %><TR bgcolor = červená><TD> </TD></TR></Tabulka></TD> </TR> </Tabulka> </TD> </TR> </Tabulka> </tělo> </HTML> |
Použil jsem mrtvý jednoduchý přístup k vytváření plno nastavením barvu pozadí řádku "Red".
S sebou tady je to: Na konci, vše co děláme je vytváření HTML s řádky a sloupci.
Šablony XSLT:
Zkopíroval jsem XSLT, který generuje vodorovný pruhový graf. Je to docela dobře poznamenal, takže nebudu přidávat mnohem zde kromě těchto poznámek:
- Začal jsem s výchozí šablonu stylů XSL, které aplikace SharePoint Designer mi dal, když jsem poprvé vytvořil DVWP.
- Byl jsem schopen to kácet od SPD 657 řádky 166 čáry.
- Nechtěl nepořádek kolem s parametry XML souboru (který je oddělen od XSL a budete vědět, co mám na mysli, když jdete k úpravě DVWP, sama o sobě; Existují dva soubory, které lze upravit). Avšak, za účelem zjednodušení it, Téměř všechny z nich odebírat XSL. To znamená, že pokud chcete využít těchto parametrů, Potřebujete jen přidat jejich definice proměnných do XSL. To bude snadné, protože budete mít původní definice proměnných XSL v projektu aplikace visual studio.
- Měl bys být schopen kopírovat a vložit přímo do projektu aplikace visual studio. Pak, mé volání a vložte svůj vlastní volání "ShowBar".
- Procházení dolů funguje vytvořením <href> Nějak tak: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Tato technika může být hodnoty v jiných kontextech. Zpočátku, Myslel jsem, že budu muset odpovídat složitější formátu: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ale v mém prostředí, které není nutné. V seznamu adresa URL je předána k nám službou SharePoint, takže to je docela snadné zobecnit.
Tady to je:
<XSL:Šablona stylů verze="1.0" vyloučit výsledek předpony="r z o s ddwrt dt msxsl" |
Výsledky:
XSL shora generuje graf:
Přejít na podkladová data po kliknutí na kód stavu:
Závěrečné myšlenky:
Může to být generalizovaná?
Miluji tento rozšířil koncept, Ale nelíbí se mi že budu muset jít a udělat to ručně kódování. Dal jsem trochu myslel na to, zda může být generalizovaná a já jsem optimistický, Ale já jsem trochu strach, že může existovat cihlovou zeď někde po cestě, která nenabízí žádné řešení. Pokud má někdo nějaké dobré nápady na tomto, Prosím Povšimněte si v komentářích nebo napište mi.
Vertikální grafy:
To je vodorovný pruhový graf. To je jistě možné vytvořit svislý graf. Jen je třeba změnit kód HTML. Začal bych stejně: Vytvořit HTML podoba svislý pruhový graf a pak zjistit, jak se dostat, že pomocí XSL. Pokud někdo má zájem v tom, Jsem mohl přesvědčit, aby to vyzkoušet a věnovat. Pokud již někdo udělal, prosím dejte mi vědět a já budu rád odkaz na svůj blog 🙂
Myslím, že problém s vertikální graf je, že popisky grafu jsou obtížnější spravovat, ale rozhodně ne nemožné.
Pole název Gotcha:
Existují přinejmenším dvě věci dávat pozor s názvy polí.
První, Název pole s mezerou musí být uvozena v XSL. To bude pravděpodobně problém zde:
<XSL:Proměnná Jméno="totalProposed"
vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status) =, "Navrhl"])" />
Pokud váš Status"" sloupec se jmenuje "stavový kód" pak je třeba se na něj odkazovat jako "Status_x0020_Code":
<XSL:Proměnná Jméno="totalProposed"
vybrat="hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status_x0020_Code) =, "Navrhl"])" />Druhé, a já jsem trochu neostrý, v tomto, ale musíte také být v pohotovosti pro změny názvu pole. Pokud zadáte název pole "kód stavu" a pak později, přejmenovat na "AFE Status", "vnitřní název" nic nemění. Vnitřní název stále bude stavový kód"" a musí na něj odkazovat jako "Status_x0020_Code". "Jiné zdroje" odkazy mohou pomoci diagnostikovat a opravit tento druh problému.
O této barvy:
Vybral jsem "červená" protože je to potěšující pro mě v tuto chvíli. To nebude velký problém Ukázat různé barvy tak, aby se víc než jen vizuální popis čísla, ale také poskytnout užitečný ukazatel KPI. Například, je-li procento "zastavil" Je AFE je > 10% pak Ukázat červený, jinak to Ukázat v černém. Použití <XSL:zvolit> k dosažení tohoto.
Další zdroje:
- Vnitřní název (a další dobré informace) pro data v seznamu: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Zobrazit všechna data poskytované služby SharePoint (dokument XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Získejte XPATH výraz určitého sloupce: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Další přístup pomocí aplikace OWA(?). Ještě se zakopali do ní, ale vypadá slibně, zejména pro výsečové grafy: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Šťastný transformace!
<Konec />
Na této stránce téměř dokončen úkol, který jsem hledal.
Mám skupinu, která chce použít seznam SharePoint průzkumu vytvoření týdenní hlasování. Úlovek? Oni nechtějí vidět kód… Nebo změnit systém pokaždé, když pošlou do ankety (plánované pro týdenní aktualizace).
Byl jsem schopen to připojit k seznamu průzkumu a vytvořit graf v prvním sloupci odpověď. Co nedokážu předpovědět, i když jsou hodnoty a názvy, které budou potřebovat posun vpřed. Aby se věci ještě horší mohou mít více či méně odpovědi, které jsou k dispozici každý týden.
Budu hledat jinde jen v případě, Ale někdo našel způsob, jak vytvořit řádky a štítky založené mimo počet dostupných možností a dynamicky nastavení těchto spíše než těžké kódování očekávané hodnoty?
Díky Pavel. Velmi užitečné. Díky vaší práce, Byl jsem schopen přidat sloupec grafu bar na stávající DVWP (např.. pro úkoly) velmi snadno s jen pár řádků kódu.
V aplikaci SharePoint Designer, Vložení zobrazení dat s názvem a % kompletní sloupce ze seznamu úkolů. Umístěte kurzor do jedné z buněk a klepněte pravým tlačítkem myši. Já vyberte Vložit sloupec vpravo. V zobrazení kódu, Našel jsem <TD> a nahrazuje <XSL:textový prvek uvnitř buňky s kódem:
<tabulka cellpadding ="0" CellSpacing ="0" hranice ="0"
Width = "{kolo(@PercentComplete * 100)+1}%">
<TR style = "background-color:červená">
<XSL:textu zakázat výstup unikající = "Ano"><![CDATA[ ]]></XSL:text>
</TR>
</Tabulka>
Poznámka: změnil jsem kód barvy řádků z bgcolor = "red" Chcete-li styl = "background-color:červená"
Rovněž, byl schopen vybrat jeden ze sloupců v seznamu (@PercentComplete) místo "$BarPercent"
Greg
Další metoda (použití pouze v uživatelském rozhraní 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 = "hrabě(/dsQueryResponse/řádky/řádek[normalizovat prostor(@Status)= 'NEDOKONČENÉ'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish posta v květnu 2006. Snažil jsem se v MECHU 2007 a funguje to dobře. Přidáno do GAC, musel execadmsvcjobs a iisreset…
Velké post, Dík!
Velké post, Dík!
Ahoj Paul!
Dobrá práce! Také jsem měl něco takového v mé mysli, pro prohlížení seznamů SharePoint v grafickém způsobem 😉
Mám ‚Používání panelů v SharePoint’ otázka. Jsme vojenská nemocnice pomocí standardních MOSS pro náš intranet a chtěli vybudovat dashboard pro naši Command Group vidět ‚v reálném čase’ Pokud je to možné. Jedním z hlavních bodů je prohlížení v reálném čase aktuální vytížení v zařízení a doslova dívat nahoru a dolů měnit (kliknout na tlačítko “aktualizovat”/F5).
Předem děkuji,
Můžete udělat něco užitečného s jQuery dosáhnout tohoto efektu. Mi na email Galvin.Paul@gmail.com a já budu rád, aby se pokusila dát ruku.