Условное форматирование настраивается в SharePoint Designer и позволяет задавать определенный формат столбцов/строк на основе заданных условий.
Так же условное форматирование позволяет скрывать/показывать содержание в зависимости от созданных условий.
Для демонстрации примеров я создала Список и разместила его на странице сайта SharePoint.
Далее откройте сайт в SharePoint Designer, для этого на верхней вкладке выберете
"Действия сайта" далее
"Изменить в SharePoint Designer".
В открывшемся окне SharePoint Designer выбрать пункт "Изменить домашнюю страницу сайта".
Изменить страницу можно другим способом. В левой части SharePoint Designer "Объекты сайта" необходимо выбрать "Все файлы" и найти месторасположение страницы, где размещен созданный Список. Выбрать нужную страницу, кликнуть по ней правой кнопкой и выбрать из выпадающего меню "Изменить файл в расширенном режиме".
В рабочей области SharePoint Designer вы увидите следующее:
Рабочая область поделена на две основные зоны, зона с кодом и зона конструктора. В нижней части экрана можно переключать режим отображения рабочей области (конструктор, с разделением и код). Для удобства я переключила в режим конструктор.
Предположим, что стоит задача отформатировать строки Списка следующим образом: Строки, где значение столбца "Остаток" равно "0" выделить синим цветом, а где значение равно "1" красным.
Для этого выбираем любое поле из столбца "Название", после чего активируется верхняя панель меню. В меню для "Инструменты для представлений списка" в разделе "Фильтры, сортировка и группировка" выбираем "Условное форматирование"и далее "Формат строки".
После выбора данного пункта меню появляется окно "Условия форматирования". В данное окно вводим следующее условие: Если поле "Остаток" равно "0" и нажимаем кнопку "Задать стиль", где и задаем цвет фона синим, нажимаем кнопку "ОК".
Аналогично задаем условие, когда поле "Остаток" не равно "0". Нажимаем кнопку "ОК".
После того как вы примените условие результат отобразится в редактируемом списке.
После создания формата можно изменить как стиль, так и условие, для этого необходимо выбрать вновь созданный форма и нажать "Изменить условие" или "Изменить стиль".
Для просмотра результата, необходимо сохранить изменения и просмотреть страницу в Браузере.
Сейчас продемонстрирую показ содержимого по условию. Задача будет состоять в том, чтобы показывать картинку только в тех строках, где значение столбца "Остаток" равно "0".
Для этого в созданном списке я создала столбец "Статус" в котором и будет отображаться картинка.
Первое, что необходимо сделать, это загрузить нужную картинку в SharePoint Designer. В нашем случае открываем в SharePoint Designer "Все файлы" далее "Images" и в пустую область перетаскиваем выбранную картинку.
Открываем страницу с созданным списком на редактирование (см.выше).
Выбираем любое поле из столбца "Статус" в верхней ленте меню выбираем "Вставка" далее "HTML код" и "Рисунок".
В ячейке появится пиктограмма картинки, но для того, чтобы вместо нее добавить загруженную картинку необходимо кликнуть по ней (пиктограмме) двойным щелчком мыши, после чего появится окно "Свойство картинки", где и нужно загрузить выбранную картинку.
Для того, чтобы задать условия при которому будет появляться необходимо правой кнопкой нажать на картинку и в выпадающем меню выбрать "Условное форматирование", после чего появится меню "Условное форматирование" (если его нет) в правой части.
В меню нажимаем на кнопку "Создать" и далее "Показать контент".
После выбора данного пункта меню появляется окно "Условия форматирования". В данное окно вводим следующее условие: Если поле "Остаток" равно "0" и нажимаем кнопку "ОК".
После того как вы примените условие результат отобразится в редактируемом списке.
Для просмотра результата, необходимо сохранить изменения и просмотреть страницу в Браузере (см. выше).
Расскажу про еще один метод, отличающий от предыдущего необходимостью более высоких познаний.
Задача будет состоять в том, чтобы отображать картинку 1 в виде зеленой галочке в тех строках, где значение столбца "Остаток" равно "0". А в тех строках, где значение столбца "Остаток" больше "0" будет отображаться картинка 2 в виде красного крестика.
 |
| Картинка 1 |
 |
| Картинка 2 |
Для начала необходимо загрузить нужные картинки в SharePoint Designer. В нашем случае открываем в SharePoint Designer "Все файлы" далее "Images" и в пустую область перетаскиваем выбранные картинки (см. выше).
Копируем URL ссылки расположения картинок.
Формат ссылки: "http://testport/test/images/Cross.gif"
Для этого в созданном списке я создала столбец "Статус" в котором и будут отображаться картинки.
Для того, чтобы создать столбец "Статус" необходимо перейти на страницу сайта SharePoint, где размещен список, выбрать любую запись из список, после чего активируется верхнее меню "Работа со списком".
В меню выбираем "Список" далее "Параметры списка".
На появившейся странице "Параметры списка" ищем раздел "Столбцы" и выбираем "Создать столбец":
- Имя столбца: Статус
- Тип данных этого столбца: Вычисляемый (вычисление по другим столбцам)
- Формула: =ЕСЛИ(Отсаток=0;"<DIV><IMG src=http://testport/test/images/Cross.gif></DIV>";ЕСЛИ(Отсаток>0;"<DIV><IMG src=http://testport/test/images/Tick.gif></DIV>"))
- Тип данных, возвращаемых этой формулой: Однострочный текст
Для того, чтобы вновь созданный столбец отобразился в Списке, необходимо настроить текущее представление. В верхнем меню выбираем "Список" и "Настроить представление".
В разделе "Столбцы" ищем созданный столбец "Статус" и ставим галочку для его отображения в представлении.
На странице сайта SharePoint список должен выглядеть следующим образом.
Теперь для того, чтобы перевести HTML код в картинку необходимо добавить JavaScript код, который отображает картинку.
На следующем шаге добавляем JavaScript код на страницу SharePoint, где расположен Список.
JavaScript код добавляется на страницу через добавление Веб-части редактор контента.
Для этого добавляем Веб-часть "Редактор контета". Выбираем "Действия сайта" далее "Изменить страницу" и "Добавить веб-часть".
Из списка веб-частей выбираем нужную.
Щелкаем на надпись веб-части для того, чтобы добавить контент и в верхнем меню выбираем HTML документ.
В открывшееся окно вставляем следующий код:
<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>
Данную веб-часть необходимо разместить после веб-части со Списком. При необходимости переместите веб-часть с кодом в самый конец.
Сохраните текущие изменения страницы, после чего вы увидите:
Используемые ресурсы
http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/
http://www.sharepointkings.com/2010/07/conditional-formatting-using-sharepoint.html
http://blogs.msdn.com/b/balsharfi/archive/2011/10/20/sharepoint-lists-conditional-formatting-using-sharepoint-designer-2010.aspx
http://sharepointpratik.blogspot.ru/2011/06/add-image-to-custom-list-with_30.html
