Filament•2mo ago

How to show Filament Notification on unsavedChangesAlerts?

Hello, Is there a way to show Filament Notification when there is an unsaved change in the form? Also my client is asking to highlight the fields which are changed when there is an unsaved event, is it even possible? Thank you

24 Replies

Mohamed Ayaou•2mo ago

by default, no. as the unsaved changes alert is a browser default alert being activated with Javascript (search for it) but you may customize the model with your own js code by overriding the model style if supported by the browser (search for it too)

mohdaftabOP•2mo ago

I tried to search it but haven't found anything yet 😦 The highlight issue is another thing but I just need to show a Filament confirm dialog or Filament Notification for unsaved changes instead or browser default. The browser default always works even if there aren't any changes which is bad for user experience.

Mohamed Ayaou•2mo ago

The issue is related to the nature of the browsers not allowing to prevent the user from leaving when he wants, and of course not allowing us to run any code when the user leaves. it is just not possible, at least as the client wants. just let him unserstand it is not allowed by the browsers' standards

mohdaftabOP•2mo ago

I understand, that is a good explanation. I will try to convince him about this, the other issue is it keeps asking to save even there are no changes, I hope this can be fixed.

taka92•2mo ago

I have a solution. contact me if you need

mohdaftabOP•2mo ago

Hi @Takashi is it possible to please share the solution?

taka92•2mo ago

sure To solve the problem of showing Filament Notifications for unsaved changes, We need something to do first, we should prevent default browser alert for unsaved changes check the following source code!

window.onbeforeunload = function (e) {
    if (formHasChanged) {
        Livewire.emit('notifyUnsavedChanges'); 
    }
};

Livewire.on('notifyUnsavedChanges', () => {
    Filament.notification.show({
        title: 'Unsaved Changes!',
        description: 'msg',
        icon: 'warning',
        type: 'warning',
    });
});

And then, I think highlighting changed field is not big deal

mohdaftabOP•2mo ago

where do I put this code please? Shall I just add this to a new Js file and register it with the panel ?

taka92•2mo ago

you can create custom.js file for it

mohdaftabOP•2mo ago

does this also include preventing default browser alert ? or I should just add this to disable it?

protected function hasUnsavedDataChangesAlert(): bool 
{
return false;
}

protected function hasUnsavedDataChangesAlert(): bool 
{
return false;
}

I think notifications are working fine like this but how do we stop user from navigating away please? I see notifications are displaying but the page navigates to the other link.

taka92•2mo ago

I think your code should be desabled

mohdaftabOP•2mo ago

there is a file called unsaved-data-changes-alert.blade.php it has the javascript that triggers it.

shouldPreventNavigation = () => {
                    if (formSubmitted) {
                        return
                    }

                    return (
                        window.jsMd5(
                            JSON.stringify($wire.data).replace(/\\/g, ''),
                        ) !== $wire.savedDataHash ||
                        $wire?.__instance?.effects?.redirect
                    )
                }

shouldPreventNavigation = () => {
                    if (formSubmitted) {
                        return
                    }

                    return (
                        window.jsMd5(
                            JSON.stringify($wire.data).replace(/\\/g, ''),
                        ) !== $wire.savedDataHash ||
                        $wire?.__instance?.effects?.redirect
                    )
                }

taka92•2mo ago

this project is a large or medium?

mohdaftabOP•2mo ago

large

taka92•2mo ago

okay, how many developers are there in?

mohdaftabOP•2mo ago

well it is just me Uncaught ReferenceError: Filament is not defined

Filament.notification.show({
                        title: 'Unsaved Changes!',
                        description: 'msg',
                        icon: 'warning',
                        type: 'warning',
                    });

Filament.notification.show({
                        title: 'Unsaved Changes!',
                        description: 'msg',
                        icon: 'warning',
                        type: 'warning',
                    });

taka92•2mo ago

is it being developed using laravel?

mohdaftabOP•2mo ago

yes

taka92•2mo ago

how about collabrating to finish this project with me?

mohdaftabOP•2mo ago

It is finished already, client just asked to make changes to one bigger form.

taka92•2mo ago

btw, where are you living now?

mohdaftabOP•2mo ago

Pakistan n u ?

taka92•2mo ago

Japan let me know anytime if you need any help and also, if you have any project I am a senior full-stack developer

mohdaftabOP•2mo ago

Thank you so much. so nice of you.

Gaming

Programming

How to show Filament Notification on unsavedChangesAlerts?

Did you find this page helpful?