Създаване на лента графики в SharePoint

Общ преглед:

(АКТУАЛИЗИРАНЕ 12/04/07: Добавя друг интересен ресурс в края свързва с друг блог, който се справя с това чрез много интересен уеб част)

Този блог пост описва как да създадете графика лента в SharePoint. Това работи в WSS и Мос среди, както то само зависи от уеб компонента за изглед на данни.

Цялостния подход е както следва:

  1. Създаване на списък или библиотека с документи, която съдържа данните, които искате да се изобразят.
  2. Поставете свързания документ библиотека / потребителски списък върху една страница и да го конвертирате в уеб компонент за изглед на данни (DVWP).
  3. Модифициране на DVWP XSL, за да генерира HTML, който показва като графика.

Бизнес сценарий / Настройка:

Аз създадох персонализиран списък със стандартните заглавие на колона и една допълнителна колона, "Статус". Това модели (много опростенчески) "разрешително за сметка" сценарий, където заглавието представлява проекта и състоянието стойност от списъка на:

  • Предложени
  • В процес
  • В застой

Целта е да се произвеждат интерактивна хоризонтална бар графика, която показва тези кодове на състояние.

Са населени списъка и то изглежда така:

Изображение

Създаване на Web част:

Създаване на DVWP чрез добавяне на списък по избор на страница (страница на сайт в моя случай) и следвайте инструкциите Тук (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Освен просто създаване на DVWP, Ние също трябва да зададете свойството paging да покаже всички налични редове. За мен, Това изглежда нещо подобно:

Изображение

В този момент, Аз винаги затворен ЕДП и на браузъра. Аз след това повторно отваряне на страница с помощта на браузъра. Това предотвратява случайно хвърляйки на уеб част оформлението на страницата.

Промяна на XSLT:

Сега е време да промените XSLT.

Аз винаги използвам visual studio за това. (Вижте Тук за важна забележка за intellisense, които ще ви помогнат много).

Създавам празен проект добави четири нови файлове (замяна на думи "оригинал" и "Ню" по целесъобразност):

  • 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>&nbsp;</TD></TR></таблица></TD>
</TR>
<TR>
<TD ширина = 10 %>Затворен</TD>
<TD><таблица cellpadding ="0" CellSpacing ="0" границата = 0 ширина = 25 %><TR bgcolor = червен><TD>&nbsp;</TD></TR></таблица></TD>
</TR>
<TR>
<TD ширина = 10 %>В застой</TD>
<TD><таблица cellpadding ="0" CellSpacing ="0" границата = 0 ширина = 25 %><TR bgcolor = червен><TD>&nbsp;</TD></TR></таблица></TD>
</TR>
</таблица>
</TD>
</TR>
</таблица>
</тяло>
</HTML>

Аз използван един мъртъв прост подход към създаването ми барове чрез задаване на цвета на фона на един ред в "червено".

Това ли е най-далеч тук: В края, всички ние сме правите създава HTML с редове и колони.

Шаблон XSLT:

Аз сте копирали XSLT, която генерира хоризонтална графика лента. Това е доста добре коментира, така че аз няма да добавите много тук освен тези бележки:

  • Започнах с по подразбиране XSL, че SharePoint Designer ми даде, когато създадох първи DVWP.
  • Аз бях в състояние да намалят това от ЕДП 's 657 линии за 166 линии.
  • Аз не играя си с параметри XML файл (което е отделено от XSL и вие ще знаете какво имам предвид, когато отидеш да модифицирате DVWP, самата; има два файла, можете да промените). Въпреки това, за да се опрости, Почти всички от тях премахване от XSL. Това означава, че ако искате да се използват от тези параметри, трябва само да добавите променлива определения обратно към XSL. Това ще бъде лесно, тъй като ще имате оригиналния XSL променлива дефиниции във вашия visual studio проект.
  • Вие трябва да можете да копирате и го поставете директно в вашия visual studio проект. След това, Извадете ми обаждания и поставете вашите собствени повиквания към "ShowBar".
  • Детайлизирането работи чрез създаване на <a 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 о 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:ddwrt="HTTP://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="урна:схеми-microsoft-com:офис" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="урна:схеми-microsoft-com:набор редове" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="урна:FrontPage:вътрешни"
> <XSL:изход метод="HTML" тире="Не" /> <XSL:десетичен формат NaN="" /> <XSL:param Име="ListUrlDir"></XSL:param> <!-- Имам нужда от това да подкрепят тренировка надолу. --> <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:param Име="BarDisplayLabel" /> <!-- етикет за показване --> <XSL:param Име="BarPercent"/> <!-- Процента от общата сума. --> <XSL:param Име="QueryFilterFieldName"/> <!-- Използвана за преход към заявката & филтър --> <XSL:param Име="QueryFilterFieldValue"/> <!-- Използвана за преход към заявката & филтър --> <XSL:param Име="TotalItems" /> <!-- Общият брой на тази barlabel --> <TR> <!-- Лентата етикет на самата. --> <TD клас="MS-formbody" ширина="30%"> <!-- Този следващия набор от отчети се основава на низ за заявка, който ни позволява да пробия филтриран изглед на базовите данни. Ние се използват за няколко неща тук: 1. Ние може да премине FilterField1 и FilterValue1 към списък за филтриране на колона. 2. SharePoint е преминаване ключов параметър за нас, ListUrlDir, който сочи към основния списък, срещу които този DVWP се "работи". Не е забавно XSL? --> <XSL:текст забрани продукция бягство="Да"> <![НЕЗАТВОРЕН[<a href ="]]></XSL:текст> <XSL:стойността на Изберете="$ListUrlDir"/> <XSL:текст забрани продукция бягство="Да"><![НЕЗАТВОРЕН[?FilterField1 =]]></XSL:текст> <XSL:стойността на Изберете="$QueryFilterFieldName"/> <XSL:текст забрани продукция бягство="Да"><![НЕЗАТВОРЕН[&FilterValue1 =]]></XSL:текст> <XSL:стойността на Изберете="$QueryFilterFieldValue"/> <XSL:текст забрани продукция бягство="Да"><![НЕЗАТВОРЕН[">]]></XSL:текст> <XSL:стойността на Изберете="$BarDisplayLabel"/> <XSL:текст забрани продукция бягство="Да"><![НЕЗАТВОРЕН[</а>]]></XSL:текст> <!-- Следващите малко показва някои числа във формат: "(общо / % от общата сума)" --> (<XSL:стойността на Изберете="$TotalItems"/> / <!-- Това създава приятен процент етикет за нас. Благодаря, Microsoft! --> <XSL:повикване-шаблон Име="percentformat"> <XSL:с Албена Име="процента" Изберете="$BarPercent"/> </XSL:повикване-шаблон>) </TD> <!-- Най-накрая, излъчват <TD> етикет за лентата на самата.--> <TD> <таблица CellPadding="0" CellSpacing="0" граница="0" ширина="{кръг($BarPercent * 100)+1}%"> <TR BGColor="червен"> <XSL:текст забрани продукция бягство="Да"><![НЕЗАТВОРЕН[&nbsp;]]></XSL:текст> </TR> </таблица> </TD> </TR> </XSL:шаблон> <!-- Това е взето директно от някои XSL, намерих в шаблон на MS. --> <XSL:шаблон Име="percentformat"> <XSL:param Име="процента"/> <XSL:Изберете> <XSL:Когато тест="Форматиране на число($процента, '#,##0%;-#,##0%')= "NaN"">0%</XSL:Когато> <XSL:в противен случай> <XSL:стойността на Изберете="Форматиране на число($процента, '#,##0%;-#,##0%')" /> </XSL:в противен случай> </XSL:Изберете> </XSL:шаблон> </XSL:стилове>

Резултатите:

XSL отгоре генерира тази графика:

Изображение

Пробийте съответните данни, като щракнете върху кода на състоянието:

Изображение

Заключителни мисли:

Може ли това да се обобщи?

Обичам тази графики концепция, но аз мразя факта, че трябва да направим толкова много ръчно кодиране. Аз бях даден малко мисъл за това дали тя може да се обобщи и съм оптимист, но аз също съм малко страх, че може да има една тухлена стена някъде по пътя, който няма да предложи всякаква работа-наоколо. Ако някой има някои добри идеи за това, Молим да отбележите в коментарите или пишете ми.

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

Това е хоризонтална лента графика. Това със сигурност е възможно да се създаде вертикална графика. Ние просто трябва да се промени HTML. Аз ще започна по същия начин: Създаване на HTML представителство на вертикален графика бар и след това да разбера как да получите, че чрез XSL. Ако някой се интересува от това, Може да бъде убеден да го изпробвате и да работят на kinks. Ако някой вече е направил това, моля, уведомете ме и с удоволствие ще направя връзка към вашия блог 🙂

Аз мисля, че предизвикателството с вертикална графика е, че етикетите за графиката са по-трудни за управление, но със сигурност не impossible.

Поле име Пипнах:

Има най-малко две неща да се внимава с вашите имена на полета.

Първо, име на поле с пространство трябва да бъде екраниран в XSL. Това вероятно ще бъде проблем тук:

        <XSL:променлива Име="totalProposed" 
Изберете="брой(/dsQueryResponse/редове/ред[нормализира-пространство(@Status) = "Предложени"])" />

Ако състоянието си"" колона всъщност е наречен "код на състоянието" тогава ще трябва да го позоваване като "Status_x0020_Code":

   <XSL:променлива Име="totalProposed" 
Изберете="брой(/dsQueryResponse/редове/ред[нормализира-пространство(@Status_x0020_Code) = "Предложени"])" />

Секунда, и аз съм малко размита в това, но вие също трябва да бъдат нащрек за поле име промени. Ако име на вашето поле "код на състоянието" а по-късно, Преименувайте го на "AFE статус", "вътрешно име" не се променя. Вътрешно име все още ще бъде "код на състоянието" и трябва да бъде упомената като "Status_x0020_Code". "Други ресурси" връзки може да диагностицира и коригира този род на проблема.

За този цвят:

Вдигнах "червено" защото това е приятен за мен в момента. Не е голяма работа да покаже различни цветове да се предоставят повече от просто визуална описание на число, но също така предоставя полезни KPI. За пример, Ако процентът на "застой" На AFE е > 10% след това го показват червен, иначе го покаже в черно. Употреба <XSL:Изберете> за да постигнем това.

Други ресурси:

Честит трансформиране!

<край />

Абонирайте се за моя блог!

17 мисли за "Създаване на лента графики в SharePoint

  1. Кръщавам БУКВАТА B

    Тази страница почти приключи задачата, което е търсил.

    Имам една група, която иска да използва списъка на SharePoint проучване за създаване на седмична анкета. Улова? Те не искат да видите код… Или промяна на системата, всеки път, когато те изпращат анкета (планирани за седмична актуализация).

    Аз бях в състояние да го свържете към списъка на проучване и създаване на графиката на първата колона отговор. Това, което не може да предскаже обаче са ценностите и етикетите, които те ще трябва се движат напред. За да направим нещата по-лошо, те могат да имат повече или по-малко отговори разположение всяка седмица.

    Аз ще гледам другаде само в случай, но е всеки, който намери начин да създадете редове и етикети на база на броя на наличните опции и динамично задаването на тези настройки, отколкото твърд кодиране очакваните стойности?

  2. Грег Laushine

    Благодарение на Павел. Много полезен. Благодаря за вашата работа, Аз бях в състояние да добавите графика бар колона към съществуваща DVWP (e.g. за задачите) много лесно със само с няколко реда на кода.
    В SharePoint Designer, Вмъкнах изглед на данни със заглавие и % пълна колони от списък със задачи. Поставяне на курсора в една от клетките и щракнете с десния бутон. Аз изберете Вмъкни колона отдясно. В изглед на код, Намерих <TD> и замени <XSL:елемент за текст вътре в клетката с вашия код:
    <таблица cellpadding ="0" CellSpacing ="0" границата ="0"
    ширина = "{кръг(@PercentComplete * 100)+1}%">
    <TR стил = "фон-цвят:червен">
    <XSL:текст неспособен-продукция-бягство = "да"><![НЕЗАТВОРЕН[&nbsp;]]></XSL:текст>
    </TR>
    </таблица>

    Забележка, промених реда код цвят от bgcolor = "червен" стил = "фон-цвят:червен"
    Също, може да изберете една от колоните в моя списък (@PercentComplete) вместо "$BarPercent"
    Грег

  3. Волфганг
    Пол, Благодаря за този! Аз създаде точно копие на това, което направих и тя работи почти перфектна. Имаше един малък проблем в ред втори параграф на вашия код:
    <XSL:шаблон за съвпадение = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Вие трябва да поставите http://schemas.microsoft.com/WebParts/v2/DataView/designer в кавички.
    След аз поправена, че тя работи като чар! Аз сега ще това адаптиране към моя собствен списък и статус, но аз съм сигурен, че няма да бъде трудно. (Аз ще стълб резултат)
    Благодаря отново
    ~ Воле
  4. Без име
    въпрос –
    Ако в моята графика, Исках променлива да не само броят един статус, но разчитам на няколко такива?
    Така, например, ако имах —
    <XSL:име на променлива = "RequestsInitialized"
    изберете = "граф(/dsQueryResponse/редове/ред[нормализира-пространство(@Status)= "НП"])" />
    –Нещо е, Аз искам да брои екземпляри на "НП", но аз също искам тази променлива да се броят нещо друго като "Чакащ преглед".. Как ще направите това?
    Благодаря!
  5. Цветан Срирангам
    Здравей Пол,
    IAM наистина това е наистина голямо усилие от вас. Може ли да обясни къде ще публикувате този код. Аз създали prjoect с четири нови файлове. След това може да ви обясни по-подробно какво трябва да направя.
    Благодаря
    Цветан
  6. Андрю Карингтън
    Здравей, Аз съм се опитва да промени това леко, така че да показва графика на задачи в списък със задачи срещу потребителска информация. Той използва една колона, наречена @AssignedTo която е потребител присъствие колона. Мога да го да се покаже на топени HTML, но не мога да го за изчисляване и показване на стойности.
    Някакви идеи?
    Благодаря
    Анди
  7. Патрик Лука е написал:
    Здравей Пол,
    Велик пост!
    Един въпрос:
    Бих искал да филтрирате по две полета в същото време: Как може да се постигне това?
    За пример, един от вашите променливи се нарича totalStalled и филтри на @Status.
    Бих искал да филтрирате по същото време да се намали ми брой върнати записи на друго поле.
    Аз вече са намерили как да се направи "или", но аз donnot успяват да намерят "и’
    "Или’ може да се постигне подобно:
    <XSL:име на променлива = "totalStalled" изберете = "граф(/dsQueryResponse/редове/ред[нормализира-пространство(@Status) = "Задънена улица"] | /dsQueryResponse/редове/ред[нормализира-пространство(@ExtraFilterField) = "стойност"])" />
  8. Робин Meuré

    Здравей Пол!

    Приятен работа! Също така имах нещо подобно в ума си, за да преглеждам списъци на SharePoint по графичен начин 😉

  9. Франк

    Имам „Използване на табла за управление в SharePoint’ въпрос. Ние сме военна болница, използваща стандарт MOSS за нашия интранет и бихме искали да изградим табло за управление за нашата командна група, за да виждаме „в реално време’ Ако е възможно. Една от основните точки е гледане в реално време текущата натоварване в рамките на съоръжението и буквално гледате промяна нагоре и надолу (може да се наложи да щракнете върху “обновяване”/F5).

    Благодаря ви предварително,

    1. Пол Galvin Мнение автор

      Можете да направите нещо полезно с jQuery да се постигне този ефект. Пишете ми на Galvin.Paul@Gmail.com и аз ще се радвам да се опита да даде ръка.

Оставете отговор

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани *