Smart Tiles: обзор решения

Введение

На любой странице интранета есть несколько адресов, которые открывают гораздо чаще остальных: HR-портал, система учёта рабочего времени, библиотека документов команды, служба поддержки. Smart Tiles превращает эти адреса в панель крупных цветных плиток со значками, которые посетители узнают с первого взгляда и открывают одним щелчком.

Smart Tiles — это веб-часть SharePoint Framework для современных страниц SharePoint Online. Автор страницы добавляет её на страницу, создаёт плитки прямо на странице в режиме редактирования — без списков и файлов конфигурации — и публикует. В этой статье представлена веб-часть: где она работает, какой может быть плитка и какие настройки определяют вид панели в целом.

Где работает Smart Tiles

Smart Tiles развёртывается в клиенте Microsoft 365 из каталога приложений одним пакетом. После развёртывания веб-часть доступна на каждом сайте клиента без дополнительной активации. Её можно разместить:

• на любой современной странице — странице сайта, новостной записи или домашней странице;
• в обычном разделе, в разделе с колонками или в разделе во всю ширину, где плитки растягиваются на весь экран;
• на странице приложения с одной веб-частью, где плитки являются единственным содержимым страницы.

Веб-часть следует теме сайта, включая тёмные темы и цветовые варианты раздела, а её интерфейс доступен на 44 языках, которые выбираются автоматически по языку пользователя.

Какой может быть плитка

Каждая плитка — это ссылка с собственным оформлением. Свойства плитки делятся на четыре группы.

Тексты. У плитки есть заголовок и необязательное описание. Описание выводится мелким текстом под заголовком и во всплывающей подсказке плитки; его можно отключить для всей панели, если нужен компактный вид.

Ссылка. Плитка может открывать страницу, документ или любой веб-адрес — в том же окне или в новой вкладке. Помимо обычных ссылок, плитка может начать написание письма (mailto:), набрать номер (tel:), отправить текстовое сообщение (sms:) или открыть чат или канал Microsoft Teams (msteams:). Ссылка на видео YouTube распознаётся автоматически: плитка может показывать эскиз видео в качестве фона и получает кнопку воспроизведения вместо значка.

Внешний вид. У каждой плитки есть цвет фона и цвет шрифта, выбираемые из шести акцентных цветов темы сайта, палитры предопределённых цветов, чёрного и белого. Вместо цвета плитка может нести фоновое изображение — указанное в виде URL-адреса или выбранное из библиотеки документов сайта. Значок берётся из одного из пяти наборов — Standard (Fluent UI), File type, App (Microsoft 365), Azure и Vitextra — или заменяется собственным изображением, например логотипом компании. Плитка бывает шести размеров — от «Очень маленький» до «Во всю ширину».

Аудитория. Плитку можно показывать только участникам выбранных групп SharePoint сайта или групп Microsoft Entra ID. Плитки без аудитории видны всем.

Настройки, определяющие вид всей панели

В области свойств веб-части находятся настройки, которые применяются сразу ко всем плиткам:

• Размер шрифта и Размер значка — семь и шесть ступеней соответственно;
• Внутренний Отступ, Отступ значка и Внешний Отступ — пространство внутри плитки, под значком и между плитками;
• Тень — мягкая тень под значками;
• Показывать заголовки и Показывать описания — тексты на плитках;
• Эффект наведения — один из девяти визуальных эффектов, таких как яркость, размытие или оттенки серого, применяемый, когда указатель находится над плиткой или плитка получает фокус с клавиатуры, с настраиваемой силой и длительностью.

Редактирование на странице

Всё редактирование выполняется в режиме редактирования страницы, непосредственно на плитках:

• Добавить плитку добавляет новую плитку в конец панели;
• контекстное меню плитки открывает её свойства, меняет её размер, цвета и значок или удаляет её;
• порядок плиток меняется перетаскиванием;
• Экспорт сохраняет плитки в файл JSON, а Импорт загружает их на другой странице или сайте, заменяя существующие плитки или добавляя к ним.

Веб-часть хранит плитки в свойствах самой страницы. На сайте не создаются списки, и ничего не покидает клиент: плитки публикуются вместе со страницей и следуют её версиям и процессу утверждения.

Посетители

Посетитель видит лёгкую панель. Инструменты редактирования загружаются только в режиме редактирования, поэтому опубликованная страница загружает лишь то, что нужно для показа плиток. Программы чтения с экрана объявляют плитки как ссылки, плитки можно выбирать и активировать с клавиатуры, а эффект наведения учитывает настройку «уменьшить движение» операционной системы. Ссылки, открывающиеся в новой вкладке, изолированы от открывшей их страницы.

Лицензирование

Smart Tiles устанавливается с пробным периодом. Группа Информация в области свойств показывает состояние лицензии, версию веб-части, дату начала подписки и клиент, которому она назначена. По окончании пробного периода веб-часть показывает уведомление вместо плиток, пока подписка не будет активирована.

Подробнее о продукте: https://vitextra.com/ru/products/smart-tiles