Framework・Office365を中心に扱うブログです。Webパーツや拡張機能間でデータのやり取りをするために「動的データ」という仕組みを利用します。動的データを作り出して他のWebパーツで利用できるように公開することは簡単なのですが、動的データの利用方法はリファレンスが見当たらなかったため、GitHub上のサンプルコードを読んで色々と試す必要がありました。備忘として残しておきます。動的データを取得するには、SPFxのライブラリ側で予め用意されているモジュールを利用し、Webパーツのプロパティで動的データを選択することが一番簡単です。この方法は以前ご紹介しています。www.micknabewata.com上記の方法は非常に簡単なのですが、少し捻った要件が出てくるとうまく行きません。以下の点が問題になります。利用可能な全ての動的データが選択肢に現れてしまい制限ができないこと文字列や数値ではなく自作の型で動的データを公開すると型内のプロパティまで選択しなければならないことWebパーツのプロパティからの選択ではなく固定の値を取得したい場合に対応できないこと自前のコードで動的データを取得する方法GitHubに公開したサンプルコードと併せてお読みください。Webパーツを配置すると動的データが作られます。Webパーツを配置すると上記一番簡単な方法の問題点が実感できます。Webパーツが今回の本題です。[画面]simpleObjectProviderとcustomObjectViewerを貼るとこうなります。サンプルWebパーツ上の色が付いているのがsimpleObjectProvider、下のJSON文字列がcustomObjectViewerです。simpleObjectProviderでの入力に従って、customObjectViewerの表示が動的に変わります。当サンプルで扱う動的データの型src/dynamicData/objectData.tsで定義しています。単純な文字列や数値ではなく、プロパティをいくつも持つ自作の型を2つ公開します。Error('プロパティIDが不正です。Error('プロパティIDが不正です。}}動的データを提供するWebパーツ/src/webparts/simpleObjectProvider/SimpleObjectProviderWebPart.tsです。入力欄を用意する段階でプロパティが多すぎたかと後悔しましたが(笑、コードとしては特に捻りはありません。動的データを取得するWebパーツここが本題です。/src/webparts/customObjectViewer/CustomObjectViewerWebPart.tsです。/src/webparts/simpleStringViewer/SimpleStringViewerWebPart.tsでやっているようにPropertyPaneDynamicFieldSetを利用する簡単なやり方ではなく、自前で動的データの一覧を取得・フィルタリングし、ドロップダウンの選択肢を作っています。利用可能な動的データソースの取得getAvailableDataSourcesメソッドで動的データソースの一覧をthis.context.dynamicDataProvider.getAvailableSources()の命令で取得します。全量としては標準のページコンテキストに加えて動的データを公開するWebパーツの分だけ動的データソースが取得できますが、今回のサンプルではその一部に絞り込んで取得できるようにしています。ret;}今回のサンプルでは、上記メソッドで絞り込んだ動的データソースをWebパーツのプロパティで選択できるようにしています。以下のようにドロップダウン選択肢を作ります。ret;}で、Webパーツのプロパティを以下のように定義します。};}このプロパティで選択された値を受け取ってくれるように、プロパティ定義もお忘れなく。/src/webparts/customObjectViewer/ICustomObjectViewerWebPartProps.tsです。上記までで、最終的に取得するべき動的データソースのIDが得られました。「当サンプルで扱う動的データの型」の章でご紹介したように、動的データソース内では複数の動的プロパティを公開することが可能です。今回のサンプルではsrc/dynamicData/objectData.tsで定義したobjectDataとobjectData2が動的プロパティに当たります。これをユーザーが選択できるようにWebパーツのプロパティを構成します。以下のように動的データソース内の動的プロパティを列挙してドロップダウン選択肢として返します。ret;}で、Webパーツのプロパティにドロップダウンを追加します。};}選択された値を受け取るプロパティも/src/webparts/customObjectViewer/ICustomObjectViewerWebPartProps.tsに追加します。string;}動的プロパティの値を取得ここまでで、動的データソースのIDと動的プロパティのIDが取得できるようになります。次は動的プロパティから値を取得します。ret;}これをrenderメソッドから呼び出して描画用のコンポーネントに渡してあげます。this.domElement);}今回のサンプルでは渡された値をJSON.stringifyして表示しているだけなので、整形も何もしていません。anyのまま渡しています。}}動的プロパティの値の変更をキャッチするリスナーを登録さて上記までのコードで動的プロパティの値を表示できるようになりましたが、このままだと動的プロパティの値が変わったときにWebパーツの描画を更新してくれません。いうわけでリスナーを登録します。登録後、別の動的プロパティを選んだりWebパーツを削除した時にはリスナーの解除も行う必要があります。(やらないとJavaScriptエラーが起きて画面が固まります)まず、登録と登録解除は以下のように行います。this.dynamicData.unregister(this.render);}で、renderメソッドとonDisposeメソッドでそれぞれ呼び出します。ReactDom.unmountComponentAtNode(this.domElement);}これで動的データが更新された時にWebパーツが再描画されるようになります。今回はシンプルにほとんどの処理をWebパーツのクラス内で実施しましたが、実運用に回すコードでは可読性を考慮してクラスを分けるなど工夫してください。以上、参考になれば幸いです。復旧)【2019年11月時点最新】Flowの新ライセンス形態まとめSharePointでリストのコピーができるようになりました月別アーカイブはてなブログをはじめよう!micknabewataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。