DEV Community: Vitalik

📊 Personalized Dashboards: Dynamic Widget Registration in Filament

Vitalik — Sat, 22 Feb 2025 14:57:53 +0000

👋 Hi, in this post, I’ll show you how to dynamically register widgets in Filament based on user properties. This approach allows you to display personalized widgets, such as task overviews 📋, for each user. We’ll walk through a simplified example using a Task model with a name property and a many-to-one relationship with the User model.

🚀 So let’s start!

1) Create custom livewire widget, this is important that they are not auto discover from Filament/Widgets folder by default

2) Our widget has a $task property and display its name

<?php

namespace App\Livewire;

use App\Models\Task;
use Filament\Widgets\Widget;

class TaskOverview extends Widget
{
    protected static string $view = 'livewire.task-overview';

    public Task $task;

    public function mount(Task $task): void
    {
        $this->task = $task;
    }
}

<x-filament-widgets::widget>
    <x-filament::section>
        Task name: {{ $task->name }}
    </x-filament::section>
</x-filament-widgets::widget>

3) Create middleware for register widget

php artisan make:middleware AddWidgetForUserMiddleware

public function handle(Request $request, Closure $next): Response
{
    if (is_null($request->user())) {
        return $next($request);
    }

    if (! filament()->getCurrentPanel()) {
        return $next($request);
    }

    $widgets = [];

    foreach (auth()->user()->tasks as $task) {
        $widgets[] = TaskOverview::make(['task' => $task]);
    }

    filament()->getCurrentPanel()->widgets($widgets);

    return $next($request);
}

4) Last step its register our middleware in AdminPanelProvider

->middleware([
    EncryptCookies::class,
    AddQueuedCookiesToResponse::class,
    StartSession::class,
    AuthenticateSession::class,
    ShareErrorsFromSession::class,
    VerifyCsrfToken::class,
    SubstituteBindings::class,
    DisableBladeIconComponents::class,
    DispatchServingFilamentEvent::class,

    AddWidgetForUserMiddleware::class,
])

That's what the user sees if he has tasks.

💡 This approach allows for highly personalized dashboards in Filament, making user experiences more dynamic. I hope you found this tutorial helpful! 🙌 If you have any questions or ideas for improvements, feel free to share them in the comments below 💬

Livewire 3 multiple select with choice.js

Vitalik — Fri, 09 Aug 2024 14:26:35 +0000

I didn't find a good, simple example where I could reuse multi select with choice.js for my component. That's why I decided to write my own. I do some manipulations with options and wire:change due to a weird interaction between livewire and choice, similar issue is still hanging open in the repository https://github.com/Choices-js/Choices/issues/943

Make blade component

php artisan make:component MultiSelect --view

@props(['options' => [], 'placeholderValue' => '', 'model'])

@php
    $uniqId = 'select' . uniqid();
@endphp

<div wire:ignore
     x-data
     x-init="
        $nextTick(() => {
            const choices = new Choices($refs.{{ $uniqId }}, {
                removeItems: true,
                removeItemButton: true,
                placeholderValue: '{{ $placeholderValue }}',
             })
       })"
>
    <select
        x-ref="{{ $uniqId }}"
        wire:change="$set('{{ $model }}', [...$event.target.options].map(option => option.value))"
        {{ $attributes }}
        multiple
    >
        @foreach($options as $option)
            <option value="{{ $option }}">{{ $option }}</option>
        @endforeach
    </select>
</div>

@pushOnce('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
@endPushOnce
@pushOnce('scripts')
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
@endPushOnce

And then you can reuse it in a component

<x-multi-select
    model="some_public_property"
    class="select-custom"
    placeholderValue="Select all you want"                             
    :options="['foo', 'bar']"
/>

Don't forget to change or add a @stack('styles') and @stack('scripts') to your layout. Or if you know that the selects will be all over the site, it might be easier to just add a link to the CDN

Update/add field to modal when use createOptionForm in Laravel Filament 3

Vitalik — Wed, 25 Oct 2023 16:10:47 +0000

When you use modal window to create a model relations without leaving the main model creation page, it is convenient. However, sometimes you need to add or update the fields that the user fills in the modal window. This is not described in the documentation but it is quite easy to do. For example, let's add a slug for a category.

To do this, we need to call createOptionAction to which we pass a callback in which we will process $action. In this action, you need to call the mutateFormDataUsing method in which we can process the $data in another callback. Not such a callback hell as in js, but it is already starting to be alarming 😅

use Filament\Forms\Components\Actions\Action;
use Filament\Forms;
use Filament\Forms\Form;
use Illuminate\Support\Str;

public static function form(Form $form): Form
{

    return $form
        ->schema([
            Forms\Components\Select::make('categories')
                ->relationship('categories', 'title')
                ->multiple()
                ->searchable()
                ->preload()
                ->createOptionForm([
                    Forms\Components\TextInput::make('title')
                        ->required()
                        ->maxLength(255),
                ])->createOptionAction(function (Action $action) {
                    $action->mutateFormDataUsing(function (array $data) {
                        $data['slug'] = Str::slug($data['title']);

                        return $data;
                    });
                })
        ]);
}

In general, this action is almost no different from the create action that is already described in the documentation