Filament•4w ago

Is it possible to create a Filament settings page with a tabbed form, for multiple settings groups?

I have created a few Filament Spatie Settings pages, but I feel like this quickly gets overwhelming with more and more settings pages. So I was wondering how to create a settings page, that contains a tabbed view of all settings groups, where each tab would be a form for that specific settings group?

Solution:

Thanks! I managed to do it, but I still copied the blade view that the SettingsPage uses, and used it for my ManageSettings page. I tried to get the submit button to be tab specific, but gave up on this in the end, and just checked if the submitted settings have changed, and then only save the changed settings to the database to keep timestamp integrity. To keep adding and removing settings classes to and from tabs simple, I added an interface for my settings classes, and added tab name, schema, and tab order parameters directly to the settings classes to be used by the filament tabbed settings page. Then the settings page looks through all classes that implements the interface, and builds the tabs dynamically from these....

Jump to solution

10 Replies

Tally•4w ago

Hi there, I think this would be possible but you have to "lend" some code from use Filament\Pages\SettingsPage to get it to work

nowak•4w ago

Hi! Do you mean I would have to create my own Page without extending the SettingsPage?

Tally•4w ago

Yes indeed... then take some code from the base Settingspage to fit your needs Use your own fillForm to fill your tabbed form with all the settings and save() to write them back to the database 😉

nowak•4w ago

I will give it a go, thanks!

Tally•4w ago

You're welcome... you can do it 😉

nowak•4w ago

Would I have to write my own blade view as well?

Tally•4w ago

no that's not necessary

Tally•4w ago

check out https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#using-multiple-forms to see the use of statePath for storing the different settings in seperate arrays

Adding a form to a Livewire component - Form Builder - Filament

Solution

nowak•4w ago

<?php

namespace App\Settings\Contracts;

interface SettingsTabInterface
{
    public static function tabName(): string;
    public static function schema(): array;
    public static function tabOrder(): int;
}

<?php

namespace App\Settings\Contracts;

interface SettingsTabInterface
{
    public static function tabName(): string;
    public static function schema(): array;
    public static function tabOrder(): int;
}

an example app/Settings/GeneralSettings.php

<?php

namespace App\Settings;

use App\Settings\Contracts\SettingsTabInterface;
use Filament\Forms;
use Spatie\LaravelSettings\Settings;

class GeneralSettings extends Settings implements SettingsTabInterface
{
    public string $site_name;
    public static function group(): string
    {
        return 'general';
    }

    public static function tabName(): string
    {
        return 'General';
    }

    public static function schema(): array
    {
        return [
            Forms\Components\TextInput::make('site_name')
                ->label('Site Name')
                ->required(),
        ];
    }

    public static function tabOrder(): int
    {
        return 10;
    }
}

<?php

namespace App\Settings;

use App\Settings\Contracts\SettingsTabInterface;
use Filament\Forms;
use Spatie\LaravelSettings\Settings;

class GeneralSettings extends Settings implements SettingsTabInterface
{
    public string $site_name;
    public static function group(): string
    {
        return 'general';
    }

    public static function tabName(): string
    {
        return 'General';
    }

    public static function schema(): array
    {
        return [
            Forms\Components\TextInput::make('site_name')
                ->label('Site Name')
                ->required(),
        ];
    }

    public static function tabOrder(): int
    {
        return 10;
    }
}

And my Filament settings page app/Filament/Pages/ManageSettings.php in next message

nowak•4w ago

app/Filament/Pages/ManageSettings.php

ManageSettings.php

Gaming

Programming

Is it possible to create a Filament settings page with a tabbed form, for multiple settings groups?