Luua SharePointi riba graafikud

Ülevaade:

(VÄRSKENDUS 12/04/07: Lisatud veel üks huvitav ressurss linkimiseks teise blogi, mis on suunatud väga huvitav veebiosa kaudu otsas)

See blogi kirjeldatakse loomist tulpdiagrammil SharePointis. See toimib WSS ja SAMBLA keskkondades, kui see sõltub ainult Andmevaate veebiosa.

On üldine lähenemisviis:

  1. Loo loend või teek, mis sisaldab graafikule kanda andmeid.
  2. Koht seostatud dokumenditeek / kohandatud lehele lisamiseks nimekirja ja muuta andmeid Loendivaate veebiosa (DVWP).
  3. Muuta ning DVWP XSL genereerida HTML, kus kuvatakse graafikuna.

Äri stsenaariumi / Seadistamine:

Olen loonud kohandatud loendi standardi pealkiri veeru ja ühe tulba, "Staatus". See mudelid (väga lihtsustatult) Kulu luba"" stsenaarium, kus pealkiri on projekti ja olek väärtus loendist:

  • Kavandatud
  • Protsessis
  • Seiskunud

Eesmärk on toota interaktiivset horisontaalne Baar graafik, mis näitab nende olekukoodid.

On asustatud nimekirja ja näeb välja selline:

Pilt

Andmevaate veebiosa loomine:

Luua ka DVWP, lisades kohandatud loendi leht (saidi lehe minu puhul) ja järgige Siin (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Lisaks lihtsalt luua ning DVWP, Samuti peame seada atribuudi kutsungi kõik saadaval ridade kuvamiseks. Minu jaoks, See näeb välja selline:

Pilt

Sel hetkel, Ma alati lähedal ühtse Programmdokumendi ja brauseri. Ma siis uuesti avada brauseriga leht. See väldib kogemata mucking kuni lehe osa veebivaade.

Muuda XSLT:

Nüüd on aeg muuta XSLT.

Ma alati kasutada visual Studiot selle. (Vt Siin tähtis teade intellisense, mis aitab teil palju jaoks).

Ma luua tühja projekti nelja uusi faile (asendades sõnad "originaal" ja "uus" vastavalt vajadusele):

  • Original.XSLT
  • New.XSLT
  • Algne Params.xml
  • Uus Params.xml

Minu puhul, See näeb välja selline:

Pilt

Selle veebiosa muutmine ja kopeerida params ja XSL algse"" versioon Visual Studio.

Siin on tekitada XSL muuta saame tagasi DVWP päringu graafikuna renderdamine HTML tulemuste.

Sel eesmärgil, See aitab esmalt kaaluda, enne kui me saa segaduses mida tuntakse "XSL" hullumeelsus, mida HTML peaks välja nägema. (Selge, Järgmine on lihtsalt näide; Ärge tippige see või copy/paste visual studio. Mul pakkuda täis puhuda, alustades punkti selle eest hiljem ka kirjutada üles). Proovi graafik renderdatakse nagu HTML, kohe pärast iga:

Sample Ribagraafiku

Vastava HTML:

<HTML>
<keha>
<keskus>
<Tabel Laius ≥ 80%>
<TR><TD><keskus>Horisontaalne tulpdiagramm</TD></TR>
<TR>
<TD joondada = "center">
<tabeli äärise = "1" laius = 80%>
<TR>
<TD laius = 10%>Avatud</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" Border = 0 laius ≥ 50%><TR bgcolor = punane><TD>&nbsp;</TD></TR></Tabel></TD>
</TR>
<TR>
<TD laius = 10%>Suletud</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" Border = 0 width = 25%><TR bgcolor = punane><TD>&nbsp;</TD></TR></Tabel></TD>
</TR>
<TR>
<TD laius = 10%>Seiskunud</TD>
<TD><Tabel cellpadding ="0" cellspacing ="0" Border = 0 width = 25%><TR bgcolor = punane><TD>&nbsp;</TD></TR></Tabel></TD>
</TR>
</Tabel>
</TD>
</TR>
</Tabel>
</keha>
</HTML>

Ma kasutasin surnud lihtne lähenemine loomine minu baarid seadmisega järjest "punaseks" taustavärv.

Et Take-Away on see: Aasta lõpus, Kõik me teeme on luua HTML ridade ja veergudega.

Malli XSLT:

I kopeeritud XSLT, mis tekitab horisontaalse tulpdiagramm. See on üsna hästi kommenteerinud nii, et ma ei lisa palju siin välja arvatud need märkmed:

  • Hakkasin vaike-XSL SharePoint Designeri andis mulle selle DVWP loomisel.
  • Mul oli võimalus lõigata see alates ühtse Programmdokumendi 's 657 read 166 read.
  • Ma ei jändama parameetrite XML faili (mis on eraldatud ka XSL ja sa tead mida ma mõtlen, kui soovite muuta DVWP, ise; on kaks faili, saate muuta). Aga, selleks, et lihtsustada, Ma tegin peaaegu kõik neist eemaldamine XSL-i. See tähendab, et kui sa tahad teha kõnealuste parameetrite kasutamine, peate oma muutuja määratluste XSL-i uuesti lisada. See lihtne kuna teil algne XSL muutuja määratluste visual studio projektis.
  • Sa peaks olema võimalik kopeerida ja kleepida otse visual studio projekti. Seejärel, Eemaldage mu kõnesid ja sisestage oma kõned "ShowBar".
  • Töid luues süvitsiminek on <a href> Nagu see: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. See meetod võib olla väärtuslik teistes kontekstides. Algul, Arvasin, et ma vajaks vasta keerulisem vormingule: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, Minu keskkond seda ei vaja. Listi URL on möödunud meile SharePoint, nii et see on üsna lihtne üldistada.

Siin on:

<XSL-i:laadileht versioon="1.0" välista-tulemus-eesliited="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urn:schemas-microsoft-com:XSLT-d" xmlns:XSL-i="http://www.w3.org/1999/XSL/Transform"
xmlns:SharePointi="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:Reahulk" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urn:Pealeht:sisemine"
> <XSL-i:väljund meetod="HTML" taane="Ei" /> <XSL-i:kümnend-vormingus NaN="" /> <XSL-i:Param Nimi="ListUrlDir"></XSL-i:Param> <!-- Ma vajan seda toetada drill-down. --> <XSL-i:Mall vaste="/" xmlns:SharePointi="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL-i:muutuja Nimi="dvt_StyleName">Tabel</XSL-i:muutuja> <XSL-i:muutuja Nimi="Read" Valige="/dsQueryResponse/ridu/rida" /> <XSL-i:muutuja Nimi="dvt_RowCount" Valige="Krahv($Read)" /> <XSL-i:muutuja Nimi="IsEmpty" Valige="$dvt_RowCount = 0" /> <XSL-i:muutuja Nimi="dvt_IsEmpty" Valige="$dvt_RowCount = 0" /> <XSL-i:Valige> <XSL-i:Kui test="$dvt_IsEmpty"> Andmeid pole graafik!<br/> </XSL-i:Kui> <XSL-i:muidu> <!-- Huvitavat kraami algab siit. Meil on vaja määratleda iga rea muutujate paari graafik: Kokku arvuliselt protsent kogusummast. --> <XSL-i:muutuja Nimi="totalProposed" Valige="Krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status) = "Ettepanek"])" /> <XSL-i:muutuja Nimi="percentProposed" Valige="$totalProposed div $dvt_RowCount" /> <XSL-i:muutuja Nimi="totalInProcess" Valige="Krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status) = "Pooleli"])" /> <XSL-i:muutuja Nimi="percentInProcess" Valige="$totalInProcess div $dvt_RowCount" /> <XSL-i:muutuja Nimi="totalStalled" Valige="Krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status) = "Seiskunud"])" /> <XSL-i:muutuja Nimi="percentStalled" Valige="$totalStalled div $dvt_RowCount" /> <!-- Meie HTML tabeli siit määratleme. Ma olen laenatud mõned standardse SharePointi stiile siin oleks kooskõlas. Arvan, et see au muutused ülemaailmse css-faili kui ka teema alistab. --> <Tabel laius="100%" cellspacing="0" CellPadding="2" stiil="äärist paremale: 1 tahke #C0C0C0; allääris: 1 tahke #C0C0C0; ääriselaadi vasakule: tahke; Vasak-laius: 1; top-ääriselaad: tahke; top-laius: 1;"> <TR> <TD joondamine="keskus"> <Tabel ääris="1" laius="100%"> <!-- Iga oleku, mida me tahame, et graafik, Kutsume "ShowBar" Mall. Me pass: 1. Sildi rea jaoks. See muundatakse hüperlink. 2. Protsent (muutuja ülalt). 3. Tegeliku väljanime aluseks olev loendi kood. See vajadus kohaneda kuvatava sildiga. 4. Väljaväärtuse omavahel ühtima #3. 5. See tähis üksusi kokku (mitte kõik olekukoodid kokkuvõttest). Ta kiirgab oma <TR></TR> ja horisontaalne tulpdiagramm rida. Me nimetame seda malli iga tahame Vaata olekukood. --> <XSL-i:kõne-Mall Nimi="ShowBar"> <XSL-i:koos param Nimi="BarDisplayLabel" Valige=""Ettepanek""/> <XSL-i:koos param Nimi="BarPercent" Valige="$percentProposed"/> <XSL-i:koos param Nimi="QueryFilterFieldName" Valige="'Status'"/> <XSL-i:koos param Nimi="QueryFilterFieldValue" Valige=""Ettepanek""/> <XSL-i:koos param Nimi="TotalItems" Valige="$totalProposed"></XSL-i:koos param> </XSL-i:kõne-Mall> <XSL-i:kõne-Mall Nimi="ShowBar"> <XSL-i:koos param Nimi="BarDisplayLabel" Valige=""Seiskunud""/> <XSL-i:koos param Nimi="BarPercent" Valige="$percentStalled"/> <XSL-i:koos param Nimi="QueryFilterFieldName" Valige="'Status'"/> <XSL-i:koos param Nimi="QueryFilterFieldValue" Valige=""Seiskunud""/> <XSL-i:koos param Nimi="TotalItems" Valige="$totalStalled"></XSL-i:koos param> </XSL-i:kõne-Mall> <XSL-i:kõne-Mall Nimi="ShowBar"> <XSL-i:koos param Nimi="BarDisplayLabel" Valige=""Lõpetamata""/> <XSL-i:koos param Nimi="BarPercent" Valige="$percentInProcess"/> <XSL-i:koos param Nimi="QueryFilterFieldName" Valige="'Status'"/> <XSL-i:koos param Nimi="QueryFilterFieldValue" Valige=""Lõpetamata""/> <XSL-i:koos param Nimi="TotalItems" Valige="$totalInProcess"></XSL-i:koos param> </XSL-i:kõne-Mall> </Tabel> </TD> </TR> </Tabel> </XSL-i:muidu> </XSL-i:Valige> </XSL-i:Mall> <!-- See mall ei tööta kuvama üksikutele ridadele tulpdiagramm. Sul ilmselt teha enamiku oma tutistamine siin. --> <XSL-i:Mall Nimi="ShowBar"> <XSL-i:Param Nimi="BarDisplayLabel" /> <!-- Label, tähistamaks --> <XSL-i:Param Nimi="BarPercent"/> <!-- Protsent kogusummast. --> <XSL-i:Param Nimi="QueryFilterFieldName"/> <!-- Päringu esitamiseks kasutatakse & filter --> <XSL-i:Param Nimi="QueryFilterFieldValue"/> <!-- Päringu esitamiseks kasutatakse & filter --> <XSL-i:Param Nimi="TotalItems" /> <!-- selles barlabel arv kokku --> <TR> <!-- Baar label ise. --> <TD klass="MS-formbody" laius="30%"> <!-- See järgmise komplekti avaldused ehitab päringustringi, mis võimaldab meil näha filtreeritud vaates põhiandmete. Me teeme mõned asjad siin kasutada: 1. Me minna FilterField1 ja FilterValue1 üle loendis veeru filtreerimine. 2. SharePointi möödub olulisemaks parameetriks meile, ListUrlDir, mis viitab aluseks oleva nimekirja, mille vastu selle DVWP "töötab". Ei ole XSL lõbus? --> <XSL-i:teksti Keela väljund põgenedes="Jah"> <![CDATA[<href ="]]></XSL-i:teksti> <XSL-i:väärtuse kohta Valige="$ListUrlDir"/> <XSL-i:teksti Keela väljund põgenedes="Jah"><![CDATA[?FilterField1 =]]></XSL-i:teksti> <XSL-i:väärtuse kohta Valige="$QueryFilterFieldName"/> <XSL-i:teksti Keela väljund põgenedes="Jah"><![CDATA[&FilterValue1 =]]></XSL-i:teksti> <XSL-i:väärtuse kohta Valige="$QueryFilterFieldValue"/> <XSL-i:teksti Keela väljund põgenedes="Jah"><![CDATA[">]]></XSL-i:teksti> <XSL-i:väärtuse kohta Valige="$BarDisplayLabel"/> <XSL-i:teksti Keela väljund põgenedes="Jah"><![CDATA[</a>]]></XSL-i:teksti> <!-- Järgmise bitt näitab mõned numbrid vormingus: "(Kokku / % kogu)" --> (<XSL-i:väärtuse kohta Valige="$TotalItems"/> / <!-- See tekitab kena protsenti sildi meile. Tänud, Microsoft! --> <XSL-i:kõne-Mall Nimi="percentformat"> <XSL-i:koos param Nimi="protsenti" Valige="$BarPercent"/> </XSL-i:kõne-Mall>) </TD> <!-- Lõpuks, paisata on <TD> silt Baar ise.--> <TD> <Tabel CellPadding="0" cellspacing="0" ääris="0" laius="{ringi($BarPercent * 100)+1}%"> <TR bgcolor="punane"> <XSL-i:teksti Keela väljund põgenedes="Jah"><![CDATA[&nbsp;]]></XSL-i:teksti> </TR> </Tabel> </TD> </TR> </XSL-i:Mall> <!-- See pärineb otse mõned XSL leidsin MS malli. --> <XSL-i:Mall Nimi="percentformat"> <XSL-i:Param Nimi="protsenti"/> <XSL-i:Valige> <XSL-i:Kui test="Vorminda numbrit($protsenti, '#,##0%;-#,##0%')= "NaN"">0%</XSL-i:Kui> <XSL-i:muidu> <XSL-i:väärtuse kohta Valige="Vorminda numbrit($protsenti, '#,##0%;-#,##0%')" /> </XSL-i:muidu> </XSL-i:Valige> </XSL-i:Mall> </XSL-i:laadileht>

Tulemused:

Ülevalt XSL tekitab see graafik:

Pilt

Puurida pääsemiseks klikkides olekukood:

Pilt

Sõlmida mõtted:

Saab seda üldistada?

Ma armastan seda Graafikavidinate kontseptsiooni, kuid ma vihkan fakti, et pean minna ja teha nii palju käsitsi kodeerimine. Ma olen andnud väike arvasin, et kas ta saab üldistada ja ma olen optimistlik, Aga ma olen ka natuke hirmus, et võib esineda telliskivisein kusagil mööda teed, mis ei paku mingit töö-around. Kui kellelgi on häid ideid selle, Palun pange tähele kommentaare või kirjuta mulle.

Vertikaalne graafikud:

See on horisontaalne tulpdiagramm. See on kindlasti võimalik luua vertikaalne graafik. Lihtsalt tuleb muuta HTML. Ma hakkaks samamoodi: Loo HTML esindatuse vertikaalne tulpdiagrammil ja seejärel mõtlema, kuidas saada, et via XSL. Kui keegi on huvitatud, et, Ma võiks veenda proovi ja kiiksud välja töötada. Kui keegi on juba teinud, et, palun andke mulle teada ja ma hea meelega link oma blogi 🙂

Ma arvan, et väljakutseks vertikaalne graafik on graafik etiketid on keerulisem, aga kindlasti mitte võimatu.

Väli nimi Sainpas su:

Vähemalt kahte asja tähele teie väljanimedega.

Esimese, välja nime välja ei pääsenud XSL-i. See tuleb ilmselt küsimus siin:

        <XSL-i:muutuja Nimi="totalProposed" 
Valige="Krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status) = "Ettepanek"])" />

Kui teie "olek" veeru nimi on tegelikult "olekukood" siis tuleb sellele viidata kui "Status_x0020_Code":

   <XSL-i:muutuja Nimi="totalProposed" 
Valige="Krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status_x0020_Code) = "Ettepanek"])" />

Teine, ja ma olen natuke udune selles, aga pead ka olema ja teatise väärtus muutub. Kui panete oma valdkonnas "olekukood" ja siis hiljem, Nimetage see ümber "AFE olek", "sisemine nimi" ei muutu. Sisemine nimi on ikkagi "olekukood" ja peab viitama kui "Status_x0020_Code". "Muud vahendid" lingid võib aidata diagnoosida ja parandada selliste probleemide.

Umbes et värv:

Ma valisin "punased" sest see on mulle meeldiv hetkel. Ei ole suur asi näidata erinevaid värve nii, et ainult visuaalse kirjeldama mitu, vaid ka näha kasulik KPI. Näiteks, Kui protsent "seiskunud" AFE's on > 10% siis näitab punane, muidu Näita seda musta. Kasutamine <XSL-i:Valige> selle saavutamiseks.

Muud ressursid:

Õnnelik ümberkujundamine!

<lõpp />

Telli minu blogi!

17 mõtteid "Luua SharePointi riba graafikud

  1. Chris B

    Selle lehe peaaegu lõpetatud otsin ülesanne.

    Mul on rühm, mis tahab SharePointi uuringu loendi abil saate luua iganädalane küsitlus. Saak? Nad tahavad näha koodi… Või muuta süsteemi iga kord, kui nad saadavad küsitlus (planeeritud weekly update).

    Mul oli võimalus ühendada selle uuringu loend ja looge graafik esimene vastus veeru. Ma ei saa ennustada küll on väärtused ja sildid, mida nad vajavad liigub edasi. Asja teeb halvemaks võivad nad enam-vähem vastused olemas iga nädal.

    Ma vaatan mujal igaks juhuks, kuid keegi leidis viis luua ridu ja siltide põhineb off valikute ja dünaamiliselt peitmissätte seadmine, mitte raske kodeerimine oodatud väärtusega arv?

    Vastus
  2. Greg Laushine

    Tänu Paul. Väga kasulik. Tänu oma tööle, Mul oli võimalus graafik Baar veeru lisamine olemasolevale DVWP (näiteks. ülesanded) väga lihtsalt koos vaid paar rida koodi.
    SharePoint Designeris, Ma lisada andmevaade pealkiri ja % täielik standardveerud tööülesannete loend. Kursori viimine ühe lahtrid ja paremklõps. Ma Vali Lisa veerg paremale. Koodi vaade, Ma leidsin selle <TD> ja asendas selle <XSL-i:oma koodiga lahtrisisese teksti element:
    <Tabel cellpadding ="0" cellspacing ="0" Border ="0"
    laius = "{ringi(@PercentComplete * 100)+1}%">
    <TR style = "taustavärv:punane">
    <XSL-i:teksti Keela-väljund-põgenedes = "jah"><![CDATA[&nbsp;]]></XSL-i:teksti>
    </TR>
    </Tabel>

    Märkus ma muutunud järjest värvikood bgcolor = "punane" -style = "taustavärv:punane"
    Ka, oli võimalik valida veergude minu nimekirja (@PercentComplete) "$BarPercent asemel"
    Greg

    Vastus
  3. Wolfgang
    Paul, Tänu sellele! Olen loonud täpne koopia tegin ja see töötab peaaegu täiuslik. Seal oli üks pisike küsimus teie koodi rida 2. lõige:
    <XSL-i:malli vastet = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Pärast seda, kui ma parandatud, et see toimib nagu võlu! Ma nüüd kohandada seda oma nimekirja ja staatust, kuid ma olen kindel, et see ei ole kõva. (Ma pärast tulemuse)
    Aitäh veelkord
    ~ Wolle
    Vastus
  4. Nime pole
    küsimus –
    Mida teha, kui mu graafik, Ma tahtsin, et mitte lihtsalt loota üks olek kuid Loe mitu neist muutuja?
    Nii, Näiteks, kui mul oli —
    <XSL-i:muutuja nimi = "RequestsInitialized"
    Valige = "krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status)= "LÕPETAMATA"])" />
    –Asi on, See oleks loota eksemplarid, "Lõpetamata", Aga ma tahan loota midagi, kuid 'Ülevaatuse ootel' muutuja.. Kuidas ma seda teha?
    Tänud!
    Vastus
  5. Murty Srirangam
    Tere Paul,
    Iam tõesti see on tõesti palju vaeva teile. Kas sa palun seletada, kui ma postitamiseks seda koodi. Olen loonud oma prjoect neli uut faili. Seejärel saab seletada lähemalt mis teha.
    Aitäh
    Murty
    Vastus
  6. Andrew Carrington
    Hei, Püüan muuta see veidi nii, et see kuvab diagrammi ülesandeid tööülesannete loendi Kasutajateave vastu. Ta kasutab veeru nimega on kasutaja kohalolek veeru @AssignedTo. Ma saan kuvada sulatatud HTML kuid ei saa seda väärtuste arvutamiseks ja kuvamiseks.
    Kõik ideed?
    Tänud
    Andy
    Vastus
  7. Patrik Luca kirjutas:
    Tere Paul,
    suur postitus!
    Küsimus:
    Mina samal ajal kaks välja filtreerida: kuidas seda saavutada?
    Näiteks, üks teie muutujate nimetatakse totalStalled ning see filtreerib @Status.
    Mina samal ajal vähendada minu teisele väljale tagastatud kirjete arvu filtreerimine.
    Ma juba leidnud, kuidas teha "või", aga ma donnot õnnestub leida "JA’
    Nn VÕI’ niimoodi on võimalik saavutada:
    <XSL-i:muutuja nimi = "totalStalled" Valige = "krahv(/dsQueryResponse/ridu/rida[normaliseerida ruumi(@Status) = 'Seiskumise "] | /dsQueryResponse/ridu/rida[normaliseerida ruumi(@ExtraFilterField) = 'Value'])" />
    Vastus
  8. Frank

    Mul on "kasutamine Verbi SharePoint’ küsimus. Oleme sõjaväehaiglas kasutades MOSS standard meie intraneti ja tahaks ehitada armatuurlauda meie Command Group näha "reaalajas’ võimaluse korral. Üks peamisi küsimusi on vaadata reaalajas praeguse töökoormuse rajatises ja sõna otseses mõttes vaadata seda muuta üles-alla (selle kuvamiseks arvatavasti klõpsama “Värskenda”/F5).

    Tänan teid ette,

    Vastus

Jäta vastus

Teie e-posti aadressi ei avaldata. Kohustuslikud väljad on tähistatud *