Sending Notifications On a Filament Page

Hello Everyone, I am in the admin panel trying to send a notification, I saw someone else do this on github

    public function updatePassword(): void
    {
        //New Syntax ?
        Notification::make()
            ->title('Saved successfully')
            ->icon('heroicon-o-document-text')
            ->iconColor('success')
            ->send();
        //Old Syntax ?
        $this->notify('danger', "{$this->new_password}  seems super secure!");
    }

    public function updatePassword(): void
    {
        //New Syntax ?
        Notification::make()
            ->title('Saved successfully')
            ->icon('heroicon-o-document-text')
            ->iconColor('success')
            ->send();
        //Old Syntax ?
        $this->notify('danger', "{$this->new_password}  seems super secure!");
    }

This is a method I trigger from the form, tough when I open my console I see the following Error:

Alpine: Cannot reference "$wire" outside a Livewire component.

Alpine: Cannot reference "$wire" outside a Livewire component.

Any Ideas on how to fix this ? - The page has multiple forms and multiple form actions

17 Replies

YasserOP•2y ago

My guess is now that I have to make a seperate component for every form section I am using on the Page to fix this ? Update: I cannot reproduce it. Yet I has the notification prompt twice. Until the issue came back. Is this normal behaviour. Or should I try recreating the project to see if the installation (reverted trough git) of Notifications broke them

Dennis Koch•2y ago

Double notifications shouldn't be normal, no 😅 What's the View for your Page?

YasserOP•2y ago

Sorry, I was trying to clarify that I tried both ways. Since you told me I may have to include the component in the other thread

<x-filament::page>
    {{-- Update Profile information     --}}
    <form wire:submit.prevent="updateProfile" >
        <x-filament::card>
            {{ $this->updateProfileForm }}
            <x-slot name="footer">
                <div class="text-right">
                    <x-filament::button type="submit">
                        {{ __('Save') }}
                    </x-filament::button>
                </div>
            </x-slot>
        </x-filament::card>
    </form>
    {{-- Update Password --}}
    <form wire:submit.prevent="updatePassword">
        <x-filament::card>
            {{ $this->updatePasswordForm }}
            <x-slot name="footer">

                <div class="text-right">
                    <x-filament::button type="submit">
                        {{ __('Save') }}
                    </x-filament::button>
                </div>
            </x-slot>
        </x-filament::card>
    </form>
</x-filament::page>

<x-filament::page>
    {{-- Update Profile information     --}}
    <form wire:submit.prevent="updateProfile" >
        <x-filament::card>
            {{ $this->updateProfileForm }}
            <x-slot name="footer">
                <div class="text-right">
                    <x-filament::button type="submit">
                        {{ __('Save') }}
                    </x-filament::button>
                </div>
            </x-slot>
        </x-filament::card>
    </form>
    {{-- Update Password --}}
    <form wire:submit.prevent="updatePassword">
        <x-filament::card>
            {{ $this->updatePasswordForm }}
            <x-slot name="footer">

                <div class="text-right">
                    <x-filament::button type="submit">
                        {{ __('Save') }}
                    </x-filament::button>
                </div>
            </x-slot>
        </x-filament::card>
    </form>
</x-filament::page>

This is my View, I used

§ make:filament-page Account

§ make:filament-page Account

to create the View and the page I added HasForms and InteractsWithForms to the generated class

class Account extends Page implements HasForms
{
    use InteractsWithForms;

class Account extends Page implements HasForms
{
    use InteractsWithForms;

Thanks a lot for your response!

Dennis Koch•2y ago

I think a Page already "HasForms". You don't need to implement that

YasserOP•2y ago

Oh. Thank you! I’ll correct that once I fed the people here I guess the next step is to see if something gitignored changed when I installed the Notification package. I’ll see if it persists if I scaffold a new project with just this page Allright, no idea what. Since I literally ran

git restore . && php artisan migrate:fresh && yarn build

git restore . && php artisan migrate:fresh && yarn build

but when I test above code in a fresh scaffold it works as described in the docs. Sorry for once again taking your time! Thanks a lot for your response and your help! I hope to be able to give back to this awesome project soon! Argh... Hahahahaha, I remade the whole thing. To get the same error XD apparently I got 'lucky'? on the try I had

YasserOP•2y ago

If anyone comes across this thread and knows how I could fix these ❤️

YasserOP•2y ago

Another step, In another project (Jetstream instead of breeze) everything shows. Yet console shows the same errors

toeknee•2y ago

Usually this is caused by a script ordering issue

YasserOP•2y ago

I tried it in a fresh project, an exisiting one, and so on unfortunately all of them had the issue

toeknee•2y ago

Yep, sometimes you need to move it. I had it once on my jetstream project and it was caused by the wirecall being outside of the rendering

YasserOP•2y ago

Weird thing is, today I once again bit the apple and remade it all I have no issues now As I said in the general chat, once I caught up on some work Ill try to recreate it, and pinpoint the exact problem and/or mistake I made and share it 😄

awcodes•2y ago

Typically this happens as a result of dom diffing. That’s where I’d start looking to debug.

YasserOP•2y ago

Thanks @awcodes ! I just found out this problem still occurs once I fill the form with information I added

    public function mount()
    {
        $this->user = auth()->user();
        $this->updateProfileForm->fill($this->user->attributesToArray());
    }

    public function mount()
    {
        $this->user = auth()->user();
        $this->updateProfileForm->fill($this->user->attributesToArray());
    }

And now I get the issue again I am guessing this is because I am using multiple forms, and I have to fill it when that specific form is mounted

    public function mount()
    {
        $this->user = auth()->user();
          //This  fill causes issues
            $this->updateProfileForm->fill($this->user->attributesToArray());
    }
    protected function getForms(): array
    {
        return array_merge(parent::getForms(), [
            "updateProfileForm" => $this->makeForm()
                ->model('user')
                ->schema($this->getUpdateProfileFormSchema()),
            "updatePasswordForm" => $this->makeForm()->schema(
                $this->getUpdatePasswordFormSchema()
            ),
        ]);
    }

    public function mount()
    {
        $this->user = auth()->user();
          //This  fill causes issues
            $this->updateProfileForm->fill($this->user->attributesToArray());
    }
    protected function getForms(): array
    {
        return array_merge(parent::getForms(), [
            "updateProfileForm" => $this->makeForm()
                ->model('user')
                ->schema($this->getUpdateProfileFormSchema()),
            "updatePasswordForm" => $this->makeForm()->schema(
                $this->getUpdatePasswordFormSchema()
            ),
        ]);
    }

IT works as expected 100% by the way, the console just spews out warnings

awcodes•2y ago

Are you doing the multiple forms this way https://filamentphp.com/docs/2.x/forms/getting-started#using-multiple-forms

Filament

Getting started - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

YasserOP•2y ago

Yes

<?php
class Profile extends Page
{
    use \Filament\Forms\Concerns\InteractsWithForms;
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.profile';

    public $user;

    public $name;
    public $email;

    public $new_password;
    public $new_password_confirmation;
    public function mount()
    {
        $this->user = auth()->user();
          //----->ISSUE CAUSED BY THIS LINE<------
        $this->updateProfileForm->fill($this->user->attributesToArray());

    }
    protected function getForms(): array
    {
        return array_merge(parent::getForms(), [
            "updateProfileForm" => $this->makeForm()
                ->model('users')
                ->schema($this->getUpdateProfileFormSchema()),
            "updatePasswordForm" => $this->makeForm()->schema(
                $this->getUpdatePasswordFormSchema()
            ),
        ]);
    }
    protected function getUpdateProfileFormSchema(): array
    {
        return [
            TextInput::make('name')
                ->label(__('Name')),
            TextInput::make('email')
                ->email()
                ->unique('users', ignorable: $this->user)
                ->label(__('Email')),
        ];
    }
    public function updateProfile()
    {
        //Updates Profile
    }
    protected function getUpdatePasswordFormSchema(): array
    {
        return [
            TextInput::make("new_password")
                ->label(__('New Password'))
                ->password()
                ->required(),
            TextInput::make("new_password_confirmation")
                ->label(__('Confirm New Password'))
                ->password()
                ->same("new_password")
                ->required(),
        ];
    }
    public function updatePassword()
    {
        //Updates PAssword
    }
}

<?php
class Profile extends Page
{
    use \Filament\Forms\Concerns\InteractsWithForms;
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.profile';

    public $user;

    public $name;
    public $email;

    public $new_password;
    public $new_password_confirmation;
    public function mount()
    {
        $this->user = auth()->user();
          //----->ISSUE CAUSED BY THIS LINE<------
        $this->updateProfileForm->fill($this->user->attributesToArray());

    }
    protected function getForms(): array
    {
        return array_merge(parent::getForms(), [
            "updateProfileForm" => $this->makeForm()
                ->model('users')
                ->schema($this->getUpdateProfileFormSchema()),
            "updatePasswordForm" => $this->makeForm()->schema(
                $this->getUpdatePasswordFormSchema()
            ),
        ]);
    }
    protected function getUpdateProfileFormSchema(): array
    {
        return [
            TextInput::make('name')
                ->label(__('Name')),
            TextInput::make('email')
                ->email()
                ->unique('users', ignorable: $this->user)
                ->label(__('Email')),
        ];
    }
    public function updateProfile()
    {
        //Updates Profile
    }
    protected function getUpdatePasswordFormSchema(): array
    {
        return [
            TextInput::make("new_password")
                ->label(__('New Password'))
                ->password()
                ->required(),
            TextInput::make("new_password_confirmation")
                ->label(__('Confirm New Password'))
                ->password()
                ->same("new_password")
                ->required(),
        ];
    }
    public function updatePassword()
    {
        //Updates PAssword
    }
}

awcodes•2y ago

Ok. Yea. Seen this error before and it was a dom diffing issue with modals. It’s like it looses track of the modal container. But it’s reestablished when it’s called on again.

YasserOP•2y ago

Yeah it seems to get confused, since the fill method happens to the form on the mount function of the Page In god forbid me to name them frameworks I have seen 'afterMount()' methods to resolve somethign like this Since, honestly everythign works now, as expected. the console is just blood red ---- I thought this issue had to do with the notifications, yet it's just because I had put the vertical alignment to 'bottom-right' which makes them not show up Got a solution if anyone is keeping up with this, I checked the code from filament breezy, thumbs up! if i didnt need breeze itself I wouldve installed it 😄 ->statePath('userData'), Adding this to the profileForm fixes the fill

Gaming

Programming

Sending Notifications On a Filament Page