SharePoint Online 全宽页面答案

【问题标题】：SharePoint Online full width pageSharePoint Online 全宽页面
【发布时间】：2019-01-31 06:44:05
【问题描述】：

我仍在探索 SharePoint Online 创建 Web 部件并使用 Typescript 通过 Visual Studio 代码进行部署。

我创建了一个 HelloWorld webpart 并将其上传到页面上。我能够创建包文件，将其上传到 App-Catalog，安装并添加到页面。

一旦它在页面上，它不会占用整个页面，并且在页面布局部分我无法看到全宽选项。

从下面的截图可以看出，我的 webpart 位于页面的中心，而我想要的是它应该是全角的，它应该占据整个页面。

在部分布局中，缺少全宽选项。

任何人都可以建议我或给我有关如何使用 SPFX 在 SharePoint Online 中创建整个页面 web 部件的提示。

【问题讨论】：

标签： typescript sharepoint web-parts sharepoint-online

【解决方案1】：

既然您已经打包并上传了。你不能在 SPO 网站上做到这一点。您需要编辑 manifest.json 文件。您可以添加 "supportsFullBleed": true 为您的 Web 部件启用全宽列。并再次打包、上传并安装到目录中。

这样做的缺点是无法在本地工作台中测试全宽 Web 部件。你必须在网上的SP上做。你可以找到参考here。

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "34f6d7f2-262f-460a-8b65-152d784127cb",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld"
    }
  }]
}

您还可以使用 SharePoint 2013 和 Office 365 中默认存在的 Oslo 母版页。要更改母版页，如果您使用协作网站，则需要激活发布功能，并且需要使用自定义 css删除多余的边距。

.contentwrapper {
margin: 0;
}

#titleAreaBox {
margin: auto 20px!important;
}

【讨论】：

我已经将 'supportsFullBleed' 属性设置为 true 但仍然没有用。
@salah9 您在使用协作网站吗？如果是这样，您需要通过激活发布功能来更改主控。并且需要一些自定义 CSS 来删除额外的边距。已更新答案。
我创建了子站点作为发布站点并添加了相同的 webpart，效果很好。
为了在工作台中进行测试：您可以添加一个在启动 Web 部件时导入的纯 .css 文件，其中包含以下内容：#workbenchPageContent { margin: 0; max-width: none; } 这将使页面（几乎）完整用于测试的页面宽度。请确保在发布时删除导入。

【解决方案2】：

以下提示在官方文档中：

目前，SharePoint Workbench 不支持在全宽列布局中测试 Web 部件。相反，您必须将 Web 部件部署到开发人员租户、创建通信站点并在那里测试您的 Web 部件。

如果你完成了上面的操作，你可以看到mainfest.json文件夹中有"supportsFullBleed": true。没有的可以添加。

参考链接：

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/use-web-parts-full-width-column

【讨论】：

【解决方案3】：

您可以递归地修复workbenchPageContent 下方（以及您的网络部件上方）所有元素的填充和边距。

（这是一个骇人听闻的解决方案，但似乎效果很好）

从componentDidMount 内部调用以下函数可以解决工作台中的所有问题，如果您使用supportsFullBleed，则在部署时不会有任何问题。

function fixWorkbench(elem?: any, depth: number = 0) {
  if (!elem && depth === 0)
    elem = document.getElementById("workbenchPageContent");
  if (!elem || depth > 20) return null;
  elem.style.padding = "0px 0px 0px 0px";
  elem.style.margin = "0px 0px 0px 0px";
  Array.from(elem.children).map(child => fixWorkbench(child, depth + 1));
}

【讨论】：