Filament•7mo ago

Refresh the form after saving in SPA mode

How can I refresh the form while in SPA mode after saving data? I make the following modification before storing the value to the database:

->dehydrateStateUsing(function ($state) {
    return str($state)->slug()->toString();
})

->dehydrateStateUsing(function ($state) {
    return str($state)->slug()->toString();
})

But for some reason, after saving, the value remains the same as what the user has entered, you have to reload the page (F5) to show the real value. A solution for this is:

->lazy()
->afterStateUpdated(function ($state, $set) {
    $set('slug', str($state)->slug()->toString());
})

->lazy()
->afterStateUpdated(function ($state, $set) {
    $set('slug', str($state)->slug()->toString());
})

But this presents another problem, if the user is editing the field and clicks on the save button, the data is not saved. I suppose it is because he is making the AJAX call to afterStateUpdated and the save button is disabled even though it is not visible visually. So, how can I recharge the state without having secondary problems?

7 Replies

LeandroFerreira•7mo ago

you can use hooks in the CreatePage and EditPage to refresh the form data https://filamentphp.com/docs/3.x/panels/resources/editing-records#lifecycle-hooks

protected function afterSave(): void
{
    $this->refreshFormData(['slug']);
}

protected function afterSave(): void
{
    $this->refreshFormData(['slug']);
}

Some tips using slug in this video (pt-BR) ✌️ https://youtu.be/x2YzgjoL4ZI?si=AqjyMqyjCsTUE31e

Filament Brasil

YouTube

Form Builder - Utilizando Reatividade e Validação #laravel #livewir...

Neste vídeo, vamos mostrar como utilizar a reatividade no Filament e como implementar validação em tempo real nos seus campos! Espero que tenha gostado do vídeo de hoje e, se curtiu, segue a gente nos outros canais para tirar suas dúvidas: Youtube (conteúdos e lives em vídeo): https://youtube.com/@filamentbr Discord (tirar dúvidas técnicas): ...

Editing records - Panel Builder - Filament

MarcOP•7mo ago

This doesn't work for me

protected function afterSave(): void
{
    $this->refreshFormData(['slug']);
}

protected function afterSave(): void
{
    $this->refreshFormData(['slug']);
}

But after investigating, this does work for me.

protected function afterSave(): void
{
    $this->fillForm();
}

protected function afterSave(): void
{
    $this->fillForm();
}

LeandroFerreira•7mo ago

No problem, but I guess this was supposed to work. Could you try without spa?

MarcOP•7mo ago

The problem is the same, with or without the spa mode and the solution is also the same, with $this->refreshFormData(['slug']); it does nothing but with $this->fillForm(); reloads the field (and all form) In the video it uses debounce and onBlur but I have found some errors and in this case I do not like to use it, the errors are the following: - debounce: If you put a big debounce, when you are in the field and hit save, if the debounce has not been updated, the previous value is stored, but if you put a small value, it is very difficult to write it, because of slug() , eliminating spaces and all that. - onBlur: If they are in the field and you click save, it doesn't save, you have to click save 2 times to be able to save or click outside the field and then click save. In both cases, it gives a bad experience to the user, does not queue or something to avoid this, for example: - debounce: if you click save, execute debounce first and then save, instead of just saving. - onBlur: if you click save, run onBlur and then save, instead of just running onBlur without saving.

Karim Bakhsh•7mo ago

I dont know what is wrong here, but this->refreshFormData(['attribute']) does not work for me as well, and it throws an error. Basically it does not know that function while it is present in the view page source code of filament.

Karim Bakhsh•7mo ago

I am using all these thing in view page. I have two action buttons. Once of them has the record status as its label and the other one has the label reject. when I click on accept, status should be updated to the next status such as accepted, and then some other status that I have. What happens is that the status is updated, but the label does not change. I have tried $this->refreshFormData which didnt work as I mentioned earlier, and then I used $this->fillForm() which also did not work and it threw an error recommending me to use $this->fill() and that did not work as well. I come up with the solution of refreshing the page using the following code after editing the status redirect(static::getResource()::getUrl('view', ['record' => $this->getRecord()])); but it can get heavy if the page grows bigger and handles data from different places and relationships to this record. So everytime, it refreshes, it executes those queries, gets data and render on the page.

MarcOP•7mo ago

The ->refreshFormData() is only for the update page, I don't know what your code does, but try: https://filamentphp.com/docs/3.x/infolists/actions#adding-a-hint-action-to-an-entry

Actions - Infolist Builder - Filament

Gaming

Programming

Refresh the form after saving in SPA mode