Filament•15mo ago•

4 replies

TableWidget: Modal in View Actions empty data

What I'm trying to do: Show a modal when clicking on "View" within a TableWidget.

What I did: I created a custom widget that extends TableWidget. I added a view action that shows a modal for a user record. Even though the modal shows form elements, they are empty.

Code:

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use App\Models\User;
use Filament\Forms\Form;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class UserWidget extends BaseWidget
{
    public function table(Table $table): Table
    {
        return $table
            ->query(
                User::query()
            )
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                ViewAction::make()
                    ->form(function (User $user) {
                        $form = UserResource::form(Form::make($this))
                            ->model($user);

                        $form->fill($user->getAttributes());
                        return $form;
                    }),
            ]);
    }
}

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use App\Models\User;
use Filament\Forms\Form;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class UserWidget extends BaseWidget
{
    public function table(Table $table): Table
    {
        return $table
            ->query(
                User::query()
            )
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                ViewAction::make()
                    ->form(function (User $user) {
                        $form = UserResource::form(Form::make($this))
                            ->model($user);

                        $form->fill($user->getAttributes());
                        return $form;
                    }),
            ]);
    }
}

Additional Info:
I know I can just redirect the user to the /users/{id} route to view the record, but I really like the modal popup (it keeps them on the dashboard).

Question:
So is there a way I can bind the record to the form?

Solution

Hopefully this helps someone - I was able to solve this by passing

->statePath('state')

->statePath('state')

, this also requires that the Widget has this state defined as

public

public

, it will not work if not defined in the class.

This is the

GenericTableWidget

GenericTableWidget

<?php

namespace App\Filament\Widgets;

use Filament\Forms\Form;
use Filament\Tables\Actions\DeleteAction;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class GenericTableWidget extends BaseWidget
{
    public array $state;
    protected static string $resourceClass;

    public function table(Table $table): Table
    {
        $class = static::$resourceClass;
        $form  = fn(Form $form) => $class::form($form);

        return $table
            ->heading($class::getNavigationLabel())
            ->query($class::getModel()::query())
            ->columns($class::getTableColumns())
            ->actions([
                ViewAction::make()->form($form),
                EditAction::make()->form($form),
                DeleteAction::make(),
            ]);
    }
}

<?php

namespace App\Filament\Widgets;

use Filament\Forms\Form;
use Filament\Tables\Actions\DeleteAction;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class GenericTableWidget extends BaseWidget
{
    public array $state;
    protected static string $resourceClass;

    public function table(Table $table): Table
    {
        $class = static::$resourceClass;
        $form  = fn(Form $form) => $class::form($form);

        return $table
            ->heading($class::getNavigationLabel())
            ->query($class::getModel()::query())
            ->columns($class::getTableColumns())
            ->actions([
                ViewAction::make()->form($form),
                EditAction::make()->form($form),
                DeleteAction::make(),
            ]);
    }
}

Now you can extend this class to show a specific resource such as Users:

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;

class UserTableWidget extends GenericTableWidget
{
    protected static string $resourceClass = UserResource::class;
}

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;

class UserTableWidget extends GenericTableWidget
{
    protected static string $resourceClass = UserResource::class;
}

Make sure that in your

UserResource

UserResource

you have defined the static function

getTableColumns

getTableColumns

public static function getTableColumns(): array
{
    return [
        Tables\Columns\TextColumn::make('name'),
        Tables\Columns\TextColumn::make('email'),
        Tables\Columns\TextColumn::make('role.name')->label('Role')
    ];
}

public static function getTableColumns(): array
{
    return [
        Tables\Columns\TextColumn::make('name'),
        Tables\Columns\TextColumn::make('email'),
        Tables\Columns\TextColumn::make('role.name')->label('Role')
    ];
}

Jump to solution

TableWidget: Modal in View Actions empty data

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use App\Models\User;
use Filament\Forms\Form;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class UserWidget extends BaseWidget
{
    public function table(Table $table): Table
    {
        return $table
            ->query(
                User::query()
            )
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                ViewAction::make()
                    ->form(function (User $user) {
                        $form = UserResource::form(Form::make($this))
                            ->model($user);

                        $form->fill($user->getAttributes());
                        return $form;
                    }),
            ]);
    }
}

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;
use App\Models\User;
use Filament\Forms\Form;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class UserWidget extends BaseWidget
{
    public function table(Table $table): Table
    {
        return $table
            ->query(
                User::query()
            )
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                ViewAction::make()
                    ->form(function (User $user) {
                        $form = UserResource::form(Form::make($this))
                            ->model($user);

                        $form->fill($user->getAttributes());
                        return $form;
                    }),
            ]);
    }
}

Solution

Hopefully this helps someone - I was able to solve this by passing

->statePath('state')

->statePath('state')

, this also requires that the Widget has this state defined as

public

public

, it will not work if not defined in the class.

This is the

GenericTableWidget

GenericTableWidget

<?php

namespace App\Filament\Widgets;

use Filament\Forms\Form;
use Filament\Tables\Actions\DeleteAction;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class GenericTableWidget extends BaseWidget
{
    public array $state;
    protected static string $resourceClass;

    public function table(Table $table): Table
    {
        $class = static::$resourceClass;
        $form  = fn(Form $form) => $class::form($form);

        return $table
            ->heading($class::getNavigationLabel())
            ->query($class::getModel()::query())
            ->columns($class::getTableColumns())
            ->actions([
                ViewAction::make()->form($form),
                EditAction::make()->form($form),
                DeleteAction::make(),
            ]);
    }
}

<?php

namespace App\Filament\Widgets;

use Filament\Forms\Form;
use Filament\Tables\Actions\DeleteAction;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\ViewAction;
use Filament\Tables\Table;
use Filament\Widgets\TableWidget as BaseWidget;

class GenericTableWidget extends BaseWidget
{
    public array $state;
    protected static string $resourceClass;

    public function table(Table $table): Table
    {
        $class = static::$resourceClass;
        $form  = fn(Form $form) => $class::form($form);

        return $table
            ->heading($class::getNavigationLabel())
            ->query($class::getModel()::query())
            ->columns($class::getTableColumns())
            ->actions([
                ViewAction::make()->form($form),
                EditAction::make()->form($form),
                DeleteAction::make(),
            ]);
    }
}

Now you can extend this class to show a specific resource such as Users:

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;

class UserTableWidget extends GenericTableWidget
{
    protected static string $resourceClass = UserResource::class;
}

<?php

namespace App\Filament\Widgets;

use App\Filament\Resources\UserResource;

class UserTableWidget extends GenericTableWidget
{
    protected static string $resourceClass = UserResource::class;
}

Make sure that in your

UserResource

UserResource

you have defined the static function

getTableColumns

getTableColumns

public static function getTableColumns(): array
{
    return [
        Tables\Columns\TextColumn::make('name'),
        Tables\Columns\TextColumn::make('email'),
        Tables\Columns\TextColumn::make('role.name')->label('Role')
    ];
}

public static function getTableColumns(): array
{
    return [
        Tables\Columns\TextColumn::make('name'),
        Tables\Columns\TextColumn::make('email'),
        Tables\Columns\TextColumn::make('role.name')->label('Role')
    ];
}

Jump to solution

TableWidget: Modal in View Actions empty data

TableWidget: Modal in View Actions empty data

Similar Threads

Similar Threads

Similar Threads