You were getting warm with ModalLauncher, but obviously the lack of documentation about this class obviously didn't help you in understanding what it does, so allow me to explain.
An easy way to understand what ModalLauncher does, is to imagine it as an (application-level) invisible "frame" that you can run InvokeURL commands into. Each URL you run in this ModalLauncher, it will spawn a modal dialog for it. So how you do open URLs with the ModalLauncher? By dispatching any of the following actions under (src/actions/modal.ts): - showModalComponent - showModalUrl - hideModal These action methods push their respective arguments (name, url, postition, size, etc) to the "modal" branch (src/reducers/modal.ts) of the redux application state. The ModalLauncher is set to listen to changes on this branch and will show/hide modal dialogs based on the modal actions you dispatch. Which brings to the next question of how you dispatch these actions. Before I start, it may help to read up on this very informative article about container/presentational (aka. smart/dumb) components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 The way the mapguide-react-layout component source is laid out follows the same smart/dumb delineation: - "smart" components are under src/containers - "dumb" components are under src/components - Viewer layout template components are "smart" components, but are unique enough that they reside in src/layouts To dispatch an action, you need to be dispatching from a "smart" component. A "smart" component is decorated by the redux connect() function that is passed 2 functions into it. - mapStateToProps: A function that is given the whole redux application state and selectively returns portions of the application state the component is interested in listening for changes - mapDispatchToProps: A function that is given the redux action dispatcher (this is the thing you use to dispatch any of the actions we define under src/actions), and returns an object with functions that dispatch your desired actions. So to bring this all together. Your image-modal.tsx? Probably don't need it. Your selection-panel.tsx? Unfortunately, I can't tell whether you are modifying the "smart" one (src/containers/selection-panel.tsx) or the "dumb" one (src/containers/selection-panel.tsx). Regardless, this is what you need to do. In the "smart" selection-panel, there should already be a mapDispatchToProps() function there that returns a Partial<ISelectionPanelContainerDispatch>. You'll need to modify the interface to include a function that opens image URLs. src/containers/selection-panel.tsx >>> export interface ISelectionPanelContainerDispatch { ... openImageInModal: (src: string) => void; } <<< Then you have to modify mapDispatchToProps() to map this method to dispatching an "open modal" action src/containers/selection-panel.tsx >>> import { showModalUrl } from "../actions/modal"; ... function mapDispatchToProps(dispatch: ReduxDispatch): Partial<ISelectionPanelContainerDispatch> { return { ... openImageInModal: (src) => dispatch(showModalUrl({ url: src, name: "ImageModal" })) }; } <<< Now at this point, if your selection-panel modifications were in the "smart" one, your link click handler just needs to to call the newly mapped openImageInModal() function to launch the computed image URL in a modal dialog. If the modifications were in a "dumb" one, you'll need an extra step of defining an onOpenImageInModal in the "dumb" component props interface, your link click handlers should then be calling this onOpenImageInModal function. Your "smart" component that wraps the "dumb" one would then provide a handler for onOpenImageInModal, to call the openImageInModal() function to dispatch the open modal action with your desired image URL. Hope that helps (and what I said makes sense). - Jackie -- View this message in context: http://osgeo-org.1560.x6.nabble.com/Create-a-modal-dialog-from-the-selection-panel-tp5329560p5329863.html Sent from the MapGuide Users mailing list archive at Nabble.com. _______________________________________________ mapguide-users mailing list mapguide-users@lists.osgeo.org https://lists.osgeo.org/mailman/listinfo/mapguide-users