Красивые информативные меню Sharepoint с помощью SPJS-tiles

В Sharepoint 2013/2016/2019, а так же в классическом интерфейсе Sharepoint Online существует список «Рекомендуемые ссылки» («Promoted Links») позволяющий выводить на страницу ссылки в виде плиток (tiles). Однако, его возможности сильно ограничены. Например нельзя менять цвет и размер плитки. Кроме того, если необходимо разместить такие ссылки в нескольких местах на сайте придётся создавать несколько списков, что очень не удобно для администрирования.

Скрипт SPJS-tiles в значительно расширяет функциональные возможности  стандартных тайлов Sharepoint. С помощью него можно создавать удобные и красивые меню, например такие:

Меню, созданное с помощью spjs-tiles
Меню, созданное с помощью spjs-tiles

Установка и настройка скрипта очень простая:

  1. Качаем и распаковываем архив со скриптом.
  2. Копируем папку SPJS-Tiles в любое место в Shareppoint.
  3. Вставляем следующий код на страницу, где необходимо разместить меню
    1
    2
    3
    4
    5
    6
    <div id="spjs_tiles_placeholder" style="margin: 10px; float: left; clear: both;"></div>
    <script type="text/javascript" src="/Scripts/Tiles/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/Scripts/Tiles/SPJS-Tiles.js"></script>
    <script type="text/javascript">
    spjs.tiles.init("spjs_tiles_placeholder","MyTiles");
    </script>
  4. В строках 2 и 3, меняем пути до файлов скрипта.
  5. Сохраняем страницу, если всё сделано правильно, на странице появится такая картинка:

    SPJS_Tiles - создание списка

      SPJS-Tiles — создание списка

    По нажатию кнопки будет автоматически создан список «SPJS-Tles» со всем необходимыми полями.

  6. Дальше остается только заполнить список и получить красивое меню.
    Список SPJS_Tles
    Список SPJS-Tles

    Значения полей:

    • Title — идентификатор, который прописывается в строке
      1
      spjs.tiles.init("spjs_tiles_placeholder","MyTiles");

      В один список можно добавить несколько идентификаторов для размещения разных меню в различных частях сайта.

    • Text — название тайла.
    • Description  — описание, всплывающее при наведении мышки на тайл.
    • Target — выбор цели ссылки: то же, диалоговое или новое окно.
    • Image — путь до картинки тайла.
    • URL — ссылка
    • Index — место расположение тайла в меню в формате строка-столбец (если оставить пустым, тайл будет расположен последним).
    • FontAwesomeIcon — стиль иконки шрифта Fontawesome. Шрифт необходимо предварительно установить на сайт, либо использовать CDN.
      Путь до шрифт прописывается в скрипте из пункта 3.
    • FontAwesomeStyle — CSS-стиль иконки Fontawesome.
    • RefreshParent — обновлять текующую страницу при переходе по ссылке.
    • BgColor — фоновый цвет тайла в формате RGB.
    • TileSize — размер тайла, либо выбор 75,100,150, либо собственное значение.