How to trigger a modal?
I'm a frontend developer and am trying to figure out how to trigger a modal to pop up from my blade file. I've been poring through the documentation and have been getting frustrated.
Basically, I have an existing blade file that I'm displaying as a page
x-filament::page. I would now like to have it be displayed in a modal. I do not know how to do the steps to make that happen.
Could someone please point me to some examples/guidance? I must have missed something somewhere.6 Replies
You said frontend... Can you explain what you have done and where you are doing it? Modals in Filament are Actions
I am on a team with a backend PHP developer who has been working on the php files within app/Filament/... etc. I have successfully been building a theme to change the layout and styling of the Filament CMS.
Right. I know that modals are Actions. I do not know how to "link up" the
app/Filament files with the resources/views files. If I have a button/link in my blade file, how do I get a modal to display when I click on it?
I realize that Filament is a backend CMS, but I am now trying to basically get an existing x-filament::page to show up in a modal when I click a link/button. I have not been able to find out how to do that.You would just call a Filament Action, use pass in the view with view. But What you need to be careful of is how you are doing it. Filament actions are really designed to be used with filament forms or confirmation modals.
But your frontend app should have it's own process for rendering modals if you just want to show a modal which as nothing to do with a filamemnt action
It seems like my best bet is to create a LiveWire component? Then in the LiveWire component view, I would create it within
x-filament::modal tags? Will I then have all of the functionality of a Modal Action? I will be needing to have Yes/No buttons within it.Ok if you are ussing yes/no, and as such submitting? Just use a filament action for the button which allows editing and rendering data, you can render a blade view with ->view() and ->viewData()
That sounds good. The modal will show some information with several button links at the bottom that will allow the user to click on them. That will then display other information in the modal depending, of course, on what they clicked. All of that data will be coming from the "backend" endpoints provided by my colleague.
The requirements changed (big surprise, right?), so I won't have Yes/No buttons any more.