SharePoint Framework でWebパーツを作る際、自作のWebパーツ同士を結合して相互作用させたい場面があり、その実現に苦労したので備忘を残しておきます。
【2019年5月追記】
この記事はSPFx v1.6 時点の情報で、グローバル変数を利用したデータ共有を行っています。SPFx v1.8 から「動的データ」が利用できるようになりましたので、今後は動的データの利用を推奨します。
動作イメージ
Webパーツを2つ以上開発し、それぞれが相互作用するようにします。
今回は2つのWebパーツを用意しました。
接続する側のWebパーツです。入力された値を接続先Webパーツに送ります。接続先Webパーツはプロパティ画面で選択できるようにします。
2．カードWebパーツ
接続される側のWebパーツです。接続元から送信された値を表示します。
テキストボックスからカードに送信した値は、即座にカードに表示されます。画面全体のリロードや表示の遅れは確認した限りありません。
接続先Webパーツの選択肢は、カードWebパーツを配置したりタイトルを変更したりすると自動で作成されます。選択肢のテキストは、Webパーツのタイトルプロパティを採用しています。
仕組みの概要
Webパーツのインスタンスをグローバル変数に保管し、インスタンスが公開するパブリックメソッドを介してタイトルの取得やテキストの送信&再描画を行っています。
以下の記事を参考にしましたが、記事にも記載のとおりグローバル変数は他のJavaScriptコードから影響を受けるため良い方法とは言えません。
クライアント側の Web パーツ間でデータを共有する | Microsoft Docs
将来的には、動的データ機能を利用してコンポーネント間の接続を行うことができるようです。現在はプレビュー中のため本番環境では利用できません。
動的データを使用して、SharePoint Frameworkコンポーネントを接続する | Microsoft Docs
サンプルコード
GitHubに公開しました。
GitHub - MickNabewata/connect-webpart: SPFx sample code that connect a webpart to anothor webpart
テストコードがほとんどないのはサボったから・・もとい、BaseClientSideWebPartクラスが@microsoft/sp-httpモジュールをインポートするからです。解決策、ないんですかね。。。
