演習 - コマンド セット拡張機能でリストをカスタマイズする

  • 16 分

この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。

前提条件

重要

ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。 ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。

新しい SharePoint Framework プロジェクトを作成する

コマンド プロンプトを開き、現在のディレクトリを、プロジェクトを作成するフォルダーに変更します。

次のコマンドを実行して、SharePoint Yeoman ジェネレーターを起動します。

yo @microsoft/sharepoint

プロンプトが表示されたら、次の情報を使用して応答します (他にもオプションが表示された場合は、既定の回答をそのまま使用します):

  • ソリューション名は何ですか?: SPFxCommandSet
  • どの種類のクライアント側コンポーネントを作成しますか?: 拡張機能
  • どの種類のクライアント側拡張機能を作成しますか?: ListView コマンド セット
  • コマンド セット名は何ですか?: CommandSetDemo

プロジェクトに必要なフォルダーをプロビジョニングした後、ジェネレーターは npm install を自動的に実行することで、すべての依存関係パッケージをインストールします。 NPM がすべての依存関係のダウンロードを完了したら、Visual Studio Code でプロジェクト フォルダーを開きます。

コマンド セット ボタンを定義する

コマンド セット拡張機能を作成するには、まずボタンを定義します。 ボタンはコンポーネントのマニフェスト ファイルで定義されます。

./src/extensions/commandSetDemo/CommandSetDemoCommandSet.manifest.json ファイルを検索して開きます。 既存の items プロパティを以下の JSON で置き換えます。

"items": {
  "ONE_ITEM_SELECTED": {
    "title": { "default": "One Item Selected" },
    "iconImageUrl": "icons/request.png",
    "type": "command"
  },
  "TWO_ITEM_SELECTED": {
    "title": { "default": "Two Items Selected" },
    "iconImageUrl": "icons/cancel.png",
    "type": "command"
  },
  "ALWAYS_ON": {
    "title": { "default": "Always On" },
    "iconImageUrl": "icons/cancel.png",
    "type": "command"
  }
}

コマンド セット コードの更新

ボタンを定義したら、次に拡張機能を実装するコードを記述します。

./src/extensions/commandSetDemo/CommandSetDemoCommandSet.ts ファイルを検索して開きます。 ICommandSetDemoCommandSetProperties インターフェイスを見つけ、そのメンバーを以下のコードに更新します。

messagePrefix: string;

CommandSetDemoCommandSet クラスの onInit() メソッドを見つけ、そのコンテンツを次のコードに置き換えます。 このコードは、拡張機能の初期化時の動作を制御します。

Log.info(LOG_SOURCE, 'Initialized CommandSetDemoCommandSet');

const one_item_selected: Command = this.tryGetCommand('ONE_ITEM_SELECTED');
one_item_selected.visible = false;

const two_item_selected: Command = this.tryGetCommand('TWO_ITEM_SELECTED');
two_item_selected.visible = false;

this.context.listView.listViewStateChangedEvent.add(this, this._onListViewStateChanged);

return Promise.resolve();

クラスでイベント ハンドラー _onListViewStateChanged を CommandSetDemoCommandSet 見つけ、その内容を次のコードに置き換えます。 このコードは、一覧で選択されたアイテムの数に応じて、2 つのボタンの表示と非表示を切り替えます。

Log.info(LOG_SOURCE, 'List view state changed');

const one_item_selected: Command = this.tryGetCommand('ONE_ITEM_SELECTED');
if (one_item_selected) {
  one_item_selected.visible = this.context.listView.selectedRows?.length === 1;
}
const two_item_selected: Command = this.tryGetCommand('TWO_ITEM_SELECTED');
if (two_item_selected) {
  two_item_selected.visible = this.context.listView.selectedRows?.length === 2;
}

// You should call this.raiseOnChange() to update the command bar
this.raiseOnChange();

CommandSetDemoCommandSet クラスの onExecute() メソッドを見つけ、そのコンテンツを次のコードに置き換えます。 このコードは、ユーザー設定ボタンが選択されたときの動作を制御します。

/* eslint-disable @typescript-eslint/no-floating-promises */
switch (event.itemId) {
  case 'ONE_ITEM_SELECTED':
    Dialog.alert(`${this.properties.messagePrefix} ONE_ITEM_SELECTED command checked; Title = ${event.selectedRows[0].getValueByName('Title')}`);
    break;
  case 'TWO_ITEM_SELECTED':
    Dialog.alert(`${this.properties.messagePrefix} TWO_ITEM_SELECTED command checked; Title = ${event.selectedRows[event.selectedRows.length-1].getValueByName('Title')}`);
    break;
  case 'ALWAYS_ON':
    Dialog.alert(`${this.properties.messagePrefix} ALWAYS_ON command checked. Total selected: ${event.selectedRows.length}`);
    break;
  default:
    throw new Error('Unknown command');
}
/* eslint-enable @typescript-eslint/no-floating-promises */

展開構成の更新

運用環境に展開されたときにコマンド セットを実装するには、コマンド セットのバンドル ファイルで定義されたカスタム スクリプトに関連付けられた新しいカスタム アクションをプロビジョニングします。

./sharepoint/assets/elements.xml ファイルを検索して開きます。 <CustomAction> 要素の ClientSideComponentProperties プロパティを更新し、コマンド セットのパブリック プロパティの値を設定します。

ClientSideComponentProperties="{&quot;messagePrefix&quot;:&quot;[command_set_prefix]&quot;}"

コマンド セットのテスト

ブラウザーで、前の演習で 作業状態 リストを作成した SharePoint Online サイト コレクションに移動します。 左側のナビゲーションで、[サイト コンテンツ] リンクを選択します。 作業状態 リストを選択します:

リスト内のサンプル データのスクリーンショット。

./config/serve.json ファイルを検索して開きます。

リスト serveConfigurations.default.pageUrl プロパティの完全な URL (AllItems.aspx を含む) にコピーします。

serveConfigurations.default.customActions.properties オブジェクトを見つけます。

properties オブジェクトの値を次の JSON に変更します。

"properties": {
  "messagePrefix": "[command_set_prefix]"
}

次のコマンドを実行してプロジェクトを起動します。

gulp serve

メッセージが表示されたら、[デバッグ スクリプトを読み込む] ボタンを選択します。

ページが読み込まれると、ツールバーに新しいボタンが表示されます。 [常にオン] ボタンが選択されている場合は、ダイアログ ボックスが表示され、パブリック プロパティで定義されているメッセージの接頭語と、選択されているアイテムの合計数が示されます。 ボタンがツール バーに追加されていない場合は、コマンド プロンプトに戻り、再読み込み サブタスクの実行が完了するまで待ってから、更新します。

コマンド セット [常にオン] ボタンのスクリーンショット。

リストからアイテムを 1 つ選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。

コマンド セット [1 つのアイテムが選択済み] ボタンのスクリーンショット。

リストから 2 つ目のアイテムを選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。

コマンド セット [2 つのアイテムが選択済み] ボタンのスクリーンショット。

ローカル Web サーバーを停止するには、コマンド プロンプトで CTRL+C を押します。

概要

この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。

自分の知識をテストする

1.

コマンド セットは、アプリケーション カスタマイザーとフィールド カスタマイザーとは、次のうちどのような違いがありますか?

2.

コマンド セット拡張機能ボタンは、どこで使用したら SharePoint インターフェイスを拡張できますか?