Пример построения дерева навигации для SharePoint 2013 на JavaScript
В SharePoint есть возможность включения представления в виде дерева, с помощью которого зачастую можно облегчить навигацию по библиотекам документов и спискам, приблизив интенфейс к проводнику windows.
Для того, чтобы на сайте под или всесто области быстрого запуска отобразить дерево навигации необходимо задать соответствующую настройку:
После включения представления дерева навигации мы увидим примерно следующую картину:
Удобно? В некоторых случаях да, в некоторых нет.
Скриншот выше сделан из-под администратора, рядовому пользователю в зависимости от прав будет видно меньше узлов, но, тем не менее, лишние узлы будут. А хочется их избежать.
Так же, к некоторому роду минуса отнесу следующее:
А именно - неудобство просмотра длинных наименований папок. Прокрутка конечно появляется и при наведении курсора на наименования виден элемент подсказки, но попробуем сделать немного удобнее.
Ниже я опишу процесс создания и деплоя небольшого скрипта, который позволит достичь следующего:
Из скриншота видно:
- Количество узлов другое (а мы на том же сайте, под тем же пользователем, через несколько минут после предыдущего скриншота);
- Длинное наименование переносится на несколько строк (вопрос отчасти эстетический, мне лично так удобнее);
- Что-то с алфавитным порядком. Порядок вывода мы переопределили, задав исключение.
А теперь рецепт приготовления:
- jQuery - dom запросы, основа для плагинов;
- jsTree - плагин к jQuery - визуализация дерева и отработка событий дерева;
- SPServices - получение данных по узлам дерева (опционально может быть исключена и заменена на JSOM);
- и наш клиентский код, о котором ниже.
Версии связки библиотек следующие:
- jquery-1.10.2 - последняя версия 1.x ветки на момент написания кода примера;
- jquery-migrate-1.2.1 - небольшой твик над jQuery для совместимости;
- jquery.SPServices-2013.01 - последняя версия на момент написания кода примера.
Обновление версий - не большая проблема, но требующая проверки.
Разместить файлы библиотек можно в _layouts или библиотеке стилей, в нашем случае это не принципиально. Добавим в /_layouts/15/. Порядок определения следующий:
<script type="text/javascript" src="/_layouts/15/_cib/libs/jQuery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/_layouts/15/_cib/libs/jQuery/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="/_layouts/15/_cib/libs/SPServices/jquery.SPServices-2013.01.min.js"></script> <link type="text/css" rel="stylesheet" href="/_layouts/15/_cib/libs/jsTree/themes/default/style.css"> <script type="text/javascript" src="/_layouts/15/_cib/libs/jsTree/jquery.jstree.js"></script>
Весь кастом обернут в отдельные .js и .css:
- cibTreeView/custom.css
- cibTreeView/_cibSPTreeView.js
Подключаем их после jQuery и собратии:
<link type="text/css" rel="stylesheet" href="/_layouts/15/_cib/apps/cibTreeView/custom.css"> <script type="text/javascript" src="/_layouts/15/_cib/apps/cibTreeView/_cibSPTreeView.js"></script>
Описывать содержимое _cibSPTreeView.js не буду, там порядка 270 строк. В дерево можно подгружать как библиотеки, так и списки. За раз подгружается только один уровень, загрузка уровня происходит при открытии узла. Скрипт работает с адресной строкой для определения текущего узла и его раскрытия, т.е. если после навигации ссылку скопировать и вставить в другой вкладке/браузере, раскроется соответственный элемент дерева.
Часть настроек производится в объекте cibSPTreeViewScope:
var cibSPTreeViewScope = { // Селектор dom элемента, который будет заменен на дерево контента webPartSelector: "#ctl00_PlaceHolderLeftNavBar_TreeViewNavigationManagerV4", // ID создаваемого элемента дерева cibSPTreeViewID: "cibSPTreeView", // Массив из DisplayNames библиотек документов, которые надо исключить из дерева excludeNodes: ["Документы", "wfpub", "Активы сайта", "Документы семейства веб-сайтов", "Библиотека стилей", "Изображения семейства веб-сайтов", "Коллекция веб-частей", "Коллекция главных страниц", "Коллекция решений", "Коллекция тем", "Коллекция шаблонов списков", "Преобразованные формы", "Страницы сайта", "Шаблоны форм"], // Массив из DisplayNames элементов-исключений сортировки, указанные в массиве узлы будут выведены в начале customNodesOrdering: ["Общие документы", "Пустая библиотека"], nodeOpenningTriesNumber: 10, // Максимальное число попыток раскрыть узел после открытия ссылки nodeOpenningTimeout: 50 // Время задержки в мс между попытками раскрыть узел }
Установить дерево можно добавив в определение masterpage:
<script type="text/javascript" src="/_layouts/15/_cib/libs/jQuery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/_layouts/15/_cib/libs/jQuery/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="/_layouts/15/_cib/libs/SPServices/jquery.SPServices-2013.01.min.js"></script> <link type="text/css" rel="stylesheet" href="/_layouts/15/_cib/libs/jsTree/themes/default/style.css"> <script type="text/javascript" src="/_layouts/15/_cib/libs/jsTree/jquery.jstree.js"></script> <link type="text/css" rel="stylesheet" href="/_layouts/15/_cib/apps/cibTreeView/custom.css"> <script type="text/javascript" src="/_layouts/15/_cib/apps/cibTreeView/_cibSPTreeView.js"></script>
После этого достаточно включить в штатных настройках вывод стандартного дерева, которое будет бережно скрыто и заменено на кастомное.
Для продакшена настройки исключений и сортировки можно вынести в список, так же можно сделать вариативности вида дерева в зависимости от причастности к группам, etc.
Так же можно использовать кеширование в браузере, например, с помощью jStorage.
Хочу еще раз отметить, что данный пример реализации дерева навигации целесообразен в редакции SharePoint Foundation, когда не возможен вариант навигации по управляемым метаданным (Managed Metadata Navigation).
При возникновении вопросов/предложений, готов подискутировать в комментариях.
Опубликовано: 29.01.2014
Автор: Андрей Кольтяков