SharePoint 2016. Кастомизация меню SuiteBar

Продолжаем тему кастомизации SuiteBar. В прошлом посте я показал как можно изменить SuiteBar с помощью PowerShell. На этот раз изменение меню и App Launcher.

Начнем с того как работает меню SuiteBar в SharePoint 2016.

Как это работает

В SharePoint 2016 SuiteBar формируется и на стороне клиента и на стороне сервера (меню настройка, справка, пользователь). Для управления элементами, формируемыми на стороне сервера можно использовать CustomActions, как это было в предыдущих версиях SharePoint.

Формирование SuiteBar на стороне клиента появилась в SharePoint 2016. В коде страницы можно увидеть следующий JavaScript-код, который инициализирует рендеринг:

SuiteNavRendering.RenderSuiteNav(
{
  top:'suiteBarTop', 
  version:2, 
  **dataEndpoint:'Microsoft.SharePoint.Portal.SuiteNavData.GetSuiteNavData',**
  culture:'en-US', 
  signInLink:'/_layouts/15/Authenticate.aspx?Source=\u00252FSitePages\u00252FHome\u00252Easpx', 
  brandingText:'Ай-Теко', 
  brandingLogo:'http://i-teco.ru/source/images/logo_2014_h.png', 
  brandingLogoLink:'/', 
  brandingLogoTitle:'Ай-Теко'
});

Некоторые параметры в этом скрипте (имена, начинающиеся с branding) задаются с помощью PowerShell. Как это делается можно посмотреть в моём предыдущем посте о кастомизации SuiteBar.

Важным здесь является параметр dataEndpoint, он указывает где брать данные для формирования SuiteBar. Если мы откроем указанный URL вида:

http://spapp**/_api/Microsoft.SharePoint.Portal.SuiteNavData.GetSuiteNavData**

то увидим данные для SuiteBar в виде JSON:

JavaScript-код формируется серверным контролом Microsoft.SharePoint.WebControls.SuiteNavControl. Он же берет параметры веб-приложения для формирования branding*-свойств.

Теперь ясно что надо сделать для кастомизации SuiteBar:

  • Создать свой сервис, расширив REST API своим endpoint'ом
  • Подменить клиентский код, указав ссылку на свой сервис

API для SuiteBar

Как расширить стандартный REST API в SharePoint 2016 я уже писал. Здесь описывать сам сервис я не буду - исходные коды решения опубликованы, можно посмотреть там.

От сервиса нам нужен единственный метод, который будет возвращать строку, содержащую JSON-данные. Метод (или свойство) сервиса должно называться GetSuiteNavData. Это важно, иначе решение не будет работать.

Данные для SuiteBar

Классы, описывающие SuiteBar, есть в сборке SharePoint, но они приватные. Логики они не содержат, только набор свойств. Поэтому просто опишем три класса как показано на диаграмме, просто скопировав одноименные приватные классы SharePoint:

Теперь переходим к формированию данных для SuiteBar. Все предельно просто: вот так выглядит метод в сервисе, который возвращает данные для SuiteBar:

private SuiteNav GetSuiteNav()
{
    return new SuiteNav
    {
        DoNotCache = false,
        SPSuiteVersion = 2,
        NavBarData = new SuiteNavBarData
        {
            ClientData = null,
            CurrentMainLinkElementID = "ShellSharepoint",
            StringsOverride = null,
            IsAuthenticated = true,
            UserDisplayName = "UserDisplayName",
            AboutMeLink = new SuiteNavLink("ShellAboutMe", "About Me", null, "#ShellAboutMe"),
            HelpLink = new SuiteNavLink("ShellHelp", "Help", null, "#ShellHelp"),
            SignOutLink = new SuiteNavLink("ShellSignOut", "Sign Out", null, "#ShellSignOut"),
            CurrentWorkloadHelpSubLinks = new[] { new SuiteNavLink("HelpSubLink", "HelpSubLink", null, "#HelpSubLink") },
            CurrentWorkloadSettingsSubLinks = new[] { new SuiteNavLink("SettingsSubLink", "SettingsSubLink", null, "#SettingsSubLink") },
            CurrentWorkloadUserSubLinks = new[] { new SuiteNavLink("UserSubLink", "UserSubLink", null, "#UserSubLink") },
            WorkloadLinks = new List<SuiteNavLink>
            {
                new SuiteNavLink("ShellDocuments", "ShellDocuments", null, "#ShellDocuments"),
                new SuiteNavLink("ShellFAQ", "ShellFAQ", null, "#ShellFAQ"),
                new SuiteNavLink("ShellChat", "ShellChat", null, "#ShellChat"),
                new SuiteNavLink("ShellVideo", "ShellVideo", null, "#ShellVideo"),
                new SuiteNavLink("ShellCRM", "ShellCRM", null, "#ShellCRM"),
                new SuiteNavLink("ShellStar", "ShellStar", null, "#ShellStar"),
                new SuiteNavLink("ShellProject", "ShellProject", null, "#ShellProject"),
                new SuiteNavLink("ShellYammer", "ShellYammer", null, "#ShellYammer"),
                new SuiteNavLink("ShellExcel", "ShellExcel", null, "#ShellExcel"),
                new SuiteNavLink("ShellPowerBI", "ShellPowerBI", null, "#ShellPowerBI"),
                new SuiteNavLink("ShellCheck", "ShellCheck", null, "#ShellCheck"),
                new SuiteNavLink("ShellSearch", "ShellSearch", null, "#ShellSearch"),
            }
        }
    };
}

Полученный объект надо сериализовать в JSON и вернуть в виде строки. В моем случае метод сервиса с сериализацией выглядит вот так::

[ClientCallableMethod]
public string GetSuiteNavData()
{
    var suiteNav = GetSuiteNav();
    var serializer = new DataContractJsonSerializer(typeof (SuiteNav));
    using (var ms = new MemoryStream())
    {
        serializer.WriteObject(ms, suiteNav);
        return Encoding.Default.GetString(ms.ToArray());
    }
}

Некоторые свойства класса SuiteNav:

  • DoNotCache - флаг, указывающий разрешено ли кеширование;
  • SPSuiteVersion - версия SuiteBar, для SharePoint 2016 OnPrem указываем 2;

Свойства класса SuiteNavBarData:

  • CurrentMainLinkElementID - просто указываем "ShellSharepoint";
  • UserDisplayName - имя текущего пользователя, можно указать любое значение;
  • IsAuthenticated - авторизован ли пользователь;
  • CurrentWorkloadHelpSubLinks - дополнительные пункты меню Справка;
  • CurrentWorkloadSettingsSubLinks - дополнительные пункты меню Настройка;
  • CurrentWorkloadUserSubLinks - дополнительные пункты меню Пользователя;
  • WorkloadLinks - App Launcher;

Дополнительные пункты меню и имя пользователя в интерфейсе выглядят примерно так:

Свойства класса SuiteNavLink (используется для всех ссылок) понятны без описания.

Данные для SuiteBar сформированы, сервис, который их возвращает есть. осталось подменить endpoint.

Регистрация Endpoint для SuiteBar

Чтобы зарегистрировать созданный endpoint необходимо подменить свойство SuiteNavRestMethod контрола SuiteNavControl. Для этого переопределяем его привязку к делегат-контролу SuiteBarDelegate:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="SuiteBarDelegate" 
           Sequence="50" 
           ControlClass="Microsoft.SharePoint.WebControls.SuiteNavControl"
           ControlAssembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
           xmlns="http://schemas.microsoft.com/sharepoint/">
    <Property Name="SuiteNavRestMethod">CustomSuiteNav/GetSuiteNavData</Property>
  </Control>
</Elements>

Вот и всё. Мы создали новый сервис для формирования SuiteBar и указали ссылку на него в SuiteNavControl. Результат в браузере:

SharePoint 2016 App Launcher

SharePoint 2016 App Launcher

AppLauncher CSS

Для создаваемых плиток на стороне клиента формируется атрибут id по правилу:

O365_AppTile_**[SutieNavLink.Id]**

Таким образом, для ссылки:

new SuiteNavLink
{
    Id = "ShellFAQ",
    Title = "ShellFAQ",
    Url = "#ShellFAQ"
}

На клиенте будет сформирована плитка с id = O365_AppTile_ShellFAQ. Это пригодится для описания стилей.

SharePoint 2016 App Launcher

SharePoint 2016 App Launcher

Также можно использовать стандартный шрифт для иконок office365icons. В моём случае CSS для кнопки ShellFAQ:

#O365_AppTile_ShellFAQ .o365cs-nav-appTileIcon:before {
    content: '\e006';
}

Пользуемся!

Исходные коды

Исходные коды доступны на сайте http://code.msdn.microsoft.com.

Смотрите также

Кастомизация SuiteBar с помощью PowerShell

Расширение REST API в SharePoint

Виталий Жуков

Виталий Жуков

SharePoint архитектор, разработчик, тренер, Microsoft MVP (Office Development). Более 15 лет опыта работы с SharePoint, Dynamics CRM, Office 365, и другими продуктами и сервисами Microsoft.

Смотрите также

Новый сайт группы SharePoint. Как это работает

Новый сайт группы SharePoint. Как это работает

SharePoint 2019 Preview

SharePoint 2019 Preview

Управление большими списками/библиотеками в SharePoint

Управление большими списками/библиотеками в SharePoint

SharePoint 2013/2016. Настройка хлебных крошек

SharePoint 2013/2016. Настройка хлебных крошек

SharePoint 2016. Кастомизация SuiteBar

SharePoint 2016. Кастомизация SuiteBar

Домашняя страница сайта SharePoint

Домашняя страница сайта SharePoint

Презентация и скрипты со встречи сообщества по SharePoint и Office 365

Презентация и скрипты со встречи сообщества по SharePoint и Office 365

PowerShell DSC. SharePoint

PowerShell DSC. SharePoint

PowerShell DSC. Сертификат для шифрования пароля

PowerShell DSC. Сертификат для шифрования пароля

PowerShell DSC. Учетные записи

PowerShell DSC. Учетные записи

Встреча сообщества по SharePoint и Office 365

Встреча сообщества по SharePoint и Office 365

SharePoint 2016. QR-code

SharePoint 2016. QR-code

Возможности SharePoint 2010/2013/2016

Возможности SharePoint 2010/2013/2016

Gmail IIS SMTP relay

Gmail IIS SMTP relay

SharePoint 2016. Извещения мозаикой

SharePoint 2016. Извещения мозаикой

Сертификация SharePoint по-новому

Сертификация SharePoint по-новому

SharePoint. Получение списка сайтов

SharePoint. Получение списка сайтов

Планирование фермы SharePoint

Планирование фермы SharePoint

Обзор SharePoint Education. Часть 3

Обзор SharePoint Education. Часть 3

SharePoint Excel Services. Отображение диаграммы на странице

SharePoint Excel Services. Отображение диаграммы на странице

SharePoint 2016 Release Candidate

SharePoint 2016 Release Candidate

Обзор SharePoint Education. Часть 2

Обзор SharePoint Education. Часть 2

Обзор SharePoint Education. Часть 1

Обзор SharePoint Education. Часть 1

SharePoint 2013 Образование. Установка и настройка

SharePoint 2013 Образование. Установка и настройка

SharePoint 2016 IT Preview

SharePoint 2016 IT Preview

SharePoint и SMS. Часть 2. Регистрация OMS-сервиса

SharePoint и SMS. Часть 2. Регистрация OMS-сервиса

SharePoint и SMS. Часть 1. Создание OMS веб-сервиса

SharePoint и SMS. Часть 1. Создание OMS веб-сервиса

SharePoint Day: 14 декабря, Москва

SharePoint Day: 14 декабря, Москва

RuSUG 17.10.2013. Презентация с моего доклада о новом поиске в SharePoint 2013

RuSUG 17.10.2013. Презентация с моего доклада о новом поиске в SharePoint 2013

SharePoint 2013 Ribbon API. Версии 14.3 и 15.4

SharePoint 2013 Ribbon API. Версии 14.3 и 15.4

Встреча RuSUG 17-го октября

Встреча RuSUG 17-го октября

SharePoint 2013. Служба ServiceDesk за 8 часов либо правильный проект

SharePoint 2013. Служба ServiceDesk за 8 часов либо правильный проект

SharePoint 2010/2013. Локализация данных

SharePoint 2010/2013. Локализация данных

Список возможностей SharePoint 2013

Список возможностей SharePoint 2013

SharePoint 2013. Типы полей

SharePoint 2013. Типы полей

SharePoint 2013 Enterprise Search. Часть 2. Создание обработчика контента

SharePoint 2013 Enterprise Search. Часть 2. Создание обработчика контента

SharePoint 2013 Enterprise Search. Часть 1. Логическая архитектура

SharePoint 2013 Enterprise Search. Часть 1. Логическая архитектура

SharePoint Ribbon. Создание многоуровневого меню

SharePoint Ribbon. Создание многоуровневого меню

SharePoint Ribbon. Использование ColorPicker'а

SharePoint Ribbon. Использование ColorPicker'а

Разработка для SharePoint. Как это было и как это будет

Разработка для SharePoint. Как это было и как это будет

SharePoint. История социализма за 10 лет

SharePoint. История социализма за 10 лет

SharePoint 2013 Preview

SharePoint 2013 Preview

Использование штрихкодов в SharePoint 2010

Использование штрихкодов в SharePoint 2010

Unable to locate the xml-definition for FieldName

Unable to locate the xml-definition for FieldName

SharePoint 2010. Апрельский накопительный пакет обновлений

SharePoint 2010. Апрельский накопительный пакет обновлений

Не удалось найти XML-файл в указанном расположении

Не удалось найти XML-файл в указанном расположении

Служба синхронизации профилей пользователей. Ошибки

Служба синхронизации профилей пользователей. Ошибки

Делаем сайт на SharePoint 2010. Построение иерархии страниц

Делаем сайт на SharePoint 2010. Построение иерархии страниц

Делаем сайт на SharePoint 2010. Брендинг Wiki-страниц

Делаем сайт на SharePoint 2010. Брендинг Wiki-страниц

Делаем сайт на SharePoint 2010. Оптимизация

Делаем сайт на SharePoint 2010. Оптимизация

Делаем сайт на SharePoint 2010. Брендинг

Делаем сайт на SharePoint 2010. Брендинг

Обработка большого количества элементов в SharePoint

Обработка большого количества элементов в SharePoint

Получение уникальных значений поля списка

Получение уникальных значений поля списка

DeskWork 5. Функциональность (продолжение)

DeskWork 5. Функциональность (продолжение)

Сокрытие информации о пользователе создавшем/изменившем элемент

Сокрытие информации о пользователе создавшем/изменившем элемент

Error : Code blocks are not allowed in this file

Error : Code blocks are not allowed in this file

SharePoint Client Object Model. Управляемый код

SharePoint Client Object Model. Управляемый код

Использование контрола HtmlEditor. Часть 3

Использование контрола HtmlEditor. Часть 3

SharePoint 15 SDK

SharePoint 15 SDK

PeopleEditor и Internet Explorer 9

PeopleEditor и Internet Explorer 9

Использование контрола HtmlEditor. Часть 2

Использование контрола HtmlEditor. Часть 2

Использование контрола HtmlEditor. Часть 1

Использование контрола HtmlEditor. Часть 1

Пропадающий контрол выбора представления списка

Пропадающий контрол выбора представления списка

Развертывание библиотеки документов с файлами

Развертывание библиотеки документов с файлами

Отключенные учетные записи и PeoplePicker

Отключенные учетные записи и PeoplePicker

Пропадающий TextBox в Telerik Reporting

Пропадающий TextBox в Telerik Reporting

Длительные операции в SharePoint. Request timed out

Длительные операции в SharePoint. Request timed out

Длительные операции в SharePoint. Изнутри

Длительные операции в SharePoint. Изнутри

Длительные операции в SharePoint. Снаружи

Длительные операции в SharePoint. Снаружи

DeskWork. Версия 5.1

DeskWork. Версия 5.1

DeskWork 5. Часть 2. Функциональность

DeskWork 5. Часть 2. Функциональность

DeskWork 5. Часть 1. Установка

DeskWork 5. Часть 1. Установка

SharePoint 2010. Random ListItem

SharePoint 2010. Random ListItem

Custom ListDefinition. Отключаем диалоги

Custom ListDefinition. Отключаем диалоги

SharePoint 2010 UpdatePanel. Request Notification

SharePoint 2010 UpdatePanel. Request Notification

Получение размера вложений SPListItem'а

Получение размера вложений SPListItem'а

SharePoint 2010. Переопределение форм типа содержимого

SharePoint 2010. Переопределение форм типа содержимого

SharePoint 2007/2010. Привязываем EventReceiver к типу содержимого

SharePoint 2007/2010. Привязываем EventReceiver к типу содержимого

Изменяем appSettings в config-файле

Изменяем appSettings в config-файле

SharePoint 2010. Добавляем сборку в пакет

SharePoint 2010. Добавляем сборку в пакет

SharePoint 2007/2010. The security validation for this form is invalid

SharePoint 2007/2010. The security validation for this form is invalid

SharePoint 2010. JavaScript IntelliSence

SharePoint 2010. JavaScript IntelliSence

SharePoint 2010. Локализация SiteDefinition

SharePoint 2010. Локализация SiteDefinition

SharePoint 2007. Получение данных из нескольких списков и узлов

SharePoint 2007. Получение данных из нескольких списков и узлов

SharePoint 2007. Максимальное/минимальное значение поля в списке

SharePoint 2007. Максимальное/минимальное значение поля в списке

SharePoint 2007. Свой контрол на панели свойств веб-парта

SharePoint 2007. Свой контрол на панели свойств веб-парта

SharePoint 2007. База данных содержимого

SharePoint 2007. База данных содержимого

SharePoint 2007. Проверка на наличие элемента в списке

SharePoint 2007. Проверка на наличие элемента в списке