SharePoint spfx 开发

---

注意事项

• 目录说明：
  1. 在SpfxsampleWebPart.module.scss中定义css的样式，在ts文件中进行引用
  2. 在SpfxsampleWebPart.ts中声明spfx可编辑属性、属性在spfx展示页面中的效果等
     
     
     

SpfxsampleWebPart.ts

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneCheckbox, // 引入需要用到的属性类型
  PropertyPaneDropdown,
  PropertyPaneToggle
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './SpfxsampleWebPart.module.scss';
import * as strings from 'SpfxsampleWebPartStrings';

export interface ISpfxsampleWebPartProps {
  description: string;
  test: string; // 定义属性名称及类型
  test1: boolean;
  test2: string;
  test3: boolean;
}

export default class SpfxsampleWebPart extends BaseClientSideWebPart<ISpfxsampleWebPartProps> {

  public render(): void { // 设置页面显示方式
    this.domElement.innerHTML = `
      <div class="${ styles.spfxsample }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.test }">${escape(this.properties.test)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
            <br/>
            <div class="${ styles.test }">
              ${escape(this.properties.test)}
            </div>
          </div>
        </div>
      </div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                // 添加可编辑属性
                PropertyPaneTextField('test', {
                  label: 'Multi-line Text Field',
                  multiline: true
                }),
                PropertyPaneCheckbox('test1', {
                  text: 'Checkbox'
                }),
                PropertyPaneDropdown('test2', {
                  label: 'Dropdown',
                  options: [
                    { key: '1', text: 'One' },
                    { key: '2', text: 'Two' },
                    { key: '3', text: 'Three' },
                    { key: '4', text: 'Four' }
                  ]}),
                PropertyPaneToggle('test3', {
                  label: 'Toggle',
                  onText: 'On',
                  offText: 'Off'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

spfx web部件连接到SharePoint

• 修改连接地址为：https://your-sharepoint-site-url/_layouts/workbench.aspx，连接到SharePoint，修改innerHtml部分代码

  export default class SpfxsampleWebPart extends BaseClientSideWebPart<ISpfxsampleWebPartProps> {
  
  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.spfxsample }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${ styles.test }">${escape(this.properties.test)}</p>
              <!-- 新增数据，获取当前页面名称 -->
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
            <br/>
          </div>
        </div>
      </div>`;
  }
  

参考资料

• SharePoint spfx官方资料

首页 > 学习总览 > 开发语言 > SharePoint