Снежань | 2007 | Поля Галвина SharePoint Space

Агляд:

(АБНАЎЛЕННЕ 12/04/07: Дададзены яшчэ адзін цікавы рэсурс у канцы па спасылцы на іншы блог, які вырашае гэтую праблему з дапамогай вельмі цікавы вэб-часткі)

This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.

Агульны падыход заключаецца ў наступным:

Стварэнне спісу або бібліятэкі дакументаў, якая змяшчае дадзеныя, якія вы хочаце графіка.
Навядзіце адпаведнай бібліятэцы дакументаў / карыстацкі спіс на старонцы і пераўтварыць яго ў вэб-частцы прадстаўлення даных (DVWP).
Змяніць XSL DVWP для генерацыі HTML, які паказвае ў выглядзе графіка.

Бізнес-сцэнар / Усталёўка:

Я стварыў карыстацкі спіс са стандартным загалоўкам слупка і адзін дадатковы слупок, "Status". This models (Вельмі спрошчана) an "Authorization For Expense" сцэнар, пры якім назва ўяўляе праект і статус значэння з спісу:

Прапанаваны
У працэсе
Запаволенне

Мэтай якой з'яўляецца стварэнне інтэрактыўнага гарызантальнай гістаграмы, якая паказвае Гэтыя коды стану.

Я населеныя спісе і гэта выглядае так:

Стварэнне дадзеных вэб-частка:

Стварыць DVWP шляхам дадання карыстацкіх спісаў на старонку (сайта ў маім выпадку) і вынікайце інструкцыям тут (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

У дадатак да проста стварэнне DVWP, we also need to set the paging property to show all available rows. Для мяне, гэта выглядае прыкладна так:

У гэты момант, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.

Змяніць XSLT:

Прыйшоў час змяніць XSLT.

I always use visual studio for this. (Паглядзець тут Хочацца зрабіць важная заўвага аб IntelliSense, якія дапамогуць вам многае).

Я ствараю пусты праект дадаць чатыры новых файлаў (replacing the words "Original" and "New" па меры неабходнасці):

Original.xslt
New.xslt
Арыгінальныя Params.xml
Новы Params.xml

У маім выпадку, гэта выглядае так:

Modify the web part and copy the params and XSL to the "Original" У версіі Visual Studio.

Мэта тут складаецца, каб выклікаць XSL для пераўтварэння вынікаў мы вернемся з DVWP запыту ў HTML, які адлюстроўваецца як граф.

З гэтай мэтай, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Каб было ясна, Наступныя проста прыклад; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:

Адпаведны HTML:

<HTML>
<цела>
<цэнтр>
<Шырыня стала = 80%>
<тр><TD><цэнтр>Гарызантальная гістаграма</TD></тр>
<тр>
<td align="center">
<table border="1" шырыня = 80%>
<тр>
<TD шырыня = 10%>Адкрыць</TD>
<TD><Табліца CellPadding ="0" CELLSPACING ="0" мяжа = 0 шырыня = 50%><BGCOLOR TR = чырвоны><TD>&NBSP;</TD></тр></стол></TD>
</тр>
<тр>
<TD шырыня = 10%>Закрыта</TD>
<TD><Табліца CellPadding ="0" CELLSPACING ="0" мяжа = 0 шырыня = 25%><BGCOLOR TR = чырвоны><TD>&NBSP;</TD></тр></стол></TD>
</тр>
<тр>
<TD шырыня = 10%>Запаволенне</TD>
<TD><Табліца CellPadding ="0" CELLSPACING ="0" мяжа = 0 шырыня = 25%><BGCOLOR TR = чырвоны><TD>&NBSP;</TD></тр></стол></TD>
</тр>
</стол>
</TD>
</тр>
</стол>
</цела>
</HTML>

I used a dead simple approach to creating my bars by setting the background color of a row to "red".

Вынас вось гэтая: У рэшце рэшт, усё, што мы робім, гэта стварэнне HTML са радкамі і слупкамі.

Шаблон XSLT:

I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:

Я пачаў з XSL па змаўчанні, што SharePoint Designer даў мне, калі я ўпершыню стварыў DVWP.
Я быў у стане рассячы гэты ўніз ад СДПГ 657 ліній 166 lines.
Я не важдацца з XML-файла параметраў (якая з'яўляецца асобнай ад XSL, і вы будзеце ведаць, што я маю на ўвазе, калі вы ідзяце, каб змяніць сябе DVWP; Ёсць два файла можна змяніць). Аднак, для таго, каб спрасціць, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
You ought to be able to copy and paste this directly into your visual studio project. Затым, remove my calls and insert your own calls to "ShowBar".
Дэталізацыі працуе шляхам стварэння <HREF> вось так: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. At first, Я думаў, што трэба, каб адпавядаць больш складаны фармат: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.

Вось яна:

<XSL:стыляў версія="1.0" выключаюць-вынік-прэфіксы="RS Z O S DDWRT DT msxsl" 
 XMLNS:msxsl="урна:схемы-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:аспід="HTTP://schemas.microsoft.com/ASPNET/20" XMLNS:DDWRT="HTTP://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 XMLNS:пра="урна:схемы-Microsoft-COM:офіс" XMLNS:з="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 XMLNS:DT="UUID:C2F41010-65B3-11D1-A29F-00AA00C14882" XMLNS:RS="урна:схемы-Microsoft-COM:Набор радкоў" XMLNS:Z="#RowsetSchema" 
 XMLNS:ddwrt2="урна:Галоўная:ўнутраны">
  <XSL:выхадны метад="HTML" водступ="няма" />
  <XSL:дзесятковы фармат NaN="" />
  <XSL:параметраў імя="ListUrlDir"></XSL:параметраў> <!-- Мне гэта трэба для падтрымкі дэталізацыі.  -->

  <XSL:шаблон супадаць="/" XMLNS:SharePoint="Microsoft.SharePoint.WebControls" 
 XMLNS:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer XMLNS:аспід="HTTP://schemas.microsoft.com/ASPNET/20">
    <XSL:пераменная імя="dvt_StyleName">Стол</XSL:пераменная>
    <XSL:пераменная імя="Радкі" выбіраць="/dsQueryResponse / Радкі / радкоў" />
    <XSL:пераменная імя="dvt_RowCount" выбіраць="лічыць($Радкі)" />
    <XSL:пераменная імя="IsEmpty" выбіраць="$dvt_RowCount = 0" />
    <XSL:пераменная імя="dvt_IsEmpty" выбіраць="$dvt_RowCount = 0" />

    <XSL:выбіраць>
      <XSL:калі тэст="$dvt_IsEmpty">
        Там няма дадзеных для пабудовы графікаў!<бр/>
      </XSL:калі>
      <XSL:у адваротным выпадку>

        <!--
          Цікавае пачынаецца тут.

          Нам неабходна вызначыць пару зменных для кожнага радка ў графе: агульная колькасць
          .
        -->
        <XSL:пераменная імя="totalProposed" выбіраць="лічыць(/dsQueryResponse / Радкі / радкоў[нармалізаваць прастору(@ Статус) = 'Прапанаваная'])" />
        <XSL:пераменная імя="percentProposed" выбіраць="$totalProposed DIV $ dvt_RowCount" />

        <XSL:пераменная імя="totalInProcess" выбіраць="лічыць(/dsQueryResponse / Радкі / радкоў[нармалізаваць прастору(@ Статус) = 'У працэсе'])" />
        <XSL:пераменная імя="percentInProcess" выбіраць="$totalInProcess DIV $ dvt_RowCount" />

        <XSL:пераменная імя="totalStalled" выбіраць="лічыць(/dsQueryResponse / Радкі / радкоў[нармалізаваць прастору(@ Статус) = 'Запаволенне'])" />
        <XSL:пераменная імя="percentStalled" выбіраць="$totalStalled DIV $ dvt_RowCount" />

        <!--
          Мы вызначаем HTML стол тут.  Я запазычанні з некаторых стандартных
          .  Я думаю, што будзе выконваць
          .
        -->
        <стол шырыня="100%" CELLSPACING="0" CellPadding="2"
стыль="мяжы правы: 1 цвёрдых # C0C0C0; ніжняй мяжы: 1 цвёрдых # C0C0C0; мяжы левага стылі: цвёрды; мяжы левага шырыні: 1; мяжы верхняга стылю: цвёрды; мяжы верхняга шырыня: 1;">

           <тр>
            <TD выраўнаваць="цэнтр">
              <стол мяжа="1" шырыня="100%">

                <!--
                  Для кожнага статусу, які мы хочам графіка, we call the "ShowBar" шаблон.
                  Мы перадаем гэта:
                  1. Пазнаку для радкі.  Гэта ператвараецца ў гіперспасылку.
                  2. Адсоткаў (Невялікі зверху).
                  3. Фактычнае імя поля кода з базавага спісу.  Гэта
                     .
                  4. Значэнне поля супастаўныя па #3.
                  5. Усяго сцёк гэтага кода стану (ня агульны вынік усіх
                     ).

                  Ён выпраменьвае <тр></тр> і гарызантальнай лініі гістаграмы.

                  Мы называем гэта шаблон для кожнага кода стану мы хочам, каб паглядзець.
                -->
                <XSL:выклік-шаблону імя="Showbar">
                  <XSL:з параметрам- імя="BarDisplayLabel" выбіраць=""Прапанаваны""/>
                  <XSL:з параметрам- імя="BarPercent" выбіраць="$percentProposed"/>
                  <XSL:з параметрам- імя="QueryFilterFieldName" выбіраць=""Статус""/>
                  <XSL:з параметрам- імя="QueryFilterFieldValue" выбіраць=""Прапанаваны""/>
                  <XSL:з параметрам- імя="TotalItems" выбіраць="$totalProposed"></XSL:з параметрам->
                </XSL:выклік-шаблону>

                <XSL:выклік-шаблону імя="Showbar">
                  <XSL:з параметрам- імя="BarDisplayLabel" выбіраць=""Запаволенне""/>
                  <XSL:з параметрам- імя="BarPercent" выбіраць="$percentStalled"/>
                  <XSL:з параметрам- імя="QueryFilterFieldName" выбіраць=""Статус""/>
                  <XSL:з параметрам- імя="QueryFilterFieldValue" выбіраць=""Запаволенне""/>
                  <XSL:з параметрам- імя="TotalItems" выбіраць="$totalStalled"></XSL:з параметрам->
                </XSL:выклік-шаблону>

                <XSL:выклік-шаблону імя="Showbar">
                  <XSL:з параметрам- імя="BarDisplayLabel" выбіраць="«У працэсе»"/>
                  <XSL:з параметрам- імя="BarPercent" выбіраць="$percentInProcess"/>
                  <XSL:з параметрам- імя="QueryFilterFieldName" выбіраць=""Статус""/>
                  <XSL:з параметрам- імя="QueryFilterFieldValue" выбіраць="«У працэсе»"/>
                  <XSL:з параметрам- імя="TotalItems" выбіраць="$totalInProcess"></XSL:з параметрам->
                </XSL:выклік-шаблону>

              </стол>
            </TD>
          </тр>
        </стол>
      </XSL:у адваротным выпадку>
    </XSL:выбіраць>
  </XSL:шаблон>

  <!--
    Гэты шаблон робіць працу адлюстравання асобных ліній у гістаграме.

    Вы, верагодна, рабіць большую частку вашай налады тут.
  -->
  <XSL:шаблон імя="Showbar">
    <XSL:параметраў імя="BarDisplayLabel" /> <!-- этыкетцы, каб паказаць -->
    <XSL:параметраў імя="BarPercent"/> <!-- Працэнт ад агульнай. -->
    <XSL:параметраў імя="QueryFilterFieldName"/> <!-- Выкарыстоўваецца для пераходу да запыту & фільтрацыю -->
    <XSL:параметраў імя="QueryFilterFieldValue"/> <!-- Выкарыстоўваецца для пераходу да запыту & фільтрацыю -->
    <XSL:параметраў імя="TotalItems" /> <!-- Агульная колькасць гэтага barlabel -->

    <тр>

      <!-- У бары сам лэйбл. -->
      <TD клас="MS-formbody" шырыня="30%">

        <!--
          Гэта наступны набор аператараў будуе радок запыту, якая дазваляе
          .
          Мы выкарыстоўваем некалькі рэчаў тут:
          1. Мы можам перадаць FilterField1 і FilterValue1 ў спіс для фільтрацыі на калонцы.
          2. SharePoint праходзіць ключавым параметрам для нас, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Хіба гэта не весела XSL?
        -->
        <XSL:тэкст адключыць-выхад-ўцёкі="ды">
        <![CDATA[<HREF ="]]></XSL:тэкст>
        <XSL:коштам ад выбіраць="$ListUrlDir"/>
        <XSL:тэкст адключыць-выхад-ўцёкі="ды"><![CDATA[?FilterField1 =]]></XSL:тэкст>
        <XSL:коштам ад выбіраць="$QueryFilterFieldName"/>
        <XSL:тэкст адключыць-выхад-ўцёкі="ды"><![CDATA[&FilterValue1 =]]></XSL:тэкст>
        <XSL:коштам ад выбіраць="$QueryFilterFieldValue"/>
        <XSL:тэкст адключыць-выхад-ўцёкі="ды"><![CDATA[">]]></XSL:тэкст>
        <XSL:коштам ад выбіраць="$BarDisplayLabel"/>
        <XSL:тэкст адключыць-выхад-ўцёкі="ды"><![CDATA[</a>]]></XSL:тэкст>

        <!-- Наступны біт паказвае некаторыя нумары ў фармаце: "(агульны / % ад агульнай колькасці)" -->
        (<XSL:коштам ад выбіраць="$TotalItems"/> /

        <!-- Гэта стварае прыгожую этыкетку працэнтаў для нас.  Дзякуй, Microsoft! -->
        <XSL:выклік-шаблону імя="PercentFormat">
          <XSL:з параметрам- імя="працэнт" выбіраць="$BarPercent"/>
        </XSL:выклік-шаблону>)

      </TD>

      <!-- У рэшце рэшт, выпускаць <TD> тэг для самога бара.-->
      <TD>
        <стол CellPadding="0" CELLSPACING="0" мяжа="0"
шырыня="{вакол($BarPercent * 100)+1}%">
          <тр BGCOLOR="чырвоны">
            <XSL:тэкст адключыць-выхад-ўцёкі="ды"><![CDATA[&NBSP;]]></XSL:тэкст>
          </тр>
        </стол>
      </TD>
    </тр>

  </XSL:шаблон>

  <!-- Гэта ўзята непасрэдна з некаторых XSL я знайшоў у шаблоне MS. -->
  <XSL:шаблон імя="PercentFormat">
    <XSL:параметраў імя="працэнт"/>
    <XSL:выбіраць>
      <XSL:калі тэст="Format-лік($працэнт, '#, # # 0%;-#,##0%")= 'NaN'">0%</XSL:калі>
      <XSL:у адваротным выпадку>
        <XSL:коштам ад выбіраць="Format-лік($працэнт, '#, # # 0%;-#,##0%")" />
      </XSL:у адваротным выпадку>
    </XSL:выбіраць>
  </XSL:шаблон>

</XSL:стыляў>

Вынікі:

XSL зверху генеруе гэты графік:

Перайдзіце да базавых дадзеных, націснуўшы на код стану:

Заключэнне Думак:

Ці можа гэта быць абагульнены?

Я люблю гэтую канцэпцыю графічнага, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, калі ласка, запішыце ў каментарах або напішыце мне.

Вертыкальныя Графікі:

This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, калі ласка, дайце мне ведаць, і я з задавальненнем спасылку на свой блог 🙂

Я думаю, што праблема з вертыкальнай граф тым, што цэтлікі для графа цяжэй кіраваць, але, вядома, не выключана,.

Імя поля Гоча:

Ёсць, па меншай меры, дзве рэчы, якія трэба паглядзець з вашымі імёнамі палёў.

Першы, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:пераменная імя="totalProposed" 
 выбіраць="лічыць(/dsQueryResponse / Радкі / радкоў[нармалізаваць прастору(@ Статус) = 'Прапанаваная'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <XSL:пераменная імя="totalProposed" 
 выбіраць="лічыць(/dsQueryResponse / Радкі / радкоў[нармалізаваць прастору(@ Status_x0020_Code) = 'Прапанаваная'])" />
Другі, і я трохі невыразнай на гэтым, but you also need to be on the alert for field name changes. If you name your field "Status Code" а потым на, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" спасылкі могуць дапамагчы дыягнаставаць і выправіць гэтую праблему.

Пра тое, што колер:

I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. Напрыклад, if the percentage of "stalled" AFE з'яўляецца > 10% затым паказаць яго чырвоным, otherwise show it in black. Выкарыстоўваць <XSL:выбіраць> для дасягнення гэтай мэты.

Іншыя рэсурсы:

Вызначыць ўнутранае імя (і іншых добрых інфармацыя) для дадзеных у спіс: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Паказаць усе дадзеныя, якія прадстаўляюцца SharePoint (сырой XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Атрымаць выраз XPATH пэўнага слупка: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Іншы падыход з выкарыстаннем OWA(?). I have not dug into it, але выглядае шматспадзеўна, асабліва для кругавых дыяграм: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Шчаслівыя пераўтварэнні!

<канец />

Падпісацца на мой блог!

Technorati Тэгі: SharePoint, DVWP, Дадзеныя вэб-частка, XSL, XSLT, WSS, MOSS

Поля Галвина SharePoint Space

Штомесячны архіў: Снежань 2007

Стварыць гістаграмы ў SharePoint