创建一个 SharePoint 框架 (SPFx) 应用程序定制器扩展--扩展(修改页眉页脚)

只想要周末双休
1,477 阅读3分钟

这是我参与11月更文挑战的第3天，活动详情查看：11月更文挑战 这玩意没什么用,我从SharePoint的官方文档上学来的,想着做都做了省的回头再查了.

创建扩展

yo @microsoft/sharepoint

选项与以前的webpart有一些不同

  1. 创建哪种组件 -- extension
  2. 您是否希望允许租户管理员选择能够立即将解决方案部署到所有站点，而无需在站点中运行任何功能部署或添加应用程序？： 是的
  3. 解决方案中的组件是否需要访问唯一且不与租户中的其他组件共享的 Web API 的权限？： 不

修改配置文件 ./config/serve.json 将你站点的URL复制到serveConfigurations.default.pageUrl属性 注意要用自己站点的URL

image.png

当 SharePoint 页面加载时，SharePoint 将提示您加载调试脚本。这是一个确认检查，以确保您确实想要从不受信任的来源加载脚本。不受信任的来源是您在**https://localhost**上的本地开发 Web 服务器。

image.png

选择加载调试脚本按钮

加载完毕会出现警告弹窗 查看代码

image.png

image.png

找到了 就相当于是个helloWorld

向页面添加占位符

找到并打开 ./src/extensions/helloAppCustomizer/HelloAppCustomizerApplicationCustomizer.ts文件

//配置HelloAppCustomizerApplicationCustomizerProperties
header: string;
footer: string;

//找到并打开./config/serve.json文件。找到serveConfigurations.default.properties
//配置的是页眉页脚的占位符   显示什么文字
"properties": {
  "header": "Header area of the page",
  "footer": "Footer area of the page"
}
//注意此项更改  此更改只会在您测试时更新应用程序定制器。为确保在部署组件时设置这些属性，您需要修改部署期间使用的元素清单文件。

找到并打开 ./sharepoint/assets/elements.xml文件。

将该ClientSideComponentProperties属性设置为以下包含公共属性值的 HTML 编码 JSON 字符串：

{"header":"Header area of the page","footer":"Footer area of the page"}
//现在，对在 SharePoint Online 中将扩展部署到租户中的所有网站时使用的文件进行相同的更改。

找到并打开 ./sharepoint/assets/ClientSideInstance.xml文件。

将该Properties属性设置为以下包含公共属性值的 HTML 编码 JSON 字符串：

XML复制

{"header":"Header area of the page","footer":"Footer area of the page"}

将 CSS 样式添加到应用程序定制器

在下一步中，我们将修改 CSS 为页眉和页脚提供比普通<div>元素更好的用户体验。

首先通过在命令行上执行以下命令来安装 Office UI Fabric Core CSS 文件的 SPFx 版本：

npm install @microsoft/sp-office-ui-fabric-core --save

在 ./src/extensions/helloAppCustomizer文件夹中创建一个新文件HelloAppCustomizerApplicationCustomizer.module.scss并添加以下 SCSS 代码：

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
​
.app {
  .top {
    height:60px;
    text-align:center;
    line-height:2.5;
    font-weight:bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $ms-color-themePrimary;
    color: $ms-color-white;
  }
​
  .bottom {
    height:40px;
    text-align:center;
    line-height:2.5;
    font-weight:bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $ms-color-themePrimary;
    color: $ms-color-white;
  }
}

找到并打开 ./src/extensions/helloAppCustomizer/HelloAppCustomizerApplicationCustomizer.ts文件。

将以下import语句添加到文件顶部现有import语句之后：

import styles from './HelloAppCustomizerApplicationCustomizer.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';

更新页眉和页脚占位符

找到并打开 ./src/extensions/helloAppCustomizer/HelloAppCustomizerApplicationCustomizer.ts文件。

找到库的现有import语句@microsoft/sp-application-base。更新导入列表以添加以下引用：PlaceholderContent和PlaceholderName.

在HelloAppCustomizerApplicationCustomizer类中，添加以下两个私有成员：

private _topPlaceholder: PlaceholderContent | undefined;
private _bottomPlaceholder: PlaceholderContent | undefined;

将以下方法添加到HelloAppCustomizerApplicationCustomizer类中。处理占位符时使用此方法。

private _onDispose(): void {
  console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
}

将以下方法添加到HelloAppCustomizerApplicationCustomizer类中。渲染占位符时将调用此方法：

private _renderPlaceHolders(): void {
  console.log('Available application customizer placeholders: ',
    this.context.placeholderProvider.placeholderNames
      .map((name) => PlaceholderName[name])
      .join(', ')
  );
}

将以下代码添加到_renderPlaceHolders()方法中。此代码将获得页面顶部占位符的句柄。然后它将使用公共属性中定义的消息向占位符添加一些标记：

if (!this._topPlaceholder) {
  this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Top,
    { onDispose: this._onDispose }
  );

  if (!this._topPlaceholder) {
    console.error('The expected placeholder (Top) was not found.');
    return;
  }

  if (this.properties) {
    let headerMessage: string = this.properties.header;
    if (!headerMessage) {
      headerMessage = '(header property was not defined.)';
    }

    if (this._topPlaceholder.domElement) {
      this._topPlaceholder.domElement.innerHTML = `
        <div class="${styles.app}">
          <div class="${styles.top}">
            <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(headerMessage)}
          </div>
        </div>`;
    }
  }
}

以下代码添加到_renderPlaceHolders()以更新底部占位符：

打字稿复制

if (!this._bottomPlaceholder) {
  this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Bottom,
    { onDispose: this._onDispose }
  );

  if (!this._bottomPlaceholder) {
    console.error('The expected placeholder (Bottom) was not found.');
    return;
  }

  if (this.properties) {
    let footerMessage: string = this.properties.footer;
    if (!footerMessage) {
      footerMessage = '(footer property was not defined.)';
    }

    if (this._bottomPlaceholder.domElement) {
      this._bottomPlaceholder.domElement.innerHTML = `
        <div class="${styles.app}">
          <div class="${styles.bottom}">
            <i class="ms-Icon ms-Icon--Info" aria-hidden="true"></i> ${escape(footerMessage)}
          </div>
        </div>`;
    }
  }
}

将方法中的所有代码替换onInit()为以下代码：

Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

return Promise.resolve();

测试应用程序定制器

通过执行以下命令运行项目：

gulp serve

image.png

avatar
文章
阅读
粉丝