Децембар | 2007 | Paul Galvin's 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.

Општи приступ је следећи:

Направите листу или библиотеку докумената која садржи податке које желите да графикон.
Поставите повезане библиотеку докумената / прилагођене листе на страници и претворити га у део података видели Веб (ДВВП).
Измените ДВВП КССЛ да генерише ХТМЛ који приказује као графикон.

Пословни сценарио / Намештаљка:

Ја сам створио прилагођене листе са стандардним наслова колоне и још једну колону, "Status". This models (Веома упрошћено) an "Authorization For Expense" сценарио где наслов представља пројекат и статус вредности са листе:

Предложена
У процесу
Застоју

Циљ је да се произведе интерактивну хоризонтални бар графикон који показује статус ове кодове.

Су насељена сам листу и то изгледа овако:

Креирање података Парт видели Веб:

Креирајте ДВВП додавањем прилагођене листе на страници (Сајт страна у мом случају) и пратите упутства овде (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Поред једноставно креирање ДВВП, 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.

Измените КССЛТ:

Сада је време да се мења КССЛТ.

I always use visual studio for this. (Видети овде за Важна напомена о ИнтеллиСенсе који ће вам помоћи да много).

Ја створи празан пројекат додају четири нова датотека (replacing the words "Original" and "New" по потреби):

Оригинал.кслт
Нев.кслт
Оригинални Парамс.кмл
Нови Парамс.кмл

У мом случају, то изгледа овако:

Modify the web part and copy the params and XSL to the "Original" Верзија за Висуал Студио.

Циљ је да се изазову КССЛ трансформације резултата се вратимо из ДВВП упита у ХТМЛ који чини као графикону.

У том циљу, 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:

Одговарајући ХТМЛ:

<ХТМЛ>
<тело>
<центар>
<Ширина стола = 80%>
<тр><тд><центар>Хоризонтална бар грапх</тд></тр>
<тр>
<td align="center">
<table border="1" видтх = 80%>
<тр>
<тд видтх = 10%>Отворено</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 50%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
<тр>
<тд видтх = 10%>Затворено</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 25%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
<тр>
<тд видтх = 10%>Застоју</тд>
<тд><Табела целлпаддинг ="0" бордер ="0" бордер = 0 видтх = 25%><тр бгцолор = црвена><тд>&нбсп;</тд></тр></табела></тд>
</тр>
</табела>
</тд>
</тр>
</табела>
</тело>
</ХТМЛ>

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

Понијети овде је ово: На крају, сви ми радимо је стварање ХТМЛ са редовима и колонама.

Шаблон КССЛТ:

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:

Почео сам са подразумеваним КССЛ СхареПоинт Десигнер који ми је дао када сам креирао ДВВП.
Био сам у стању да смањи ово доле из СПД 657 линије до 166 lines.
Нисам се зезају са параметрима КСМЛ датотеке (која је одвојена од КССЛ а ви ћете знати шта мислим када одете да измените ДВВП себе; постоје две датотеке можете да измените). Међутим, да би га поједноставио, 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".
Дрилл довн ради стварањем <хреф> овако: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Прво, Мислио сам да ћу морати да се прилагоди комплекснијем формату: 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.

Овде је:

<клс:стиловима верзија="1.0" искључују-резултат-префикси="рс З О с ддврт ДТ мсксл" 
 КСМЛнс:мсксл="урна:шеме-мицрософт-цом:КССЛТ" КСМЛнс:клс="хттп://ввв.в3.орг/1999/КССЛ/Трансформ" 
 КСМЛнс:СхареПоинт="Мицрософт.СхареПоинт.ВебЦонтролс" КСМЛнс:__десигнер="хттп://сцхемас.мицрософт.цом/ВебПартс/в2/ДатаВиев/десигнер" 
 КСМЛнс:аспида="хттп://сцхемас.мицрософт.цом/АСПНЕТ/20" КСМЛнс:ддврт="хттп://сцхемас.мицрософт.цом/ВебПартс/в2/ДатаВиев/рунтиме" 
 КСМЛнс:О="урна:шеме-мицрософт-цом:канцеларија" КСМЛнс:с="УУИД:БДЦ6Е3Ф0-6ДА3-11Д1-А2А3-00АА00Ц14882" 
 КСМЛнс:ДТ="УУИД:Ц2Ф41010-65Б3-11Д1-А29Ф-00АА00Ц14882" КСМЛнс:РС="урна:шеме-мицрософт-цом:РовСет" КСМЛнс:З="#РовсетСцхема" 
 КСМЛнс:ддврт2="урна:фронтпаге:унутрашњи">
  <клс:излаз метод="ХТМЛ" увући="не" />
  <клс:Децимално формату НаН="" />
  <клс:парам име="ЛистУрлДир"></клс:парам> <!-- Морам ово да подржи дрилл-доле.  -->

  <клс:шаблон меч="/" КСМЛнс:СхареПоинт="Мицрософт.СхареПоинт.ВебЦонтролс" 
 КСМЛнс:__десигнер=http://schemas.microsoft.com/WebParts/v2/DataView/designer КСМЛнс:аспида="хттп://сцхемас.мицрософт.цом/АСПНЕТ/20">
    <клс:варијабла име="двт_СтилеНаме">Табела</клс:варијабла>
    <клс:варијабла име="Редови" изабрати="/дсКуериРеспонсе / редове / Ров" />
    <клс:варијабла име="двт_РовЦоунт" изабрати="рачунати($Редови)" />
    <клс:варијабла име="ИсЕмпти" изабрати="$двт_РовЦоунт = 0" />
    <клс:варијабла име="двт_ИсЕмпти" изабрати="$двт_РовЦоунт = 0" />

    <клс:изабрати>
      <клс:када тест="$двт_ИсЕмпти">
        Нема података на графикону!<БР/>
      </клс:када>
      <клс:иначе>

        <!--
          Интересантне ствари почиње овде.

          Морамо да дефинишемо пар променљивих за сваки ред у графикону: укупан број
          .
        -->
        <клс:варијабла име="тоталПропосед" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = 'Предлог'])" />
        <клс:варијабла име="перцентПропосед" изабрати="$тоталПропосед див $ двт_РовЦоунт" />

        <клс:варијабла име="тоталИнПроцесс" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = "У процесу"])" />
        <клс:варијабла име="перцентИнПроцесс" изабрати="$тоталИнПроцесс див $ двт_РовЦоунт" />

        <клс:варијабла име="тоталСталлед" изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = 'Сталлед'])" />
        <клс:варијабла име="перцентСталлед" изабрати="$тоталСталлед див $ двт_РовЦоунт" />

        <!--
          Ми смо овде дефинишемо нашу ХТМЛ табелу.  Ја сам позајмљивање из неких стандарда
          .  Мислим да ће поштовати
          .
        -->
        <табела ширина="100%" бордер="0" целлпаддинг="2"
стил="бордер-ригхт: 1 солид # Ц0Ц0Ц0; бордер-боттом: 1 солид # Ц0Ц0Ц0; бордер-лефт-стилу: солидан; бордер-лефт-ширина: 1; бордер-топ-стилу: солидан; бордер-топ-ширина: 1;">

           <тр>
            <тд алигн="центар">
              <табела граница="1" ширина="100%">

                <!--
                  За сваки статус који желимо да графикон, we call the "ShowBar" шаблон.
                  Ми смо га проћи:
                  1. Ознака за ред.  Ово се претвара у хипервезу.
                  2. Посто (променљива одозго).
                  3. Теренски име код са основне листе.  Ово
                     .
                  4. Поље за упарен #3.
                  5. Укупно ставки овог статуса код (није велика сума свих
                     ).

                  Емитује <тр></тр> и хоризонтална трака Линија.

                  Позивамо овај шаблон за сваки статус код желимо да видите.
                -->
                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати=""Предложени '"/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентПропосед"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати=""Предложени '"/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталПропосед"></клс:са парам->
                </клс:позива шаблон>

                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати="'Сталлед'"/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентСталлед"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати="'Сталлед'"/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталСталлед"></клс:са парам->
                </клс:позива шаблон>

                <клс:позива шаблон име="СховБар">
                  <клс:са парам- име="БарДисплаиЛабел" изабрати=""У процесу""/>
                  <клс:са парам- име="БарПерцент" изабрати="$перцентИнПроцесс"/>
                  <клс:са парам- име="КуериФилтерФиелдНаме" изабрати="'Статус'"/>
                  <клс:са парам- име="КуериФилтерФиелдВалуе" изабрати=""У процесу""/>
                  <клс:са парам- име="ТоталИтемс" изабрати="$тоталИнПроцесс"></клс:са парам->
                </клс:позива шаблон>

              </табела>
            </тд>
          </тр>
        </табела>
      </клс:иначе>
    </клс:изабрати>
  </клс:шаблон>

  <!--
    Овај шаблон чини дело приказивања појединих линија у хистограма.

    Вероватно ћете урадити већину свог дотеривања овде.
  -->
  <клс:шаблон име="СховБар">
    <клс:парам име="БарДисплаиЛабел" /> <!-- ознака за приказивање -->
    <клс:парам име="БарПерцент"/> <!-- Проценат од укупног броја. -->
    <клс:парам име="КуериФилтерФиелдНаме"/> <!-- Користи се за скок у упит & филтрирате -->
    <клс:парам име="КуериФилтерФиелдВалуе"/> <!-- Користи се за скок у упит & филтрирате -->
    <клс:парам име="ТоталИтемс" /> <!-- укупан број овог барлабел -->

    <тр>

      <!-- Сама трака ознака. -->
      <тд класа="МС-формбоди" ширина="30%">

        <!--
          Овај следећи скуп исказа гради упита који омогућава
          .
          Ми се овде користи неколико ствари:
          1. Можемо проћи ФилтерФиелд1 и ФилтерВалуе1 у листу за филтрирање на колону.
          2. СхареПоинт пролази кључни параметар за нас, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Зар није забавно КССЛ?
        -->
        <клс:текст дисабле-излаз-беже="да">
        <![ЦДАТА[<хреф ="]]></клс:текст>
        <клс:вредности од изабрати="$ЛистУрлДир"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[?ФилтерФиелд1 =]]></клс:текст>
        <клс:вредности од изабрати="$КуериФилтерФиелдНаме"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[&ФилтерВалуе1 =]]></клс:текст>
        <клс:вредности од изабрати="$КуериФилтерФиелдВалуе"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[">]]></клс:текст>
        <клс:вредности од изабрати="$БарДисплаиЛабел"/>
        <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[</a>]]></клс:текст>

        <!-- Следећи део показује неке бројеве у формату: "(укупан / % од укупног броја)" -->
        (<клс:вредности од изабрати="$ТоталИтемс"/> /

        <!-- То ствара леп одсто ознаку за нас.  Хвала, Мицрософт! -->
        <клс:позива шаблон име="перцентформат">
          <клс:са парам- име="проценат" изабрати="$БарПерцент"/>
        </клс:позива шаблон>)

      </тд>

      <!-- Коначно, емитују <тд> ознака за сам бар.-->
      <тд>
        <табела целлпаддинг="0" бордер="0" граница="0"
ширина="{заокружити($БарПерцент * 100)+1}%">
          <тр бгцолор="црвен">
            <клс:текст дисабле-излаз-беже="да"><![ЦДАТА[&нбсп;]]></клс:текст>
          </тр>
        </табела>
      </тд>
    </тр>

  </клс:шаблон>

  <!-- Ово је директно преузет из неког КССЛ сам нашао у МС шаблону. -->
  <клс:шаблон име="перцентформат">
    <клс:парам име="проценат"/>
    <клс:изабрати>
      <клс:када тест="формат-број($проценат, "#, # # 0%;-#,##0%')= 'НаН'">0%</клс:када>
      <клс:иначе>
        <клс:вредности од изабрати="формат-број($проценат, "#, # # 0%;-#,##0%')" />
      </клс:иначе>
    </клс:изабрати>
  </клс:шаблон>

</клс:стиловима>

Резултати:

КССЛ одозго генерише овај графикон:

Дрилл до основних података кликом на статусној коду:

Закључна разматрања:

Ово може се генерализовати?

Волим овај концепт градите, 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, please let me know and I’ll gladly link to your blog 🙂

Мислим да је проблем са вертикалном графикону се да су ознаке за графику су теже управљати, али свакако не и немогуће.

Поље Име је Готцха:

Постоје најмање две ствари треба обратити пажњу са називима поља.

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

        <клс:варијабла име="тоталПропосед" 
 изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус) = 'Предлог'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <клс:варијабла име="тоталПропосед" 
 изабрати="рачунати(/дсКуериРеспонсе / редове / Ров[нормализује-простор(@ Статус_к0020_Цоде) = 'Предлог'])" />
Други, и ја сам мало нејасно ово, 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" АФЕ је > 10% затим га покаже црвени, otherwise show it in black. Коришћење <клс:изабрати> ово постићи.

Остали ресурси:

Одређује унутрашњу име (и других добар инфо) за подацима на листи: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Покажи све податке које СхареПоинт (сирови КСМЛ): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Набавите КСПатх израз одређене колоне: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Други приступ користи ова(?). I have not dug into it, али изгледа обећавајуће, посебно за пие дијаграма: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Срећан претварајући!

<крај />

Претплатите се на мој блог!

Тецхнорати Тагс: СхареПоинт, ДВВП, Подаци Погледај Веб сегмент, КССЛ, КССЛТ, ВСС, МОСС

Paul Galvin's SharePoint Space

Месечне архиве: Децембар 2007

Креирање Грапхс Бар у СхареПоинт