Desember | 2007 | Paul Galvin's SharePoint plass

Oversikt:

(OPPDATERINGEN 12/04/07: Lagt en annen interessant ressurs på slutten kobling til en annen blogg som omhandler dette via en veldig interessant webdel)

Dette blogginnlegget beskriver hvordan du oppretter et stolpediagram i SharePoint. Dette fungerer både WSS og MOSS som det bare avhenger av webdelen for datavisning.

Den generelle tilnærmingen er som følger:

Opprette en liste eller et dokumentbibliotek som inneholder dataene du vil lage.
Plass tilknyttet dokumentbiblioteket / egendefinert liste på en side og konvertere den til en webdelen for datavisning (DVWP).
Endre det DVWP XSL for å generere HTML som vises som en graf.

Virksomhet Scenario / Installasjonsprogrammet:

Jeg har opprettet en egendefinert liste med standard Tittel-kolonnen og en ekstra kolonne, "Status". Denne modeller (veldig simplistically) "tillatelse For regning" scenariet der tittelen representerer prosjektet og Status en verdi fra listen over:

Foreslått
I prosessen
Stoppet

Målet er å produsere en interaktiv vannrett stolpediagram som viser disse statuskoder.

Jeg har fylt ut listen og det ser slik ut:

Opprette webdelen for datavisning:

Lage DVWP ved å legge den egendefinerte listen på en side (siden i mitt tilfelle) og følg instruksjonene her (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

I tillegg til å lage DVWP, Vi må også angi egenskapen paginerer å vise alle tilgjengelige rader. For meg, Dette ser noe som dette:

På dette punktet, Jeg lukke alltid SPD og leseren. Jeg deretter åpne siden ved hjelp av leseren på nytt. Dette unngår tilfeldigvis rote opp del weboppsett på siden.

Endre XSLT:

Det er nå tid til å endre XSLT.

Jeg har alltid bruke visual studio til dette. (Se her for en viktig merknad om intellisense som vil hjelpe deg mye).

Jeg opprette et tomt prosjekt legge til fire nye filer (erstatte ordene "Original" og "ny" etter behov):

Original.XSLT
New.XSLT
Opprinnelige Params.xml
Nye Params.xml

I mitt tilfelle, Det ser ut som dette:

Endre webdelen og kopier parametere og XSL til originalen»" versjonen i Visual Studio.

Målet her er å føre XSL å forvandle resultatene vi kommer tilbake fra DVWP spørringen i HTML som gjengir som en graf.

Dette, Det hjelper å først vurdere hva HTML skal se ut før vi forvirret av galskapen som er kjent som "XSL". (Å være klar, Følgende er bare et eksempel; ikke skrive det inn eller lime inn visual studio. Jeg gi en full slag utgangspunkt for senere i skrive opp). Følgende eksempel diagram gjengis som HTML umiddelbart etter:

Tilsvarende HTML:

<HTML>
<kroppen>
<Center>
<tabell bredde = 80%>
<tr><TD><Center>Vannrett stolpediagram</TD></tr>
<tr>
<TD align = "center">
<tabellkantlinjen = "1" bredde = 80%>
<tr>
<TD bredde = 10%>Åpne</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 50%><St bgcolor = rød><TD> </TD></tr></tabell></TD>
</tr>
<tr>
<TD bredde = 10%>Stengt</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 25%><St bgcolor = rød><TD> </TD></tr></tabell></TD>
</tr>
<tr>
<TD bredde = 10%>Stoppet</TD>
<TD><tabell cellpadding ="0" cellspacing ="0" border = 0 width = 25%><St bgcolor = rød><TD> </TD></tr></tabell></TD>
</tr>
</tabell>
</TD>
</tr>
</tabell>
</kroppen>
</HTML>

Jeg brukte en død enkel tilnærming til å skape min barer ved å angi bakgrunnsfarge for en rad "røde".

Det takeaway her er dette: Til slutt, alt vi gjør er skaper HTML med rader og kolonner.

Malen XSLT:

Jeg har kopiert XSLT-filen som genererer et vannrett stolpediagram. Det er ganske godt kommentert så jeg ikke vil legge mye her bortsett fra disse notatene:

Jeg startet med standard XSL som SharePoint Designer ga meg da jeg først skapte DVWP.
Jeg klarte å kutte dette ned fra SPD 657 linjer 166 linjer.
Jeg rote ikke rundt med parameterne XML-filen (som er atskilt fra XSL og du vet hva jeg mener når du går for å endre DVWP selv; Det er to filer kan du endre). Men, for å forenkle it, Jeg fjernet nesten alle av dem fra XSL. Dette betyr at hvis du vil gjøre bruk av disse parametrene, du trenger bare legge variabel definisjoner XSL. Det vil være lett siden du har de opprinnelige XSL variable definisjonene i visual studio-prosjekt.
Du bør kunne kopiere og lime inn dette direkte i visual studio-prosjekt. Deretter, ta mine samtaler og sett dine egne kall til "ShowBar".
Vil neddrillingen fungerer ved å opprette en <et href> som dette: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Denne teknikken kan være av verdi i andre sammenhenger. Først, Jeg trodde jeg måtte oppfyller en mer kompleks: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, men i mine omgivelser som er ikke nødvendig. Listens URL sendes til oss av SharePoint så dette er ganske lett å generalisere.

Her er det:

<XSL:stilark versjon="1.0" Ekskluder-resultat-prefikser="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urn:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/XSL/overføring" 
 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="urn:schemas-microsoft-com:Office" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urn:schemas-microsoft-com:radsettet" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urn:FrontPage:intern">
  <XSL:utgang metoden="HTML" innrykk="nei" />
  <XSL:desimal-format NaN="" />
  <XSL:param navn="ListUrlDir"></XSL:param> <!-- Jeg nød denne å støtte en neddrilling.  -->

  <XSL:mal kamp="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20">
    <XSL:variabel navn="dvt_StyleName">Tabell</XSL:variabel>
    <XSL:variabel navn="Rader" Velg="/dsQueryResponse/rader/rad" />
    <XSL:variabel navn="dvt_RowCount" Velg="antall($Rader)" />
    <XSL:variabel navn="IsEmpty" Velg="$dvt_RowCount = 0" />
    <XSL:variabel navn="dvt_IsEmpty" Velg="$dvt_RowCount = 0" />

    <XSL:Velg>
      <XSL:når test="$dvt_IsEmpty">
        Det er ingen data diagrammet!<br/>
      </XSL:når>
      <XSL:ellers>

        <!--
          Interessante ting begynner her.

          Vi må definere et par variabler for hver rad i diagrammet: Totalt antall elementer og prosent av total.
        -->
        <XSL:variabel navn="totalProposed" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = 'Foreslått'])" />
        <XSL:variabel navn="percentProposed" Velg="$totalProposed div $dvt_RowCount" />

        <XSL:variabel navn="totalInProcess" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = "Pågår"])" />
        <XSL:variabel navn="percentInProcess" Velg="$totalInProcess div $dvt_RowCount" />

        <XSL:variabel navn="totalStalled" Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = "Stoppet"])" />
        <XSL:variabel navn="percentStalled" Velg="$totalStalled div $dvt_RowCount" />

        <!--
          Vi definerer våre HTML-tabell her.  Jeg er låne fra noen SharePoint standardstilene her å gjøre det konsekvent.  Jeg tror det vil respektere endringer i globale css filen samt tema overstyrer.
        -->
        <tabell bredde="100%" cellspacing="0" CellPadding="2"
stil="kantlinje-høyre: 1 solid #C0C0C0; kantlinje-bunn: 1 solid #C0C0C0; venstre kantlinjestil: solid; venstre kantlinjetykkelse: 1; kantlinje-topp-stil: solid; topp kantlinjetykkelse: 1;">

           <tr>
            <TD justere="Center">
              <tabell kantlinje="1" bredde="100%">

                <!--
                  For hver vi vil lage, Vi kaller det "-ShowBar" mal.
                  Vi passerer det:
                  1. En etikett for raden.  Dette er forvandlet til en hyperkobling.
                  2. Prosent (variabel ovenfra).
                  3. Selve navnet på koden fra den underliggende listen.  Dette trenger ikke å matche Vis etikett.
                  4. Feltverdien tilpasset for #3.
                  5. Totalt antall artikler av denne statuskoden (ikke totalsummen av alle statuskoder).

                  Den avgir en <tr></tr> og vannrett stolpediagram.

                  Vi kaller denne malen for hver statuskode vi vil vise.
                -->
                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg="'Foreslått'"/>
                  <XSL:med param navn="BarPercent" Velg="$percentProposed"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg="'Foreslått'"/>
                  <XSL:med param navn="TotalItems" Velg="$totalProposed"></XSL:med param>
                </XSL:samtale-mal>

                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg=""Stoppet""/>
                  <XSL:med param navn="BarPercent" Velg="$percentStalled"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg=""Stoppet""/>
                  <XSL:med param navn="TotalItems" Velg="$totalStalled"></XSL:med param>
                </XSL:samtale-mal>

                <XSL:samtale-mal navn="ShowBar">
                  <XSL:med param navn="BarDisplayLabel" Velg=""Pågår""/>
                  <XSL:med param navn="BarPercent" Velg="$percentInProcess"/>
                  <XSL:med param navn="QueryFilterFieldName" Velg=""Status""/>
                  <XSL:med param navn="QueryFilterFieldValue" Velg=""Pågår""/>
                  <XSL:med param navn="TotalItems" Velg="$totalInProcess"></XSL:med param>
                </XSL:samtale-mal>

              </tabell>
            </TD>
          </tr>
        </tabell>
      </XSL:ellers>
    </XSL:Velg>
  </XSL:mal>

  <!--
    Denne malen gjør arbeidet med å vise enkeltlinjer i stolpediagrammet.

    Du vil sannsynligvis gjøre de fleste av dine tilpasning her.
  -->
  <XSL:mal navn="ShowBar">
    <XSL:param navn="BarDisplayLabel" /> <!-- etiketten for å vise -->
    <XSL:param navn="BarPercent"/> <!-- Prosent av totalt. -->
    <XSL:param navn="QueryFilterFieldName"/> <!-- Brukes til å hoppe til spørringen & filter -->
    <XSL:param navn="QueryFilterFieldValue"/> <!-- Brukes til å hoppe til spørringen & filter -->
    <XSL:param navn="TotalItems" /> <!-- Totalt antall denne barlabel -->

    <tr>

      <!-- Baren merke seg. -->
      <TD klassen="MS-formbody" bredde="30%">

        <!--
          Denne neste rekke utsagn bygger en spørrestreng som tillater oss å drille ned til en filtrert visning av de underliggende dataene.
          Vi gjøre bruk av noen ting her:
          1. Vi kan sende FilterField1 og FilterValue1 til en liste for å filtrere på en kolonne.
          2. SharePoint passerer en viktig parameter for oss, ListUrlDir som peker til den underliggende listen som denne DVWP "kjører".

          Ikke XSL moro?
        -->
        <XSL:tekst Deaktiver-utdata-unnslippe="ja">
        <![CDATA[<et href ="]]></XSL:tekst>
        <XSL:verdien av Velg="$ListUrlDir"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[?FilterField1 =]]></XSL:tekst>
        <XSL:verdien av Velg="$QueryFilterFieldName"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[&FilterValue1 =]]></XSL:tekst>
        <XSL:verdien av Velg="$QueryFilterFieldValue"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[">]]></XSL:tekst>
        <XSL:verdien av Velg="$BarDisplayLabel"/>
        <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[</en>]]></XSL:tekst>

        <!-- Neste bit viser noen tall i format: "(Totalt / % Total)" -->
        (<XSL:verdien av Velg="$TotalItems"/> /

        <!-- Dette skaper en hyggelig prosent etikett for oss.  takk, Microsoft! -->
        <XSL:samtale-mal navn="percentformat">
          <XSL:med param navn="prosent" Velg="$BarPercent"/>
        </XSL:samtale-mal>)

      </TD>

      <!-- Endelig, avgir en <TD> kode for bar seg.-->
      <TD>
        <tabell CellPadding="0" cellspacing="0" kantlinje="0"
bredde="{runde($BarPercent * 100)+1}%">
          <tr BgColor="rød">
            <XSL:tekst Deaktiver-utdata-unnslippe="ja"><![CDATA[&nbsp;]]></XSL:tekst>
          </tr>
        </tabell>
      </TD>
    </tr>

  </XSL:mal>

  <!-- Dette er hentet direkte fra noen XSL jeg fant i en MS-mal. -->
  <XSL:mal navn="percentformat">
    <XSL:param navn="prosent"/>
    <XSL:Velg>
      <XSL:når test="formater tall($prosent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:når>
      <XSL:ellers>
        <XSL:verdien av Velg="formater tall($prosent, '#,##0%;-#,##0%')" />
      </XSL:ellers>
    </XSL:Velg>
  </XSL:mal>

</XSL:stilark>

Resultatene:

XSL ovenfra genererer denne grafen:

Drille ned til de underliggende dataene ved å klikke på statuskoden:

Avsluttende tanker:

Dette kan generaliseres?

Jeg elsker dette grafisk konseptet, men jeg hater det faktum at jeg måtte gå inn og gjøre så mye hånd-koding. Jeg har gitt en liten tanke til om det kan generaliseres og jeg optimistisk, men jeg er også litt engstelig at det kan være en murvegg sted langs stien som ikke tilbyr noen arbeide-i nærheten. Hvis noen har noen gode ideer om dette, Vennligst noter i kommentarfeltet eller email meg.

Loddrett grafer:

Dette er et vannrett stolpediagram. Det er sikkert mulig å opprette en loddrett graf. Vi nød rettferdig å endre HTML. Jeg vil starte på samme måte: Opprette en HTML-representasjon av et loddrett stolpediagram og deretter finne ut hvordan å få det via XSL. Hvis noen er interessert i det, Jeg kunne bli overtalt til å prøve den ut og arbeide ut kinks. Hvis noen allerede har gjort det, vennligst gi meg beskjed og jeg vil gjerne link til bloggen din 🙂

Jeg tror at utfordringen med en loddrett graf er at etikettene for grafen er vanskeligere å håndtere, men ikke umulig.

Feltet navn fikser:

Det er to ting å se etter med feltnavnene.

Første, et feltnavn med et mellomrom må være rømte i XSL. Dette vil trolig være et problem her:

        <XSL:variabel navn="totalProposed" 
 Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status) = 'Foreslått'])" />

Hvis statusen"" kolonnen er egentlig benevnt "statuskode" må du referere til den som "Status_x0020_Code":
   <XSL:variabel navn="totalProposed" 
 Velg="antall(/dsQueryResponse/rader/rad[Normalize-plass(@Status_x0020_Code) = 'Foreslått'])" />
Andre, og jeg er litt uklar på dette, men du må også være på vakt for feltnavnet endres. Hvis du feltet "statuskode" og senere på, endre navnet til "AFE Status", "interne navn" ikke endre. Det interne navnet vil fortsatt være "statuskode" og må være referert til som "Status_x0020_Code". "Andre ressurser" koblinger kan bidra til å diagnostisere og løse denne type problem.

Om denne fargen:

Jeg plukket "rød" fordi det er behagelig for meg i øyeblikket. Det ville ikke være en stor avtale å vise forskjellige farger for å gi mer enn bare en visuell beskrivelse av et tall, men også gi en nyttig KPI. For eksempel, Hvis prosentandelen av "stoppet" AFES er > 10% Vis det røde, ellers Vis den i svart. Bruk <XSL:Velg> å oppnå dette.

Andre ressurser:

Finne ut det interne navnet (og andre gode info) for dataene i en liste: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Vis alle dataene fra SharePoint (rå XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Få XPATH-uttrykket for en bestemt kolonne: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
En annen tilnærming ved hjelp av OWA(?). Jeg har ikke gravd i den, men ser lovende, spesielt for sektordiagrammer: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Happy transformere!

Abonner på bloggen min!

Technorati Merkelapper: SharePoint, DVWP, Webdel for datavisning, XSL, XSLT, WSS, MOSS

Paul Galvin's SharePoint plass

Månedlige Arkiver: Desember 2007

Opprette søylediagrammer i SharePoint