Filament•8mo ago

How to re-render a custom widget after click on a button?

Hello everyone, I'm still new to FilamentPHP and have created a custom widget on my admin panel that will display a welcome message to the user on first login. A button should allow him to hide the message once he's read it by updating the "show_welcome_message" boolean column. I'm not sure how to make the widget refresh after clicking the button. Could someone point me in the right direction? Thanks you 🙂 Here my code :

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;


class WelcomeMessage extends Widget
{
    protected static string $view = 'filament.widgets.welcome-message';
    protected int|string|array $columnSpan = 'full';

    protected $listeners = ['refreshComponent' => '$refresh'];

    protected static ?int $sort = - 5;


    public static function canView(): bool {
        return auth()->user()->show_welcome_message;
    }

    public function markAsRead()
    {
        auth()->user()->update(['show_welcome_message' => false]);
        $this->emit('refreshComponent'); // Doesn't work ofc because this->emit is not known here 

    }


}

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;


class WelcomeMessage extends Widget
{
    protected static string $view = 'filament.widgets.welcome-message';
    protected int|string|array $columnSpan = 'full';

    protected $listeners = ['refreshComponent' => '$refresh'];

    protected static ?int $sort = - 5;


    public static function canView(): bool {
        return auth()->user()->show_welcome_message;
    }

    public function markAsRead()
    {
        auth()->user()->update(['show_welcome_message' => false]);
        $this->emit('refreshComponent'); // Doesn't work ofc because this->emit is not known here 

    }


}

And the view :

<x-filament-widgets::widget>
    <x-filament::section
        icon="heroicon-m-academic-cap"
        icon-color="primary"
    >
        <x-slot name="heading">
            <div class="flex flex-row gap-2">
                {{ __('users/welcome.title', ['name' => auth()->user()->getFilamentName()])  }}
            </div>

        </x-slot>
        <div class="text-sm text-gray-700 dark:text-gray-200">
            {{ __('users/welcome.message') }}
        </div>
        <footer class="fi-section-footer flex flex-row justify-end border-t border-gray-200 mt-4 pt-4 dark:border-white/10">
            <x-filament::button
                wire:click="markAsRead"
                icon="heroicon-m-check"
            >
                {{ __('users/welcome.action') }}
            </x-filament::button>
        </footer>
    </x-filament::section>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::section
        icon="heroicon-m-academic-cap"
        icon-color="primary"
    >
        <x-slot name="heading">
            <div class="flex flex-row gap-2">
                {{ __('users/welcome.title', ['name' => auth()->user()->getFilamentName()])  }}
            </div>

        </x-slot>
        <div class="text-sm text-gray-700 dark:text-gray-200">
            {{ __('users/welcome.message') }}
        </div>
        <footer class="fi-section-footer flex flex-row justify-end border-t border-gray-200 mt-4 pt-4 dark:border-white/10">
            <x-filament::button
                wire:click="markAsRead"
                icon="heroicon-m-check"
            >
                {{ __('users/welcome.action') }}
            </x-filament::button>
        </footer>
    </x-filament::section>
</x-filament-widgets::widget>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to re-render a custom widget after click on a button?