Пример построения дерева навигации для 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).

При возникновении вопросов/предложений, готов подискутировать в комментариях.

Скачать архив с примером