Огляд:
(ОНОВЛЕННЯ 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" |
Результати:
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
Щасливі трансформування!
<кінець />
На цій сторінці майже завершена завдання, я шукав.
У мене є група, яка хоче створити щотижневі опитування за допомогою списку SharePoint опитування. Улов? Вони не хочуть, щоб побачити код… Або змінити систему, кожного разу, коли вони посилають опитування (заплановані на щотижневі оновлення).
Я зміг підключитися це до списку обстеження і створити графік на першому стовпці відповідь. Те, що я не можу передбачити, хоча цінності та етикетки, які вони повинні рухатися вперед. Щоб ще гірше, вони можуть мати більш-менш відповіді доступні кожного тижня.
Я буду дивитися в інших місцях, на всяк випадок, але хто-небудь знайшов спосіб створити рядки та етикетки, засновані від кількості доступних опцій і динамічно Якщо настроїти ці параметри, а не важко кодування очікуваними значеннями?
Спасибо Павлу. Дуже корисно. Завдяки вашій роботі, Я був в змозі додати стовпець графа барі до існуючих DVWP (Наприклад. для завдань) дуже легко з кілька рядків коду.
У SharePoint Designer, Я вставив подання даних під назвою і % повний стовпців у списку завдань. Помістити курсор в одній із келій і клацніть правою кнопкою миші. Я виберіть Додати стовпець праворуч. У поданні коду, Я знайшов на <TD> і замінені на <перетворення XSL:елемент тексту всередині клітинки з кодом:
<Таблиця cellpadding ="0" cellspacing ="0" межа ="0"
Ширина = "{Круглий(@PercentComplete * 100)+1}%">
<стиль тр = "-колір фону:червоний">
<перетворення XSL:текст вимкнути виводу Вибираючись = "так"><![CDATA[ ]]></перетворення XSL:текст>
</TR>
</Таблиця>
Примітка я змінив код кольору рядок з bgcolor = "червоний" стиль = "-колір фону:червоний"
Також, була можливість вибрати одну з колон в моєму списку (@PercentComplete) замість "$BarPercent"
Грег
Інший метод (за допомогою SharePoint UI):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20">
Виберіть = "кол(/dsQueryResponse, рядків, рядок[нормалізувати простір(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ян Morrish написав це в травні 2006. Я спробував в MOSS 2007 і вона добре працює. Додано до GAC, довелося execadmsvcjobs і iisreset…
Великий піст, Дякую!
Великий піст, Дякую!
Привіт Павло!
Відмінна робота! I also had something like this in my mind to view SharePoint lists in a graphical way 😉
I have a ‘Using Dashboards in SharePoint’ питання. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ Якщо це можливо. Одним з основних моментів перегляду в режимі реального часу поточного навантаження до Фонду і буквально дивитися його змінити вгору і вниз (натискайте “оновити”/F5).
Спасибі заздалегідь,
Ви можете зробити щось корисне з jQuery щоб виконати цей ефект. Напишіть мені на Galvin.Paul@Gmail.com і я буду щаслива, щоб спробувати дати руку.