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