Введение
Достаточно часто встречается задача быстрого нахождения нужного или нужных элементов в списке на узле SharePoint. При этом требуется применять достаточно сложные фильтры, а не просто четкого соответствия введенных данных какой-то колонке списка.
Например, у вас есть список клиентов, который хранится в виде списка на узле SharePoint. Требуется создать решение, в котором пользователи смогут искать/фильтровать клиентов по Фамилии и Организации.
Метод представленный ниже, описан в некоторых англоязычных статьях и поэтому я не претендую на оригинальность и на авторство данного подхода. Однако, в связи с тем, что достаточно часто встречаются данные проблемы у разработчиков, я и о описываю в данной статье.
Суть решения.
Допустим список называется Contacts и у вас установлена англоязычная версия SharePoint.
- Создаем страницу для отображения результатов поиска/фильтрации
- Создаем aspx страницу, на которой размешена веб-часть, отображающая список контактов
- Настраиваем список так, чтобы он получал параметр для фильтрации из URL, например SearchStr.
- Настраиваем этот список на фильтрацию таким образом, чтобы показывались только контакты, содержащие в фамилии или названии организации подстроку из SearchStr
- Создаем страницу для ввода строки для поиска/фильтрации
- Создаем aspx страницу, на которой размешаем веб-часть «Form Web Part»
- Изменяем ее настройки, чтобы она содержала поле ввода и фрейм
- В данной веб-части Создаем JavaScript, который срабатывал бы на изменение текста в поле ввода и динамически менял адрес страницы во фрейме (как раз адрес страницы для отображения результатов с передачей введенного текста как параметра)
Детальное описание реализации решения.
1. Создание и настройка страницы отображения результатов поиска/фильтрации
- Запустите SharePoint Designer 2007 и откройте нужный узел
- Создайте aspx страницу с названием Result.aspx (без использования мастре-страницы)
- В меню "Data View" выберите пункт "Insert DataView"
- Перетащите список Contacts с панели Data Source Library на страницу Result.aspx
- Настройте список для отображения нужных вам колонок, например, "Last name", "First Name", "Company". Для этого сделайте следующие действия:
i. Нажмите на стрелочку с правой стороны веб-части, после чего появится меню "Common Data View Task"
ii. Выберите пункт «Edit Columns…»
iii. В появившемся окне выберите нужные поля.
- Добавьте новый параметр с названием SearchStr для только что созданной веб-части Contacts.
i. Откройте меню "Common Data View Task" и выберите пункт “Parametrs…”
ii. Добавьте новый параметр с названием SearchStr
iii. Установите свойства данного параметра такими: "Parameter Source" установите в "Query String", а "Query String Variable" — в «SearchStr»
- Установите фильтр для данной веб-части.
i. Откройте меню "Common Data View Task" и выберите пункт “Filter…”
ii. Установите фильтр так, чтобы поле LastName или поле Company содержало SearchStr
iii. Можно настроить и более сложные фильтры, выбрав галочку «Add XSLT Filtering» и нажав кнопку «Edit»
- При необходимости можно улучшить данную веб-часть, например установив параметры сортировки, оформления, отображения «Данные не найдены» вместо пустого набора, в случае если данные не найдены, и т.д.
2. Создаем страницу для ввода строки для поиска/фильтрации
- Создаете или откройте страницу, на которой вы планируете разместить элементы для ввода данных и отображения результатов
- Разместите на странице веб-часть "Form web part"
- Удалите кнопку «GO» и добавьте теги Break и Inline Frame чуть ниже оставшегося в веб-части поля ввода (теги Break и Inline Frame просто перетаскиваются из панели Toolbox)
- Перейдите к коду и внутри тегов оформления только что добавленной веб-части найдите блок «<![CDATA»
- Bзмените тег < input >, который находится внутри элемента «<![CDATA» следующим образом (задаем имя полю ввода и обработчик события на нажатие клавиш)
<input type="text" style="border:1px gray solid;" id="contactSearch" name="contactSearch" onkeyup="searchChange(this);"/>
- Bзмените тег <iframe>, который находится внутри элемента «<![CDATA» следующим образом (это нужно для того чтобы задать имя фрейму, начальную страницу и начальные размеры)
<iframe id="contactFrame" style="width:100%; height: 100%; margin-bottom:-30px; padding-bottom:30px;" src="Results.aspx scrolling="auto" frameborder="no" target="_top">
</iframe>
- Внутри тега «<![CDATA» добавьте код JavaScript? Таим образом, чтобы но был похож на следующий
<![CDATA[<div style="height:400px;">
<script type="text/javascript">
var timeout = -1;
function searchChange(textbox) {
var text = textbox.value;
if (timeout != -1) clearTimeout(timeout);
timeout = setTimeout("commitSearch('" + text + "')", 400);
}
function commitSearch(text) {
var frame = document.getElementById("contactFrame");
frame.src="Results.aspx?SearchStr="+text;
}
</script>
<div class="ms-listdescription">используйте текстовые поля ниже для поиска контактов по фамилии или по названии компании.
</div>
<input type="text" style="border:1px gray solid;" id="contactSearch" name="contactSearch" onkeyup="searchChange(this);"/><br/>
<iframe id="contactFrame" style="width:100%; height: 100%; margin-bottom:-30px; padding-bottom:30px;" src="Results.aspx" scrolling="auto" frameborder="no" target="_top">
</iframe>
</div>]]>
3. Сохраните и протестируйте
Выводы
В данной статье представлен метод реализации удобной фильтрации и поиска элементов списка или библиотеки документов, что является очень важным для широкого круга задач, таких как: поиск клиентов, поиск документов, поиск задач и т.д.
Поиск можно улучшить за счет добавления более сложные фильтры (настройка XSLT фильтров) и существенно изменить отображение данных под потребности конкретной реализации.