Filament•3mo ago

open modal on page load

I have a modal that has a trigger button and opens fine from the trigger button, but I also want to be able to conditionally open it when the page loads. I'm trying right now to just open it on the render method, but it won't open. It's literally stupid simple and I can't figure out why it wouldn't be working:

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

(The modal is itself another livewire component) and my modal: <x-filament::modal id="statement-mapping" width="6xl">... my parent is extending the Page class and uses HasForms, HasActions, InteractsWithForms, InteractsWithActions. The modal livewire class (child) is also using the same contracts/traits.

Solution:

This is how I do also in my current project. You can insert a renderhook at the bottom of the content make a livewire component and put it inside the render hook blade: ```php <?php ...

Jump to solution

7 Replies

krekas•3mo ago

try opening modal in the mount intead of render

Jon Mason•3mo ago

I tried that, it's not working 😦

dissto•3mo ago

Maybe this helps you. This is from a current project. There may or may not be side effects of the current use. So your milage may very: This is on my ListTransaction::class (in my case I check if the current url contains &openTransactionId=xxx) if thats the case i call the view action.

public ?string $openTransactionId = null; // ulid in my case

public function mount(): void
{
    parent::mount();

    $this->openTransactionId = request()->get('openTransactionId');

    $this->dispatch('triggerTransactionModal');
}

#[On('triggerTransactionModal')]
public function transactionModal(): void
{
    if (! $this->openTransactionId) {
      return;
    }

    $transaction = Transaction::query()
        ->whereBelongsTo(Filament::getTenant())
        ->find($this->openTransactionId);

    if ($transaction) {
        $this->mountTableAction('view', $this->openTransactionId);
    }
}

public ?string $openTransactionId = null; // ulid in my case

public function mount(): void
{
    parent::mount();

    $this->openTransactionId = request()->get('openTransactionId');

    $this->dispatch('triggerTransactionModal');
}

#[On('triggerTransactionModal')]
public function transactionModal(): void
{
    if (! $this->openTransactionId) {
      return;
    }

    $transaction = Transaction::query()
        ->whereBelongsTo(Filament::getTenant())
        ->find($this->openTransactionId);

    if ($transaction) {
        $this->mountTableAction('view', $this->openTransactionId);
    }
}

Jon Mason•3mo ago

Thanks for the help, I'll give it a try.

Solution

jaocero•3mo ago

This is how I do also in my current project. You can insert a renderhook at the bottom of the content make a livewire component and put it inside the render hook blade:

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

now then inside your livewire component blade this is what I do:

<div wire:init="showDashboardVideoModalEvent"></div>

<div wire:init="showDashboardVideoModalEvent"></div>

I maybe complicate things so it works for me

jaocero•3mo ago

full livewire blade

@php
    use App\Enums\OnboardingStep;
@endphp
<div x-data="{ isDashboardOnboardingComplete: localStorage.getItem('isDashboardOnboardingComplete') === 'true' }">
    <x-filament::modal icon="untitledui-youtube" id="dashboard-video-modal" sticky-header sticky-footer :close-by-clicking-away="false"
        width="4xl" x-show="!isDashboardOnboardingComplete">
        <x-slot name="heading">
            Onboarding Checklist - Dashboard
        </x-slot>

        <x-slot name="description">
            {{ OnboardingStep::DASHBOARD->description() }}
        </x-slot>

        <div class="w-full aspect-w-16 aspect-h-9">
            <div
                class="shadow-2xl bg-gradient-to-b from-primary-400 to-primary-500 shadow-primary-500/60 dark:shadow-primary-500/20">
                // some code
            </div>
        </div>

        <x-slot name="footerActions" class="flex items-center justify-end">
            <label class="inline-flex items-center">
                <x-filament::input.checkbox
                    x-on:change="localStorage.setItem('isDashboardOnboardingComplete', $event.target.checked)" />

                <span class="ml-2">
                    Do not show this video again
                </span>
            </label>
        </x-slot>
    </x-filament::modal>
    <template x-if="!isDashboardOnboardingComplete">
        <div wire:init="showDashboardVideoModalEvent"></div>
    </template>
</div>

@php
    use App\Enums\OnboardingStep;
@endphp
<div x-data="{ isDashboardOnboardingComplete: localStorage.getItem('isDashboardOnboardingComplete') === 'true' }">
    <x-filament::modal icon="untitledui-youtube" id="dashboard-video-modal" sticky-header sticky-footer :close-by-clicking-away="false"
        width="4xl" x-show="!isDashboardOnboardingComplete">
        <x-slot name="heading">
            Onboarding Checklist - Dashboard
        </x-slot>

        <x-slot name="description">
            {{ OnboardingStep::DASHBOARD->description() }}
        </x-slot>

        <div class="w-full aspect-w-16 aspect-h-9">
            <div
                class="shadow-2xl bg-gradient-to-b from-primary-400 to-primary-500 shadow-primary-500/60 dark:shadow-primary-500/20">
                // some code
            </div>
        </div>

        <x-slot name="footerActions" class="flex items-center justify-end">
            <label class="inline-flex items-center">
                <x-filament::input.checkbox
                    x-on:change="localStorage.setItem('isDashboardOnboardingComplete', $event.target.checked)" />

                <span class="ml-2">
                    Do not show this video again
                </span>
            </label>
        </x-slot>
    </x-filament::modal>
    <template x-if="!isDashboardOnboardingComplete">
        <div wire:init="showDashboardVideoModalEvent"></div>
    </template>
</div>

Jon Mason•3mo ago

this worked for me, thanks!

Gaming

Programming

open modal on page load