Kategoria: Archiwum: Rozwój programu SharePoint

Uważaj na łamanie zmian do ItemStyle.xsl

Byłem w pracy z ItemStyle.xsl, aby dostosować wygląd Web Part Kwerenda zawartości i prawo o porze lunchu, Zrobiłem przełomowe zmiany do xsl. Nie wiedziałem, że, ale ten miał daleko idące skutki całego zbioru witryn. Poszedł na obiad i po moim powrocie, Zauważyłem ten komunikat pojawia się w kilka miejsc:

Nie można wyświetlić tego składnika Web Part. Aby rozwiązać ten problem, otworzyć tej strony sieci Web w edytorze HTML zgodnym z programem Windows SharePoint Services, takim jak Microsoft Office SharePoint Designer. Jeśli problem będzie się powtarzał., Skontaktuj się z administratorem serwera sieci Web.

Obwinia klienta (nie wiedząc jeszcze, że to moja wina, w tym momencie) ale w końcu zauważył że intellisense programu visual studio był ostrzega mnie, że nieprawidłowo XSL. Poprawiłem go i wszystko rozpoczął pracę.

Cholernie uważać, pracując z ItemStyle.xsl (i globalne plików XSL) — ich łamanie wpływa wiele artefaktów w zbiorze witryn.

<koniec />

Wyświetlanie zawartości kwerendy sieci Web Part wyniki w siatce / Tabela

Przegląd i cel

Po wyjęciu z pudełka, MOSS’ Web Part Kwerenda zawartości (CQWP) jego wyniki są wyświetlane w formie listy, podobne do wyników wyszukiwania. Jest również możliwe, aby wyświetlić wyniki w formacie siatki (tj.. Format tabeli HTML). Siatki formaty są lepsze w pewnych okolicznościach. Opisano, jak osiągnąć taki efekt w tym artykule.

Scenariusza biznesowego

Ja pracowałem z klientem na wypuszczenie MOSS enterprise-wide. Zaprojektowaliśmy ich taksonomia, takie, że projekty są pierwszej klasy obywateli w hierarchii i mają własne witryny najwyższego poziomu. Menedżerowie projektów prowadzi listę pojedynczych informacje podsumowujące projekt, przykład tytułem, budżet, przewidywane zakończenie dnia, pozostałe budżetu i innych pól typu podsumowania. Przez "pojedyncza" Chodzi mi o niestandardowej listy programu SharePoint gwarantowana zawierają tylko jeden element. Upraszczając, wygląda to:

obraz

Podejścia technicznego jest tak samo jak opisane tutaj (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). CQWP używa transformatę XSL do emitują HTML do przeglądarki do renderowania.

Zawsze wyobrazić wynik przed nurkowania w XSL, ponieważ XSL jest koszmar. Oto mój rezultat:

obraz

HTML jak to generuje wynik:

<HTML>
 <organ>
 <centrum>
 <Tabela granica= 1>

<!-- Etykiety-->
 <TR kolor tła= niebieski>
 <TD><czcionki Kolor= biały><b>Nazwa projektu</b></czcionki></TD>
 <TD wyrównać= prawo><czcionki Kolor= biały><b>Pełna Data</b></czcionki></TD>
 <TD wyrównać= prawo><czcionki Kolor= biały><b>Budżet</b></czcionki></TD>
 <TD wyrównać= prawo><czcionki Kolor= biały><b>Rzeczywisty koszt</b></czcionki></TD>
 <TD><czcionki Kolor= biały><b>Ogólny stan</b></czcionki></TD>
 </TR>

<TR>
 <TD>Ponownie drutu sali komputerowej.</TD>
 <TD wyrównać= prawo>02/01/08</TD>
 <TD wyrównać= prawo>22,500.00</TD>
 <TD wyrównać= prawo>19,000.00</TD>
 <TD>W toku</TD>
 </TR>

<TR>
 <TD>Przepis serwerów SQL Upgrade</TD>
 <TD wyrównać= prawo>04/01/08</TD>
 <TD wyrównać= prawo>7,500.00</TD>
 <TD wyrównać= prawo>0.00</TD>
 <TD>Planowane</TD>
 </TR>

</Tabela>
 </centrum>
 </organ>
</HTML>

Podejście

Wykonaj następujące kroki, aby utworzyć siatkę:

  1. Identyfikacja składników sieci (wierszy/kolumn).
  2. Definiowanie i tworzenie kolumn niezbędne witryny.
  3. Tworzenie podstrony dla projektów i pojedynczych list.
  4. Dodawanie CQWP do strony sieci web i skonfigurować go do wyszukiwania list.
  5. Zmodyfikować XML CQWP zebrać dodatkowe kolumny.
  6. Modyfikowanie XSL do tworzenia tabela.

Mam zamiar koncentrować się na numer sześć. Numery jeden przez cztery są prosto do przodu i coś, co każdy użytkownik CQWP już zrobione. Numer pięć zostało dobrze udokumentowane przez innych tym ten wyczerpujący artykuł ładunkiem zrzut ekranu z MSDN tutaj (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) i Heather Solomon's blog tutaj (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).

Nakrętki i śruby

Rozpocząć i wykonania czynności z jednego do pięciu jak w dokumentacji MSDN i Heather Solomona art.

W tym momencie, Twój CQWP dodane do strony i masz swoje <CommonViewFields> skonfigurowane jako niezbędne.

Po zwykłe czynności, Mogę dostać tych wyników pośrednich:

1. Utworzyć typ zawartości, przechowywaną listy niestandardowej zawartości typu i dwóch stron. Tutaj jest typ zawartości:

obraz

Oto struktura witryny:

obraz

2. Dodać CQWP po utworzeniu mój podwitryn projektu i pojedynczych list podsumowanie projektu:

obraz

3. Dodaj wszystkie dodatkowe informacje chcesz, za pośrednictwem <CommonViewFields>:

        <Właściwość Nazwa="CommonViewFields" Typ="ciąg">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</Właściwość>

Uwaga, że aby zachować wszystkie pola właściwość na jednej linii, albo nie będzie działać (CQWP powie mi, że kwerenda zwróciła żadnych elementów).

4. W tym momencie, Jesteśmy gotowi przejść poza w artykule MSDN i klapki na ponad do artykułu Heather Solomona. Jej kroki w pobliżu krok #5 Aby utworzyć niestandardowe / Unghosted wersja ItemStyle.xsl. Heather rad, się przez kroku 11 i dostać tych wyników pośrednich:

4.1: Następująca nazwa mój szablon XSL:

<XSL:Nazwa szablonu = "siatki" mecz = "wiersz[@Style = "Siatka"]" tryb = "itemstyle">

Również nieco zmodyfikować jej zaproponował <XSL:dla każdego …> dodając <BR /> Tag, aby dostarczyć listę czystsze:

    <XSL:dla każdego Wybierz="@*">
      P:<XSL:wartość z Wybierz="Nazwa()" /><BR/>
    </XSL:dla każdego>

4.2: Zmodyfikować składnik web part, Przejdź do wygląd i wybierz moje siatki"" styl:

obraz

Zastosować zmiany i oto wynik:

obraz

Widać z powyższego, że pola chcemy (Nazwa projektu, koszt, stan, itp) są dostępne dla nas do wykorzystania podczas emitujemy HTML. Nie tylko, że, ale możemy zobaczyć nazwy, przez które możemy odwołać tych kolumn w XSL. Na przykład, możemy odwołać stan projektu jako "Project_x005F_x0020_Name".

W tym momencie, Odjazd z Heather blog i ramionach tych gigantów, Dodać własną trochę.

ContentQueryMain.xsl

UWAGA: Podczas dokonywania zmian zarówno ContentQueryMain.xsl, jak również ItemStyle.xsl, trzeba sprawdzić, że te pliki z powrotem przed można zobaczyć efekt wprowadzonych zmian.

Dla celów tworzenia siatki, MOSS używa dwóch różnych plików XSL do wyników, które widzimy z CQWP. Do wygenerowania poprzedniego trochę wyjście, zmodyfikowaliśmy ItemStyle.xsl. MOSS faktycznie korzysta z innego pliku XSL, ContentQueryMain.xsl się w połączeniu z ItemStyle.xsl do generowania jej HTML. Jak sama nazwa wskazuje, ContentQueryMain.xsl jest głównym"" XSL, który kontroluje ogólny przepływ tłumaczenie. Iterację wszystkich znalezionych przedmiotów i przekazuje je jeden po drugim do szablonów w ItemStyle.xsl. Modyfikujemy będziesz ItemStyle.xsl do generowania otwarte <Tabela> znacznik przed wyemitowaniem pierwszy wiersz danych i zamknięcia <Tabela> znacznik po emitujących ostatni wiersz. Aby to osiągnąć, ContentQueryMain.xsl jest zmodyfikowany przejść dwa parametry do naszej sieci"" szablon w ItemStyle.xsl, "Ostatni wiersz" i "bieżący wiersz". ItemStyle.xsl używa tych warunkowo emitować niezbędne znaczniki.

Przy użyciu techniki Heather Solomona, Znajdź ContentQueryMain.xsl. Znajduje się on w tym samym miejscu jako ItemStyle.xsl. Ten zrzut ekranu powinna pomóc:

obraz

Musimy wprowadzić następujące zmiany:

  • Modyfikowanie szablonu xsl, "CallItemTemplate" że rzeczywiście wywołuje nasz szablon siatki w ItemStyle.xsl. Przekażemy dwa parametry do szablonu siatki, tak, że będzie on danych potrzebnych do wygenerowania warunkowo otwieranie i zamykanie <Tabela> znaczniki.
  • Zmodyfikować nieco innego ContentQueryMain.xsl, który wywołuje "CallItemTemplate" Aby przekazać ją "LastRow" parametr tak że LastRow mogą być przekazane do naszego szablonu siatki.

Zlokalizuj szablon o nazwie "OuterTemplate.CallItemTemplate" zidentyfikowane przez ciąg:

  <XSL:szablon Nazwa="OuterTemplate.CallItemTemplate">

Zastąpić cały szablon następujący:

  <XSL:szablon Nazwa="OuterTemplate.CallItemTemplate">
    <XSL:parametr Nazwa="CurPosition" />

    <!--
      Dodać "LastRow" parametr.
      Tylko używamy go, gdy element stylu przejść w "Siatki".
    -->
    <XSL:parametr Nazwa="LastRow" />

    <XSL:Wybierz>
      <XSL:Kiedy badania="@Style = "NewsRollUpItem"">
        <XSL:zastosowanie szablonów Wybierz="." tryb="itemstyle">
          <XSL:z param Nazwa="EditMode" Wybierz="$cbq_iseditmode" />
        </XSL:zastosowanie szablonów>
      </XSL:Kiedy>
      <XSL:Kiedy badania="@Style = "NewsBigItem"">
        <XSL:zastosowanie szablonów Wybierz="." tryb="itemstyle">
          <XSL:z param Nazwa="CurPos" Wybierz="$CurPosition" />
        </XSL:zastosowanie szablonów>
      </XSL:Kiedy>
      <XSL:Kiedy badania="@Style = "NewsCategoryItem"">
        <XSL:zastosowanie szablonów Wybierz="." tryb="itemstyle">
          <XSL:z param Nazwa="CurPos" Wybierz="$CurPosition" />
        </XSL:zastosowanie szablonów>
      </XSL:Kiedy>

      <!--
              Przekazać aktualną pozycję i lastrow siatki itemstyle.xsl szablon.
              ItemStyle.xsl będzie używać, aby emitować Otwórz i zamknij <Tabela> znaczniki.
      -->
      <XSL:Kiedy badania="@Style = "Siatka"">
        <XSL:zastosowanie szablonów Wybierz="." tryb="itemstyle">
          <XSL:z param Nazwa="CurPos" Wybierz="$CurPosition" />
          <XSL:z param Nazwa="Ostatnia" Wybierz="$LastRow" />
        </XSL:zastosowanie szablonów>
      </XSL:Kiedy>

      <XSL:w przeciwnym razie>
        <XSL:zastosowanie szablonów Wybierz="." tryb="itemstyle">
        </XSL:zastosowanie szablonów>
      </XSL:w przeciwnym razie>
    </XSL:Wybierz>
  </XSL:szablon>

Komentarze opisać w celu zmiany.

Oczywiście, "OuterTemplate.CallItemTemplate" nazywa się z innego szablonu. Zlokalizować ten szablon szukając ten ciąg tekstowy:

<XSL:szablon Nazwa="OuterTemplate.Body">

Przejrzyj instrukcje w OuterTemplate.Body i wstawić następujący parametr LastRow (się jako komentarz kursywą):

<XSL:Wywołanie szablon Nazwa="OuterTemplate.CallItemTemplate">
  <XSL:z param Nazwa="CurPosition" Wybierz="$CurPosition" />
  <!-- Wstaw parametr LastRow. -->
  <XSL:z param Nazwa="LastRow" Wybierz="$LastRow"/>
</XSL:Wywołanie szablon>

Po tym wszystkim, Wreszcie mamy ustawione prawidłowo, tak aby nasi ItemStyle.xsl może emitować rzeczy <Tabela> Tagi na właściwym miejscu.

ItemStyle.Xsl

UWAGA: Ponownie, Sprawdź w ItemStyle.xsl po dokonaniu zmian, tak że można zobaczyć efekt tych zmian.

Mamy tutaj dwa zadania:

  • Zastąpić cały szablon siatki. Można można skopiować i wkleić poniżej.
  • Dodać niektóre mumbo jumbo poza definicją szablonu, który umożliwia "formatcurrency" szablon do pracy. (Można powiedzieć, że mam wątpliwy uchwyt na XSL).

Pierwszy, w górnej części ItemStyle.xsl, Dodaj tę linię:

  <!-- Niektóre mumbo jumbo, że pozwala na wyświetlanie Stanów Zjednoczonych. waluty. -->
  <XSL:zapisie dziesiętnym Nazwa="personel" cyfra="D" />

  <XSL:szablon Nazwa="Domyślnie" mecz="*" tryb="itemstyle">

Uwaga, że dodałem go bezpośrednio przed <XSL:Nazwa szablonu = "domyślny" …> Definicja.

Następny, Wróć do naszego szablonu siatki. Zastąpić cały szablon siatki poniższy kod. To jest dokładnie skomentował, ale nie wahaj się napisz do mnie lub zostawić komentarz na moim blogu, jeśli masz pytania.

  <XSL:szablon Nazwa="Siatka" mecz="Wiersz[@Style = "Siatka"]" tryb="itemstyle">

    <!--
      ContentMain.xsl przechodzi CurPos i ostatnio.
      Możemy z nich korzystać do warunkowo emitują Otwórz i zamknij <Tabela> znaczniki.
    -->
    <XSL:parametr Nazwa="CurPos" />
    <XSL:parametr Nazwa="Ostatnia" />

    <!-- Następujące zmienne są niezmodyfikowany od standardowego ItemStyle.xsl -->
    <XSL:Zmienna Nazwa="SafeImageUrl">
      <XSL:Wywołanie szablon Nazwa="OuterTemplate.GetSafeStaticUrl">
        <XSL:z param Nazwa="UrlColumnName" Wybierz="'ImageUrl'"/>
      </XSL:Wywołanie szablon>
    </XSL:Zmienna>
    <XSL:Zmienna Nazwa="SafeLinkUrl">
      <XSL:Wywołanie szablon Nazwa="OuterTemplate.GetSafeLink">
        <XSL:z param Nazwa="UrlColumnName" Wybierz=""LinkUrl""/>
      </XSL:Wywołanie szablon>
    </XSL:Zmienna>
    <XSL:Zmienna Nazwa="DisplayTitle">
      <XSL:Wywołanie szablon Nazwa="OuterTemplate.GetTitle">
        <XSL:z param Nazwa="Tytuł" Wybierz="@Title"/>
        <XSL:z param Nazwa="UrlColumnName" Wybierz=""LinkUrl""/>
      </XSL:Wywołanie szablon>
    </XSL:Zmienna>
    <XSL:Zmienna Nazwa="LinkTarget">
      <XSL:Jeśli badania="@OpenInNewWindow = "True"" >_blank</XSL:Jeśli>
    </XSL:Zmienna>

    <!--
      Tutaj możemy zdefiniować zmienną, "tableStart".  Zawiera kod HTML, którego używamy do określenia otwarcia tabeli, a także etykiety kolumn.  Należy zauważyć, że jeśli CurPos = 1, zawiera kod HTML w znacznik CDATA.
      W przeciwnym razie, to będzie pusty.

      Wartość tableStart jest emited każdym razem, gdy ItemStyle jest wywoływana przez ContentQueryMain.xsl.
    -->
    <XSL:Zmienna Nazwa="tableStart">
      <XSL:Jeśli badania="$CurPos = 1">
        <![CDATA[
        <obramowanie tabeli = 1>
          <TR bgcolor = "blue">
            <TD><kolor czcionki = "biały"><b>Nazwa projektu</b></czcionki></TD>
            <TD align = "right"><kolor czcionki = "biały"><b>Pełna Data</b></czcionki></TD>
            <TD align = "right"><kolor czcionki = "biały"><b>Budżet</b></czcionki></TD>
            <TD align = "right"><kolor czcionki = "biały"><b>Rzeczywisty koszt</b></czcionki></TD>
            <TD><kolor czcionki = "biały"><b>Ogólny stan</b></czcionki></TD>
          </TR>
        ]]>
      </XSL:Jeśli>
    </XSL:Zmienna>

    <!--
      Innej zmiennej, tableEnd po prostu Określa zamknięcie tabela tagu.

      Podobnie jak w przypadku tableStart, to jest zawsze emited.  Dlatego, jego wartość jest przypisany warunkowo na podstawie czy już zostały mijamy ostatni wiersz ContentQueryMain.xsl.
    -->
    <XSL:Zmienna Nazwa="tableEnd">
      <XSL:Jeśli badania="$CurPos = $Last">
        <![CDATA[ </Tabela> ]]>
      </XSL:Jeśli>
    </XSL:Zmienna>

    <!--
      Zawsze emitują zawartość tableStart.  Jeśli to nie jest pierwszy wiersz przekazane nam przez ContentQueryMain.xsl, wtedy wiemy, że jego wartość będzie pusty.

      Wyłącz wyjście ucieczki, bo kiedy tableStart to nie puste, obejmuje ona rzeczywisty kod HTML, który chcemy być renderowane przez przeglądarkę.  Jeśli nie powiemy parser XSL do wyłączenia wyjścia ucieczki, będzie ona wytwarzać rzeczy, jak"&lt;Tabela&gt;" zamiast o"<Tabela>".
    -->
    <XSL:wartość z Wybierz="$tableStart" Wyłącz output escaping="tak"/>


    <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:wartość z Wybierz="@Project_x005F_x0020_Name"/>
      </TD>

      <TD wyrównać="prawo">
        <XSL:wartość z Wybierz="@Project_x005F_x0020_End_x005F_x0020_Date"/>
      </TD>

      <TD wyrównać="prawo">
        <XSL:Wywołanie szablon Nazwa="FormatCurrency">
          <XSL:z param Nazwa="wartość" 
Wybierz="@Project_x005F_x0020_Budget"></XSL:z param> </XSL:Wywołanie szablon> </TD> <TD wyrównać="prawo"> <XSL:Wywołanie szablon Nazwa="FormatCurrency"> <XSL:z param Nazwa="wartość" Wybierz="@Project_x005F_x0020_Expenses">
</XSL:z param> </XSL:Wywołanie szablon> </TD> <TD> <XSL:wartość z Wybierz="@Project_x005F_x0020_Status"/> </TD> <!-- Wszystkie z poniższych jest zakomentowana wyjaśnienie rzeczy. Jednakże, ją z powrotem i rzeczy go do <TD> Aby zobaczyć jego efekt. --> <!-- <DIV id = "linkitem" Class = "pozycja"> <XSL:Jeśli test = "długość ciąg($SafeImageUrl) != 0"> <DIV class = "obrazu obszar-po lewej"> <href = "{$SafeLinkUrl}" docelowy = "{$LinkTarget}"> <Klasa img = "obraz fixed-width" src = "{$SafeImageUrl}"
Alt = "{@ImageUrlAltText}"/> </a> </DIV> </XSL:Jeśli> <DIV class = "link pozycja"> <XSL:Wywołanie szablon
Name="OuterTemplate.CallPresenceStatusIconTemplate"/> <href = "{$SafeLinkUrl}"
docelowy = "{$LinkTarget}" tytuł = "{@LinkToolTip}"> <XSL:wartość z wybierz = "$DisXSLyTitle" /> </a> <DIV class = "opis"> <XSL:wartość z select="@Description" /> </DIV> </DIV> </DIV>
--> </TR> <!-- Emitują zamknięcia tabeli tagu. Jeśli nie jesteśmy na ostatni wiersz, to będzie pusty. --> <XSL:wartość z Wybierz="$tableEnd" Wyłącz output escaping="tak"/> </XSL:szablon> <XSL:szablon Nazwa="FormatCurrency"> <XSL:parametr Nazwa="wartość" Wybierz="0" /> <XSL:wartość z Wybierz='numer formatu($wartość, "$DDD,DDD,DDD.DD", "personel")' /> </XSL:szablon>

Standardowe WSS/mech ekranu wprowadzania danych nie obsługują kaskadowe menu rozwijanych (lub inne wewnątrz-od komunikacji)

AKTUALIZACJA (04/2008): Ten wielki blogu wpis pokazuje dobre javascript na podejście do tego problemu: http://webborg.blogspot.com/2008/04/add-functions-and-events-to-sharepoint.html

AKTUALIZACJA II: (04/2008): Ten wpis w blogu wygląda obiecująco, jak również: http://www.cleverworkarounds.com/2008/03/13/free-mosswss-2007-web-part-hide-controls-via-javascript/

Kilka razy w tygodniu, Jeśli nie codziennie, Użytkownicy forum opisać wymogiem, który byłby normalnie spełniony poprzez kaskadowe menu rozwijanych. Na przykład, Mam dwa formanty listy rozwijanej:

  • Wykaz USA. Państwa
  • Wykaz USA. miast.

Jako odpowiedzialnych dostawców interfejsu użytkownika, chcemy działać jak to:

  • Paul wybiera USA. stan z listy rozwijanej.
  • Powoduje to, że miasta drop niedziałający aby filtrować tylko te miasta, które należą do stanu.
  • Paul wybiera miasto z tej listy filtrowanej.

Brak obsługi out-of--box dla tej funkcji. W zasadzie, Brak obsługi OOB dla wszelkiego rodzaju komunikacji bezpośredniej intra formularz. Obejmuje to programowo ukrywanie/Włączanie/wyłączanie pola w odpowiedzi na zmiany pola gdzie indziej na formularzu.

Prawdziwy cel tego artykułu do opisania możliwych rozwiązań i te są opcje, jak wiem, że ich:

  1. Opracować niestandardowe kolumna typ. Niestandardowy kolumna-programista, masz pełną kontrolę nad światem"" niestandardowe kolumny. Można zaimplementować kaskadowe menu rozwijane w ten sposób.
  2. Za pomocą przepływu pracy. W niektórych przypadkach, Aby automatycznie przypisać wartość do pola na podstawie wartości innego pola. W tym przypadku, normalnie będzie próbował za pomocą kolumn obliczeniowych, ale kilka razy, to po prostu nie dostać ten praca sporządzony. SharePoint Designer przepływu pracy jest stosunkowo administrować przyjazny alternatywą dla upadając na kod i programu visual studio. Jeśli tę drogę, należy pamiętać o kwestii poruszonej przez w tym artykule (http://paulgalvin.spaces.live.com/blog/cns!CC1EDB3DAA9B8AA!405.entry).
  3. Programy obsługi zdarzeń: Jak przepływ pracy, jest to rozwiązanie po fakt. Obsługa zdarzeń jest wirtualny plik dziennika .NET (C#, VB.NET) do których SharePoint przechodzi kontrolę. Obiekt, który można rozwijać ma dostęp do danych z listy (i modelu całego obiektu) i można zrobić wszelkie potrzebne obliczenia.
  4. Użyj programu SharePoint Designer do tworzenia formularzy niestandardowych wpis. Nie mam bezpośredniego doświadczenia z tym podejściem, but I hear they are doing good things with NewForm.aspx these days 🙂
  5. Rolka własnych funkcji wejścia danych programu ASP.NET (jako samodzielny strony sieci web lub jako część sieci web) i użyć.

Jeśli ktoś zna inne lub lepsze opcje, Prosimy o komentarz i I update organ ten post.

<koniec />

Technorati znaczniki:

Tworzyć wykresy słupkowe w programie SharePoint

Przegląd:

(AKTUALIZACJA 12/04/07: Dodaje inny ciekawych zasobów na koniec z linkami do innego bloga, który rozwiązuje ten problem przez bardzo ciekawe składnika web part)

Ten wpis w blogu zawiera opis sposobu tworzenia wykresu słupkowego w SharePoint. To działa w środowiskach MOSS i WSS, jak to tylko zależy od składnika web part widok danych.

Ogólne podejście jest następujący:

  1. Tworzenie listy lub biblioteki dokumentów, która zawiera dane, które chcesz wykres.
  2. Miejsce biblioteki dokumentów związanych / niestandardowe listy na stronę i przekonwertować go do składnika web part widok danych (DVWP).
  3. Modyfikowanie DVWP XSL do generowania kodu HTML, który pokazuje jak wykres.

Scenariusza biznesowego / Instalator:

Stworzyłem listę niestandardową z standardowe kolumny tytulu i jedną dodatkową kolumnę, "Status". To modele (bardzo Upraszczając) "zezwolenie na koszt" scenariusz gdzie tytuł reprezentuje projekt i stan wartości z listy:

  • Proponowane
  • W procesie
  • Utknęły w martwym punkcie

Celem jest stworzyć interaktywne poziomy wykres słupkowy, który pokazuje te kody stanu.

Ja mam wypełnione listy i wygląda to tak:

obraz

Tworzenie składnika Web Part Widok danych:

Utworzyć DVWP dodając niestandardowe listy do strony (stronie w moim przypadku) i postępuj zgodnie z instrukcjami tutaj (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Oprócz tworzenia po prostu DVWP, Musimy także ustawić właściwość stronicowania na Pokaż wszystkie wiersze dostępne. Dla mnie, to coś jak to wygląda:

obraz

W tym momencie, Zawsze blisko, SPD i przeglądarki. Następnie ponownie otworzyć stronę za pomocą przeglądarki. Pozwala to uniknąć przypadkowo mucking: układ części na stronie sieci web.

Modyfikowanie XSLT:

Teraz nadszedł czas, aby zmodyfikować Przekształcenie XSLT.

Zawsze używaj programu visual studio do tego. (Zobacz tutaj dla ważna uwaga na temat intellisense, które pomogą Ci dużo).

Utworzyć pusty projekt dodać cztery nowe pliki (zastąpienie słowa "oryginał" i "nowy" w stosownych przypadkach):

  • Original.XSLT
  • New.XSLT
  • Oryginalny Params.xml
  • Nowy Params.xml

W moim przypadku, wygląda to:

obraz

Modyfikowanie składnika web part i skopiować parametry i XSL do oryginału"" wersji programu Visual Studio.

Celem jest przyczyną XSL do przekształcenia wyników, jakie uzyskujemy z kwerendy DVWP na format HTML, który jest renderowany jako wykres.

W tym celu, pomaga to najpierw rozważyć, jak powinny wyglądać HTML przed my gubi się w obłęd, który jest znany jako "XSL". (Żeby było jasne, Poniżej jest po prostu przykład; nie go wpisać lub skopiować i wkleić do programu visual studio. Wystawiam pełna cios punkt wyjścia do tego później w Recenzja). Poniższy przykładowy wykres jest renderowany na kod HTML bezpośrednio po:

Próbka wykres słupkowy

Odpowiedni HTML:

<HTML>
<organ>
<centrum>
<szerokość tabeli = 80%>
<TR><TD><centrum>Wykres słupkowy poziomy</TD></TR>
<TR>
<TD align = "center">
<obramowanie tabeli = "1" szerokość = 80%>
<TR>
<szerokosci TD = 10%>Otwarte</TD>
<TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 50%><TR bgcolor = czerwony><TD>&nbsp;</TD></TR></Tabela></TD>
</TR>
<TR>
<szerokosci TD = 10%>Zamknięte</TD>
<TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 25%><TR bgcolor = czerwony><TD>&nbsp;</TD></TR></Tabela></TD>
</TR>
<TR>
<szerokosci TD = 10%>Utknęły w martwym punkcie</TD>
<TD><tabela cellpadding ="0" cellspacing ="0" border = 0 szerokość = 25%><TR bgcolor = czerwony><TD>&nbsp;</TD></TR></Tabela></TD>
</TR>
</Tabela>
</TD>
</TR>
</Tabela>
</organ>
</HTML>

Kiedyś martwe proste podejście do tworzenia mojego barów ustawiając kolor tła wiersza "czerwony".

To jest tutaj na wynos: W końcu, wszystko co robimy jest stworzenie HTML z wierszy i kolumn.

Szablonów XSLT:

Już skopiowane XSLT, który generuje wykres słupkowy poziomy. Jest to dość dobrze skomentował tak nie wiele tutaj dodać oprócz tych notatek:

  • Zacząłem z domyślny plik XSL, że SharePoint Designer dał mi, kiedy po raz pierwszy stworzyłem DVWP.
  • Udało mi się zmniejszyć to z SPD 657 linie do 166 linie.
  • Nie poeksperymentować z pliku XML parametry (które jest oddzielone od XSL i będziesz wiedzieć, co mam na myśli, gdy idziesz do modyfikowania DVWP, sam; Istnieją dwa pliki, które można modyfikować). Jednakże, w celu uproszczenia, Usunąć prawie wszystkie z nich z XSL. Oznacza to, że jeśli chcesz korzystać z tych parametrów, Wystarczy dodać swoje definicje zmiennych XSL. To będzie łatwe, ponieważ masz oryginalny definicje zmiennych XSL w sieci visual studio projekt.
  • Powinieneś być w stanie skopiować i wkleić to bezpośrednio do sieci visual studio projekt. Następnie, usunąć moje rozmowy i wstawić własne wzywa do "ShowBar".
  • Drąż niedziałający działa poprzez tworzenie <href> Jak to: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Technika ta może być wartości w innych kontekstach. Na początku, Myślałem, że będą musiały zgodne z formatem bardziej złożonych: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ale w moim otoczeniu nie jest konieczne. Listę URL jest przekazywana do nas przez program SharePoint, więc jest to dość łatwe do upowszechnienia.

Tutaj jest:

<XSL:arkusz stylów Wersja="1.0" Wyklucz wynik przedrostki="r z o s ddwrt dt msxsl" 
xmlns:msxsl="Urna:schemas-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999/przekształcenia XSL"
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:Biuro" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="Urna:schemas-microsoft-com:zestaw wierszy" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="Urna:program FrontPage:wewnętrzne"
> <XSL:wyjście Metoda="HTML" tiret="nie" /> <XSL:zapisie dziesiętnym NaN="" /> <XSL:parametr Nazwa="ListUrlDir"></XSL:parametr> <!-- Ja potrzebować ten obsługuje drążenia niedziałający. --> <XSL:szablon mecz="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <XSL:Zmienna Nazwa="dvt_StyleName">Tabela</XSL:Zmienna> <XSL:Zmienna Nazwa="Wiersze" Wybierz="/dsQueryResponse/wierszy/wiersz" /> <XSL:Zmienna Nazwa="dvt_RowCount" Wybierz="Hrabia($Wiersze)" /> <XSL:Zmienna Nazwa="IsEmpty" Wybierz="$dvt_RowCount = 0" /> <XSL:Zmienna Nazwa="dvt_IsEmpty" Wybierz="$dvt_RowCount = 0" /> <XSL:Wybierz> <XSL:Kiedy badania="$dvt_IsEmpty"> Brak danych do wykresu!<BR/> </XSL:Kiedy> <XSL:w przeciwnym razie> <!-- Ciekawe rzeczy zaczyna się tutaj. Musimy określić parę zmiennych dla każdego wiersza na wykresie: Całkowita liczba elementów i procent całkowitej. --> <XSL:Zmienna Nazwa="totalProposed" Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status) = "Proponowane"])" /> <XSL:Zmienna Nazwa="percentProposed" Wybierz="$totalProposed div $dvt_RowCount" /> <XSL:Zmienna Nazwa="totalInProcess" Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status) = "W procesie"])" /> <XSL:Zmienna Nazwa="percentInProcess" Wybierz="$totalInProcess div $dvt_RowCount" /> <XSL:Zmienna Nazwa="totalStalled" Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status) = "Utknęły w martwym punkcie"])" /> <XSL:Zmienna Nazwa="percentStalled" Wybierz="$totalStalled div $dvt_RowCount" /> <!-- Definiujemy naszej tabeli HTML tutaj. Jestem pożyczek od niektórych standardowych SharePoint stylów tutaj aby to spójne. Myślę, że to będzie honorować zmian do pliku globalnego css a także tematu zastępuje. --> <Tabela Szerokość="100%" cellspacing="0" cellPadding="2" styl="granica prawo: 1 stałe #C0C0C0; dolnej granicy: 1 stałe #C0C0C0; border-left-style: stałe; szerokość obramowania lewej: 1; border-top-style: stałe; border-top-width: 1;"> <TR> <TD wyrównać="centrum"> <Tabela granica="1" Szerokość="100%"> <!-- Dla każdego stanu, który chcemy wykres, nazywamy "ShowBar" szablon. Przekazujemy je: 1. Etykietę wiersza. To jest przekształcany w hiperłącze. 2. Procent (Zmienna z góry). 3. Pole rzeczywista nazwa kod z listy podstawowej. To nie trzeba dopasować Wyświetl etykietę. 4. Wartość pola dopasowane do #3. 5. Całkowitej pozycji ten kod stanu (nie sumy wszystkich kodów stanu). Emituje <TR></TR> i linii poziomej wykresu słupkowego. Nazywamy ten szablon dla każdego kodu stanu, który chcemy wyświetlić. --> <XSL:Wywołanie szablon Nazwa="ShowBar"> <XSL:z param Nazwa="BarDisplayLabel" Wybierz=""Proponowane""/> <XSL:z param Nazwa="BarPercent" Wybierz="$percentProposed"/> <XSL:z param Nazwa="QueryFilterFieldName" Wybierz=""Status""/> <XSL:z param Nazwa="QueryFilterFieldValue" Wybierz=""Proponowane""/> <XSL:z param Nazwa="TotalItems" Wybierz="$totalProposed"></XSL:z param> </XSL:Wywołanie szablon> <XSL:Wywołanie szablon Nazwa="ShowBar"> <XSL:z param Nazwa="BarDisplayLabel" Wybierz=""Zatrzymany""/> <XSL:z param Nazwa="BarPercent" Wybierz="$percentStalled"/> <XSL:z param Nazwa="QueryFilterFieldName" Wybierz=""Status""/> <XSL:z param Nazwa="QueryFilterFieldValue" Wybierz=""Zatrzymany""/> <XSL:z param Nazwa="TotalItems" Wybierz="$totalStalled"></XSL:z param> </XSL:Wywołanie szablon> <XSL:Wywołanie szablon Nazwa="ShowBar"> <XSL:z param Nazwa="BarDisplayLabel" Wybierz=""W procesie""/> <XSL:z param Nazwa="BarPercent" Wybierz="$percentInProcess"/> <XSL:z param Nazwa="QueryFilterFieldName" Wybierz=""Status""/> <XSL:z param Nazwa="QueryFilterFieldValue" Wybierz=""W procesie""/> <XSL:z param Nazwa="TotalItems" Wybierz="$totalInProcess"></XSL:z param> </XSL:Wywołanie szablon> </Tabela> </TD> </TR> </Tabela> </XSL:w przeciwnym razie> </XSL:Wybierz> </XSL:szablon> <!-- Ten szablon działa wyświetlania poszczególnych linii na wykresie słupkowym. Prawdopodobnie będziesz robić większość szczypanie tutaj. --> <XSL:szablon Nazwa="ShowBar"> <XSL:parametr Nazwa="BarDisplayLabel" /> <!-- etykieta do Pokaż --> <XSL:parametr Nazwa="BarPercent"/> <!-- Procent całkowitego. --> <XSL:parametr Nazwa="QueryFilterFieldName"/> <!-- Użyte do wykonania skoku do kwerendy & Filtr --> <XSL:parametr Nazwa="QueryFilterFieldValue"/> <!-- Użyte do wykonania skoku do kwerendy & Filtr --> <XSL:parametr Nazwa="TotalItems" /> <!-- Całkowita liczba od ten barlabel --> <TR> <!-- Bar etykieta sam. --> <TD Klasa="MS-formbody" Szerokość="30%"> <!-- To kolejny zestaw instrukcji buduje ciąg kwerendy, który pozwala nam wykonać drążenie do filtrowanego widoku danych źródłowych. Możemy użyć kilku rzeczy tutaj: 1. Możemy przekazać FilterField1 i FilterValue1 do listy, aby odfiltrować kolumna. 2. SharePoint jest przekazanie parametru klucz do nas, ListUrlDir, który wskazuje na listy podstawowej, przeciwko której ten DVWP jest "systemem". Nie jest zabawa XSL? --> <XSL:tekst Wyłącz output escaping="tak"> <![CDATA[<href ="]]></XSL:tekst> <XSL:wartość z Wybierz="$ListUrlDir"/> <XSL:tekst Wyłącz output escaping="tak"><![CDATA[?FilterField1 =]]></XSL:tekst> <XSL:wartość z Wybierz="$QueryFilterFieldName"/> <XSL:tekst Wyłącz output escaping="tak"><![CDATA[&FilterValue1 =]]></XSL:tekst> <XSL:wartość z Wybierz="$QueryFilterFieldValue"/> <XSL:tekst Wyłącz output escaping="tak"><![CDATA[">]]></XSL:tekst> <XSL:wartość z Wybierz="$BarDisplayLabel"/> <XSL:tekst Wyłącz output escaping="tak"><![CDATA[</a>]]></XSL:tekst> <!-- Następny bit pokazuje kilka numerów w formacie: "(ogółem / % w sumie)" --> (<XSL:wartość z Wybierz="$TotalItems"/> / <!-- Tworzy ładne etykiety procent dla nas. Podziękowania, Firmy Microsoft! --> <XSL:Wywołanie szablon Nazwa="PercentFormat"> <XSL:z param Nazwa="procent" Wybierz="$BarPercent"/> </XSL:Wywołanie szablon>) </TD> <!-- Wreszcie, emitują <TD> znacznik na pasku sam.--> <TD> <Tabela cellPadding="0" cellspacing="0" granica="0" Szerokość="{okrągłe($BarPercent * 100)+1}%"> <TR kolor tła="czerwony"> <XSL:tekst Wyłącz output escaping="tak"><![CDATA[&nbsp;]]></XSL:tekst> </TR> </Tabela> </TD> </TR> </XSL:szablon> <!-- To jest pobierana bezpośrednio z niektórych XSL znalazłem szablonu MS. --> <XSL:szablon Nazwa="PercentFormat"> <XSL:parametr Nazwa="procent"/> <XSL:Wybierz> <XSL:Kiedy badania="numer formatu($procent, '#,##0%;-#,##0%')= "NaN"">0%</XSL:Kiedy> <XSL:w przeciwnym razie> <XSL:wartość z Wybierz="numer formatu($procent, '#,##0%;-#,##0%')" /> </XSL:w przeciwnym razie> </XSL:Wybierz> </XSL:szablon> </XSL:arkusz stylów>

Wyniki:

XSL z góry generuje ten wykres:

obraz

Drąż do danych źródłowych klikając na kod stanu:

obraz

Zawarcia myśli:

Może to być uogólnione?

Kocham tę koncepcję Jave, ale nienawidzę fakt, że musiał iść i zrobić tyle kodowanie strony. Dałam trochę myśli czy to mogą być uogólnione i jestem optymistą, ale ja też jestem trochę straszne, że może być gdzieś na drodze, że nie oferują żadnych obejść mur z cegły. Jeśli ktoś ma jakieś dobre pomysły na ten temat, Proszę zanotować w komentarzach lub e-mail ja.

Wykresy pionowe:

Jest to wykres słupkowy poziomy. To z pewnością można utworzyć wykres pionowe. Musimy tylko zmienić kod HTML. Chciałbym zacząć się tak samo: Utworzenie obrazu HTML wykres słupkowy pionowe i następnie dowiedzieć się, jak uzyskać za pośrednictwem XSL. Jeśli ktoś jest zainteresowany w tym, I może być pewien wobec próbować ono na zewnątrz i wypracować załamań. Jeśli ktoś to już zrobił, proszę dać mi znać, a ja chętnie odwołują się do swojego bloga 🙂

Myślę, że to wyzwanie z pionowej wykresu, że etykiety wykresu są trudniejsze do zarządzania, ale na pewno nie da.

Pole Nazwa haczyka:

Istnieją co najmniej dwie rzeczy zwrócić uwagę z nazwy pola.

Pierwszy, Nazwa pola z miejsca ma być uciekł w XSL. Prawdopodobnie będzie to problem tutaj:

        <XSL:Zmienna Nazwa="totalProposed" 
Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status) = "Proponowane"])" />

Jeśli stan"" kolumna jest rzeczywiście o nazwie "kod stanu" następnie trzeba odwoływać się do niej jako "Status_x0020_Code":

   <XSL:Zmienna Nazwa="totalProposed" 
Wybierz="Hrabia(/dsQueryResponse/wierszy/wiersz[miejsca na normalizacji(@Status_x0020_Code) = "Proponowane"])" />

Drugi, a ja jestem nieco rozmyte na to, ale też trzeba mieć się na baczności dla zmiany nazwy pola. Jeśli nazwa pola "kod stanu" a potem na, Zmień jego nazwę na "AFE Status", Nazwa wewnętrzna"" nie zmienia. Nazwa wewnętrzna nadal będzie "kod stanu" i musi odwoływać się jako "Status_x0020_Code". "Inne środki pieniężne" linki mogą pomóc zdiagnozować i rozwiązać taki problem.

O tym kolorze:

Wybrałem "czerwony" bo to miłe dla mnie w tej chwili. Nie byłoby wielkiego aby pokazać różne kolory tak, aby dostarczyć więcej niż tylko wizualny opis kilku, ale również zapewnić użyteczne KPI. Na przykład, Jeśli procent "utknęły w martwym punkcie" AFE w jest > 10% następnie Pokaż czerwony, w przeciwnym razie pokazać go w kolorze czarnym. Wykorzystanie <XSL:Wybierz> Aby to osiągnąć.

Inne zasoby:

Przekształcenie szczęśliwy!

<koniec />

Subskrybowanie mój blog!

Obecne dane OM za pośrednictwem listy niestandardowej (lub, Jeszcze innym OM Displayor danych [Podobnie jak YACC, ale inny])

Dzisiaj, Spędziłem kilka godzin tropienie przyczynę za wiadomość "wprowadzona nazwa kolumna jest już używana lub zastrzeżone. Wybierz inną nazwę."

W kolumna może być utworzony, usunięty i utworzony ponownie w innym środowisku, tak, wiedziałem, że nie było nazwą zastrzeżoną. Jednakże, Po prostu nie mogłem znaleźć nigdzie kolumna poprzez standardowy interfejs użytkownika programu SharePoint w dowolnym miejscu w zbiorze witryn.

Wysłana do Forum MSDN tutaj i niezłomnego Andrew Woodward wskazał mi w kierunku obiektu modelu dane.

I udał do witrynie CodePlex Aby znaleźć kilka narzędzi, które pomogą mi peer w danych źródłowych OM i pomóc mi zlokalizować problem.

Próbowałem kilka narzędzi i były one bardzo fajne i ciekawe, ale w końcu, Interfejs użytkownika nie było wystarczająco dobre dla moich celów. Ja nie krytykuję ich w jakikolwiek sposób, ale wyraźnie narzędzie twórcy nie mają mój problem w umyśle, kiedy stworzył ich UI :). Większość ludzi wydaje się być inwestowanie sporo czasu i wysiłku w tworzenie stacji roboczej / klient aplikacji, które zapewniają widoki na drzewo, Kliknij prawym przyciskiem myszy menu kontekstowe i tak dalej. Są ładne i wszystkie, ale to dużo pracy, aby utworzyć doświadczenie użytkownika top z-line, który również jest bardzo elastyczny.

I naprawdę potrzebne odpowiedzi na ten problem. Dotarło do mnie, czy mogę dostać wszystkie kolumny witryny w zbiorze witryn do listy niestandardowej, Można filtrować, sortowanie i tworzyć widoki, które pomogą mi znaleźć ten rzekomo istniejącej kolumna (co się stało, AT4). Poszedł do przodu i zrobił to i godzinę lub dwie później, miałem mój umiejscowienie kolumny załadowane niestandardowe listy grupowanie, sortowanie i tak dalej. Znalazłem moją odpowiedź pięć minut później.

Jeśli pomyślnie przejąć świat, Myślę, że będzie dekret, że wszystkich dostawców narzędzi programu SharePoint należy poważnie rozważyć napawania ich obiekt modelu danych w niestandardowej listy. W ten sposób, Mam moc szukać wszelki sposób chcę (ograniczone, Oczywiście, przez funkcje standardowego programu sharepoint).