Dynamic form header in Filament

I want to have a description for a form with a dynamic number in it. I try to simplify the code. This is what I have. Does anybody know how to set the variable?

Section::make('Choose')
  ->description('My Variable: '. $selectedUserCount)
  ->schema([

    Select::make('base_var')
     ->options([
        '1' => 'All',
        '2' => 'Not all',
    ])->reactive()
    ->afterStateUpdated(function ($form) {
        $selectedUserCount = 20; // Later I will call here a function like calculateUsers
    }),

Is this possible or am I wrong in how I want to solve this?

LaryAI

1 year ago

Level 58

To achieve a dynamic form header in Filament with a description that updates based on a variable, you need to ensure that the variable is updated and accessible within the context of the form. In your case, you want to update the description based on the selectedUserCount variable. Here's how you can do it:

Use a reactive property to store the selectedUserCount.
Update the description dynamically using a closure or a method.

Here's an example of how you can implement this:

use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Form;

class YourFormComponent extends Form
{
    public $selectedUserCount = 0;

    public function calculateUsers()
    {
        // Your logic to calculate the user count
        return 20; // Example static value
    }

    public function mount()
    {
        $this->selectedUserCount = $this->calculateUsers();
    }

    public function form(Form $form)
    {
        return $form->schema([
            Section::make('Choose')
                ->description(fn() => 'My Variable: ' . $this->selectedUserCount)
                ->schema([
                    Select::make('base_var')
                        ->options([
                            '1' => 'All',
                            '2' => 'Not all',
                        ])
                        ->reactive()
                        ->afterStateUpdated(function ($state) {
                            $this->selectedUserCount = $this->calculateUsers();
                        }),
                ]),
        ]);
    }
}

Explanation:

Reactive Property: $selectedUserCount is a public property of the form component, which allows it to be reactive and updated dynamically.
Dynamic Description: The description method uses a closure to access the current value of $selectedUserCount.
State Update: The afterStateUpdated callback updates the $selectedUserCount whenever the base_var select field changes. You can replace the static value in calculateUsers() with your actual logic to compute the user count.

This setup ensures that the form description updates dynamically based on the selected option in the Select component.