Modifikasi Create Data Pada Modal Create Form di Filament v3

By Ifcode
2 months ago Views: 27
Modifikasi Create Data Pada Modal Create Form di Filament v3
Tips

Pada saat kita menggunakan filament pada laravel sebagai admin page untuk mempercepat proses pembuatan halaman admin, adakalanya kita mengingikan hal yang simple seperti pembuatan form dengan modal. Pada filament, semua form bila kita tidak mendefinisikan "CreatePage" pada resource yang kita buat (dalam hal ini menggunakan simple resource) maka form akan secara default ditampilkan dalam bentuk modal.

Saat kita menggunakan simple resource tersebut dengan default modal form, adakalanya kita ingin memodifikasi terlebih dahulu data yang akan kita simpan ke database. Karena defaultnya, pada laravel filament akan menyimpan semua data yang kita deskripsikan pada form yang kita buat.

Untuk memodifkasi data sebelum kita simpan ke database. Berikut ini caranya :

Menggunakan Simple Resource

Setelah kita membuat simple resource dengan perintah : 

php artisan make:filament-resource <nama_resource> --simple

maka akan mendapatkan file pada folder Filament/Resource/<nam_resource>/Pages. Dalam folder tersebut akan ada file "Manage<nama_resource>" yang didalamnya ada method "getHeaderActions". Nah pada bagian fungsi actionya kalian bisa tambahkan fungsi dibawah ini :

 Actions\CreateAction::make()
                ->mutateFormDataUsing(function (array $data) {
                    dd($data);
                }),

saya menggunakan fungsi "dd" untuk mengetahui apakah saat klik pada button "Create" data akan terpanggil ? jika muncul tampilan "dd" pada halaman maka method "mutateFormDataUsing" berhasil dan kamu tinggal memodifikasi data yang akan di insert ke dalam tabel.

Menggunakan Full Resource

Jika kamu sudah terlanjut meng-create full resource maka pada bagian folder Filement/Resource/<nama_resource/Page akan ada file dengan nama "List<nama_resource>". Kamu bisa memodifikasi method "getHeaderActions" pada fungsi "CreateAction" seperti dibawah ini :

 Actions\CreateAction::make()
                ->mutateFormDataUsing(function (array $data) {
                    dd($data);
                }),

ini juga sama saya menggunakan "dd" untuk mengetahui apakah fungsi "mutateFormDataUsing" terpanggil atau tidak. Jika terpanggil maka kalian tinggal memodifikasi data sebelum di insert ke dalam tabel.

Pada method tersebut, kamu juga bisa menambahkan custom button dengan cara menambahkan Class Action baru seperti contoh dibawah ini :

protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->mutateFormDataUsing(function (array $data) {
                    dd($data);
                }),
            Actions\CreateAction::make('otherForm')
                    ->label('Testing Button Custom')
                    ->form([
                        TextInput::make('title')
                            ->required()
                            ->maxLength(255),                        
                    ]),
        ];
    }

yang nantinya akan muncul di sebelah kanan atas seperti gambar berikut :

contoh penambahan button baru

ref : https://github.com/filamentphp/filament/issues/7695