Filament•2w 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•2w 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•2w 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•2w 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•2w 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.

Takashi•2w ago

I have a solution. contact me if you need

mohdaftabOP•2w ago

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

Takashi•2w 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•2w ago

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

Takashi•2w ago

you can create custom.js file for it

mohdaftabOP•2w 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.

Takashi•2w ago

I think your code should be desabled

mohdaftabOP•2w 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
                    )
                }

Takashi•2w ago

this project is a large or medium?

mohdaftabOP•2w ago

large

Takashi•2w ago

okay, how many developers are there in?

mohdaftabOP•2w 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',
                    });

Takashi•2w ago

is it being developed using laravel?

mohdaftabOP•2w ago

yes

Takashi•2w ago

how about collabrating to finish this project with me?

mohdaftabOP•2w ago

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

Takashi•2w ago

btw, where are you living now?

mohdaftabOP•2w ago

Pakistan n u ?

Takashi•2w 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•2w ago

Thank you so much. so nice of you.

Gaming

Programming

How to show Filament Notification on unsavedChangesAlerts?