UXP panel and dialog communication

Photoshop UXP Plugin API
, ,
1

Hi, I’m new to React and UXP so you will see a few questions from me in this forum board :slight_smile:

I’ve been searching for a few days now, how data can be passed from dialog to panel from which it was opened. Lets say I click a button on a panel, it opens dialog with some inputs and stuff related to a button, when I click “OK” on a dialog, that data should be sent back to panel.

Is there some full plugin example how to achieve that? Or maybe there’s some better preferred approach how this should be handled?

Thank you

1 Like
2

There are a lots of ways, and it really depends upon how you structure your application. Keep in mind that the dialog and panel are in the same execution context, so you can definitely take advantage of this to move data around. Typically in React, you’d pass in a store or some other state container to the component responsible for the dialog itself. Changes within the dialog would then either propagate into the store on every change in each field or when the user submits/closes the form – up to you which way you go). Because your panel would also share the same store, it’s automatically able to see the changes, although you’d likely need to send an event to tell the panel that the store was changed.

There’s not a good example of this yet for Ps & UXP, but there is a good example of this for XD & UXP.

  • A simple Preferences store that has an apiKey.
  • Where the panel uses the preference’s apiKey
  • The Preferences component, where it saves the key back to the store
  • The App, where the render method is passing the store to each component, and where the app gets the store’s initial state.

There’s a lot of ways to do this, and if you’re managing a lot of state, you’d want to use something like MobX or Redux to take care of all the boilerplate for you. But hopefully this’ll get you started.

1 Like