Decembrie | 2007 | Paul Galvin SharePoint Space

Privire de ansamblu:

(ACTUALIZARE 12/04/07: Adăugat o altă resursă interesantă la sfârşitul conectarea la un alt blog care se adresează acest lucru prin o parte web foarte interesant)

Această intrare de blog descrie modul de a crea un grafic cu bare în SharePoint. Acest lucru funcţionează în ambele WSS şi MOSS medii ca aceasta depinde doar partea web Vizualizare date.

Abordării globale este după cum urmează:

Creaţi o listă sau bibliotecă de documente, care conţine datele pe care doriţi să grafic.
Loc în biblioteca de documente asociate / particularizat lista de pe o pagină şi convertizor it la spre un partea de web date vizualizare (DVWP).
Modifica DVWP XSL pentru a genera HTML care arată ca un grafic.

Scenariu de afaceri / Programul de instalare:

Am creat o listă particularizată cu standardul titlu coloană şi o coloana suplimentară, "Statutul". Acest modele (foarte simplist) o "autorizaţie pentru cheltuieli" scenariu în cazul în care titlul reprezinta proiectul şi statutul o valoare din lista de:

Propus
În procesul de
Au stagnat

Obiectivul este de a produce un interactive orizontală bar grafic care prezinta aceste coduri de stare.

Am au populat lista si se pare ca acest lucru:

Crea datelor partea Web vizualizare:

Crea DVWP prin adăugarea de listă particularizată la o pagină (pagina site-ului în cazul meu) şi urmaţi instrucţiunile aici (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Pe lângă crearea pur şi simplu DVWP, de asemenea, trebuie să setați proprietatea de paginare pentru a afişa toate rândurile disponibile. Pentru mine, Aceasta arata ceva de genul:

La acest punct, Am aproape întotdeauna SPD şi browser-ul. Am apoi re-deschide pagina folosind browser-ul. Acest lucru evită accidental mucking până aspectul de parte web pe pagina.

Modifica XSLT:

Acum este momentul pentru a modifica XSLT.

I always folos visual student pentru acest. (A se vedea aici pentru o notă importantă despre intellisense care vă va ajuta foarte mult).

Crea un proiect gol adăuga fişiere noi patru (înlocuind cuvintele "Original" şi "nou" după caz):

Original.XSLT
New.XSLT
Original Params.xml
Noi Params.xml

În cazul meu, se pare ca asta:

Modifica partea web şi copiaţi params şi XSL original"" versiunea în Visual Studio.

Scopul aici este de a provoca XSL pentru a transforma rezultatele am sa ma intorc din interogarea de DVWP în HTML, care face ca un grafic.

În acest scop, El ajută să ia în considerare în primul rând ceea ce HTML ar trebui să arate înainte ne-am lua confuz de nebunie care este cunoscut ca "XSL". (Să fie clar, Aceasta este doar un exemplu; nu de tip-l sau de copiere/lipire în visual studio. Am oferi o lovitură completă punct de plecare pentru că mai târziu, în a scrie-up). Următorul eşantion grafic este randat ca pe HTML imediat după:

Corespunzătoare HTML:

<HTML>
<corpul>
<Centrul>
<lăţimea de masa = 80%>
<TR><TD><Centrul>Graficul cu bare orizontale</TD></TR>
<TR>
<TD alinia = "centru">
<masă de frontieră = "1" latime = 80%>
<TR>
<TD lăţime = 10%>Deschis</TD>
<TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 50%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD>
</TR>
<TR>
<TD lăţime = 10%>Închis</TD>
<TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 25%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD>
</TR>
<TR>
<TD lăţime = 10%>Au stagnat</TD>
<TD><tabelul cellpadding ="0" cellSpacing ="0" frontieră = 0 width = 25%><TR bgcolor = roşu><TD> </TD></TR></tabel></TD>
</TR>
</tabel>
</TD>
</TR>
</tabel>
</corpul>
</HTML>

Am folosit o abordare mort simplu la crearea baruri mea prin stabilirea culoarea de fundal a unui rând în "roşu".

Ia-te de aici este acest: În cele din urmă, toate vom face este de a crea HTML cu rânduri şi coloane.

Şablon XSLT:

I-am copiat XSLT care generează un grafic cu bare orizontale. Este destul de bine a comentat astfel încât nu va adăuga mult aici cu excepţia aceste note:

Am inceput cu XSL care SharePoint Designer mi-a dat când am creat primul DVWP implicit.
Am fost capabil de a reduce acest lucru la SPD pe 657 linii de 166 linii.
Eu nu mizerie în jurul cu fişierul XML parametrii (care este separat de XSL şi veţi şti ce vreau să spun atunci când te duci pentru a modifica DVWP sine; Există două fişiere puteţi modifica). Cu toate acestea, pentru a simplifica aceasta, Elimina aproape tot de pe ei la XSL. Aceasta înseamnă că dacă doriţi să faceţi uz de acei parametri, trebuie doar să adăugaţi variabile definiţiile lor înapoi la XSL. Că va fi uşor, deoarece aveţi originale XSL variabilă definiţii în dumneavoastră proiect visual studio.
Ar trebui să fie în măsură să copiaţi şi inseraţi acest lucru direct în dumneavoastră proiect visual studio. Apoi, Scoateţi apelurile mele şi introduceţi apelurile la "ShowBar".
Burghiu în jos de lucrări prin crearea unui <a href> aşa: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Aceasta tehnica poate fi de valoare în alte contexte. La prima, M-am gândit mi-ar trebui să fie conforme cu un format mai complexe: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, dar în mediul meu care nu este necesar. Lista pe URL-ul este trecut la noi de SharePoint astfel încât acesta este destul de uşor să generalizeze.

Aici este:

<XSL:foaie de stil versiunea="1.0" exclude-rezultat-Prefixe="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urnă:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/XSL/transformare" 
 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:oana="urnă:schemas-microsoft-com:birou" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urnă:schemas-microsoft-com:set de rânduri" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urnă:FrontPage:interne">
  <XSL:ieşire metoda="HTML" liniuţă="nu" />
  <XSL:zecimal-format NaN="" />
  <XSL:Param nume="ListUrlDir"></XSL:Param> <!-- Am nevoie de acest lucru pentru a sprijini o detaliaþi-jos.  -->

  <XSL:şablon meci="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <XSL:variabila nume="dvt_StyleName">Tabel</XSL:variabila>
    <XSL:variabila nume="Rânduri" Selectaţi="/Rânduri/dsQueryResponse/rând" />
    <XSL:variabila nume="dvt_RowCount" Selectaţi="Contele($Rânduri)" />
    <XSL:variabila nume="IsEmpty" Selectaţi="$dvt_RowCount = 0" />
    <XSL:variabila nume="dvt_IsEmpty" Selectaţi="$dvt_RowCount = 0" />

    <XSL:alege>
      <XSL:când test="$dvt_IsEmpty">
        Nu există date la graficul!<br/>
      </XSL:când>
      <XSL:în caz contrar>

        <!--
          Chestii interesante incepe aici.

          Este necesar să definim o pereche de variabile pentru fiecare rând din grafic: numărul total de elemente şi la sută din total.
        -->
        <XSL:variabila nume="totalProposed" Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status) = 'Propuse'])" />
        <XSL:variabila nume="percentProposed" Selectaţi="$totalProposed div $dvt_RowCount" />

        <XSL:variabila nume="totalInProcess" Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status) = "În proces"])" />
        <XSL:variabila nume="percentInProcess" Selectaţi="$totalInProcess div $dvt_RowCount" />

        <XSL:variabila nume="totalStalled" Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status) = 'Blocat'])" />
        <XSL:variabila nume="percentStalled" Selectaţi="$totalStalled div $dvt_RowCount" />

        <!--
          Am defini noastre tabel HTML aici.  Eu sunt împrumut de la stiluri unele standard SharePoint aici pentru a face în concordanţă.  Cred că aceasta va onora schimbările la nivel global css fişier, precum şi tema suprascrie.
        -->
        <tabel lăţime="100%" cellSpacing="0" cellPadding="2"
stil="de frontieră-dreapta: 1 #C0C0C0 solide; de frontieră-fund: 1 #C0C0C0 solide; de frontieră-stanga-stil: solide; stânga de frontieră-lăţime: 1; frontieră-top-style: solide; de frontieră-top-lăţime: 1;">

           <TR>
            <TD Aliniaţi="Centrul">
              <tabel frontieră="1" lăţime="100%">

                <!--
                  Pentru fiecare stare că vrem să grafic, numim "ShowBar" şablon.
                  Am să-l:
                  1. O etichetă pentru rând.  Acest lucru este transformat într-un hyperlink.
                  2. La sută (variabila de mai sus).
                  3. Numele de câmp reale a codului din lista care stau la baza.  Aceasta nu are nevoie pentru a se potrivi eticheta de afişare.
                  4. Valoarea câmpului potrivite pentru #3.
                  5. Totală elemente de acest cod de stare (nu total de toate coduri de stare).

                  El emite un <TR></TR> şi linia orizontală bar grafic.

                  Noi numim acest şablon pentru fiecare cod de stare vrem să Vezi.
                -->
                <XSL:apel-şablon nume="ShowBar">
                  <XSL:cu-param nume="BarDisplayLabel" Selectaţi="'Propuse'"/>
                  <XSL:cu-param nume="BarPercent" Selectaţi="$percentProposed"/>
                  <XSL:cu-param nume="QueryFilterFieldName" Selectaţi=""Statut""/>
                  <XSL:cu-param nume="QueryFilterFieldValue" Selectaţi="'Propuse'"/>
                  <XSL:cu-param nume="TotalItems" Selectaţi="$totalProposed"></XSL:cu-param>
                </XSL:apel-şablon>

                <XSL:apel-şablon nume="ShowBar">
                  <XSL:cu-param nume="BarDisplayLabel" Selectaţi="'Blocat'"/>
                  <XSL:cu-param nume="BarPercent" Selectaţi="$percentStalled"/>
                  <XSL:cu-param nume="QueryFilterFieldName" Selectaţi=""Statut""/>
                  <XSL:cu-param nume="QueryFilterFieldValue" Selectaţi="'Blocat'"/>
                  <XSL:cu-param nume="TotalItems" Selectaţi="$totalStalled"></XSL:cu-param>
                </XSL:apel-şablon>

                <XSL:apel-şablon nume="ShowBar">
                  <XSL:cu-param nume="BarDisplayLabel" Selectaţi=""În proces""/>
                  <XSL:cu-param nume="BarPercent" Selectaţi="$percentInProcess"/>
                  <XSL:cu-param nume="QueryFilterFieldName" Selectaţi=""Statut""/>
                  <XSL:cu-param nume="QueryFilterFieldValue" Selectaţi=""În proces""/>
                  <XSL:cu-param nume="TotalItems" Selectaţi="$totalInProcess"></XSL:cu-param>
                </XSL:apel-şablon>

              </tabel>
            </TD>
          </TR>
        </tabel>
      </XSL:în caz contrar>
    </XSL:alege>
  </XSL:şablon>

  <!--
    Acest şablon functioneaza de afişare linii individuale în graficul cu bare.

    Veţi face, probabil, cel mai mult de tweaking ta aici.
  -->
  <XSL:şablon nume="ShowBar">
    <XSL:Param nume="BarDisplayLabel" /> <!-- eticheta pentru a arăta -->
    <XSL:Param nume="BarPercent"/> <!-- % Din total. -->
    <XSL:Param nume="QueryFilterFieldName"/> <!-- Utilizate pentru a sări la interogare & filtru -->
    <XSL:Param nume="QueryFilterFieldValue"/> <!-- Utilizate pentru a sări la interogare & filtru -->
    <XSL:Param nume="TotalItems" /> <!-- numărul total de acest barlabel -->

    <TR>

      <!-- Bar eticheta în sine. -->
      <TD Clasa="MS-formbody" lăţime="30%">

        <!--
          Acest următorul set de afirmaţii construieşte un şir de interogare, care ne permite de a detalia la o vizualizare filtrată de date care stau la baza.
          Vom face uz de o serie de lucruri aici:
          1. Putem trece FilterField1 şi FilterValue1 la o listă pentru a filtra pe o coloană.
          2. SharePoint este de a trece un parametru cheie pentru noi, ListUrlDir că punctele de la lista de bază împotriva cărora acest DVWP este "rulează".

          Nu este distractiv XSL?
        -->
        <XSL:textul Dezactivează-ieşire-evadarea="da">
        <![CDATA[<o href ="]]></XSL:textul>
        <XSL:valoarea de Selectaţi="$ListUrlDir"/>
        <XSL:textul Dezactivează-ieşire-evadarea="da"><![CDATA[?FilterField1 =]]></XSL:textul>
        <XSL:valoarea de Selectaţi="$QueryFilterFieldName"/>
        <XSL:textul Dezactivează-ieşire-evadarea="da"><![CDATA[&FilterValue1 =]]></XSL:textul>
        <XSL:valoarea de Selectaţi="$QueryFilterFieldValue"/>
        <XSL:textul Dezactivează-ieşire-evadarea="da"><![CDATA[">]]></XSL:textul>
        <XSL:valoarea de Selectaţi="$BarDisplayLabel"/>
        <XSL:textul Dezactivează-ieşire-evadarea="da"><![CDATA[</o>]]></XSL:textul>

        <!-- Bitul următoare afişează unele numere în format: "(totalul / % total)" -->
        (<XSL:valoarea de Selectaţi="$TotalItems"/> /

        <!-- Acest lucru creează o etichetă la sută frumos pentru noi.  mulţumesc, Microsoft! -->
        <XSL:apel-şablon nume="percentformat">
          <XSL:cu-param nume="la sută" Selectaţi="$BarPercent"/>
        </XSL:apel-şablon>)

      </TD>

      <!-- În cele din urmă, emite un <TD> Tag-ul pentru bara de sine.-->
      <TD>
        <tabel cellPadding="0" cellSpacing="0" frontieră="0"
lăţime="{Runda($BarPercent * 100)+1}%">
          <TR bgcolor="rosu">
            <XSL:textul Dezactivează-ieşire-evadarea="da"><![CDATA[&nbsp;]]></XSL:textul>
          </TR>
        </tabel>
      </TD>
    </TR>

  </XSL:şablon>

  <!-- Acest lucru este luat direct de la unele XSL am găsit într-un şablon de MS. -->
  <XSL:şablon nume="percentformat">
    <XSL:Param nume="la sută"/>
    <XSL:alege>
      <XSL:când test="format de număr($la sută, '#,##0%;-#,##0%')= "NaN"">0%</XSL:când>
      <XSL:în caz contrar>
        <XSL:valoarea de Selectaţi="format de număr($la sută, '#,##0%;-#,##0%')" />
      </XSL:în caz contrar>
    </XSL:alege>
  </XSL:şablon>

</XSL:foaie de stil>

Rezultatele:

XSL de mai sus genereaza acest grafic:

Detalia la care stau la baza de date făcând clic pe codul de stare:

Gânduri finale:

Acest lucru poate fi generalizată?

Îmi place acest concept grafice, dar urăsc faptul că trebuie să meargă şi face parte atât de mult de codificare. I-am dat un pic crezut să dacă acesta poate fi generalizată şi eu sunt optimist, dar eu sunt, de asemenea, un pic de teamă că ar putea exista un zid de cărămidă undeva de-a lungul calea care nu va oferi orice lucru-în jurul. Dacă cineva are unele idei bune pe acest, vă rugăm să faceţi o notă în comentarii sau e-mail-mă.

Verticală grafice:

Acesta este un grafic cu bare orizontale. Este cu siguranţă posibil pentru a crea un grafic verticale. Avem nevoie doar de a schimba HTML. Aş începe acelaşi mod: A crea o reprezentare HTML de un grafic cu bare verticale şi apoi dau seama cum să obţineţi că prin intermediul XSL. Dacă cineva este interesat în care, Am putea fi convins să-l încercaţi şi elaborarea îndoit. Dacă cineva a făcut deja că, te rog să-mi spuneți și voi cu bucurie link către blog-ul dvs. 🙂

Cred că provocarea cu un grafic de verticală este că etichetele pentru grafic sunt mai dificil de a gestiona, dar cu siguranţă nu imposibil.

Câmpul nume Gotcha:

Există cel puţin două lucruri să se uite cu numele de domeniu.

Prima, un nume de câmp cu un spaţiu de a fi scăpat în XSL. Acest lucru va fi, probabil, o problemă aici:

        <XSL:variabila nume="totalProposed" 
 Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status) = 'Propuse'])" />

Dacă starea"" coloana este de fapt numit "codul de stare" atunci ai nevoie să referinţă-l ca "Status_x0020_Code":
   <XSL:variabila nume="totalProposed" 
 Selectaţi="Contele(/Rânduri/dsQueryResponse/rând[normalizarea-spaţiu(@Status_x0020_Code) = 'Propuse'])" />
Al doilea, şi eu sunt un pic fuzzy pe acest, dar, de asemenea, trebuie să fie în alertă pentru schimbări de nume câmp. Dacă numele de domeniu "codul de stare" şi apoi mai târziu, redenumiţi-o ca "AFE Status", "numele intern" nu se schimba. Numele intern va fi în continuare "codul de stare" şi trebuie să fie menţionate ca "Status_x0020_Code". "Alte resurse" link-uri pot ajuta la diagnosticarea şi de a corecta acest tip de problemă.

Despre acea culoare:

Am luat "roşu" pentru că este plăcut pentru mine în acest moment. Nu ar fi o afacere mare pentru a arăta culori diferite pentru a oferi mai mult decât o descriere vizuale a unui număr, dar, de asemenea, a furniza un KPI utile. De exemplu, în cazul în care procentul de "stagnat" Este AFE pe > 10% apoi Arată roşu, altfel arată-l în negru. Utilizarea <XSL:alege> pentru a realiza acest lucru.

Alte resurse:

Determina numele intern (şi alte bun info) pentru o listă de date: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Arată toate datele furnizate de SharePoint (XML-ul brut): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Obţine expresia XPATH o anumita coloana: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
O altă abordare folosind OWA(?). Nu am săpat în ea, dar pare promiţător, mai ales pentru diagrame plăcintă: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Transformarea fericit!

Aboneaza-te la blog-ul meu!

Technorati Tags: SharePoint, DVWP, Partea de Web date vizualizare, XSL, XSLT, WSS, MOSS

Paul Galvin SharePoint Space

arhive lunare: Decembrie 2007

Crearea grafice cu bare în SharePoint