演習 - コマンド セット拡張機能でリストをカスタマイズする
- 16 分
この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。
前提条件
重要
ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。 ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。
- Node.js v22.*
- Gulp-cli v3.*
- Yeoman v5.*
- SharePoint v1.21.1 用 Yeoman ジェネレーター
- Visual Studio Code
新しい 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();
CommandSetDemoCommandSet クラスで_onListViewStateChangedイベント ハンドラーを見つけて、その内容を次のコードに置き換えます。 このコードは、一覧で選択されたアイテムの数に応じて、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="{"messagePrefix":"[command_set_prefix]"}"
コマンド セットのテスト
ブラウザーで、前の演習で 作業状態 リストを作成した SharePoint Online サイト コレクションに移動します。 左側のナビゲーションで、[サイト コンテンツ] リンクを選択します。 作業状態 リストを選択します:
拡張機能をテストする場合は、serve.json 構成ファイルを変更する必要があります。
./config/serve.json ファイルを開きます。
serveConfigurations.default.pageUrl プロパティを見つけます。 それは現在、プレースホルダー URL で構成されています。
"pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
{tenantDomain}文字列は、ワークステーションの環境変数を使用して gulp serve タスクによって自動的に置き換えられます。 環境変数 SPFX_SERVE_TENANT_DOMAIN を、テストに使用するホストされている SharePoint Online サイトのドメインに設定します。
ヒント
選択した開発プラットフォームで環境変数を設定する方法の詳細については、以下を参照してください。
Windows: set (環境変数)macOS: Mac 上のターミナルで環境変数を使用する ホストされた Workbench テスト サイトSharePoint Frameworkを設定する
URL の残りの部分を、前の演習で作成したリストの AllItems.aspx ページへのパスで更新します。 たとえば、ホームページ URL が https://contoso.sharepoint.com/sites/DeveloperSite/Lists/Work%20Stsatus/AllItems.aspx の開発者サイトがある場合は、このファイルのすべての pageUrl プロパティを更新して、次のようにこのページへのパスを含めます。
"pageUrl": "https://{tenantDomain}/sites/DeveloperSite/Lists/Work%20Stsatus/AllItems.aspx",
serveConfigurations.default.customActions.properties オブジェクトを見つけます。
properties オブジェクトの値を次の JSON に変更します。
"properties": {
"messagePrefix": "[command_set_prefix]"
}
次のコマンドを実行してプロジェクトを起動します。
gulp serve
メッセージが表示されたら、[デバッグ スクリプトの読み込み] ボタンを選択します。
ページが読み込まれた後、ツール バーに新しいボタンが表示されます。 [Always On] ボタンを選択すると、メッセージと選択した項目の数がダイアログに表示されます。 ボタンが表示されない場合は、コマンド プロンプトに戻り、再読み込みが完了するまで待ってから、更新します。
![コマンド セット [常にオン] ボタンのスクリーンショット。](../../m365-developer/sharepoint-spfx-extensions/media/07-command-set-test-01.png)
リストからアイテムを 1 つ選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。
![コマンド セット [1 つのアイテムが選択済み] ボタンのスクリーンショット。](../../m365-developer/sharepoint-spfx-extensions/media/07-command-set-test-02.png)
リストから 2 つ目のアイテムを選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。
![コマンド セット [2 つのアイテムが選択済み] ボタンのスクリーンショット。](../../m365-developer/sharepoint-spfx-extensions/media/07-command-set-test-03.png)
ローカル Web サーバーを停止するには、コマンド プロンプトで CTRL+C を押します。
概要
この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。