December | 2007 | Paul Galvin SharePoint hely

– Áttekintés:

(FRISSÍTÉS 12/04/07: Végére egy másik érdekes forrás egy másik blogot, hogy foglalkozik ez keresztül egy nagyon érdekes kijelző csatolása)

Ez a blog bejegyzés ismerteti, hogyan lehet egy oszlopdiagram létrehozása a SharePoint rendszerben. Ez szerkezet-ban WSS és a moha, ez csak attól függ, az adatnézet kijelzőkön.

Átfogó megközelítését a következőképpen:

Hozzon létre egy lista vagy dokumentumtár a diagramra felvenni kívánt adatokat tartalmazó.
Hely a hozzájuk tartozó dokumentumtár / Egyéni lista alakzatot a rajzlapra, és megtérít ez-hoz egy adatnézet kijelzőkön (DVWP).
Módosítsa a DVWP XSL-hoz létrehoz HTML, mint egy grafikon mutatja.

Üzleti forgatókönyv / A telepítő:

Nekem van teremtett egy szokás oldalra dől, a standard cím oszlopot és egy további oszlopot, "Állapot". E modellek (nagyon leegyszerűsítve) "engedély kiadás" forgatókönyv, ahol a cím a projekt és az állapot egy értéket képvisel a listából:

Javasolt
A folyamat
Leállt

Célja, hogy készítsen egy interaktív vízszintes oszlopdiagramon, amely azt mutatja, ezek az állapotkódok.

Én lakott a listát, és úgy néz ki, mint ez:

Hozzon létre az adatnézet kijelzőkön:

Hozzon létre a DVWP az egyéni lista hozzáadása egy oldal (az én esetemben oldalra) kövesse az utasításokat, és itt (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Mellett egyszerűen létre a DVWP, is be kell állítani a lapozófájl tulajdonság minden rendelkezésre álló sorok megjelenítéséhez. Nekem, Ez valahogy így néz ki:

Ezen a ponton, Mindig zárja be az SPD és a böngésző. Majd újra megnyitja a böngésző segítségével az oldalon. Ezzel elkerülhető, hogy véletlenül mucking fel a web rész elrendezése az oldalon.

Az XSLT módosítása:

Itt az ideje, hogy módosítsa az XSLT.

Én mindig használ Látási Műterem részére ez. (Lásd: itt egy fontos megjegyzés az intellisense, amit akarat segít ön alot).

Én egy üres projekt létrehozása négy új fájlok hozzáadása (a szó "eredeti cseréje" és az "új" szükség szerint):

Original.XSLT
New.XSLT
Eredeti Params.xml
Új Params.xml

Az én esetemben, úgy néz ki mint ez:

Módosíthatja a kijelző, és másolja a "params" és az "eredeti XSL" a Visual Studio verzió.

Itt célja, hogy átalakítani az eredményeket kapunk vissza DVWP a lekérdezésből HTML, hogy egy gráf XSL okoz.

Ebből a célból, Ez segít, hogy először fontolja meg, amit a HTML kell kinéznie előtt mi kap megzavarodott az az őrület, hogy az úgynevezett "XSL". (Világos, a következő egyszerűen egy példa; ne írja be vagy másolja be a visual studio. Én beszerez egy kiindulási pont, hogy később, a túlzó feldicsérés teljes ütés). Az alábbi minta grafikon jelenik meg, mint a HTML követően azonnal:

Megfelelő HTML:

<HTML>
<szerv>
<központ>
<asztal szélesség = 80 %>
<TR><TF><központ>Vízszintes sáv grafikon</TF></TR>
<TR>
<TD igazítása = "center">
<Táblázatszegély = "1" szélesség = 80 %>
<TR>
<TD szélessége 10 % =>Nyitott</TF>
<TF><táblázat cellpadding ="0" a CellSpacing ="0" border = 0 width = 50 %><TR bgcolor = piros><TF> </TF></TR></táblázat></TF>
</TR>
<TR>
<TD szélessége 10 % =>Zárt</TF>
<TF><táblázat cellpadding ="0" a CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = piros><TF> </TF></TR></táblázat></TF>
</TR>
<TR>
<TD szélessége 10 % =>Leállt</TF>
<TF><táblázat cellpadding ="0" a CellSpacing ="0" border = 0 width = 25 %><TR bgcolor = piros><TF> </TF></TR></táblázat></TF>
</TR>
</táblázat>
</TF>
</TR>
</táblázat>
</szerv>
</HTML>

Én használt egy halott egyszerű megközelítés kialakítása a bárok, egymás után a "piros" háttérszínének beállításával.

Az elvitelre itt ez: A végén, minden teszünk hoz létre HTML sorokat és oszlopokat tartalmazó.

Sablon XSLT:

Én másolta az XSLT, amit létrehoz egy vízszintes oszlopdiagramon. Meglehetősen jól nyilatkozott így nem adhatok sokkal itt kivételével ezek a megjegyzések:

Elkezdtem az alapértelmezett XSL, SharePoint Designer adta velem, a DVWP első létrehozásakor.
Voltam képes-hoz levág ez SPD 657 sorok 166 vonalak.
Nem rendetlenség a paraméter XML fájl (amely elkülönül az XSL, és tudni fogod, mit jelent, ha megy, hogy módosítsa a DVWP, maga; vannak kettő fájlokat módosíthatja). Azonban, annak érdekében, hogy egyszerűsítse, Volt szinte az összes eltávolítása az XSL. Ez azt jelenti, hogy ha azt szeretné, hogy ezek a paraméterek használata, Ön csak kell hozzáadni a változó fogalommeghatározások vissza az XSL. Könnyű lesz, mivel az eredeti XSL változó fogalommeghatározások Önnek a visual studio programban.
Kellene, hogy legyen képes-hoz másol és tészta ez közvetlenül a visual studio projekt. Majd, távolítsa el az én hívások, és helyezze be saját kéri, hogy "ShowBar".
A leásás szerkezet mellett teremtő egy <a href> tetszik: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Ezt a technikát lehet más kontextusban. Az első, Azt hittem, hogy én kell, hogy megfelelnek a bonyolultabb formátum: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, de a környezetemben nem szükséges. A lista URL-Címének átadott minket a SharePoint így ez elég könnyű, hogy általánosítani.

Itt van:

<XSL:stíluslap változat="1.0" kizár-eredmény-előtagok="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urna:schemas-microsoft-com:XSLT" xmlns:XSL="http://1999/XSL/átalakító www.w3.org/" 
 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:schemas-microsoft-com:Office" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urna:schemas-microsoft-com:a sorhalmaz" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urna:a FrontPage:belső">
  <XSL:kimeneti a módszer="HTML" francia="nem" />
  <XSL:tizedes formátum NaN="" />
  <XSL:param név="ListUrlDir"></XSL:param> <!-- Szükségem van ez-egy leásási támogatásához.  -->

  <XSL:sablon meccs="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <XSL:változó név="dvt_StyleName">Táblázat</XSL:változó>
    <XSL:változó név="Sorok" Válassza ki="/Sorok/dsQueryResponse/sor" />
    <XSL:változó név="dvt_RowCount" Válassza ki="gróf($Sorok)" />
    <XSL:változó név="IsEmpty" Válassza ki="$dvt_RowCount = 0" />
    <XSL:változó név="dvt_IsEmpty" Válassza ki="$dvt_RowCount = 0" />

    <XSL:Válassza a>
      <XSL:mikor teszt="$dvt_IsEmpty">
        Nincs olyan adat, grafikon!<br/>
      </XSL:mikor>
      <XSL:egyébként>

        <!--
          Az érdekes dolgok itt kezdődik.

          Szükségünk van egy pár, az egyes sorokban változójának meghatározása a grafikonon: elemek és százaléka a teljes száma.
        -->
        <XSL:változó név="totalProposed" Válassza ki="gróf(/Sorok/dsQueryResponse/sor[tér-normalizálása(@Status) = A "Javasolt"])" />
        <XSL:változó név="percentProposed" Válassza ki="$totalProposed div $dvt_RowCount" />

        <XSL:változó név="totalInProcess" Válassza ki="gróf(/Sorok/dsQueryResponse/sor[tér-normalizálása(@Status) = "Folyamatban"])" />
        <XSL:változó név="percentInProcess" Válassza ki="$totalInProcess div $dvt_RowCount" />

        <XSL:változó név="totalStalled" Válassza ki="gróf(/Sorok/dsQueryResponse/sor[tér-normalizálása(@Status) = "Leállt"])" />
        <XSL:változó név="percentStalled" Válassza ki="$totalStalled div $dvt_RowCount" />

        <!--
          Mi határozza meg a HTML-táblázat itt.  Vagyok hitelfelvétel, néhány szabványos SharePoint stílusokat itt, hogy következetes.  Azt hiszem, ez akkor is figyelembe veszi a globális css fájl módosításai, valamint a téma felülbírálja.
        -->
        <táblázat szélessége="100%" a CellSpacing="0" CellPadding="2"
stílus="Border-jobbra: 1 szilárd #C0C0C0; Border-bottom: 1 szilárd #C0C0C0; határ-left-style: szilárd; Border-left-width: 1; határ menti top-stílusú: szilárd; határ menti top-szélességű: 1;">

           <TR>
            <TF igazítása="központ">
              <táblázat határ="1" szélessége="100%">

                <!--
                  Az egyes állapotok, amit szeretnénk, a graph, a "ShowBar hívjuk." sablon.
                  Mi adja át:
                  1. A sorok feliratát.  Ez alakul át a hiperhivatkozás.
                  2. A százalékos (a fenti változó).
                  3. A mező tényleges nevével, a kód a mögöttes lista.  Ez nem feltétlenül egyezik meg a megjelenítési címkéjével.
                  4. Mezőérték kiegyenlített #3.
                  5. Ezt az állapotkódot a teljes cikkek (nem a végösszeg minden állapotkódok).

                  Bocsát ki egy <TR></TR> és a vízszintes sáv grafikon.

                  Hívjuk ezt a sablont minden állapotkód, azt akarjuk, hogy Nézd.
                -->
                <XSL:call-template név="ShowBar">
                  <XSL:with-param név="BarDisplayLabel" Válassza ki=""Javasolt""/>
                  <XSL:with-param név="BarPercent" Válassza ki="$percentProposed"/>
                  <XSL:with-param név="QueryFilterFieldName" Válassza ki=""Állapot""/>
                  <XSL:with-param név="QueryFilterFieldValue" Válassza ki=""Javasolt""/>
                  <XSL:with-param név="TotalItems" Válassza ki="$totalProposed"></XSL:with-param>
                </XSL:call-template>

                <XSL:call-template név="ShowBar">
                  <XSL:with-param név="BarDisplayLabel" Válassza ki=""Leállt""/>
                  <XSL:with-param név="BarPercent" Válassza ki="$percentStalled"/>
                  <XSL:with-param név="QueryFilterFieldName" Válassza ki=""Állapot""/>
                  <XSL:with-param név="QueryFilterFieldValue" Válassza ki=""Leállt""/>
                  <XSL:with-param név="TotalItems" Válassza ki="$totalStalled"></XSL:with-param>
                </XSL:call-template>

                <XSL:call-template név="ShowBar">
                  <XSL:with-param név="BarDisplayLabel" Válassza ki=""Folyamatban""/>
                  <XSL:with-param név="BarPercent" Válassza ki="$percentInProcess"/>
                  <XSL:with-param név="QueryFilterFieldName" Válassza ki=""Állapot""/>
                  <XSL:with-param név="QueryFilterFieldValue" Válassza ki=""Folyamatban""/>
                  <XSL:with-param név="TotalItems" Válassza ki="$totalInProcess"></XSL:with-param>
                </XSL:call-template>

              </táblázat>
            </TF>
          </TR>
        </táblázat>
      </XSL:egyébként>
    </XSL:Válassza a>
  </XSL:sablon>

  <!--
    Ez a sablon nem a munka az egyéni sorok megjelenítését az oszlopdiagram.

    Akkor valószínűleg nem a csípés itt a legtöbb.
  -->
  <XSL:sablon név="ShowBar">
    <XSL:param név="BarDisplayLabel" /> <!-- Címke megjelenítése -->
    <XSL:param név="BarPercent"/> <!-- Teljes százaléka. -->
    <XSL:param név="QueryFilterFieldName"/> <!-- Ugrani, a lekérdezéshez használt & szűrő -->
    <XSL:param név="QueryFilterFieldValue"/> <!-- Ugrani, a lekérdezéshez használt & szűrő -->
    <XSL:param név="TotalItems" /> <!-- a barlabel száma -->

    <TR>

      <!-- A bár címkét önmagában. -->
      <TF osztály="MS-formbody" szélessége="30%">

        <!--
          Ezt a következő meg a kimutatások épít egy lekérdezési karakterláncot, amely lehetővé teszi számunkra, hogy fúr legyőz-hoz egy szűrt nézet alapjául szolgáló adatok.
          Mi csinál használ-ból egy pár dolgot itt:
          1. Tudjuk átadni FilterField1 és a FilterValue1 listájának szűréséhez, oszlop.
          2. SharePoint halad a kulcsparamétert nekünk, ListUrlDir, amely rámutat arra, hogy a mögöttes lista, amely ellen a DVWP "fut".

          Nem XSL-vicces?
        -->
        <XSL:szöveg Megbénít kimeneti elől="igen">
        <![CDATA[<a href ="]]></XSL:szöveg>
        <XSL:érték-ból Válassza ki="$ListUrlDir"/>
        <XSL:szöveg Megbénít kimeneti elől="igen"><![CDATA[?FilterField1 =]]></XSL:szöveg>
        <XSL:érték-ból Válassza ki="$QueryFilterFieldName"/>
        <XSL:szöveg Megbénít kimeneti elől="igen"><![CDATA[&FilterValue1 =]]></XSL:szöveg>
        <XSL:érték-ból Válassza ki="$QueryFilterFieldValue"/>
        <XSL:szöveg Megbénít kimeneti elől="igen"><![CDATA[">]]></XSL:szöveg>
        <XSL:érték-ból Válassza ki="$BarDisplayLabel"/>
        <XSL:szöveg Megbénít kimeneti elől="igen"><![CDATA[</egy>]]></XSL:szöveg>

        <!-- A következő darab mutatja néhány számot a formátum: "(összesen / % a teljes)" -->
        (<XSL:érték-ból Válassza ki="$TotalItems"/> /

        <!-- Ez létrehoz egy szép százalékos címke számunkra.  kösz, A Microsoft! -->
        <XSL:call-template név="percentformat">
          <XSL:with-param név="százalék" Válassza ki="$BarPercent"/>
        </XSL:call-template>)

      </TF>

      <!-- Végül, bocsátanak ki egy <TF> a sáv tag maga.-->
      <TF>
        <táblázat CellPadding="0" a CellSpacing="0" határ="0"
szélessége="{kerek($BarPercent * 100)+1}%">
          <TR Háttérszín="piros">
            <XSL:szöveg Megbénít kimeneti elől="igen"><![CDATA[&nbsp;]]></XSL:szöveg>
          </TR>
        </táblázat>
      </TF>
    </TR>

  </XSL:sablon>

  <!-- Ez valóban közvetlenül néhány XSL, találtam egy MS-sablon. -->
  <XSL:sablon név="percentformat">
    <XSL:param név="százalék"/>
    <XSL:Válassza a>
      <XSL:mikor teszt="formátum-szám($százalék, '#,##0%;-#,##0%')= "NaN"">0%</XSL:mikor>
      <XSL:egyébként>
        <XSL:érték-ból Válassza ki="formátum-szám($százalék, '#,##0%;-#,##0%')" />
      </XSL:egyébként>
    </XSL:Válassza a>
  </XSL:sablon>

</XSL:stíluslap>

Az eredmények:

Az XSL-ból fenti generál ez a grafikon:

Leásás az alapul szolgáló adatok mellett csattanó a státusz-kód:

Záró gondolatok:

Ez általánosítható?

Imádom ezt a fogalmat grafikonrajzoló, de utálom az a tény, hogy van, hogy megy, és nem annyira kézi kódolást. Adtam egy kis gondolat, hogy vajon általánosítható, és én optimista vagyok, de én is egy kicsit félelmetes, hogy lehet, hogy egy téglafal, valahol az úton, amit nem felajánl akármi dolgozik-körül. Ha akárki birtokol némely jó eszme, ez a, Kérjük, hogy egy Megjegyzés a hozzászólások, vagy elektronikus levél én.

Függőleges grafikonok:

Ez a vízszintes sáv. Minden bizonnyal lehetséges, hogy hozzon létre egy függőleges grafikon. Mi csak meg kell változtatni a HTML. I 'd start ugyanúgy: Hozzon létre egy HTML ábrázolása egy függőleges sáv grafikon, és majd kitaláljuk, hogyan kap, hogy keresztül XSL. Ha valaki érdekel, hogy, Én is rávették, hogy próbálja ki, és dolgozzanak ki a csomó. Ha valaki már megtette, hogy, kérem tudassa velem, és én szívesen hivatkoznak, hogy a blog 🙂

Azt hiszem, hogy egy függőleges grafikon kihívás az, hogy a címkék a diagram nehezebben kezelhető, Természetesen nem lehetetlen, de.

A mező neve megvagy:

Legalább két dolgot kell figyelnie kell a mezőneveket.

Első, a mező nevét egy hely van, hogy megmenekült az XSL. Ez valószínűleg egy probléma itt:

        <XSL:változó név="totalProposed" 
 Válassza ki="gróf(/Sorok/dsQueryResponse/sor[tér-normalizálása(@Status) = A "Javasolt"])" />

Ha a "státusz" oszlop van valójában nevezett állapot kódja"" akkor kell hivatkozni, mint "Status_x0020_Code":
   <XSL:változó név="totalProposed" 
 Válassza ki="gróf(/Sorok/dsQueryResponse/sor[tér-normalizálása(@Status_x0020_Code) = A "Javasolt"])" />
Második, és én vagyok egy kicsit zavaros ez, de akkor is kell a figyelmeztető jelzést, a mező nevének módosítása. Ha nevet a mező "állapot kódja" majd később, a, átnevez ez-hoz "AFE állapot", a "belső név" nem változtatja meg. A belső név továbbra is "állapot kódja" és kell hivatkozni, mint "Status_x0020_Code". Az "egyéb források" linkek segíthetnek diagnosztizálni és kijavítani ezt a fajta probléma.

Arról, hogy a szín:

Én felvette a "piros" mert ez kellemes számomra abban a pillanatban. Nem lenne nagy dolog megmutatni annak érdekében, hogy több, mint egy vizuális leírása több színben, de hogy hasznos fő Teljesítménymutató. Például, Ha a százalékos "leállt" AFE barátait > 10% akkor mutasd meg a piros, egyébként Térkép fekete. Használata <XSL:Válassza a> Ehhez.

Más források:

A belső név meghatározása (és egyéb jó értesít) a listában lévő adatok: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
SharePoint által biztosított összes adat megjelenjék (a nyers XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Az XPATH-kifejezést adott oszlop kap: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Egy másik megközelítés az OWA használatával(?). Én nem ásta bele, de úgy néz ki, ígéretes, különösen a kördiagramok: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Boldog átalakítása!

<vége />

Subscribe to my blog!

Technorati Tags: SharePoint, DVWP, Adatnézet kijelző, XSL, XSLT, WSS, MOSS

Paul Galvin SharePoint hely

Havi Archívum: December 2007

Hozzon létre a sávdiagramok SharePoint