Archívy kategórie: SharePoint rozvoja

Pozor, lámanie zmeny ItemStyle.xsl

Bola práca s ItemStyle.xsl prispôsobiť vzhľad obsahu webovej časti dotaz a právo o čase obeda, Urobil som lámanie zmena xsl. Si neuvedomil, že, ale toto malo ďalekosiahle účinky v rámci kolekcie lokality. Išiel som na obed a po návrate, všimol tejto správy nachádzajúce sa v veľa miesta:

Nemôže zobraziť túto webovú časť. Riešenie problému, Otvorte webovú stránku v editore HTML kompatibilnom so službou Windows SharePoint Services, napríklad Microsoft Office SharePoint Designer. Ak problém pretrváva, Obráťte sa na správcu webového servera.

Som obviňovaný klienta (nie si uvedomil ešte, že to bola moja chyba v tomto bode) ale nakoniec si všimol, že intellisense programu visual studio bola varovania mi že som mal poškodený XSL. Opravil som to a všetko, čo začal pracovať.

Zatraceně dávajte pri práci s ItemStyle.xsl (a niektorý z globálnych súborov XSL) — porušujú ich ovplyvňuje veľa artefaktov v kolekcii lokalít.

<koniec />

Zobrazenie obsahu webovej časti výsledky dotazu do mriežky / Tabuľka

Prehľad a cieľ

Po vybalení z krabice, MACHY’ Obsah webovej časti dotaz (CQWP) jeho výsledky sa zobrazuje vo formáte zoznamu, podobné výsledky vyhľadávania. Je tiež možné zobraziť výsledky vo formáte mriežky (tj. Formát tabuľky HTML). Mriežka formáty sú lepšie v niektorých prípadoch. Opísať, ako dosiahnuť tento efekt v tomto článku.

Obchodné scenáre

Pracoval som s klientom na rozľahlej MOSS rollout. Navrhli sme ich taxonómie, taká, že projekty sú prvej triedy občanov v hierarchii a majú svoje vlastné stránky najvyššej úrovne. Projektoví manažéri udržiavať zoznam ojedinelého projektu súhrnné informácie, napríklad názov, rozpočet, predpokladaný dátum ukončenia, zostávajúci rozpočet a ďalšie polia, typ súhrnu. : "Singleton" Myslím, že vlastný zoznam lokality SharePoint, zaručene obsahujú iba jednu položku. Zjednodušene, Vyzerá to, že to:

obrázok

Technický prístup je veľa rovnaký ako je popísané tu (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). CQWP využíva Transformácia XSL vypúšťať HTML pre prehliadač urobiť.

Vždy som predstaviť výsledok pred potápanie do XSL, pretože XSL je nočná mora. Tu je môj požadovaný výsledok:

obrázok

HTML takhle generuje tento výsledok:

<HTML>
 <telo>
 <centrum>
 <Tabuľka orámovanie= 1>

<!-- Menovky-->
 <TR bgcolor= modrá>
 <TD><písmo Farba= biela><b>Názov projektu</b></písmo></TD>
 <TD Zarovnať= právo><písmo Farba= biela><b>Dátum dokončenia</b></písmo></TD>
 <TD Zarovnať= právo><písmo Farba= biela><b>Rozpočet</b></písmo></TD>
 <TD Zarovnať= právo><písmo Farba= biela><b>Skutočné náklady</b></písmo></TD>
 <TD><písmo Farba= biela><b>Celkový stav</b></písmo></TD>
 </TR>

<TR>
 <TD>Re-drôt počítačovej učebni.</TD>
 <TD Zarovnať= právo>02/01/08</TD>
 <TD Zarovnať= právo>22,500.00</TD>
 <TD Zarovnať= právo>19,000.00</TD>
 <TD>Prebieha</TD>
 </TR>

<TR>
 <TD>Poskytovanie serverov SQL Upgrade</TD>
 <TD Zarovnať= právo>04/01/08</TD>
 <TD Zarovnať= právo>7,500.00</TD>
 <TD Zarovnať= právo>0.00</TD>
 <TD>Plánované</TD>
 </TR>

</Tabuľka>
 </centrum>
 </telo>
</HTML>

Prístup

Postupujte podľa týchto krokov Vytvorte mriežky:

  1. Identifikovať komponenty mriežky (riadky alebo stĺpce).
  2. Definovať a vytvoriť stĺpce potrebné lokality.
  3. Vytvorenie podstránky pre projekty a ojedinelého zoznamy.
  4. Pridať CQWP na webovú stránku a nakonfigurovať tak, aby vyhľadávanie pre vaše zoznamy.
  5. Upraviť CQWP XML zhromaždiť ďalšie stĺpce.
  6. Upraviť súbor XSL, vytvárať tabuľky.

Budem sa sústrediť na číslo šesť. Čísla jedna až štyri sú rovno-dopredu, a niečo, čo už urobil každý užívateľ CQWP. Číslo päť bol dobre zdokumentovaný, iní vrátane tento vyčerpávajúci náhľad obrazovky naloženého článku na lokalite MSDN tu (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) a Heather Solomon's blog tu (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).

Skrutky a matice

Začať a vykonávať krokov jedna až päť podľa MSDN dokumentáciu a Heather Šalamúna článok.

V tomto momente, ste pridali svoj CQWP na stránku a budete mať vaše <CommonViewFields> nakonfigurované podľa potreby.

Nasledujúci po obvyklé kroky, Môžem získať tieto priebežných výsledkov:

1. Vytvorenie typu obsahu, šablónovej vlastného zoznamu pre daný typ obsahu a dve stránky. Tu je typ obsahu:

obrázok

Tu je štruktúra stránky:

obrázok

2. Pridať CQWP po vytvorení môj projekt podlokalít a ojedinelého projektu súhrnné zoznamy:

obrázok

3. Pridajte všetky dodatočné informácie, chcem prostredníctvom <CommonViewFields>:

        <nehnuteľnosti meno="CommonViewFields" typ="reťazec">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</nehnuteľnosti>

Všimnite si, že som musel držať všetky polia vlastností na jednom riadku alebo to nebude fungovať (CQWP by mi povedať, či dotaz vrátil žiadne položky).

4. V tomto momente, sme pripravení posunúť MSDN článku a flip cez na Heather Šalamúna článok. Jej kroky, začína v blízkosti krok #5 vytvoriť vlastnú / unghosted verzia ItemStyle.xsl. Sledujem Heather poradenstvo, až cez krok 11 a získajte tieto priebežných výsledkov:

4.1: Meno mojej šablóne XSL takto:

<XSL:Názov šablóny = "Grid" zápas = "riadok[@Style = "Siete"]" režim = "itemstyle">

Tiež mierne upraviť jej navrhol <XSL:pre každý …> pridaním <br /> značka poskytnúť čistejšie výpis:

    <XSL:pre každý Vyberte="@*">
      P:<XSL:hodnoty z Vyberte="meno()" /><br/>
    </XSL:pre každý>

4.2: Upraviť webovú časť, Prejsť na vzhľad a vyberte moje "Grid" štýl:

obrázok

Použiť zmeny a tu je výsledok:

obrázok

Môžeme vidieť z vyššie uvedeného, že polia chceme (Názov projektu, náklady, stav, atď) sú k dispozícii pre nás používať, keď budeme vypúšťať HTML. Nielen, že, Ale vidíme, že názvy, ktoré sme odkaz týchto stĺpcov v XSL. Napríklad, My referenčný stav projektu ako "Project_x005F_x0020_Name".

V tomto momente, My odchýliť od Heather blog a ramenách týchto obrov, Môžem pridať svoje vlastné trochu.

ContentQueryMain.xsl

POZNÁMKA: Keď vykonávate zmeny na ContentQueryMain.xsl, ako aj ItemStyle.xsl, budete musieť skontrolovať tieto súbory späť predtým, ako budete vidieť vplyv zmeny.

Mriežka-tvorby účely, MOSS používa dva rôzne súbory XSL výsledky vidíme z CQWP. Vygenerovať predchádzajúce bitový výstup, sme upravili ItemStyle.xsl. MOSS skutočne používa iný súbor XSL, ContentQueryMain.xsl sa v spolupráci s ItemStyle.xsl vytvoriť svoje HTML. Ako už názov napovedá, ContentQueryMain.xsl je hlavným"" XSL, ktorý kontroluje celkový tok preklad. Opakuje prostredníctvom všetkých nájdených položiek a odovzdáva ich jeden po druhom do šablóny ItemStyle.xsl. Upravíme si ItemStyle.xsl vytvárať otvorené <Tabuľka> Tag pred vyžarujúce prvý riadok údajov a ukončenie <Tabuľka> značku po vyžarujúce posledný riadok. Na dosiahnutie tohto cieľa, ContentQueryMain.xsl je upravené prejsť dva parametre nášho "mriežky" šablóny ItemStyle.xsl, "posledný riadok" a "aktuálny riadok". ItemStyle.xsl používa tieto podmienečne vydávať potrebné značky.

Heather Šalamúna technikou, môžeme nájsť ContentQueryMain.xsl. Nachádza sa na rovnakom mieste ako ItemStyle.xsl. Tento náhľad obrazovky by malo pomôcť:

obrázok

Musíme urobiť nasledovné zmeny:

  • Upraviť šablónu xsl, "CallItemTemplate" že vlastne vyvolá naše šablóny mriežky v ItemStyle.xsl. Sme prejsť dva parametre mriežky šablónu tak, že bude mať údaje, ktoré potrebuje podmienečne generovať otváranie a zatváranie <Tabuľka> Tagy.
  • Upraviť jeden kúsok ContentQueryMain.xsl, ktorý volá "CallItemTemplate" odovzdať ho "LastRow" Parameter tak, že LastRow môžu byť odovzdané do našej šablóny mriežky.

Vyhľadajte šablónu s názvom "OuterTemplate.CallItemTemplate" identifikované reťazcom:

  <XSL:šablóny meno="OuterTemplate.CallItemTemplate">

Nahradiť celú šablónu takto:

  <XSL:šablóny meno="OuterTemplate.CallItemTemplate">
    <XSL:param meno="CurPosition" />

    <!--
      Pridať "LastRow" Parameter.
      Používame iba to keď prejsť štýl položky v "Grid".
    -->
    <XSL:param meno="LastRow" />

    <XSL:Vyberte>
      <XSL:keď, kedy skúška="@Style = "NewsRollUpItem"">
        <XSL:Apply-template Vyberte="." režim="itemstyle">
          <XSL:s-param meno="EditMode" Vyberte="$cbq_iseditmode" />
        </XSL:Apply-template>
      </XSL:keď, kedy>
      <XSL:keď, kedy skúška="@Style = "NewsBigItem"">
        <XSL:Apply-template Vyberte="." režim="itemstyle">
          <XSL:s-param meno="CurPos" Vyberte="$CurPosition" />
        </XSL:Apply-template>
      </XSL:keď, kedy>
      <XSL:keď, kedy skúška="@Style = "NewsCategoryItem"">
        <XSL:Apply-template Vyberte="." režim="itemstyle">
          <XSL:s-param meno="CurPos" Vyberte="$CurPosition" />
        </XSL:Apply-template>
      </XSL:keď, kedy>

      <!--
              Súčasneho stavu a lastrow odovzdať šablónu itemstyle.xsl mriežky.
              ItemStyle.xsl bude používať to vydávať otvoriť a zatvoriť <Tabuľka> Tagy.
      -->
      <XSL:keď, kedy skúška="@Style = "Siete"">
        <XSL:Apply-template Vyberte="." režim="itemstyle">
          <XSL:s-param meno="CurPos" Vyberte="$CurPosition" />
          <XSL:s-param meno="Posledný" Vyberte="$LastRow" />
        </XSL:Apply-template>
      </XSL:keď, kedy>

      <XSL:inak>
        <XSL:Apply-template Vyberte="." režim="itemstyle">
        </XSL:Apply-template>
      </XSL:inak>
    </XSL:Vyberte>
  </XSL:šablóny>

Komentáre popisujú účel zmeny.

samozrejme, "OuterTemplate.CallItemTemplate" sa sám nazýva z inej šablóny. Vyhľadajte danú šablónu hľadaním tohto textového reťazca:

<XSL:šablóny meno="OuterTemplate.Body">

Prechádzať podľa pokynov v OuterTemplate.Body a vložiť LastRow parameter takto (zobrazí ako komentár kurzívou):

<XSL:call-template meno="OuterTemplate.CallItemTemplate">
  <XSL:s-param meno="CurPosition" Vyberte="$CurPosition" />
  <!-- Vložiť LastRow parameter. -->
  <XSL:s-param meno="LastRow" Vyberte="$LastRow"/>
</XSL:call-template>

Po všetkých týchto, konečne máme veci správne nastavené tak, že naša ItemStyle.xsl môže vydávať <Tabuľka> Tagy na správnom mieste.

ItemStyle.Xsl

POZNÁMKA: Znova, Skontrolujte, či v ItemStyle.xsl po akýchkoľvek zmien tak, že môžete vidieť vplyv týchto zmien.

Tu máme dve úlohy:

  • Nahradiť celú šablónu mriežky. Môžete kopírovať/vložiť z nižšie.
  • Pridať niektoré zbytočne zložitá vec mimo definíciu šablóny, ktorá umožňuje "formatcurrency" Šablóna pre prácu. (Môžete povedať, že mám slabý rukoväť na XSL).

Prvá, v hornej časti ItemStyle.xsl, Pridajte nasledujúci riadok:

  <!-- Niektoré zbytočne zložitá, ktorý nám umožňuje zobraziť USA. meny. -->
  <XSL:formáte desatinného čísla meno="zamestnanci" číslica="D" />

  <XSL:šablóny meno="Predvolené" zápas="*" režim="itemstyle">

Poznámka, že som pridal to priamo pred <XSL:Názov šablóny = "predvolené" …> definícia.

Ďalšie, vrátiť do našej siete šablóny. Nahradiť celú šablónu mriežke nižšie uvedený kód. Poznamenal, že je dôkladne, ale neváhajte mi email alebo zanechať komentár na môj blog, ak máte otázky.

  <XSL:šablóny meno="Mriežka" zápas="Riadok[@Style = "Siete"]" režim="itemstyle">

    <!--
      ContentMain.xsl prechádza CurPos a naposledy.
      Používame tieto podmienečne vypúšťať otvoriť a zatvoriť <Tabuľka> Tagy.
    -->
    <XSL:param meno="CurPos" />
    <XSL:param meno="Posledný" />

    <!-- Nasledujúce premenné sú nezmenené od štandardnej ItemStyle.xsl -->
    <XSL:premenná meno="SafeImageUrl">
      <XSL:call-template meno="OuterTemplate.GetSafeStaticUrl">
        <XSL:s-param meno="UrlColumnName" Vyberte=""ImageUrl""/>
      </XSL:call-template>
    </XSL:premenná>
    <XSL:premenná meno="SafeLinkUrl">
      <XSL:call-template meno="OuterTemplate.GetSafeLink">
        <XSL:s-param meno="UrlColumnName" Vyberte=""LinkUrl""/>
      </XSL:call-template>
    </XSL:premenná>
    <XSL:premenná meno="DisplayTitle">
      <XSL:call-template meno="OuterTemplate.GetTitle">
        <XSL:s-param meno="Hlava" Vyberte="@Title"/>
        <XSL:s-param meno="UrlColumnName" Vyberte=""LinkUrl""/>
      </XSL:call-template>
    </XSL:premenná>
    <XSL:premenná meno="LinkTarget">
      <XSL:Ak skúška="@OpenInNewWindow = "True"" >_blank</XSL:Ak>
    </XSL:premenná>

    <!--
      Tu definujeme premenné, "tableStart".  Tento balík obsahuje HTML, ktoré používame na definovanie otvorenie tabuľky, rovnako ako menovky stĺpcov.  Všimnite si, že ak CurPos = 1, obsahuje HTML tag CDATA.
      Inak, bude to prázdne.

      Hodnota tableStart je emited, zakaždým, keď ItemStyle sa nazýva prostredníctvom ContentQueryMain.xsl.
    -->
    <XSL:premenná meno="tableStart">
      <XSL:Ak skúška="$CurPos = 1">
        <![CDATA[
        <orámovanie tabuľky = 1>
          <TR bgcolor = "blue">
            <TD><Farba písma = "biele"><b>Názov projektu</b></písmo></TD>
            <Zarovnať TD = "právo"><Farba písma = "biele"><b>Dátum dokončenia</b></písmo></TD>
            <Zarovnať TD = "právo"><Farba písma = "biele"><b>Rozpočet</b></písmo></TD>
            <Zarovnať TD = "právo"><Farba písma = "biele"><b>Skutočné náklady</b></písmo></TD>
            <TD><Farba písma = "biele"><b>Celkový stav</b></písmo></TD>
          </TR>
        ]]>
      </XSL:Ak>
    </XSL:premenná>

    <!--
      Inej premennej, tableEnd jednoducho definuje uzavretie tabuľky značky.

      Rovnako ako u tableStart, to je vždy emited.  To je dôvod, prečo jeho hodnota je priradená podmienečne založené na či sme už bol schválený v poslednom riadku ContentQueryMain.xsl.
    -->
    <XSL:premenná meno="tableEnd">
      <XSL:Ak skúška="$CurPos = $Last">
        <![CDATA[ </Tabuľka> ]]>
      </XSL:Ak>
    </XSL:premenná>

    <!--
      Vždy vypúšťať obsah tableStart.  Ak to nie je prvý riadok prešiel k nám ContentQueryMain.xsl, potom vieme, že jeho hodnota bude prázdne.

      Zakázať výstup utekať, pretože keď tableStart to nie prázdne, To zahŕňa skutočné HTML, ktoré chceme byť poskytnuté prehliadača.  Ak sme nehovorte analyzátor jazyka XSL zakázať výstup úteku, to bude generovať podobne"&lt;Tabuľka&gt;" namiesto toho"<Tabuľka>".
    -->
    <XSL:hodnoty z Vyberte="$tableStart" zakázať-výstupný-únik="áno"/>


    <TR>
      <!--
      P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
      -->
      <TD>
        <XSL:hodnoty z Vyberte="@Project_x005F_x0020_Name"/>
      </TD>

      <TD Zarovnať="právo">
        <XSL:hodnoty z Vyberte="@Project_x005F_x0020_End_x005F_x0020_Date"/>
      </TD>

      <TD Zarovnať="právo">
        <XSL:call-template meno="FormatCurrency">
          <XSL:s-param meno="hodnota" 
Vyberte="@Project_x005F_x0020_Budget"></XSL:s-param> </XSL:call-template> </TD> <TD Zarovnať="právo"> <XSL:call-template meno="FormatCurrency"> <XSL:s-param meno="hodnota" Vyberte="@Project_x005F_x0020_Expenses">
</XSL:s-param> </XSL:call-template> </TD> <TD> <XSL:hodnoty z Vyberte="@Project_x005F_x0020_Status"/> </TD> <!-- Všetky tieto je zakomentovaný objasniť veci. Avšak, priviesť ju späť a napchať si ho do <TD> jeho efekt. --> <!-- <konto div id = "linkitem" trieda = "položka"> <XSL:Ak otestovať = "dĺžka reťazca($SafeImageUrl) != 0> <div triedy = "obrázok-oblasť-vľavo"> <href = "{$SafeLinkUrl}" cieľ = "{$LinkTarget}"> <img triedy = "obrázok-fixed-width" src = "{$SafeImageUrl}"
klávesy ALT = "{@ImageUrlAltText}"/> </a> </DIV> </XSL:Ak> <div triedy = "položka prepojenia"> <XSL:call-template
Name="OuterTemplate.CallPresenceStatusIconTemplate"/> <href = "{$SafeLinkUrl}"
cieľ = "{$LinkTarget}" hlavy = "{@LinkToolTip}"> <XSL:hodnota-vyberte = "$DispXSLTitle" /> </a> <div class = "Popis"> <XSL:hodnotu z select="@Description" /> </DIV> </DIV> </DIV>
--> </TR> <!-- Vyžarujú uzavretie tabuľky tag. Ak nie sme na poslednom riadku, to bude prázdne. --> <XSL:hodnoty z Vyberte="$tableEnd" zakázať-výstupný-únik="áno"/> </XSL:šablóny> <XSL:šablóny meno="FormatCurrency"> <XSL:param meno="hodnota" Vyberte="0" /> <XSL:hodnoty z Vyberte='formát-čísla($hodnota, "$DDD,DDD,DDD.DD", "zamestnanci")' /> </XSL:šablóny>

Štandardné WSS/MOSS obrazovky na zadávanie údajov nepodporujú kaskádové kvapka-nadol (alebo iný vnútri-od komunikácie)

AKTUALIZÁCIA (04/2008): Tento skvelý blog vstupe ukazuje dobré javascript založené prístup k tomuto problému: http://webborg.blogspot.com/2008/04/add-functions-and-events-to-sharepoint.html

AKTUALIZÁCIA II: (04/2008): Tento blog vstupe vyzerá sľubne aj: http://www.cleverworkarounds.com/2008/03/13/free-mosswss-2007-web-part-hide-controls-via-javascript/

Niekoľkokrát týždenne, Ak nie denne, fórum užívateľov opísať požiadavku, ktorá by sa normálne stretol cez kaskádové kvapka-nadol. Napríklad, Mám dva ovládacie prvky rozbaľovacieho:

  • Zoznam USA. štáty
  • Zoznam USA. mestá.

Ako zodpovedný UI poskytovateľov, chceme ju prevádzkovať takhle:

  • Paul vyberie USA. štát z drop-dole.
  • To spôsobí, že mestá drop-dole filtrovať iba tých miest, ktoré patria do stavu vybraných.
  • Paul vyberie mesto z tohto filtrovaného zoznamu.

Neexistuje podpora mimo-of-box pre túto funkciu. v skutočnosti, Neexistuje podpora OOB pre akýkoľvek druh komunikácie priamo v rámci-form. To zahŕňa programovo úkrytu/zapnutie/vypnutie polí v reakcii na pole zmeny inde vo formulári.

Skutočným cieľom tohto článku sa opisujú možné riešenie a Toto sú možnosti ako viem:

  1. Rozvíjať vlastné stĺpcový. Ako vývojárov vlastné stĺpec, máte plnú kontrolu nad svetom"" že vlastné stĺpca. Môžete implementovať eskaláciou rozbaľovacej tak.
  2. Zvážte použitie toku činností. V niektorých prípadoch, chcete automaticky priradiť hodnotu poľa na iné pole hodnoty. V tomto prípade, normálne by pokúsiť použiť vo vypočítanom stĺpci, ale niektoré krát, to jednoducho nebude robiť svoju prácu. Pracovný postup programu SharePoint Designer je relatívne spravovať-šetrná alternatíva k klesá nadol do kódu a visual studio. Ak máte ísť touto cestou, Dávajte pozor na problém riešiť Tento článok (http://paulgalvin.spaces.live.com/blog/cns!CC1EDB3DAA9B8AA!405.entry).
  3. Obsluhy udalostí: Ako pracovný postup, to je po skutočnosti riešenia. Obsluha udalostí je zostavou .NET (C#, VB.NET) ktoré služby SharePoint odovzdá riadenie. Objekt môžete vytvoriť má prístup k údajom v zozname (a celý objekt modelu) a môže urobiť všetky potrebné výpočty.
  4. Pomocou programu SharePoint Designer vytvoriť vlastné prihlášky. Nemám priame skúsenosti s týmto prístupom, but I hear they are doing good things with NewForm.aspx these days 🙂
  5. Roll svoj vlastný ASP.NET dát vstup funkcie (ako samostatnú webovú stránku alebo webovú časť) a použiť ho namiesto toho.

Vie niekto iný alebo lepšie možnosti, Prosím post komentár a budem aktualizovať telo tento príspevok.

<koniec />

Technorati Tags:

Vytvoriť Bar grafy SharePoint

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:

  1. Vytvorenie zoznamu alebo knižnice dokumentov, ktorá obsahuje údaje, ktoré chcete zobraziť v grafe.
  2. Miesto priradená knižnica dokumentov / vlastný zoznam na stranu a previesť ju do webová časť zobrazenia údajov (DVWP).
  3. 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:

obrázok

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:

obrázok

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:

obrázok

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:

Sample Bar Graph

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>&nbsp;</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>&nbsp;</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>&nbsp;</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:

obrázok

Prejdite na podkladových údajov kliknutím na Stavový kód:

obrázok

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:

Šťastný transformácia!

<koniec />

Vyberajte môj blog!

OM údaje pomocou vlastného zoznamu (alebo, Ešte ďalší OM údaje Displayor [ako YACC, ale inak])

Dnes, Som strávil niekoľko hodín vypátrať príčinu za správu "zadaný názov stĺpca sa už používa, alebo vyhradené. Vyberte iný názov."

Možno vytvoriť stĺpec, odstránené a re-vytvorený v inom prostredí, Takže som vedel, že to nebol vyhradený názov. Avšak, Jednoducho nemohol som nájsť nikde stĺpci cez štandardné používateľské rozhranie služby SharePoint na každom mieste v kolekcii lokalít.

Som vyslaný na Fóra lokality MSDN tu. a nezdolnej Andrew Woodward ukázal mi v smerom k podkladových údajov objekt modelu.

Som išiel preč CodePlex nájsť nejaké nástroje, ktoré by mi pomohol nahliadnuť do podkladových údajov OM a pomôžte mi nájsť problémy.

Skúšal som niekoľko nástrojov a oni boli veľmi cool a zaujímavé, ale nakoniec, UI nie je dosť dobré pre moje účely. Nie som kritizovať akýmikoľvek prostriedkami, ale jasne nástroj-tvorcovia nemal môj problém na pamäti, keď vytvoril ich UI :). Väčšina ľudí sa zdá byť investujú slušné množstvo času a úsilia pri vytváraní stanicu / klientské aplikácie, ktoré poskytujú zobrazení stromov, kliknite pravým tlačidlom myši kontextové menu a tak ďalej. Sú to pekné a všetky, ale je to veľa práce, aby vytvoriť top-of--line užívateľský zážitok, ktorý je tiež veľmi flexibilný.

Som naozaj potreboval odpoveď na tento problém. Napadlo ma že keby som mohol dostať všetky stĺpce lokality v kolekcii lokality do vlastného zoznamu, Mohol filtra, triediť a vytvoriť zobrazenia, ktoré by mi pomohol nájsť tento údajne existujúceho stĺpca (čo sa aj stalo, BTW). Išiel dopredu a urobil to a za hodinu alebo dve neskôr, mal všetky moje stĺpce lokality nahrá do vlastného zoznamu s zoskupenia, triedenie a podobne. Našiel som svoju odpoveď päť minút neskôr.

Ak úspešne prevziať svet, Myslím, že sa dekrét, že všetky nástroje poskytovateľov SharePoint vážne uvažovať, navarovanie ich dáta modelu objektu vlastného zoznamu. Týmto spôsobom, Mám moc Hľadať všetky cesty chcem (obmedzené, samozrejme, podľa štandardných sharepoint funkcie).