publish a message from widget?

514
6
Jump to solution
07-31-2021 09:20 PM
by Anonymous User
Not applicable

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 

 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

@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.

View solution in original post

0 Kudos
6 Replies
DaveFullerton
Occasional Contributor III

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).

DaveFullerton_0-1627875511041.png

 

0 Kudos
by Anonymous User
Not applicable

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.

 

0 Kudos
DaveFullerton
Occasional Contributor III

@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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

@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.

View solution in original post

0 Kudos
by Anonymous User
Not applicable

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>
    )
  }
}

 

 

 

 

 

 

0 Kudos
DaveFullerton
Occasional Contributor III

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

 

0 Kudos