リスト名を設定可能にする

① 設定値の置き場所を用意する

まず、Webパーツ本体が持つ設定値に listName を加えます。ListViewerWebPart.ts のプロパティ型を、こう変えます。

export interface IListViewerWebPartProps {
  listName: string;
}

② 直書きを、設定値に差し替える

前の記事で 'お知らせ' と直書きしていた render() を、設定値を使う形に変えます。

public render(): void {
  const element: React.ReactElement<IListViewerProps> =
    React.createElement(ListViewer, {
      context: this.context,
      listName: this.properties.listName   // ← 設定パネルの値を使う
    });
  ReactDom.render(element, this.domElement);
}

③ 設定パネルに入力欄を足す

getPropertyPaneConfiguration() に、リスト名を入力するテキストボックスを追加します。

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [{
      header: { description: '表示するリストを設定します' },
      groups: [{
        groupName: '基本設定',
        groupFields: [
          PropertyPaneTextField('listName', {
            label: '表示するリスト名'
          })
        ]
      }]
    }]
  };
}

PropertyPaneTextField('listName', ...) の 'listName' が、②のプロパティと名前でつながっています。ここに入力した文字が this.properties.listName に入る、という約束です。

④ 初期値を決めておく

配置した直後に空っぽだと寂しいので、初期値を入れます。ListViewerWebPart.manifest.json の preconfiguredEntries にある properties へ、既定のリスト名を書きます。

"preconfiguredEntries": [{
  "groupId": "...",
  "title": { "default": "ListViewer" },
  "description": { "default": "リストの中身を一覧表示します" },
  "properties": {
    "listName": "お知らせ"
  }
}]

これで、配置した瞬間から「お知らせ」を表示しつつ、設定パネルで別のリスト名にも変えられます。

⑤ リスト名が変わったら、取り直す

設定パネルでリスト名を変えたとき、表示も切り替わってほしいですよね。Reactコンポーネントに「リスト名が変わったら取り直す」処理を足します。ListViewer.tsx に次のメソッドを追加します。

public componentDidUpdate(prevProps: IListViewerProps): void {
  if (prevProps.listName !== this.props.listName) {
    this._loadItems();   // リスト名が変わったので取り直す
  }
}

componentDidMount（最初の1回）に加えて componentDidUpdate（変わったとき）でも取得することで、設定変更が即座に画面へ反映されます。

この記事のまとめ

• リスト名を 設定値（listNameプロパティ） にして、直書きをやめた
• PropertyPaneTextField('listName', ...) で設定パネルに入力欄を追加
• manifestのpreconfiguredEntries で初期値（お知らせ）を設定
• componentDidUpdate で、リスト名変更時に取り直して即反映
• 3か所を同じ名前 listName でつなぐのがコツ

Webパーツが完成しました。次は、これを実際のSharePointデータで動かして確かめます。