How to get started with Filament

Amela🦦 — Wed, 07 Sep 2022 11:44:51 +0000

Filament is a package for the PHP Framework Laravel built using the TALL-Stack.
T - Tailwind CSS
A - Alpine.js
L - Laravel
L - Livewire

If you want to build a good looking Admin Panel, add Forms or Tables to your Laravel project, this tool will save you a lot of time and code! If you want to look at it first before installing, look at their demo.

I'm here to collect a few tips and trick on how to quickly get started with the Admin Panel.

First, install the package

composer require filament/filament:"^2.0"

In order to access your Admin Panel, attach "/admin" to your app URL.

Next, create a user

php artisan make:filament-user

You can enter a name, e-mail and password. If you have added non-nullable columns in your users table, you would have to make a default user in your factory.

One of the most powerful tools will be

composer require doctrine/dbal

With this package, Filament can auto-generate forms and tables based on your models' database columns. To create a Resource, from the models' database columns all you need to do is

php artisan make:filament-resource YourModelName --generate

With just this one command you create a Create, List and Edit Page:

List: a table filled with all your database columns your_app_url/admin/your_model_name
Create: an empty form which saves information into your database your_app_url/admin/your_model_name/create
Edit: a form filled with the records information your_app_url/admin/your_model_name/ID/edit

You can change your form and table in your models' Resource file. There is a variety of available fields and columns, filters and actions.

This is optional, but you can also create a ViewPage, that looks similar to the Edit Page, but only let's a user see the content without being able to modify it. Useful if you want certain users to only view, yet not modify content.

php artisan make:filament-resource YourModelName --view

You have to register the ViewPage in the resources' getPages() method.

public static function getPages(): array
{
    return [
        'index' => Pages\ListUsers::route('/'),
        'create' => Pages\CreateUser::route('/create'),
        'view' => Pages\ViewUser::route('/{record}'),
        'edit' => Pages\EditUser::route('/{record}/edit'),
    ];
}

Now you should have a basic structure of you Filament Admin Panel! Setting up the basic core of your project requires just a few commands, from this point on you can customize and expand.

There are endless possibilities on how you can actually use this package. For example, I'm working on a shift-organization tool, which after these initial steps only took a bit of tweaking to become fully functional in no time!

Hope you enjoy!

PS: Filament has so much up its sleeve, so I will be making this a series! If you want to know more basics and tips, make sure to follow me!😁

DEV Community: Amela🦦

How to get started with Filament