Настройка темы сайта SharePoint: REST API

С помощью интерфейса REST SharePoint можно выполнять операции CRUD (создание, чтение, обновление и удаление) с темами сайтов.

Служба REST в SharePoint Online (а также локальной среде SharePoint 2016 или более поздней версии) поддерживает объединение нескольких запросов в один вызов службы с помощью параметра запроса OData $batch. Подробные сведения и ссылки на примеры кода см. в статье Отправка пакетных запросов с помощью интерфейсов REST API.

Предварительные условия

Прежде чем приступить к работе, убедитесь, что вы знакомы с понятиями, описанными в следующих статьях:

• Знакомство со службой REST в SharePoint
• Выполнение базовых операций с использованием конечных точек SharePoint REST

Команды REST для тем сайтов

Для работы с темами сайтов доступны следующие команды REST:

• AddTenantThemeAdvanced — создание новой темы; поддерживает новый формат темы; аналогично командлету SharePoint Add-SPOTheme
• AddTenantTheme — создание новой темы; аналогично командлету SharePoint Add-SPOTheme
• DeleteTenantTheme — удаление темы из хранилища клиента; аналогично командлету PowerShell Remove-SPOTheme
• GetTenantThemingOptions — чтение параметров темы
• ApplyTheme — применение темы клиента к сайту
• UpdateTenantThemeAdvanced — обновляет определение темы клиента; поддерживает новый формат темы
• UpdateTenantTheme — обновляет определение темы клиента.

URL-адреса этих команд начинаются с _api/thememanager (без учета префикса). Для примера ниже перечислены конечные точки для команд.

• http://<site url>/_api/thememanager/AddTenantThemeAdvanced
• http://<site url>/_api/thememanager/AddTenantTheme
• http://<site url>/_api/thememanager/DeleteTenantTheme
• http://<site url>/_api/thememanager/GetTenantThemingOptions
• http://<site url>/_api/thememanager/ApplyTheme
• http://<site url>/_api/thememanager/UpdateTenantThemeAdvanced
• http://<site url>/_api/thememanager/UpdateTenantTheme

AddTenantThemeAdvanced

В следующем примере кода JavaScript показано, как добавить новую тему форматирования в клиент.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var colorPairs = {
  "light": [
    { "accentColor": "#007780", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#007780" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#007780" },
    { "accentColor": "#007780", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#007780" },
    { "accentColor": "#007780", "backgroundColor": "#FFF9E3" },
    { "accentColor": "#007780", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#242424", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#155473", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#155473" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#FFF9E3" }
  ]
}

RestRequest("/_api/thememanager/AddTenantThemeAdvanced", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true});

AddTenantTheme

В следующем примере кода JavaScript показано, как добавить устаревшую тему формата в клиент.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var pal = {
    "isInverted": false,
    "palette" : {
        "themePrimary": "#1BF242",
        "themeLighterAlt": "#0d0b00",
        "themeLighter": "#0b35bc",
        "themeLight": "#322d00",
        "themeTertiary": "#6a5f00",
        "themeSecondary": "#1B22F2",
        "themeDarkAlt": "#ffe817",
        "themeDark": "#ffed4b",
        "themeDarker": "#fff171",
        "neutralLighterAlt": "#252525",
        "neutralLighter": "#282828",
        "neutralLight": "#313131",
        "neutralQuaternaryAlt": "#3f3f3f",
        "neutralQuaternary": "#484848",
        "neutralTertiaryAlt": "#4f4f4f",
        "neutralTertiary": "#c8c8c8",
        "neutralSecondaryAlt": "#d0d0d0",
        "neutralSecondary": "#dadada",
        "neutralPrimary": "#ffffff",
        "neutralDark": "#eaeaea",
        "black": "#f8f8f8",
        "white": "#1f1f1f",
        "primaryBackground": "#1f1f1f",
        "primaryText": "#ffffff",
        "error": "#ff5f5f"
    }
}

RestRequest("/_api/thememanager/AddTenantTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)});

DeleteTenantTheme

Ниже показано, как удалить тему.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}


RestRequest("/_api/thememanager/DeleteTenantTheme", { name:"Sounders Rave Green" });

GetTenantThemingOptions

Ниже показано, как считать параметры темы.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

RestRequest("/_api/thememanager/GetTenantThemingOptions");

ApplyTheme

Ниже показано, как применить тему для сайта. Дополнительные сведения о структуре themeJson см. в статье Тема сайта SharePoint: схема JSON

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var themeJson = {
    "palette" : {
        "themePrimary": "#1BF242",
        "themeLighterAlt": "#0d0b00",
        "themeLighter": "#0b35bc",
        "themeLight": "#322d00",
        "themeTertiary": "#6a5f00",
        "themeSecondary": "#1B22F2",
        "themeDarkAlt": "#ffe817",
        "themeDark": "#ffed4b",
        "themeDarker": "#fff171",
        "neutralLighterAlt": "#252525",
        "neutralLighter": "#282828",
        "neutralLight": "#313131",
        "neutralQuaternaryAlt": "#3f3f3f",
        "neutralQuaternary": "#484848",
        "neutralTertiaryAlt": "#4f4f4f",
        "neutralTertiary": "#c8c8c8",
        "neutralSecondaryAlt": "#d0d0d0",
        "neutralSecondary": "#dadada",
        "neutralPrimary": "#ffffff",
        "neutralDark": "#eaeaea",
        "black": "#f8f8f8",
        "white": "#1f1f1f",
        "primaryBackground": "#1f1f1f",
        "primaryText": "#ffffff",
        "error": "#ff5f5f"
    }
}
RestRequest("/_api/thememanager/ApplyTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(themeJson)});

UpdateTenantThemeAdvanced

В следующем примере JavaScript показано, как обновить тему клиента в новом формате.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var colorPairs = {
  "light": [
    { "accentColor": "#007780", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#007780" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#007780" },
    { "accentColor": "#007780", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#007780" },
    { "accentColor": "#007780", "backgroundColor": "#FFF9E3" },
    { "accentColor": "#007780", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#242424", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#155473", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#155473" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#FFF9E3" }
  ]
}

RestRequest("/_api/thememanager/UpdateTenantThemeAdvanced", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true});

UpdateTenantTheme

В следующем примере JavaScript показано, как обновить тему клиента в устаревшем формате.

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var pal = {
    "isInverted": false,
    "palette" : {
			"themePrimary": "#008cff",
			"themeLighterAlt": "#f5faff",
			"themeLighter": "#d6edff",
			"themeLight": "#b3ddff",
			"themeTertiary": "#66baff",
			"themeSecondary": "#1f9aff",
			"themeDarkAlt": "#007ee6",
			"themeDark": "#006bc2",
			"themeDarker": "#004f8f",
			"neutralLighterAlt": "#f8f8f8",
			"neutralLighter": "#f4f4f4",
			"neutralLight": "#eaeaea",
			"neutralQuaternaryAlt": "#dadada",
			"neutralQuaternary": "#d0d0d0",
			"neutralTertiaryAlt": "#c8c8c8",
			"neutralTertiary": "#595959",
			"neutralSecondary": "#373737",
			"neutralPrimaryAlt": "#2f2f2f",
			"neutralPrimary": "#000000",
			"neutralDark": "#151515",
			"black": "#0b0b0b",
			"white": "#ffffff",
			"primaryBackground": "#ffffff",
			"primaryText": "#000000",
			"disabledBackground": "#f4f4f4",
			"disabledText": "#c8c8c8"
    }
}
RestRequest("/_api/thememanager/UpdateTenantTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)});

См. также

• Настройка тем для сайтов SharePoint: обзор
• Настройка тем для сайтов SharePoint: схема JSON
• Настройка темы сайта SharePoint: командлеты PowerShell
• Настройка темы сайта SharePoint: API CSOM