演習 - コマンド セット拡張機能でリストをカスタマイズする
この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。
前提条件
重要
ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。 ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。
- Node.js - v16.*
- Gulp-cli - v2.3.*
- Yeoman - v4.3.*
- SharePoint 用 Yeoman ジェネレーター - v1.17.1
- 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();
クラスでイベント ハンドラー _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="{"messagePrefix":"[command_set_prefix]"}"
コマンド セットのテスト
ブラウザーで、前の演習で 作業状態 リストを作成した 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 つ選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。
リストから 2 つ目のアイテムを選択します。 新しいボタンが表示されるのを確認します。 ボタンを選択して、ダイアログ ボックスがどのように変更されたかを確認します。
ローカル Web サーバーを停止するには、コマンド プロンプトで CTRL+C を押します。
概要
この演習では、SharePoint のリストにカスタム ボタンを表示する SharePoint Framework (SPFx) コマンド セット拡張機能を作成します。
自分の知識をテストする
ヘルプが必要ですか? Microsoft のトラブルシューティング ガイドをご覧になるか、問題を報告して具体的なフィードバックをお送りください。