nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

publish a message from widget?

Anonymous User

Hello All,

Can anyone direct me to an example of publishing a message from a widget? I'm looking at the message-subscriber example but don't see any companion for actually publishing a message to be consumed.

I've seen the help topic on publishing a message but was hoping for a working example. It's also not clear to me whether custom messages are supported or whether we're limited to the four listed

Thanks!

--john

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

@Anonymous User

This is what I use to communicate between my Parcel Search widget and My Print widget.

//pSearch Widget Sender
//import {appActions} from 'jimu-core'
//widgetStatePropChange parameters
//1. the widgets id
//2. the objects name
//3. the object you are passing
this.props.dispatch(appActions.widgetStatePropChange(this.props.id, 'pSearchData', cTextElements));

//Print Widget reciever
//I define a ExtraProps Interface
interface ExtraProps{
  pSearchData: any
}

//I add that interface to my widget class
export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig> & ExtraProps, State>{
  static mapExtraStateProps = (state: IMState, ownProps: AllWidgetProps<IMConfig>): ExtraProps => {
    let wId: string;
    for (const [key, value] of Object.entries(state.widgetsState)) {
      if(value.pSearchData){
        wId = key;
      }
    }
    return {
      pSearchData: state.widgetsState[wId]?.pSearchData
    }
  }
....

//Then in my code I can just call 
this.props.pSearchData

Hope this helps.

All comments

KarthikAditya

Thank you for this code snippet. If this could be added to the widget development guide, it will be really useful.

MarkJTurnbull

I am looking to create a Notifications custom widget, something where other widgets can provide status or results messages to the user. I was looking to the Message Actions approach as it provides the ability for other widgets to broadcast their messages, and this widget would filter and act on such messages with an Alert element added to its UI. However the Message Action approach would require a custom Message Type which the framework/typescript don't appear to allow. The concept of broadcasting messages is appealing as I wouldn't have to hook up (reference the notifications widget in the configuration of) all my other widgets to the Notifications widget, which is what seems to be required in RobertScheitlin__GISP's solution which is based on updating another widgets state.

Is creating custom message types something we can do? If so, how?

Is there another approach that I am missing, that could deliver a notifications widget in an Experience Builder app?

DaveFullerton

I am no expert on this (I merely dabbled in this months ago), and I haven't looked at your guys code that closely, but just in case it helps and you haven't seen it, you might look at this post, John:

https://community.esri.com/t5/arcgis-experience-builder-questions/redux-samples/m-p/1082080#M2472

Anonymous User

Thanks for your help Robert! It looks like you're not actually sending a message but sharing widget state as described here. It appears that updates to that shared state are causing the receiving component to re-render and that static method to read through all the Redux-managed state runs with every re-render. Is that also correct?

It looks like there's no documentation on appActions - am I missing something?

Based on your example, I'm successfully updating that widget state from the sender component and displaying that change in the receiver. Listed below is my stripped down receiver component.

Thanks again.

--john

/** @jsx jsx */
import { AllWidgetProps, jsx, IMState, React, State } from 'jimu-core';
import { IMConfig } from '../config';

interface ExtraProps{
  myMessage: any
}

export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig> & ExtraProps, State>{
  static mapExtraStateProps = (state: IMState, ownProps: AllWidgetProps<IMConfig>): ExtraProps => {
    let wId: string;
    for (const [key, value] of Object.entries(state.widgetsState)) {
      if(value.myMessage){
        wId = key;
      }
    }
    return {
      myMessage: state.widgetsState[wId]?.myMessage
    }
  }

  render() {
    return (
      <div>
      {this.props.myMessage}
      </div>
    )
  }
}

RobertScheitlin__GISP

@Anonymous User

This is what I use to communicate between my Parcel Search widget and My Print widget.

//pSearch Widget Sender
//import {appActions} from 'jimu-core'
//widgetStatePropChange parameters
//1. the widgets id
//2. the objects name
//3. the object you are passing
this.props.dispatch(appActions.widgetStatePropChange(this.props.id, 'pSearchData', cTextElements));

//Print Widget reciever
//I define a ExtraProps Interface
interface ExtraProps{
  pSearchData: any
}

//I add that interface to my widget class
export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig> & ExtraProps, State>{
  static mapExtraStateProps = (state: IMState, ownProps: AllWidgetProps<IMConfig>): ExtraProps => {
    let wId: string;
    for (const [key, value] of Object.entries(state.widgetsState)) {
      if(value.pSearchData){
        wId = key;
      }
    }
    return {
      pSearchData: state.widgetsState[wId]?.pSearchData
    }
  }
....

//Then in my code I can just call 
this.props.pSearchData

Hope this helps.

DaveFullerton

@DavidHernandez told me that the communication widgets in the dist folder were not intended to be made public and that they were going to clean things up for version 1.4. Unfortunately, I haven't done much with widget communication yet and don't have any more information.

Anonymous User

Thanks for your reply Dave. I went back and watched that 2020 video again and it looks like David's doing what I'm looking for but I couldn't get enough of the source code from the video to make much progress.

I did also find those 1.3 examples you pointed me to. Did Gavin say why those examples weren't included in subsequent releases?

The samples seem to be just using pre-defined messages. I wonder if there is a way to use custom messages or even get a list of the existing messages. The API docs for MessageType enumeration don't seem to include them all.

DaveFullerton

John, I had a conversation with Gavin Rehkemper about this during the User Conference. His response:

"I can make a request to have a sample to do that. Specifically you’re asking about https://developers.arcgis.com/experience-builder/sample-code/widgets/message-subscriber/ but that one is only subscribing, not publishing, and you’d like a sample that publishes the message action?"

@GavinRehkemper

If you can't wait for Esri to come out with the new sample widget and you haven't seen this video:

https://www.youtube.com/watch?v=UIqMqnfTlWQ&t=22s

Look at the examples at 37:23. And if you go back to version 1.3 (or before) you can also find what appears to be the source code (though I couldn't get them to work).

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.