SPFX 1.14リスト表示コマンドセット更新

The SPFx v1.14 リストビューのコマンドセットには、非常にエキサイティングな機能がほとんどありません.

レイシオンチェンジ

raiseOnChange() あなたがそれをすることをしません.ドキュメントはListViewのリフローを初期化することを約束しますが、リストビューではなく、コマンドセットを更新するために使用します.
参照issue #7811
If raiseOnChange() いくつかの遅延で動作するように見える、それはSPOのリストが定期的にコンテンツを更新するためです.

リストビュー

新たにプロビジョニングされたプロジェクトはonListViewUpdated イベントは、新しいコードを使用するコードを更新することができますlistViewStateChanged .

コマンドセット。TS

public onInit(): Promise<void> {
    this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);

}
public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{
}

SPFX V 115更新されたテンプレートを使用しますlistViewStateChanged

特定のリストのみのボタンを表示する

私が特定のリスト(例えば旅行要求)のためにボタンを示すだけであると仮定しましょう.他のリストにそれを隠すために、現在の文脈からリストタイトル/URLを得る必要があります.
The listViewStateChangedEvent 最初のレンダリングでは実行されませんので、ボタンを非表示にすることはできません.私はそれを隠す必要がありますonInit .
リストコンテキストを返す2つのプロパティがあります.

this.context.pageContext.list.serverRelativeUrl , しかし、リストコンテキストを正しく更新しません

this.context.listView.list.serverRelativeUrl でも返すundefined デバッグ時

参照issue #7795
私は、したがって、中にボタンを隠していますonInit , そして、それの間にlistViewStateChangedEvent . listViewStateChangedEvent 私が電話する必要がある瞬間ですraiseOnChange ボタンを確実に表示する.

コマンドセット。TS

public onInit(): Promise<void> {

  const _setCommandsHidden = () => {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      compareOneCommand.visible = false;
    }
    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {
      compareTwoCommand.visible = false;
    }
  }

  _setCommandsHidden();
  return Promise.resolve();
}

public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{

  Logger.write("onListViewUpdatedv2");

  const isCorrectList = (this.context.listView.list.title == "Travel requests") ? true : false;
  const itemSelected = this.context.listView.selectedRows && this.context.listView.selectedRows.length == 1;

  let raiseOnChange: boolean = false;

  const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  if (compareOneCommand && (compareOneCommand.visible != isCorrectList )) {
    compareOneCommand.visible = isCorrectList;
    raiseOnChange = true;
  }

  const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
  if (compareTwoCommand && (compareTwoCommand.visible!= (isCorrectList && itemSelected))) {
    compareTwoCommand.visible = isCorrectList && itemSelected;
    raiseOnChange = true;
  }

  if (raiseOnChange) {
    this.raiseOnChange();
  }
}

を参照ください.GitHub :