SharePoint и XSLT: Объединяем две колонки в одну

Довольно часто возникает такая задача: объединить несколько колонок списка в одну при отображении. Обычно это требуется в следующих случаях:

1. Когда в списке ну очень много колонок, поэтому при отображении эти данные поневоле приходится группировать
2. Когда несколько колонок логично было бы объединить в один блок
3. Иногда в некоторых колонках картинки или длинные текстовые описания, поэтому поля получаются очень разными по высоте, и оттого выглядят некрасиво
4. Когда часть данных в списке важна при отображении, но присутствует редко. Например, комментарий от руководителя:
   
   
   

В общем, объединение двух колонок в одну при отображении позволяет сэкономить место на экране, улучшить внешний вид, поправить usability, "вписаться" в брэндбук... Это требуется часто, поэтому важно знать, как это можно сделать.

Как видно из скриншота вверху, в качестве примера я решил использовать стандартный список "Tasks", в который добавил одну колонку типа "Multiple lines of text", и назвал её "PM's comment". То есть тот самый 4й вариант: такие комментарии слишком редки, чтобы для них держать целую колонку (да и колонка будет большая, потому что комментарий может содержать значительный объем текста) - но при этом очень важно их показать, если они всё-таки есть.

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

Эта задача прямо-таки идеальна для XSLT! Любые другие решения потребуют необоснованно больших трудозатрат. Если кто-то знает, как это можно легко и надежно сделать без XSLT - прошу оставить свои идеи в комментариях.

Итак, давайте подумаем, какие изменения нужно будет сделать для того, чтобы воплотить нашу идею в жизнь:

1. Скрыть столбец "PM's comment" из представления
2. Отобразить содержимое поля "PM's comment" в той же ячейке, где находится название задачи.

Скрыть столбец - довольно частая задача, и она реализуется средствами XSLT очень просто. Как я рассказывал в предыдущей статье серии, для определения, какой шаблон придется изменять, лучше всего использовать SharePoint Designer.

Открываем SPD, находим наш список, и открываем его представление "All tasks":

Очевидно, что для скрытия колонки нам потребуется скрыть два шаблона: для отображения заголовка этой колонки, и для отображения ячейки данных этой колонки. Довольно логично, что заголовок и ячейка данных отображаются разными шаблонами, не так ли? :)

Хорошо, давайте ткнем на заголовок нашей колонки, и затем в статусной строке выделим элемент <xsl:template>, первый слева от тега <th> (а точнее, он будет отображен как <th.ms-vh2>):

Надеюсь понятно, почему нужно выделять не первый справа шаблон, а немножко пролистать влево: если скрыть только текст заголовка, сама заголовочная ячейка (тег <th>) и соответствующая ей колонка - всё равно останутся видимыми и не исчезнут из таблицы.

Теперь скопируем атрибуты выбранного нами тега <xsl:template>, выбрав в контекстном меню этого элемента Edit Tag...:

Временно сохраним этот код в любом текстовом редакторе. Отлично, а теперь то же самое нужно проделать с любой из ячеек данных нашей колонки - здесь нам потребуется шаблон, первый слева после тега <td>.

Получившиеся два тэга <xsl:template> нужно закрыть, т.к. при копировании из Edit Tag они получаются незакрытыми. А контент в них вставлять не нужно, т.к. мы их скрываем, а не заменяем.

Итак, можете проверить, вот что должно получиться в итоге:

<xsl:template 
    name="FieldRef_header.PM_x0027_s_x0020_comment"
    ddwrt:dvt_mode="header"
    match="FieldRef[@Name='PM_x0027_s_x0020_comment']"
    mode="header"
    ddwrt:ghost="" />
<xsl:template 
    name="FieldRef_printTableCell_EcbAllowed.PM_x0027_s_x0020_comment"
    match="FieldRef[@Name='PM_x0027_s_x0020_comment']"
    mode="printTableCellEcbAllowed"
    ddwrt:dvt_mode="body"
    ddwrt:ghost="" />

Обратите внимание: я удалил строку "hide" из атрибута ddwrt:ghost. Иначе, дизайнер стирал бы эти шаблоны при каждом переключении между вкладками Code и Designer.

Давайте удостоверимся, работает ли это?

Переходим на вкладку Code, отыскиваем XsltListViewWebPart, добавляем тег <Xsl>, в него вставляем стандартный xsl:stylesheet, подключаем через xsl:include файл стандартных преобразований main.xsl, и наконец, вставляем наш код. Напомню, откуда брать код для xsl:stylesheet и другие базовые вещи - я объяснял и подробно показывал в предыдущей статье серии: SharePoint и XSLT: Hello world!

Теперь переключаемся обратно - и видим, что колонка действительно пропала!

Особо отмечу, почему мы должны скрывать эту колонку именно через XSLT (ведь её можно скрыть и через GUI, перейдя в настройки отображения и сняв соответствующую галочку): дело в том, что если колонка не включена в представление, данные этой колонки не будут переданы и в XSLT, и мы просто не сможем получить значения этой колонки из нашего преобразования. А значения-то нам нужны: ведь мы всё-таки собираемся отобразить эту колонку, хоть и в другом месте.

Следующий шаг - изменить отображение колонки с названием ячейки. Для этого воспользуемся трюком с Conditional formatting, который я уже объяснял. Вкратце: выделяем любую ячейку колонки Title, жмем на Ribbon'е Conditional formatting => Format column, прописываем любое условие (например ID='0'), выставляем любой стиль, потом переключаемся во вкладку Code и смотрим, что получилось...

Ага! В тег Xsl добавился новый шаблон.

Этот шаблон идентифицируется атрибутами match="FieldRef[@Name='LinkTitle']" mode="printTableCellEcbAllowed", т.е. отображает ячейку с InternalName равным LinkTitle. Это служебное поле с типом Computed, оно получается из стандартного Title путем добавления ссылки на модальный диалог формы отображения элемента списка.

Шаблон в целом очень простой. Он почти ничего не делает: только выводит тег <td>, добавляет ему несколько атрибутов, и вызывает нижестоящий шаблон (mode="PrintFieldWithECB"). После вызова этого шаблона, мы можем добавить наш собственный код, который будет отображать наше поле PM's comment.

Даже имея самое скудное представление об XSLT, можно догадаться, что отобразить еще одно поле можно еще одним вызовом <xsl:apply-templates>, ведь очевидно, что содержимое поля LinkTitle отображается именно c помощью этого шаблона.

Но как же указать, что нужно отобразить именно поле PM's comment? Прежде всего, нужно получить уникальный идентификатор этого поля, чтобы на него ссылаться. Это очень просто: в листинге наверху вы могли заметить строку PM_x0027_s_x0020_comment - это собственно и есть InternalName нашего поля.

Дальше, изучив имеющийся apply-templates, можно догадаться, что атрибут select="." указывает на текущий обрабатываемый элемент. А текущий обрабатываемый элемент, как известно, задается с помощью атрибута match текущего шаблона. Т.е., сейчаc обрабатывается FieldRef[@Name='LinkTitle'], а нам нужно обработать  FieldRef[@Name='PM_x0027_s_x0020_comment'].

Т.е. согласно правилам XPath, следует передать в apply-templates select="../FieldRef[@Name='PM_x0027_s_x0020_comment']". Давайте попробуем. Вот такой будет код у второго вызова apply-templates:

<xsl:apply-templates select="../FieldRef[@Name='PM_x0027_s_x0020_comment']" mode="PrintFieldWithECB">
    <xsl:with-param name="thisNode" select="$thisNode"/>
</xsl:apply-templates>

Переключаемся во вкладку Design, видим:

Отлично! Почти то, что нужно! Осталось только сделать это всё немного более приятным глазу.

Для этого, давайте заключим наш дополнительный вызов xsl:apply-templates в div, и добавим этому div'у стили. Но постойте! Если мы сделаем div c padding'ом, и пропишем ему еще и цвет фона - получится нехорошо, т.к. этот квадрат будет виден во всех записях, даже там, где поле PM's comment пустое.

Т.е. нам нужен условный вывод тэга. На самом деле это реализуется элементарно в XSLT - в нем есть специальный тег <xsl:if> для таких вещей. Как создавать условие - можно подсмотреть у Conditional Formatting. Помните же, мы задавали условие ID='0'? SharePoint Designer сгенерировал соответствующую строку для этого, её можно найти внутри тега xsl:attribute сразу после тега td. Очевидно, что если заменить в этом сгенерированном условии ID на  PM_x0027_s_x0020_comment, и заменить ='0' на !='', то получится задать проверку на наличие нашего поля.

Вобщем, в итоге у меня получился вот такой код:

<xsl:if test="$thisNode/@PM_x0027_s_x0020_comment != ''">
   <div style="background-color:#FFEEEE; margin: 5px; padding: 4px 10px; font-size: 9px;">
      <xsl:apply-templates select="../FieldRef[@Name='PM_x0027_s_x0020_comment']" mode="PrintFieldWithECB">
          <xsl:with-param name="thisNode" select="$thisNode"/>
      </xsl:apply-templates>
   </div>
</xsl:if>

Конечно, к div нужно подключать css-класс, inline-стили написаны исключительно в качестве примера, для простоты.

Если теперь перейти к просмотру нашего списка в браузере, получим следующую картину:

Отличный результат, то, что нужно! В качестве дальнейших усовершенствований, можно предложить скрывать этот комментарий, заменяя его красным флажком - а отображать собственно комментарий только при наведении курсора мышки. Но это уже, как вы понимаете, задача связанная исключительно с дизайном и javascript, а решение сегодняшнего боевого примера на этом считаю успешно законченным.

Подводя итог, сегодня мы научились объединять две и более колонок в одну при отображении списка, и это - ценой всего 10 строк XSL-преобразования (остальные строки нам сгенерировал дизайнер).

Для вашего удобства, я разместил в интернете уже готовый исходный код XSL-преобразования обсуждавшегося примера: можете скачать и использовать в собственных целях.

В следующей статье серии рассмотрена вариация этой задачи и реализован способ по отображению колонки в виде дополнительной строки в таблице.

P.S. Если вам понравилась статья, не забудьте подписаться на мой блог :)