Message/action is a way to support communication between widget to widget, widget to framework, and framework to widget. Widget/framework can publish a message, and they can listen to a message as well.
A message is identified by Message
, which is defined by the jimu framework. There are some message types defined in jimu, such as Extent
and Data
.
Publishing a message
A widget calls Message
to publish a message. For example, the List
widget publishes the Data
message when a list item is
clicked or a Map
widget publishes the Extent
message when the view is changed, which updates the List
widget content. The following Message
are supported:
String
Selection Change Extent
Change Data
Records Selection Change Data
Record Set Change
Each message has a class to define it. For example, the Extent
message is defined by Extent
class, this class defines the extent
property, which is the message payload.
To publish a message, a widget should declare the published messages in the manifest.json
file.
"publishMessages": [
"DATA_RECORDS_SELECTION_CHANGE"
]
Creating a message action
To create a message action, you will need to extend Abstract
class. There are several methods and functions that help with developing message actions.
The filter
method is used to filter the available actions in the builder.
export default class QueryAction extends AbstractMessageAction{
filterMessageDescription: (messageDescription: MessageDescription): boolean{
return [MessageType.StringSelectionChange, MessageType.DataRecordsSelectionChange].indexOf(messageDescription.messageType) > -1;
}
}
filter
method is used to filter messages in message manager.
filterMessage(message: Message): boolean{
return true;
}
Some actions may need a setting UI to configure the action behavior. To achieve this, you can declare the setting
in manifest.json.
In some specific cases, you may want to skip the setting UI. To achieve this, you can override the get
method and return null
in the applicable cases.
An action setting UI component is a React component with some injected props. When the user changes the config, you should call this.props.on
to save the config, which will be available in the on
method.
this.props.onSettingChange({
actionId: this.props.actionId,
config: {} // the action config
})
on
method handles the logic for what you would like to happen for your message type. In the snippet below, it basically selects the action based on the message type and sends it from the application to the store using get
function using the dispatch
property. This dispatches the redux action
and allows the state to be updated. Learn more about redux actions and using the store in Redux.
onExecute(message: Message, actionConfig?: any): Promise<boolean> | boolean{
let q = `${(actionConfig as ConfigForStringChangeMessage).fieldName} = '${message}'`
switch(message.type){
case MessageType.StringSelectionChange:
q = `${(actionConfig as ConfigForStringChangeMessage).fieldName} = '${(message as StringSelectionChangeMessage).str}'`
break;
case MessageType.DataRecordsSelectionChange:
q = `${actionConfig.fieldName} = ` +
`'${(message as DataRecordsSelectionChangeMessage).records[0].getFieldValue(actionConfig.fieldName)}'`
break;
}
getAppStore().dispatch(appActions.widgetStatePropChange(this.widgetId, 'queryString', q));
return true;
}
Only plain JSON objects are able to be stored in the Redux store. If you need to pass a complex JavaScript object, you can store it in a mutable store by using the Mutable
. After you update the value, your widget can be re-rendered as well.
In the action:
MutableStoreManager.getInstance().updateStateValue(this.widgetId, 'theKey', theComplexObject)
In the widget, you can access the object by using:
this.props.mutableStateProps.theKey
In the manifest.json
there is a messageActions property that provides the location and information for the message action extension.
"messageActions": [
{
"name": "query",
"label": "Query",
"uri": "actions/query-action",
"settingUri": "actions/query-action-setting"
}
]
i18n support
The support for languages in your message action follows the same pattern as a widget with one key difference. A message action has a Select an action
panel that allows users to select an action. Therefore you will need to have a file called default.ts
in the runtime/translations folder with the property names of your actions.
The framework handles the translations of the action label in this panel. As a result, the property of the label needs to have this naming convention _action
.
export default {
_widgetLabel: 'Message subscriber',
_action_query_label: 'Query'
}