Настройка "современных" страниц сайтов
В 2016 г. команда разработчиков SharePoint выпустила "современный" интерфейс страниц. Современные страницы сайта группы быстрые, легкие в разработке и поддерживают мультимедийный контент, отлично выглядят на любом устройстве, в браузере и в мобильном приложении SharePoint.
Страницы SharePoint состоят из веб-частей, которые можно настраивать в соответствии со своими нуждами. Вы можете добавлять документы, видео, изображения, действия сайта, веб-каналы Yammer и другие элементы. Просто нажмите знак "+" и выберите веб-часть из панели элементов, чтобы добавить содержимое на страницу. Новая веб-часть "Выделенное содержимое" позволяет задать условия, чтобы определенное содержимое автоматически и динамически заполняло соответствующую область страницы. Используя SharePoint Framework, разработчики могут создавать настраиваемые веб-части, отображаемые прямо на панели инструментов.
Эта статья посвящена возможностям расширения "современных" страниц. Дополнительные сведения о функциональных возможностях, предлагаемых "современными" интерфейсами, см. в статье Новые возможности на сайтах групп SharePoint Online, в том числе интеграция с группами Microsoft 365.
Далее в этой статье мы будем называть "современным" новый пользовательский интерфейс, а "классическим" — его предыдущую версию.
Важно!
Мы не прекращаем поддержку "классического" интерфейса — он будет существовать параллельно с "современным".
Поддерживаемые настройки для "современных" страниц
Количество настроек, доступных для "современных" страниц, продолжает увеличиваться. В этой статье представлены подробные сведения и примеры поддерживаемых параметров. Команда SharePoint работает над обеспечением поддержки других параметров в будущем. В следующем списке представлен краткий обзор функций, поддерживаемых "современными" страницами:
- Настраиваемая фирменная символика
- Программное добавление "современных" страниц
- Добавление, удаление и обновление клиентских веб-частей на "современных" страницах
- Дополнительные макеты (см. примечание о конференции SharePoint Virtual Summit)
На данный момент "современные" страницы не поддерживают такие настройки:
- Добавление "классических" веб-частей на "современные" страницы
- Настройка компонента CSS с помощью веб-свойства AlternateCSSUrl
- Пользовательский JavaScript, внедренный с помощью дополнительных действий пользователя (см. примечание о расширениях SharePoint Framework)
- Пользовательские эталонные страницы (поддержка расширенной фирменной символики будет реализована позднее с помощью альтернативных вариантов)
- Стратегия минимальной загрузки
- Современные страницы в пакете шаблона сайта (Сохранить сайт как шаблон)
Примечание.
- Объединение функций "современной" страницы с "классическими" порталами публикации SharePoint не поддерживается. По умолчанию функции "современной" страницы не включены на "классических" порталах публикации SharePoint.
- В июне 2017 года появилась предварительная версия расширений SharePoint Framework для разработчиков. С помощью этих расширений SharePoint Framework вы можете управлять отрисовкой поля с помощью пользовательского кода, а также создавать дополнительные действия пользователя, которые исполняют этот код. Дополнительные сведения см. в статье Обзор расширений SharePoint Framework.
Настраиваемая фирменная символика
Если на сайте используется пользовательская тема, она учитывается в "современном" интерфейсе страницы, как показано в примере ниже.
Современная страница с настраиваемой фирменной символикой на основе параметров темы
Почему у сайта могут отсутствовать функции "современных" страниц
"Современные" страницы предоставляются с помощью компонента уровня веб-сайта "Страницы сайта" (B6917CB1-93A0-4B97-A84D-7CF49975D4EC), поэтому при его активации на сайте появляется возможность использовать "современные" страницы. При развертывании корпорацией Майкрософт этого компонента мы активировали его для всех "современных" сайтов групп (сайты GROUP#0) и для большинства "классических" сайтов групп (STS#0).
Если на "классическом" сайте группы находилось большое число веб-частей или вики-страниц, компонент не активировался автоматически. То же самое относится к "классическим" сайтам групп с включенной функцией публикации. Если для этих сайтов нужны функции "современной" страницы, по-прежнему можно активировать компонент "Страницы сайта". Это также подразумевает, что для сайтов, основанных на других шаблонах, не активированы функции "современных" страниц.
В предыдущем абзаце рассмотрен способ активации функции "современной" страницы на существующих сайтах. При создании нового "современного" или "классического" сайта группы (GROUP#0 или STS#0) "современный" компонент "Страницы сайта" активируется во время подготовки. "Современный" компонент "Страницы сайта" не активируется на сайтах, основанных на других шаблонах.
Настройка пользовательского интерфейса
Есть несколько вариантов управления переключением между "современным" и "классическим" интерфейсами страниц.
Настройка на уровне клиента
Если вы хотите запретить пользователям создавать новые современные страницы на всех сайтах, где современных страниц еще нет, вы можете воспользоваться параметром клиентского уровня в новом Центре администрирования SharePoint. Перейдите на страницу "Параметры", выберите Страницы и уберите параметр Разрешить пользователям создавать новые современные страницы. Подробнее см. в разделе Разрешение пользователям создавать современные страницы
Настройка на уровне веб-сайта
Вы можете запретить веб-сайту использовать "современный" интерфейс страницы, отключив компонент уровня веб-сайта с идентификатором B6917CB1-93A0-4B97-A84D-7CF49975D4EC (имя = "Страницы сайта"). Чтобы снова включить "современный" интерфейс страницы на уровне веб-сайта, необходимо повторно активировать компонент.
Чтобы включить или отключить необходимые компоненты, используйте указанный ниже PnP PowerShell:
# Connect to a site
$cred = Get-Credential
Connect-PnPOnline -Url https://[tenant].sharepoint.com/sites/siteurl -Credentials $cred
# Prevent site pages at web level
Disable-PnPFeature -Identity B6917CB1-93A0-4B97-A84D-7CF49975D4EC -Scope Web
# And again enable site pages at web
#Enable-PnPFeature -Identity B6917CB1-93A0-4B97-A84D-7CF49975D4EC -Scope Web
Примечание.
При выключении функции существующие "современные" страницы функционируют как есть. Кроме того, отключение просто блокирует только создание новой "современной" страницы из классической страницы. Пользователи по-прежнему могут создать новую "современную" страницу из существующих "современных" страниц. Чтобы полностью заблокировать создание "современных" страниц, нужно удалить все существующие "современные" страницы.
Примечание.
PnP PowerShell — это решение с открытым исходным кодом, поддержка которого предоставляется активным сообществом. Для инструментов с открытым исходным кодом не существует соглашения об уровне обслуживания в отношении поддержки корпорацией Майкрософт.
Настройка примечаний
По умолчанию пользователи могут добавлять примечания (июль 2017 г.) на "современных" страницах. Если вашей организации не требуется эта функция, ее может отключить в Центре администрирования клиента на странице "Параметры".
Включение и отключение примечаний
Примечание.
Вы также можете также программно управлять действиями по добавлению примечаний, используя API уровня сайта или клиента (требуется клиентская объектная модель (CSOM) SharePoint версии 16.1.6621.1200 или более поздней):
- Microsoft.Online.SharePoint.TenantAdministration.SiteProperties.CommentsOnSitePagesDisabled
- Microsoft.SharePoint.Client.Site.CommentsOnSitePagesDisabled
Программирование "современных" страниц
Добавление "современных" страниц
Создание "современной" страницы сводится к созданию элемента списка в библиотеке страниц сайта и назначению ему правильного типа контента в сочетании с настройкой некоторых дополнительных свойств, как показано в следующем фрагменте кода:
// pagesLibrary is List object for the "site pages" library of the site
ListItem item = pagesLibrary.RootFolder.Files.AddTemplateFile(serverRelativePageName, TemplateFileType.ClientSidePage).ListItemAllFields;
// Make this page a "modern" page
item["ContentTypeId"] = "0x0101009D1CB255DA76424F860D91F20E6C4118";
item["Title"] = System.IO.Path.GetFileNameWithoutExtension("mypage.aspx");
item["ClientSideApplicationId"] = "b6917cb1-93a0-4b97-a84d-7cf49975d4ec";
item["PageLayoutType"] = "Article";
item["PromotedState"] = "0";
item["CanvasContent1"] = "<div></div>";
item["BannerImageUrl"] = "/_layouts/15/images/sitepagethumbnail.png";
item.Update();
clientContext.Load(item);
clientContext.ExecuteQuery();
При использовании PnP (в выпуске за март 2017 г.) можно использовать методы расширения, предоставляющие модель удобного добавления страницы:
cc.Web.AddClientSidePage("mypage.aspx", true);
Важно!
По состоянию на сентябрь 2017 г. страницы, созданные с помощью метода AddTemplateFile, не поддерживают предварительный просмотр при наведении на них указателя мыши на странице результатов поиска. Корпорация Майкрософт работает над исправлением и альтернативным решением этой проблемы.
Использование поддержки PnP для "современных" страниц и клиентских веб-частей
В выпуске за март 2017 г. основная библиотека сайтов PnP поддерживает создание, обновление и удаление клиентских страниц. В этом разделе приводятся сведения о том, как работать с клиентскими страницами с помощью основной библиотеки сайтов PnP с портала GitHub.
Создание страницы и добавление веб-части "Текст"
В этом примере создается клиентская страница в памяти, добавляется элемент управления "Редактор форматированного текста" и страница сохраняется в библиотеке страниц сайта как файл mypage.aspx. Сначала создается экземпляр ClientSidePage, а затем создается экземпляр элемента управления, добавляемый на страницу с помощью метода AddControl. После завершения этих действий страница сохраняется.
// cc is the ClientContext instance for the site you're working with
ClientSidePage myPage = new ClientSidePage(cc);
ClientSideText txt1 = new ClientSideText() { Text = "PnP Rocks" };
myPage.AddControl(txt1, 0);
myPage.Save("mypage.aspx");
Загрузка существующей страницы
Если нужно изменить или скопировать существующую страницу, можно загрузить ее в клиентскую объектную модель PnP; загрузка "преобразовывает" HTML-содержимое в объектную модель, которой можно управлять. Загрузка существующей страницы выполняется с помощью метода Load.
// load the page with name "page3.aspx"
ClientSidePage p = ClientSidePage.Load(cc, "page3.aspx");
// perform your page updates
...
// save the page back to SharePoint
p.Save()
Добавление раздела
У страниц может быть гибкий макет; можно добавлять один или несколько разделов на страницу, и эти разделы могут содержать до трех столбцов. Разделы можно добавлять на страницы с помощью пользовательского интерфейса SharePoint или программным способом.
var page2 = cc.Web.AddClientSidePage("PageWithSections.aspx", true);
page2.AddSection(CanvasSectionTemplate.ThreeColumn, 5);
page2.AddSection(CanvasSectionTemplate.TwoColumn, 10);
Добавление стандартных веб-частей
В следующем примере показано, как можно добавить на страницу стандартную клиентскую веб-часть Изображение. Обратите внимание, что экземпляр объекта веб-части создается путем вызова метода InstantiateDefaultWebPart. После инициирования веб-части ее свойствам присваиваются значения по умолчанию, определенные в манифесте веб-части. Для большинства веб-частей нужно обновить свойства, как показано в этом примере.
ClientSidePage page5 = new ClientSidePage(cc);
var imageWebPart = page5.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);
imageWebPart.Properties["imageSourceType"] = 2;
imageWebPart.Properties["siteId"] = "c827cb03-d059-4956-83d0-cd60e02e3b41";
imageWebPart.Properties["webId"] = "9fafd7c0-e8c3-4a3c-9e87-4232c481ca26";
imageWebPart.Properties["listId"] = "78d1b1ac-7590-49e7-b812-55f37c018c4b";
imageWebPart.Properties["uniqueId"] = "3C27A419-66D0-4C36-BF24-BD6147719052";
imageWebPart.Properties["imgWidth"] = 1002;
imageWebPart.Properties["imgHeight"] = 469;
page5.AddControl(imageWebPart);
page5.Save("page5.aspx");
Добавление настраиваемых клиентских веб-частей
В предыдущих примерах показано, как работать со стандартными веб-частями, но вы также можете добавить настраиваемые клиентские веб-части на страницу. Сначала нужно получить сведения о веб-части с помощью метода AvailableClientSideComponents, затем выполнить поиск веб-части и использовать найденные сведения для создания экземпляра ClientSideWebPart, добавляемого на страницу на последнем этапе.
ClientSidePage p = new ClientSidePage(cc);
// get a list of possible client side web parts that can be added
var components = p.AvailableClientSideComponents();
// Find our custom "HelloWord" web part
var myWebPart = components.Where(s => s.ComponentType == 1 && s.Name == "HelloWorld").FirstOrDefault();
if (myWebPart != null)
{
// Instantiate a client side web part from our found web part information
ClientSideWebPart helloWp = new ClientSideWebPart(myWebPart) { Order = 10 };
// Add the custom client side web part to the page
p.AddControl(helloWp);
}
// Persist the page to SharePoint
p.Save("PnPRocks.aspx");
Изменение порядка элементов управления
Есть различные методы для изменения порядка, в котором отображаются элементы управления на странице. Ключевым аспектом является атрибут Order фактического элемента управления: список элементов управления сортируется по значению этого атрибута Order при создании HTML-страницы, а порядок в HTML также соответствует порядку во время отрисовки страницы.
// Set the order when initiating the control
ClientSideText txt1 = new ClientSideText() { Text = "PnP Rocks", Order = 5 };
// Set the order when you add the control to the page, in this case we want the control to be the first
myPage.AddControl(txt1, -1);
// Manipulate the control order on the page...e.g. move a control to the back
myPage.Controls[1].Order = 10;
Удаление элемента управления
Если нужно удалить элемент управления со страницы, можно просто вызвать метод Delete для элемента управления и снова сохранить страницу.
ClientSidePage deleteDemoPage = ClientSidePage.Load(cc, "page3.aspx");
deleteDemoPage.Controls[0].Delete();
deleteDemoPage.Save();
Удаление страницы
Наконец, можно удалить клиентскую страницу.
ClientSidePage p = ClientSidePage.Load(cc, "deleteme.aspx");
p.Delete();
Модель класса
На следующем рисунке показаны самые важные классы, с которыми вы будете работать при использовании клиентской объектной модели страниц PnP.
Клиентская объектная модель PnP
Дополнительные рекомендации
Мы постепенно вводим дополнительные параметры настройки для "современных" интерфейсов страниц. Эти параметры будут совмещены с выпуском дополнительных возможностей SharePoint Framework. На данный момент точного графика нет, но мы обновим содержание статей о "современном" интерфейсе после выпуска новых возможностей.