Question

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

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

一旦在页面上，它就不会占据整个页面，在“页面布局”部分中，我将看不到全角选项。

从下面的屏幕截图中可以看到，我的Web部件位于页面的中央，而我想要的是全角，它应该占据整个页面。

在“节”布局中，缺少全角选项。

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

Answer 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;
}

Answer 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

Answer 3

您可以递归地修复workbenchPageContent下（和Webpart上）的所有元素的填充和边距。

（这是一种骇人听闻的解决方案，但似乎工作得很好）

从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));
}

SharePoint Online全角页面

3 个答案: