出典：ArcGIS Experience Builder - Guide - Widget communication
ArcGIS Experience Builder ウィジェットは機能の単位であり、ウィジェットは 1 つの機能に焦点を当てます。しかし、多くの場合、タスクを完了するために複数のウィジェットを連携させる必要があります。そのためには、フレーム ワーク レベルでウィジェット同士が通信できる方法が必要です。Experience Builder では次の方法でこれを実現できます。
Configurable とはユーザーがビルダー内でウィジェット間の通信方法を設定できることを意味します。Programming とはウィジェット間の通信がコードによって行われることを意味します。
複数のウィジェットが同じデータ ソースまたはデータ ビューを使用する場合、それらのウィジェットは同じ選択、同じデータ レコードなど、同じデータ ソースの状態を取得できます。ウィジェットはこれらのデータを使用してデータ ソースの状態を同期できます。例えば、複数のウィジェットが同じデータ レコードを読み込んで、異なるビューを表示することができます。あるウィジェットはユーザーに選択を行わせ、別のウィジェットは選択状態を監視し、選択されたデータの詳細を表示することができます。
複数のウィジェットが同じデータ ソースの異なるデータ ビューを使用しても選択内容がデータ ビューのフィルター条件を満たしていれば、同じ選択内容を取得できます。
詳細はウィジェットでデータ ソースを使用を参照してください。
詳細はウィジェット出力データ ソースを参照してください。
詳細はメッセージとアクションを参照してください。
詳細はデータ アクションを参照してください。
React コンポーネントとしての Widget は内部 state (状態) を持つことができますが、他の Widget はこの state にアクセスすることができません。Jimu は state 管理 として Redux を使用しています。多くの情報を Redux store に保存します。情報の一つは widgetsState と呼ばれるもので、型の定義は jimu-core/lib/types/state にあります。widgetState に保存された情報は、他のすべてのウィジェットからアクセス可能です。widgetsState に情報を保存するには、以下のコードを参照してください。
import {appActions} from 'jimu-core';
/*
* state を保存する必要がある場合に呼び出します
*
* widgetId: 使用しているウィジェットの ID
* propKey: "a.b.c" といったフォーマットの文字列
* value: 保存したい情報
*/
this.props.dispatch(appActions.widgetStatePropChange(widgetId, propKey, value))
例えば、this.props.dispatch(appActions.widgetStatePropChange("w1", "a.b1", "value1")) と this.props.dispatch(appActions.widgetStatePropChange("w1", "a.b2", "value2")) を呼び出すと、Redux store でこの store の state が取得されます。
widgetsState: {
w1: {
a: {
b1: 'value1',
b2: 'value2'
}
}
}
ウィジェット2 の w1 が格納した情報にアクセスするには、mapExtraStateProps を使用するか、useSelect フックを使用して store から値を選択することができます。
ただし、widgetState にはプレーンな JavaScript オブジェクトのみを格納することができます。複雑な JavaScript オブジェクトを格納するには、this.props.dispatch(appActions.widgetMutableStatePropChange(widgetId, propKey, value)) を使用して値を格納し、MutableStoreManager.getInstance().getStateValue() を使用してアクセスすることができます。
これにより、state (状態) 管理をより柔軟にカスタマイズすることができます。これは通常の Redux で行う方法とほぼ同じです。ご存知のように、Redux には 1 つの store と 1 つの root reducer があり、これは jimu によって使用されます。ウィジェット開発者が通常の Redux の方法で state を管理できるようにするために、jimu は ReduxStore 拡張ポイントを定義しています。Redux を使用する必要があるウィジェットはこの拡張ポイント用の拡張を提供できます。
import {extensionSpec} from 'jimu-core';
export default class MyReduxStoreExtension implements extensionSpec.ReduxStoreExtension{
getActions(){
// 値を返す redux アクション
}
getInitLocalState(){
// ローカル state 内の redux を返す
}
getReducer(){
// redux reducer を返す
}
getStoreKey(){
// redux のローカル キーを返す
}
}
"extensions": [
{
"name": "My Store",
"point": "REDUX_STORE",
"uri": "my-store"
}
]