Decembra | 2007 | Paul Galvin SharePoint priestoru

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" 
 xmlns:msxsl="urna:schémy-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/1999/XSL/Transform" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:ASP="http://schemas.microsoft.com/ASPNET/20" xmlns:DDWRT="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urna:schémy-microsoft-com:úrad" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:r="urna:schémy-microsoft-com:Skupina riadkov" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urna:FrontPage:vnútorný">
  <XSL:výstup metóda="HTML" zarážka="nie" />
  <XSL:formáte desatinného čísla NaN="" />
  <XSL:param meno="ListUrlDir"></XSL:param> <!-- Potrebujem to na podporu vrták-dole.  -->

  <XSL:šablóny zápas="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <XSL:premenná meno="dvt_StyleName">Tabuľka</XSL:premenná>
    <XSL:premenná meno="Riadky" Vyberte="/dsQueryResponse, riadky/riadok" />
    <XSL:premenná meno="dvt_RowCount" Vyberte="Počet($Riadky)" />
    <XSL:premenná meno="IsEmpty" Vyberte="$dvt_RowCount = 0" />
    <XSL:premenná meno="dvt_IsEmpty" Vyberte="$dvt_RowCount = 0" />

    <XSL:Vyberte>
      <XSL:keď, kedy skúška="$dvt_IsEmpty">
        Neexistujú žiadne údaje na grafe!<br/>
      </XSL:keď, kedy>
      <XSL:inak>

        <!--
          Zaujímavé veci začína tu.

          Musíme definovať dvojica premenných pre každý riadok v grafe: celkový počet položiek a percent z celkového.
        -->
        <XSL:premenná meno="totalProposed" Vyberte="Počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status) = "Navrhuje"])" />
        <XSL:premenná meno="percentProposed" Vyberte="$totalProposed div $dvt_RowCount" />

        <XSL:premenná meno="totalInProcess" Vyberte="Počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status) = "V procese"])" />
        <XSL:premenná meno="percentInProcess" Vyberte="$totalInProcess div $dvt_RowCount" />

        <XSL:premenná meno="totalStalled" Vyberte="Počet(/dsQueryResponse, riadky/riadok[normalizovať priestor(@Status) =, "Zastavil"])" />
        <XSL:premenná meno="percentStalled" Vyberte="$totalStalled div $dvt_RowCount" />

        <!--
          Budeme definovať naša tabuľka HTML tu.  I 'm výpožičky z niektoré štandardné štýly SharePoint tu aby bolo konzistentné.  Myslím, že to bude ctiť zmeny globálnej css súbor rovnako ako tému prepíše.
        -->
        <Tabuľka šírka="100%" cellspacing="0" cellpadding="2"
štýl="orámovanie-pravý: 1 pevné #C0C0C0; dolné orámovanie: 1 pevné #C0C0C0; orámovanie vľavo: pevné; Šírka orámovania vľavo: 1; štýl orámovania hore: pevné; Šírka orámovania hore: 1;">

           <TR>
            <TD Zarovnať="centrum">
              <Tabuľka orámovanie="1" šírka="100%">

                <!--
                  Pre každý stav, ktorý chceme graf, nazývame "ShowBar" šablóny.
                  Sme sa prejsť:
                  1. Menovky riadka.  To je transformovaný do hypertextového prepojenia.
                  2. Percento (ukazovateľ zhora).
                  3. Skutočného názvu poľa kód zo zoznamu základných.  To nie je potrebné prispôsobiť menovku.
                  4. Hodnota v poli uzavreté pre #3.
                  5. Celkový počet položiek tento kód stavu (nie celkový súčet všetkých stavové kódy).

                  To vydáva <TR></TR> a horizontálny stĺpcový graf linky.

                  Nazývame túto šablónu pre každý kód stavu chceme Zobraziť.
                -->
                <XSL:call-template meno="ShowBar">
                  <XSL:s-param meno="BarDisplayLabel" Vyberte=""Navrhované""/>
                  <XSL:s-param meno="BarPercent" Vyberte="$percentProposed"/>
                  <XSL:s-param meno="QueryFilterFieldName" Vyberte=""Stav""/>
                  <XSL:s-param meno="QueryFilterFieldValue" Vyberte=""Navrhované""/>
                  <XSL:s-param meno="TotalItems" Vyberte="$totalProposed"></XSL:s-param>
                </XSL:call-template>

                <XSL:call-template meno="ShowBar">
                  <XSL:s-param meno="BarDisplayLabel" Vyberte=""Zastavil""/>
                  <XSL:s-param meno="BarPercent" Vyberte="$percentStalled"/>
                  <XSL:s-param meno="QueryFilterFieldName" Vyberte=""Stav""/>
                  <XSL:s-param meno="QueryFilterFieldValue" Vyberte=""Zastavil""/>
                  <XSL:s-param meno="TotalItems" Vyberte="$totalStalled"></XSL:s-param>
                </XSL:call-template>

                <XSL:call-template meno="ShowBar">
                  <XSL:s-param meno="BarDisplayLabel" Vyberte=""V procese""/>
                  <XSL:s-param meno="BarPercent" Vyberte="$percentInProcess"/>
                  <XSL:s-param meno="QueryFilterFieldName" Vyberte=""Stav""/>
                  <XSL:s-param meno="QueryFilterFieldValue" Vyberte=""V procese""/>
                  <XSL:s-param meno="TotalItems" Vyberte="$totalInProcess"></XSL:s-param>
                </XSL:call-template>

              </Tabuľka>
            </TD>
          </TR>
        </Tabuľka>
      </XSL:inak>
    </XSL:Vyberte>
  </XSL:šablóny>

  <!--
    Táto šablóna funguje zobrazovanie jednotlivých čiar v stĺpcový graf.

    Budete pravdepodobne robiť väčšinu z ladenie tu..
  -->
  <XSL:šablóny meno="ShowBar">
    <XSL:param meno="BarDisplayLabel" /> <!-- štítok na zobrazenie -->
    <XSL:param meno="BarPercent"/> <!-- Percento zo súčtu. -->
    <XSL:param meno="QueryFilterFieldName"/> <!-- Používa ku skoku do dotazu & filtra -->
    <XSL:param meno="QueryFilterFieldValue"/> <!-- Používa ku skoku do dotazu & filtra -->
    <XSL:param meno="TotalItems" /> <!-- celkový počet tejto barlabel -->

    <TR>

      <!-- Bar štítok sám. -->
      <TD trieda="MS-formbody" šírka="30%">

        <!--
          Túto ďalšiu sadu vyhlásenia buduje reťazec dotazu, ktorý umožňuje vŕtať až do filtrované zobrazenie základných údajov.
          Robíme používať pár vecí tu.:
          1. Môžeme prejsť FilterField1 a FilterValue1 do zoznamu filter na stĺpec.
          2. SharePoint je absolvovanie kľúčovým parametrom pre nás, ListUrlDir, ktorý odkazuje na príslušnom zozname, proti ktorému tento DVWP "beží".

          Nie je sranda XSL?
        -->
        <XSL:text zakázať-výstupný-únik="áno">
        <![CDATA[<href ="]]></XSL:text>
        <XSL:hodnoty z Vyberte="$ListUrlDir"/>
        <XSL:text zakázať-výstupný-únik="áno"><![CDATA[?FilterField1 =]]></XSL:text>
        <XSL:hodnoty z Vyberte="$QueryFilterFieldName"/>
        <XSL:text zakázať-výstupný-únik="áno"><![CDATA[&FilterValue1 =]]></XSL:text>
        <XSL:hodnoty z Vyberte="$QueryFilterFieldValue"/>
        <XSL:text zakázať-výstupný-únik="áno"><![CDATA[">]]></XSL:text>
        <XSL:hodnoty z Vyberte="$BarDisplayLabel"/>
        <XSL:text zakázať-výstupný-únik="áno"><![CDATA[</a>]]></XSL:text>

        <!-- Ďalší kúsok ukazuje niektoré čísla vo formáte: "(celkom / % celkom)" -->
        (<XSL:hodnoty z Vyberte="$TotalItems"/> /

        <!-- To vytvára pekný percenta štítok pre nás.  vďaka, Microsoft! -->
        <XSL:call-template meno="percentformat">
          <XSL:s-param meno="percenta" Vyberte="$BarPercent"/>
        </XSL:call-template>)

      </TD>

      <!-- Nakoniec, vyžarovanie <TD> označiť za bar sám.-->
      <TD>
        <Tabuľka cellpadding="0" cellspacing="0" orámovanie="0"
šírka="{kola($BarPercent * 100)+1}%">
          <TR bgcolor="červená">
            <XSL:text zakázať-výstupný-únik="áno"><![CDATA[&nbsp;]]></XSL:text>
          </TR>
        </Tabuľka>
      </TD>
    </TR>

  </XSL:šablóny>

  <!-- To je prevzaté priamo z niektorých XSL našiel v šablóne programu MS. -->
  <XSL:šablóny meno="percentformat">
    <XSL:param meno="percenta"/>
    <XSL:Vyberte>
      <XSL:keď, kedy skúška="formát-čísla($percenta, '#,##0%;-#,##0%')= "NaN"">0%</XSL:keď, kedy>
      <XSL:inak>
        <XSL:hodnoty z Vyberte="formát-čísla($percenta, '#,##0%;-#,##0%')" />
      </XSL:inak>
    </XSL:Vyberte>
  </XSL:šablóny>

</XSL:Stylesheet>

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!

Vyberajte môj blog!

Technorati Tags: SharePoint, DVWP, Webová časť zobrazenia údajov, XSL, XSLT, WSS, MACHY

Paul Galvin SharePoint priestoru

mesačné archívy: Decembra 2007

Vytvoriť Bar grafy SharePoint