Is there a way to just share a modal across multiple apps?

[jeffblankenburg]

I'm building a robust interface to a moderately complex SQL server that will represent every baseball card ever made, as well as individual user's collections of those cards. Each of the Retool pages I've created show some of the data from some of the tables.

For example, the Players app shows a list of players, but also a list of teams that player has been on, and a list of the cards that they player has appeared on.

The Set app shows a list of every set of cards, and also a list of the individual cards for a selected set.

As I enter data, sometimes, mistakes are made, and I want to edit it right in the moment. In one of my apps, I've created a modal that allows me to edit whatever the entity is. But if I am on a different page, I either need to navigate to that other page, or completely recreate the modal again on this other page.

Is there a way to just share a modal across multiple apps? I could also see this for logging issues or errors, or leaving comments on data.

[pyrrho]

Create your modal page as a module and the embed the module into the Modals you set up in each of your apps. You should be able to pass data into the module from the app via the Inputs on the Module settings:

Use that input as the source for all of your module component.

Then when you add your module to the modal (say that 5x fast!), you use the selected data from the app page as the input for the module:

There's also the test data inputs that you can then setup to validate it is working with your different source data sets:

Hope this fits your use case!

[jeffblankenburg]

This is actually perfect. One more question:

How do I trigger when the modal should/shouldn't be shown? I want the user to fire an event in the app, show the modal, and when they submit the modal's form, close the modal again.

I've tried setting an input for that (modal_visibility), but I'm assuming there's a better way.

[rosechoi]

You can add another event handler to the submit button! Control Component => Component (your modal) => Method (Hide). You may want to add an await to make sure your submission completes.

[jeffblankenburg]

Yep. Got that. But can I do it from outside the module?

App => Module => Modal

[rosechoi]

Ah! Sorry. Yes, you should be able to - this thread helped me.

[jeffblankenburg]

I think I'm not being clear. My apologies.

I have an app, let's call it PLAYERS.
I have a module, let's call it "add_player_module".

app_player_module only has a modal form in it, called "add_player_modal."

From my app, PLAYERS, I want to be able to click a button, and have "add_player_modal" appear.

How do I send an event from PLAYERS to the add_player_module to tell it to show add_player_modal? (This is tricky to explain.)

[pyrrho]

Hey there!

I think what you are looking for is an event in the app (let's call it a row selection in a table for now) that opens the modal with the relevant information of the row... but also, you want the ability to open the modal to input data?

If so, that might be handled with a table action to which fires the modal window into a specific state for your module input -- a "read current data" modal in the module versus a "add new data" modal in the module.

Depending on how you get to the module modal (a different input value) like if you click on the row, it sends "read" but if you click on the "Add" action it sends "create" -- as part of your module, those modals could be set to be shown by default. I would kind of think you would want two different modals in your app at that point though, with perhaps a similar but different module loaded into each

I'm not sure if I've captured what you are envisioning (and hopefully haven't muddied the waters). In design case challenges like these usually a mocked up version in a test app can be helpful to convey a better idea of what your case looks like.

[jeffblankenburg]

https://gist.github.com/jeffblankenburg/1e33d2084533426bb128586c940cb87c

[pyrrho]

It seems like you got an official response from office hours! I think the ideas between that and my suggestion are kind of aligned, but they said it wayyyyyy better.