Filament•3d ago

Filament 3.x: How to open a modal from blade template

Hey together I have a modal within a livewire component which is build with Action::make('something')->form(...). At the moment it renders a trigger button which opens the modal. In a special case i need to open this modal dynamically on page load. How can I achieve this?

Solution:

<div wire:init="init">
    @if ($isAdmin)
...

<div wire:init="init">
    @if ($isAdmin)
...

...

Jump to solution

13 Replies

Blackpig•3d ago

https://filamentphp.com/docs/3.x/panels/pages#opening-an-action-modal-when-a-page-loads

Pages - Panel Builder - Filament

Chili con TimoOP•3d ago

Okay I was not specific enough. the modal should open after a user was logged in. so the page could be any page of the app. isnt it possible to call ich directly over e.g. livewire dispatch? I found some documentation with custom blade template, but i want/need to use the form builder here.

Dennis Koch•3d ago

You can use the modal component and add it via an render hook after login. https://filamentphp.com/docs/3.x/support/blade-components/modal

Modal Blade component - Core Concepts - Filament

Dennis Koch•3d ago

but i want/need to use the form builder here.

Well, that's rules it out 😅 My idea: - On login write to session and check that session key. - Inject a custom Livewire component via render hook.

Chili con TimoOP•3d ago

the livewire component is already there and injected in the page header but uses the FormBuilder trigger button solution xD here is a sample snippet of the blade template of the livewire component:

<div>
    @if ($isAdmin)
        @if ($customerLocation !== '')
            <span class="mr-4 ml-8">{{ $customerLocation }}</span> {{ $this->customerLocationModalAction }}
        @else
            {{ $this->customerLocationModalAction }}
        @endif
    @else
        @if ($customerLocation !== '')
            {{ $customerLocation }}
        @else
            @script
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    window.dispatchEvent(new CustomEvent('open-modal'))
                });
            </script>
            @endscript
        @endif
    @endif
    <x-filament-actions::modals />
</div>

<div>
    @if ($isAdmin)
        @if ($customerLocation !== '')
            <span class="mr-4 ml-8">{{ $customerLocation }}</span> {{ $this->customerLocationModalAction }}
        @else
            {{ $this->customerLocationModalAction }}
        @endif
    @else
        @if ($customerLocation !== '')
            {{ $customerLocation }}
        @else
            @script
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    window.dispatchEvent(new CustomEvent('open-modal'))
                });
            </script>
            @endscript
        @endif
    @endif
    <x-filament-actions::modals />
</div>

but the open-modal part is not working atm this componeent is loaded beside the user profile icon

Dennis Koch•3d ago

Because the open-modal event needs the modal id

Chili con TimoOP•3d ago

yep and i dont have one

Dennis Koch•3d ago

It's probably generated from the action name. I think you might find the modal in the source code via DevTools

Chili con TimoOP•3d ago

hmm i have searched it there but did not find it. but it is completely logic -> i am in the else part and so the $this->customerLocationModalAction is never triggered. okay the whole requirement of this feature: admin should get a button which opens a modal where he/she can select the location (currently implemented). the normal user should not see this button, but after login the same modal should open and force him to select the location.

Solution

LeandroFerreira•3d ago

<div wire:init="init">
    @if ($isAdmin)
...

<div wire:init="init">
    @if ($isAdmin)
...

public function init(): void {
    $this->mountAction('customerLocationModal');
}

public function init(): void {
    $this->mountAction('customerLocationModal');
}

Chili con TimoOP•3d ago

is this a kind of preloading of the action without rendering it/the button?

LeandroFerreira•3d ago

It will trigger your action when livewire initializes

Chili con TimoOP•3d ago

uuuuhhh nice 🙂 thanks a lot! I only had to cover the mountAction part inside an if which should only be called when user is not a admin 🙂 this works now as expected

Gaming

Programming

Filament 3.x: How to open a modal from blade template

Did you find this page helpful?