Использование таблицы стилей веб-сайта SharePoint в надстройках SharePoint

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

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

Необходимые условия для использования примеров в этой статье

Ниже перечислены полезные статьи, в которых описано, как использовать таблицы стилей SharePoint.

Название статьи Описание Надстройки SharePoint Сведения о новой модели надстроек в SharePoint, с помощью которой можно создавать надстройки — небольшие и удобные в использовании решения для пользователей. Разработка пользовательского интерфейса для надстроек SharePoint Сведения о параметрах и вариантах построения пользовательского интерфейса при создании надстроек SharePoint. Хост-сайты, сайты надстроек и компоненты SharePoint в SharePoint Изучите различия между хост-сайтами и сайтами надстроек. Узнайте, какие компоненты SharePoint можно включать в надстройку для SharePoint, какие компоненты необходимо разворачивать на хост-сайте, а какие на сайте надстройки, и как выполнить развертывание сайта надстройки в изолированном домене.

Пример кода. Использование таблицы стилей веб-сайта SharePoint в надстройке SharePoint

В этом примере кода показано, как использовать таблицу стилей веб-сайта SharePoint. Это позволяет сделать страницы удаленного веб-приложения похожими на страницы хост-сайта SharePoint.

Создайте надстройку SharePoint с размещением у поставщика.

Подготовьте сайт надстройки, создав пустую страницу.

Добавьте в веб-проект страницу со ссылкой на таблицу стилей.

Измените элемент в манифесте надстройки.

На следующем рисунке показана веб-страница SharePoint, на которой используется таблица стилей.

Веб-страница, на которой используется таблица стилей

Откройте Visual Studio от имени администратора. (Для этого щелкните правой кнопкой мыши значок Visual Studio в меню Пуск и выберите Запуск от имени администратора.)

Создайте надстройку SharePoint с размещением у поставщика, как описано в этой статье, и назовите ее StylesheetAdd-in.

Щелкните правой кнопкой мыши проект Надстройка SharePoint и добавьте новый модуль.

Щелкните правой кнопкой мыши новый модуль и добавьте новый элемент.

В разделе Элементы Visual C# > Интернет выберите HTML-страница. Переименуйте страницу в blank.html.

Удалите содержимое файла blank.html.

Щелкните правой кнопкой мыши веб-проект и добавьте новую веб-форму. Переименуйте ее в StyleConsumer.aspx.

Замените содержимое Web Form.aspx следующим кодом, который выполняет перечисленные далее задачи.

Загружает страницу blank.html с сайта надстройки в невидимом фрейме IFrame.

Загружает файл defaultcss.ashx с сайта надстройки.

Использует доступные стили.

В некоторых случаях, чтобы скачать CSS-файл и изображения для применения стиля, пользователь должен сначала пройти проверку подлинности в SharePoint. Теги link не позволяют пользователю, не вошедшему в систему, пройти аутентификацию автоматически. Загружайте ресурс страницы с сайта надстройки на вашу веб-страницу для принудительной аутентификации перед связыванием с CSS-файлом. В этом примере страница blank.html загружается в невидимом фрейме IFrame.

Дважды щелкните файл AppManifest.xml в обозревателе решений.

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

Убедитесь, что проект надстройки SharePoint выбран как запускаемый проект.

Нажмите клавишу F5.

После нажатия клавиши F5 Visual Studio выполняет сборку решения, развертывает надстройку и открывает страницу разрешений.

Нажмите кнопку Доверять.

Выберите значок надстройки StylesheetBasic.

На следующем рисунке показана готовая веб-страница, на которой используются стили SharePoint.

Таблица стилей, используемая на странице

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