Рассмотрим различные способы отображения контента на основе SharePoint, создадим веб-ресурс для работы с документами

 

Платформа SharePoint предоставляет большое количество возможностей для работы с веб-контентом. Это создание корпоративного сайта (портала) для работы с офисными документами, поиском и фильтрацией данных, а также блога, wiki-страниц с различными досками опроса, галереями, комментариями, голосованиями, отзывами, задачами, новостями и так далее. Весь перечень функций и подробное описание данного продукта можно прочитать здесь [ http://www.inspe.kz/microsoft/sharepoint/what_is_sharepoint.html , http://windowsten.ru/obzor-microsoft-sharepoint/ , https://technet.microsoft.com/ru-ru/library/mt346121(v=office.16).aspx ]. Сочетая несколько новых технологий, SharePoint выступает в качестве единого центра управления контентом между сотрудниками разных отделов, как внутри компании, так и за её пределами.

При начальном знакомстве с SharePoint можно использовать стандартные темы оформления веб-ресурса. Чтобы будущий сайт соответствовал современным требованиям бизнеса (компании), можно создать свой дизайн, подключая CSS-файлы и Java-скрипты, иконки, фоновые картинки и другое. Системному администратору, не имеющего понятия о верстке веб-сайтов, будет сложно одному справится с крупномасштабным продуктом, потому как необходимо не только проектировать и администрировать сайт, а и разбираться в CSS-коде.

Передо мной стала задача создать раздел корпоративного сайта для удобного размещения и обмена служебными документами, используя новые веб-технологии. Решено было внедрить MS SharePoint 2016. Первой причиной выбора стало то, что в центральном офисе уже давно данная платформа используется. Вторая – поддержка доменной авторизации. Третья – наличие функционала по работе с офисными документами. Если посмотреть дальше, то можно назвать и четвертую причину – связка с такими продуктами, как MS Exchange и MS Lync\Skype for Business [ http://www.bulygin.su/2012/06/sharepoint-exchange.html , https://technet.microsoft.com/ru-ru/library/jj150480(v=exchg.150).aspx ].    

Данная статья посвящена ознакомлению с SharePoint, приобретению общих понятий, рассмотрению стандартных функций. Чтобы не утонуть в большом количестве поверхностной и\или ненужной информации из интернета о создании сайтов на данной платформе, я решил поделиться своими наработками в SharePoint 2016 на конкретном примере.

 

Первые шаги

Для наших целей выделим минимум серверной мощности под SharePoint 2016, а именно: 80 Гб для системного диска, 8 ГБ ОЗУ, 4-х ядерный процессор, ОС Windows Server 2016, MS SQL Server 2016. Сама установка никаких вопросов не вызывает.

После инсталляции SharePoint будет доступна веб-средство настройки данного сервера - Центр администрирования SharePoint, с адресом http://server:port (см. рис. 1), с помощью которого происходит управление сайтами, серверами и службами, учётными записями, резервированием и восстановлением, обновлением и переносом, мониторинг работоспособности сервера и другое. 

Рисунок 1. Центр администрирования SharePoint.

Для начального конфигурирования [ https://habrahabr.ru/post/277191/ , https://technet.microsoft.com/ru-ru/library/cc262957.aspx ] заходим в первое меню Управление приложениями, жмём на ссылку Управление веб-приложениями, нажимаем кнопку Создать, в появившемся окне необходимо заполнить и\или отредактировать некоторые поля.

Далее снова переходим в Управление приложениями и жмём на ссылку Создание семейств веб-сайтов, заполняем поля Название, URL-адрес, Имя пользователя и выбираем из большого перечня шаблон сайта.       

Теперь браузером переходим по установленному пути http://b-spoint/sites/docs и видим небольшой набор готовых приложений (см. рис. 2), которые можно дополнять другими при необходимости: различные библиотеки (для документов, рисунков, вики-страниц, форм), списки, контакты, календарь, задачи, извещения, доска обсуждений, ссылки.  

Рисунок 2. Готовые приложения.

При желании можно изменить тему оформления веб-сайта. Для этого нужно на верхней панели зайти в настройки (кнопка с изображением шестерёнки) и в меню выбрать пункт Изменение оформления, станет доступно 18 тем, которые можно сначала просмотреть, а затем применить. 

 

Отображение контента на веб-страницах

Любой веб-контент располагается на страницах. На них мы поместим нужные библиотеки, заголовки, элементы управления.

Чтобы структурировать документы разных отделов, будет создано n+1 страниц, где n – количество отделов, “1” – главная страница с ссылками для перехода на другие страницы с библиотеками документов выбранного отдела. 

Чтобы создать новую веб-страницу, нужно зайти в Параметры->Контент сайта, открыть библиотеку Страницы сайта (см. рис. 2), нажать кнопу Создать, ввести понятное название, например, main и снова нажать кнопку Создать (все страницы в SharePoint имеют расширение .aspx). Сразу же создадим и второй файл it.aspx, который будет содержать библиотеку документов IT-отдела.

Затем новую страницу нужно сделать основной, так как по умолчанию основным является файл default.aspx. Для этого жмём на файле main.aspx (он выглядит как ссылка) и оказываемся на пустой странице. В левом верхнем углу жмём кнопку Страница, а потом – кнопку Сделать главной страницей.

 

Размещение контента

Один из самых важных первых шагов при создании веб-страницы – это разместить удобно контент, то есть определиться с размерами, количеством и типами компонентов, а также с цветовой гаммой. Ресурс должен быть не только рабочим (функциональным), но и приятным для визуального восприятия.

В нашем случае перечень компонентов состоит из заголовка и 20 ссылок. Следовательно, удобно сделать ссылки в виде крупных кнопок и разместить их в центре основной страницы в 2 ряда. Для этого в правом верхнем углу панели жмём кнопку Изменить и попадаем в режим редактирования страницы. Тут выбираем вкладку Формат текста, жмём кнопку Разметка текста, среди всего перечня останавливаемся на пункте Три столбца (в центральном будет размещаться основной контент, а боковые - препятствовать смещению к краям страницы).

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

Чтобы вписать CSS-код, необходимо иметь соответствующий компонент, а вернее веб-часть. Для этого переходим на вкладку Вставка, жмём кнопку Веб-часть, выбираем категорию Среда и контент, в которой – Редактор сценариев, и жмём кнопку Добавить. В данном контейнере в правом верхнем углу нажимаем на стрелочку (см. рис. 3), в меню выбираем пункт Изменить веб-часть, жмём ссылку Изменить фрагмент. В появившемся поле пишем код [ https://impuls-web.ru/kak-vyrovnyat-tekst-ili-blok-po-vertikali-v-css/ , https://webgyry.info/vertical-align-css ], который позволяет добавить нужный нам текст, а также отобразить картинку для большей наглядности:

<div style="; font-weight:bold;font-size:30px;color:#0084b4; text-align:left">

<img src="/sites/docs/SiteAssets/SitePages/main/pic1.jpg" style="vertical-align: middle;" />

Документы СИСТ</div>

Рисунок 3. Создание заголовка.

В режиме редактирования веб-части справа появляется дополнительная панель с настройками. В ней в разделе Вид выставим подходящую высоту и ширину контейнера (например, 140 и 1000 пикселей соответственно), а также отобразим его рамку, присвоив свойству Тип хрома значение Только граница.

 

Продолжение следует...