Грудень | 2007 | Поль Гелвін SharePoint простір

Огляд:

(ОНОВЛЕННЯ 12/04/07: Додав ще один цікавий ресурс в кінці посилання на інший блог, який врегулював через дуже цікаву веб-частини)

Цей запис у блозі статті описано створення гістограми в SharePoint. Це працює в WSS, так і для ЛИШАЙНИКА середовищі, як це тільки залежить від веб-частині подання даних.

Структурований підхід виглядає наступним чином:

Створити список або бібліотеку, що містить дані, потрібні для графа.
Місце на пов'язана бібліотека документів / власний список на сторінці і перетворити його в веб-частині подання даних (DVWP).
Змінити на DVWP XSL для генерації HTML, який показує, як граф.

Бізнес-сценарій / Налаштування:

Я створив за настроюваним списком з стандартних заголовок стовпця і один додатковий стовпець, "Статус". Цей моделей (дуже спрощено) "дозволу за рахунок" сценарій, де назва — проект і стан значення зі списку:

Запропоновано
У процесі
Глухий кут

Мета полягає в тому, виробляти інтерактивні горизонтальні графа барі, який показує ці коди стану.

Я мають населені списку, і це виглядає так:

Створити веб-частині подання даних:

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

На додаток до просто створення на DVWP, Ми також доведеться настроїти властивість довантаження Показати всі доступні рядки. Для мене, це виглядає приблизно так:

На даний момент, Я завжди поруч, СПД і браузер. Я повторно відкрийте сторінку за допомогою браузера. Це дозволяє уникнути випадкового маки до веб-частини документа, на сторінці.

Змінити в XSLT:

Зараз настав час змінити в XSLT.

Я завжди використовую visual studio для цього. (Див. Тут важливі відомості про intellisense, які допоможуть вам багато чого).

Створити пусту проекту додати чотири нових файлів (замінивши слова "оригінал" і «New" в міру необхідності):

Original.XSLT
New.XSLT
Оригінальні Params.xml
Нові Params.xml

У моєму випадку, це виглядає так:

Змінення веб-частини та копіювання params і XSL оригіналу"" версія в Visual Studio.

Мета тут полягає в тому, викликають XSL трансформувати результатів, ми повернемося від DVWP запиту в HTML, що надає як граф.

З цією метою, Це допомагає спочатку розглянемо, що HTML повинна виглядати перед тим, як ми отримати з пантелику, божевілля, що відомо як "XSL". (Щоб було ясно, Нижче наведено просто приклад; не вводити його або копіювати/вставити в visual studio. Я надати повний удар відправною точкою для цього пізніше в записом). Наступний графік вибірки надані згідно з HTML, відразу ж після:

Відповідні HTML:

<HTML>
<тіло>
<Центр>
<Таблиця ширина = 80%>
<TR><TD><Центр>Горизонтальна гістограма графік</TD></TR>
<TR>
<TD приєднуються = "Центр">
<межу таблиці = "1" Ширина = 80%>
<TR>
<TD ширина = 10%>Відкриті</TD>
<TD><Таблиця cellpadding ="0" cellspacing ="0" межа = 0, ширина = 50%><TR bgcolor = червоний><TD> </TD></TR></Таблиця></TD>
</TR>
<TR>
<TD ширина = 10%>Закриті</TD>
<TD><Таблиця cellpadding ="0" cellspacing ="0" межа = 0, ширина = 25%><TR bgcolor = червоний><TD> </TD></TR></Таблиця></TD>
</TR>
<TR>
<TD ширина = 10%>Глухий кут</TD>
<TD><Таблиця cellpadding ="0" cellspacing ="0" межа = 0, ширина = 25%><TR bgcolor = червоний><TD> </TD></TR></Таблиця></TD>
</TR>
</Таблиця>
</TD>
</TR>
</Таблиця>
</тіло>
</HTML>

Я використав мертва проста підхід до створення мого барів можна настроїти колір фону ряд, щоб "червоні".

Винос тут це таке: Врешті-решт, все, що ми робимо створює HTML з рядків і стовпців.

Шаблон XSLT:

Я скопіював XSLT, який генерує горизонтальної гістограми. Це досить добре прокоментований так що я не буде додавати багато тут за винятком ці нотатки:

Я почав з за замовчуванням XSL для SharePoint Designer дали мені, коли я вперше створений в DVWP.
Я зміг скоротити це з СПД 657 лінії для 166 лінії.
Я не возитися з параметрів XML-файлу (який окремо від XSL, і ви будете знати, що я маю на увазі, що коли ви йдете, щоб змінити DVWP, сам; Існують два файли, ви можете змінити). Однак, для того, щоб спростити його, Я видалити майже всі з них з XSL. Це означає, що якщо ви хочете, щоб зробити використання цих параметрів, вам просто потрібно додати їх визначення змінних XSL. Що буде легко, тому що у вас буде оригінальні визначення змінних XSL в visual studio проекту.
Ви повинні мати можливість скопіювати і вставити це безпосередньо на ваш проект visual studio. Потім, видалити мої дзвінки та вставити ваш власний дзвінки на "ShowBar".
Буріння вниз робіт, створюючи послугами <href> Ось так: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Ця техніка може бути корисною в інших контекстах. Спочатку, Я думав, що мені потрібно, щоб відповідати більш складний формат: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, але в моєму оточенні, немає необхідності. У списку URL передається до нас SharePoint так що це досить легко для узагальнення.

От:

<перетворення XSL:таблиця стилів версія="1.0" виключити результат префікси="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="Урна:схеми microsoft-com:XSLT" xmlns:перетворення XSL="http://www.w3.org/ 1999 / / перетворення 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:: Сьогодні()), 1033,  'РРРРММДД') & gt; = ddwrt:  FormatDateTime (рядок ( @TaskDueDate), 1033,  'РРРРММДД') "="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="Урна:схеми microsoft-com:офіс" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:ДТ="UUID:C2F41010-65B3 - 11d-1-A29F-00AA00C14882" xmlns:RS="Урна:схеми microsoft-com:рядків" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="Урна:FrontPage:внутрішні">
  <перетворення XSL:вихід метод="HTML" відступ="Ні" />
  <перетворення XSL:десятковий формат NaN="" />
  <перетворення XSL:парам Ім’я="ListUrlDir"></перетворення XSL:парам> <!-- Мені потрібно це для підтримки за деталізації.  -->

  <перетворення XSL:Шаблон матч="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="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">
        Немає даних, на графік!<br/>
      </перетворення XSL:Коли>
      <перетворення XSL:в іншому випадку>

        <!--
          Цікаві речі тут починається.

          Нам необхідно визначити пари змінних для кожного рядка в графі: Загальна кількість елементів і відсоток від підсумку.
        -->
        <перетворення XSL:Змінна Ім’я="totalProposed" Виберіть="Граф(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status) = "Запропоновано"])" />
        <перетворення XSL:Змінна Ім’я="percentProposed" Виберіть="$totalProposed div $dvt_RowCount" />

        <перетворення XSL:Змінна Ім’я="totalInProcess" Виберіть="Граф(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status) = 'В процесі"])" />
        <перетворення XSL:Змінна Ім’я="percentInProcess" Виберіть="$totalInProcess div $dvt_RowCount" />

        <перетворення XSL:Змінна Ім’я="totalStalled" Виберіть="Граф(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status) = 'В глухий кут '])" />
        <перетворення XSL:Змінна Ім’я="percentStalled" Виберіть="$totalStalled div $dvt_RowCount" />

        <!--
          Ми визначимо наших HTML-таблиці тут.  Я впевнений, запозичення з деяких стандартних стилів SharePoint тут зробити відповідно до.  Я думаю, що це буде вшановувати повідомляти, темою скасовує зміни глобального css файлу.
        -->
        <Таблиця Ширина="100%" cellspacing="0" cellpadding="2"
стиль="права межа: 1 твердих #C0C0C0; межа знизу: 1 твердих #C0C0C0; тип межі ліворуч: тверді; ширина межі ліворуч: 1; тип межі Топ: тверді; ширина межі Топ: 1;">

           <TR>
            <TD Вирівняти="Центр">
              <Таблиця кордону="1" Ширина="100%">

                <!--
                  Для кожного стану, що ми хочемо для графа, Ми називаємо "ShowBar" Шаблон.
                  Ми передати його:
                  1. Етикетки для рядка.  Це перетворюється на гіперпосилання.
                  2. Відсоток (Змінна зверху).
                  3. На фактичне ім'я поля коду від базової список.  Це не потрібно відповідає відображуваному підпису.
                  4. Значення поля, що відповідає за #3.
                  5. Всього найменувань цей код стану (не Гран цілому всі коди стану).

                  Він випромінює за <TR></TR> і лінії горизонтальна стрічка.

                  Ми називаємо цей шаблон для кожного код стану, ми хочемо, щоб переглянути.
                -->
                <перетворення 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>
          </TR>
        </Таблиця>
      </перетворення XSL:в іншому випадку>
    </перетворення XSL:вибрати>
  </перетворення XSL:Шаблон>

  <!--
    Цей шаблон робить роботу відображення окремих рядків у бар графіка.

    Ви, мабуть, зробити більшу частину вашої тонке налаштування тут.
  -->
  <перетворення XSL:Шаблон Ім’я="ShowBar">
    <перетворення XSL:парам Ім’я="BarDisplayLabel" /> <!-- етикетки, щоб показати -->
    <перетворення XSL:парам Ім’я="BarPercent"/> <!-- Відсоток від підсумку. -->
    <перетворення XSL:парам Ім’я="QueryFilterFieldName"/> <!-- Використовували, щоб перейти до запиту & Фільтр -->
    <перетворення XSL:парам Ім’я="QueryFilterFieldValue"/> <!-- Використовували, щоб перейти до запиту & Фільтр -->
    <перетворення XSL:парам Ім’я="TotalItems" /> <!-- Загальна кількість цього barlabel -->

    <TR>

      <!-- У барі маркувати себе. -->
      <TD клас="MS-formbody" Ширина="30%">

        <!--
          Цей наступний набір заяви будує рядку запиту, що дозволяє нам бурити аж до відфільтроване подання даних.
          Ми робимо використовувати кілька речей тут:
          1. Ми можемо передати FilterField1 і FilterValue1 щоб відфільтрувати стовпець списку.
          2. SharePoint проходить ключевих параметрів нам, ListUrlDir, що вказує на базової список, проти яких цей DVWP "запущено".

          Це не задоволення 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[</на>]]></перетворення XSL:текст>

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

        <!-- Це створює хороший відсоток етикетки для нас.  Дякую, Microsoft! -->
        <перетворення XSL:дзвінок шаблон Ім’я="percentformat">
          <перетворення XSL:з парам Ім’я="відсотків" Виберіть="$BarPercent"/>
        </перетворення XSL:дзвінок шаблон>)

      </TD>

      <!-- Нарешті, випромінюють за <TD> тег для бару себе.-->
      <TD>
        <Таблиця cellpadding="0" cellspacing="0" кордону="0"
Ширина="{Круглий($BarPercent * 100)+1}%">
          <TR BGCOLOR="червоний">
            <перетворення XSL:текст вимкнути виводу втечі="Так"><![CDATA[&nbsp;]]></перетворення XSL:текст>
          </TR>
        </Таблиця>
      </TD>
    </TR>

  </перетворення XSL:Шаблон>

  <!-- Це взято безпосередньо від деяких XSL, я знайшов у шаблоні MS. -->
  <перетворення XSL:Шаблон Ім’я="percentformat">
    <перетворення XSL:парам Ім’я="відсотків"/>
    <перетворення XSL:вибрати>
      <перетворення XSL:Коли тест="Формат номера($відсотків, '#,##0%;-#,##0%')= 'NaN'">0%</перетворення XSL:Коли>
      <перетворення XSL:в іншому випадку>
        <перетворення XSL:значення з Виберіть="Формат номера($відсотків, '#,##0%;-#,##0%')" />
      </перетворення XSL:в іншому випадку>
    </перетворення XSL:вибрати>
  </перетворення XSL:Шаблон>

</перетворення XSL:таблиця стилів>

Результати:

XSL зверху генерує цей графік:

Буріння вниз до базових даних, натиснувши на код стану:

Заключні думки:

Це узагальнюється?

Я люблю цей графічний концепції, але я ненавиджу той факт, що я повинен піти і зробити стільки ручне кодування. Я дав трохи думки чи можуть бути узагальнені і я налаштований оптимістично, але я також трохи страшно, що може бути цегляну стіну десь на шляху, що не буде пропонувати будь-які обхідний шлях. Якщо хто має декілька хороших ідей про це, не забувай в коментарях або Напишіть мені.

Вертикальні графіки:

Це горизонтальної гістограми. Звичайно можна створювати вертикальні графік. Нам просто необхідно змінити HTML. Я хотів би почати так само: Створити HTML-представництво інтересів вертикальної шкали і потім з'ясувати, як отримати, що через XSL. Якщо хтось зацікавлений у тому, що, Я міг переконати, щоб спробувати його і виробити kinks. Якщо хтось вже зробив, що, please let me know and I’ll gladly link to your blog 🙂

Я думаю, що виклик з вертикального графік є те, що підписи до графіка більш важким для управління, але безумовно не неможливо.

Поле Ім'я Gotcha:

Є принаймні дві речі треба подивитися з імен полів.

Перший, ім'я поля з пробілу має втік до XSL. Це, ймовірно, буде проблемою тут:

        <перетворення XSL:Змінна Ім’я="totalProposed" 
 Виберіть="Граф(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status) = "Запропоновано"])" />

Якщо ваш "статус" стовпець насправді названий "код стану" потім вам потрібно посилатися на нього як "Status_x0020_Code":
   <перетворення XSL:Змінна Ім’я="totalProposed" 
 Виберіть="Граф(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status_x0020_Code) = "Запропоновано"])" />
Другий, і я трохи нечіткої з цього, але ви також повинні бути напоготові змінює ім'я поля. Якщо ви називаєте ваш поле «код стану" а потім на, Перейменуйте його на "AFE статус", «Внутрішнє ім'я" не змінюється. Внутрішнє ім'я все одно буде "код стану" і повинна бути використана як "Status_x0020_Code". "Інші ресурси" посилання можуть допомогти діагностувати й виправити такого роду проблем.

Про цього кольору:

Я вибрав "червоний" тому що це приємний для мене на даний момент. Не було б велику справу для відображення різних кольорів, з тим щоб забезпечити більш, ніж просто візуальний Опис числа, але також надати корисні КПІ. Наприклад, Якщо відсоток "в глухий кут" AFE, є > 10% потім показати його червоний, в іншому випадку показати його в чорний. Використання <перетворення XSL:вибрати> для досягнення цієї мети.

Інші ресурси:

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

Щасливі трансформування!

<кінець />

Підписатися на мій блог!

Бірки Technorati: SharePoint, DVWP, Веб-частину подання даних, XSL, XSLT, WSS, ЛИШАЙНИК

Поль Гелвін SharePoint простір

Щомісячні архіви: Грудень 2007

Створення горизонтальних смуг в SharePoint