Общ преглед:
(АКТУАЛИЗИРАНЕ 12/04/07: Добавя друг интересен ресурс в края свързва с друг блог, който се справя с това чрез много интересен уеб част)
Този блог пост описва как да създадете графика лента в SharePoint. Това работи в WSS и Мос среди, както то само зависи от уеб компонента за изглед на данни.
Цялостния подход е както следва:
- Създаване на списък или библиотека с документи, която съдържа данните, които искате да се изобразят.
- Поставете свързания документ библиотека / потребителски списък върху една страница и да го конвертирате в уеб компонент за изглед на данни (DVWP).
- Модифициране на 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> </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.
- Аз бях в състояние да намалят това от ЕДП '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" |
Резултатите:
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:Изберете> за да постигнем това.
Други ресурси:
- Определи името на вътрешния (и други добри информация) за данните в списък: 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(?). Аз не са вкопани в него, но изглежда обещаващ, особено за кръгови диаграми: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Честит трансформиране!
<край />