Теперь создадим элементы перехода (перенаправления) [ https://htmlweb.ru/html/form/input.php ] на другие страницы. Для этого нам также необходима веб-часть Редактор сценариев, которую помещаем сразу под заголовком и в поле вписываем следующий код:

<input type="button" value=" Документы отдела ИТ" style="float:left; margin-bottom:10px; width:480px; height:50px; font-weight:bold; font-size:15px; color:#0084b4"; onclick="location.href='http://srv-share/sites/docs/SitePages/it.aspx'" > ,

который позволяет разместить кнопку длиною 480 пикселей относительно левого края. Чтобы другая кнопка располагалась напротив справа, ниже указываем такой же код, но изменения нужно внести в параметры расположения (style=”float:right;), а также не забыть подправить название (value=) и ссылку (onclick="location.href=). Продолжаем копировать\вставлять\редактировать данный код для остальных кнопок. Результат можно увидеть на рисунке 4.

Рисунок 4. Главная страница main.aspx.

 

Основной компонент

Для работы с документами используется готовое приложение Библиотека документов [ https://technet.microsoft.com/ru-ru/library/cc262215.aspx , http://www.w3ii.com/ru/sharepoint/sharepoint_libraries.html ], позволяющее:

  • создавать папки;
  • хранить документы;
  • предоставлять общий доступ к файлам;
  • одновременно редактировать некоторые офисные документы (Word, PowerPoint, начиная с версии 2013);
  • распределять права на доступ к документам: сделать видимыми все или только некоторые папки (файлы) с возможностью редактировать или включить режим чтения.

Файлы не обязательно хранить на сервере, они могут располагаться на локальном диске пользователя и в дальнейшем (после добавления в библиотеку) могут быть удалены с машины сотрудника, библиотека хранит документы в базе данных MS SQL Server.

Удобнее заранее подготовить нужное количество папок для дальнейшего расположения в них файлов. Чтобы создать папку, нужно выделить библиотеку (слева на панели появятся две вкладки Файлы и Библиотека), зайти во вкладку Файлы и нажать кнопку Создать папку.

Чтобы добавить готовый документ в библиотеку, необходимо нажать кнопку Создать и указать его местонахождение. Напротив папок и файлов можно увидеть кем и когда были произведены изменения.

Здесь стоит упомянуть ещё об одной библиотеке - Активы сайта, которая предназначена для хранения медиа-файлов. Узнать путь к загруженному файлу, чтобы вставить его в CSS-код, можно так: нажать в библиотеке на кнопку “…” или в режиме редактирования страницы зайти во вкладку Вставка->Картинка->Из SharePoint.

 

Изменить стандартное отображение библиотеки

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

Например, полезно знать размер файла, а по умолчанию такой информации в библиотеке нет. Чтобы её отобразить, нажимаем кнопку Изменить представление, откроется большой список настроек, в котором можно изменить вид отображения папок, добавить колонки, настроить фильтрацию, группировку, сортировку, отображение на мобильных устройствах и другое. В разделе Столбцы находим имя столбца Размер файла (внизу списка), меняем цифру с “17” на “3”, тем самым указываем каким по счёту будет стоять данная колонка (см. рис 5).

Рисунок 5. Добавление колонки в библиотеку.

 

В разделе Стиль можно выбрать визуальное отображение (расположение) папок. Список состоит из 7 стилей, но для нас наиболее подходящие только две: Базовая таблица и По умолчанию. В нашем случае выбрана вторая.

 

Отображение библиотек на странице

У нас уже настроен переход с главной страницы вглубь. Настала пора отобразить контент на остальных страницах.

Переходим на страницу документов ИТ-отдела (it.aspx). В режиме редактирования страницы делаем такое же отображение, как и на главной, - три колонки, в центре создаём заголовок, а ниже добавляем веб-часть с готовой библиотекой документов из раздела Приложения, по завершению всех настроек сохраняемся. Результат можно увидеть на рисунке 6. 

Рисунок 6. Отображение документов.

 

Немного CSS-кода

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

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

Пример 1. По умолчанию в библиотеке документов колонки расположены близко друг к другу и выровнены по левому краю при этом правая часть пустует. Стандартные параметры раздвинуть колонки отсутствуют. У нас уже имеется на странице редактор сценариев с CSS-кодом (заголовок страницы), в котором ниже добавим строки для увеличения размера столбцов, тем самым раздвинем их:   

<style type='text/css'>

\\Раздвинуть столбец ИЗМЕНЕНО

.ms-vh-div[DisplayName='Изменено'] 

{width:150px;}

 

\\Раздвинуть столбец ИМЯ

.ms-vh-div[DisplayName='Имя']

{width:300px;}

 

\\Раздвинуть столбец ‘…’

.ms-list-itemLink-td            

{width:50px;}

</style>

 

Пример 2. По умолчанию в библиотеке установлен размер шрифта 13 пикселей. Для наших пользователей это мелковато, панели форматирования текста отсутствуют. Сделать текст крупнее можно с помощью кода [7]:

<style>

#WebPartWPQ2

{font-size:18px}

</style>

 

Пример 3. По умолчанию на страницу выводится название библиотеки, которое только мешает. Чтобы не показывать данное наименование, можно применить вот такой код:

<style type='text/css'>

.ms-core-pageTitle     

{display: none;}

</style>

 

Пример 4. Стандартный фон страницы является простеньким и скучным. С помощью CSS-кода можно задействовать картинку в качестве фона. Для этого напишем такие строки:

<style type='text/css'>

div {

   background: url(/sites/docs/SiteAssets/SitePages/main/fon1.jpg);

   background-repeat: repeat;}

</style>

 

Пример 5. В нашем случае выбрана тема “Office” и в соответствии с этим цвет выделенной кнопки голубой, однако, решено было заменить его на светло-серый. Сделано это следующим образом:

 <style>

input[type=button]:color

{background-color:#C0C0C0;}

 

input[type=button]:hover

{background-color:#eaeaea;}

</style>

 

Доступность к сайту

Простейшие действия по созданию веб-ресурса для работы с документами завершены, но на сайт может заходить только пользователь с административными правами. Всем другим будет выдана ошибка “Отказано в доступе”. Более детально о различных режимах доступа будет рассказано в следующей статье.

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

         

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