Filament•5d ago

Implementing tabs that changes the whole page

How do I implement a tab that will change the whole page and set the url? The current setup of that is that you can click multiple tabs without affecting the url. In my case I have a lots of tabs and some tabs contains tables and I don't want the page to load all the contents of those tabs in one go as it will severely affect the resource and performance on the server. Please see the demo

30 Replies

o.mOP•5d ago

So as you see on the demo the tab is set and it only loaded that contents on the selected tab which is what I wanted to implement here.

morty•5d ago

https://filamentphp.com/docs/3.x/panels/resources/relation-managers#relation-pages

Managing relationships - Panels - Filament

morty•5d ago

Resource sub-navigation is what you're looking for I think

morty•5d ago

https://filamentphp.com/docs/3.x/panels/resources/getting-started#resource-sub-navigation

Getting started - Panels - Filament

o.mOP•5d ago

Hi, Morty would it be okay if you could guide me through this?

morty•5d ago

I've got my own projects I'm working on but if you post in here I'll help when I can.

morty•5d ago

This is what you're looking for, right?

o.mOP•5d ago

YES something like that, what happens if you click on the contact, will the whole page reload and load only the the contents inside the "Contacts" Tab?

morty•5d ago

Yes, it's loading a manage related records page but you can also just do custom pages.

morty•5d ago

https://filamentphp.com/docs/3.x/panels/resources/viewing-records#adding-view-pages-to-resource-sub-navigation

o.mOP•5d ago

@morty in my current setup do you recommend me to use Resource or Custom pages ?

morty•5d ago

You can mix-and-match. I can't really answer that for you because I don't know your project. If your tabs will be related records to the resource record then use manage related records pages. Otherwise you might need custom pages.

o.mOP•5d ago

I added a custom page called SettingAccountDetails.php however I have trouble adding this SettingAccountDetails as a Navigation tab under Setting.php What should be the right way for calling custom page as a tab?

o.mOP•5d ago

Please guide me as I am not even sure if I am doing these steps correctly or should I create a Settings Resource instead ?

morty•5d ago

ya it's sub-resource navigation. Is setting related to the user resource in that screenshot? If not, I think you'd need to create a setting resource. Some code that might help you:

class AccountResource extends Resource
{
    protected static ?string $model = Account::class;

    protected static ?string $recordTitleAttribute = 'name';

    protected static ?int $navigationSort = 1;

    protected static ?string $navigationGroup = 'Resources';

    protected static ?string $navigationIcon = 'heroicon-o-home-modern';

    protected static ?string $navigationLabel = 'Accounts';

    protected static SubNavigationPosition $subNavigationPosition = SubNavigationPosition::End;

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListAccounts::route('/'),
            'view' => Pages\ViewAccount::route('/{record}'),
            'contacts.index' => Pages\ManageAccountContacts::route('/{record}/contacts'),
            'fields.index' => Pages\ManageAccountFields::route('/{record}/fields'),
            'files.index' => Pages\ManageAccountFiles::route('/{record}/files'),
            'notes.index' => Pages\ManageAccountNotes::route('/{record}/notes'),
            'tickets.index' => Pages\ManageAccountTickets::route('/{record}/tickets'),
        ];
    }

    public static function getRecordSubNavigation(Page $page): array
    {
        return $page->generateNavigationItems([
            Pages\ViewAccount::class,
            Pages\ManageAccountContacts::class,
            Pages\ManageAccountFields::class,
            Pages\ManageAccountFiles::class,
            Pages\ManageAccountNotes::class,
            Pages\ManageAccountTickets::class,
        ]);
    }
}

class AccountResource extends Resource
{
    protected static ?string $model = Account::class;

    protected static ?string $recordTitleAttribute = 'name';

    protected static ?int $navigationSort = 1;

    protected static ?string $navigationGroup = 'Resources';

    protected static ?string $navigationIcon = 'heroicon-o-home-modern';

    protected static ?string $navigationLabel = 'Accounts';

    protected static SubNavigationPosition $subNavigationPosition = SubNavigationPosition::End;

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListAccounts::route('/'),
            'view' => Pages\ViewAccount::route('/{record}'),
            'contacts.index' => Pages\ManageAccountContacts::route('/{record}/contacts'),
            'fields.index' => Pages\ManageAccountFields::route('/{record}/fields'),
            'files.index' => Pages\ManageAccountFiles::route('/{record}/files'),
            'notes.index' => Pages\ManageAccountNotes::route('/{record}/notes'),
            'tickets.index' => Pages\ManageAccountTickets::route('/{record}/tickets'),
        ];
    }

    public static function getRecordSubNavigation(Page $page): array
    {
        return $page->generateNavigationItems([
            Pages\ViewAccount::class,
            Pages\ManageAccountContacts::class,
            Pages\ManageAccountFields::class,
            Pages\ManageAccountFiles::class,
            Pages\ManageAccountNotes::class,
            Pages\ManageAccountTickets::class,
        ]);
    }
}

class ViewAccount extends ViewRecord
{
    protected static string $resource = AccountResource::class;

    protected static ?int $navigationSort = 1;

    protected static ?string $navigationIcon = 'heroicon-o-identification';

    protected static ?string $navigationLabel = 'Details';

    protected static ?string $breadcrumb = 'Details';

    protected static ?string $title = 'Account Details';

    protected ?string $heading = 'Account Details';
}

class ViewAccount extends ViewRecord
{
    protected static string $resource = AccountResource::class;

    protected static ?int $navigationSort = 1;

    protected static ?string $navigationIcon = 'heroicon-o-identification';

    protected static ?string $navigationLabel = 'Details';

    protected static ?string $breadcrumb = 'Details';

    protected static ?string $title = 'Account Details';

    protected ?string $heading = 'Account Details';
}

class ManageAccountContacts extends ManageRelatedRecords
{
    protected static string $resource = AccountResource::class;

    protected static string $relationship = 'contacts';

    protected static ?int $navigationSort = 2;

    protected static ?string $navigationIcon = 'heroicon-o-user-group';

    protected static ?string $navigationLabel = 'Contacts';

    protected static ?string $breadcrumb = 'Contacts';

    protected static ?string $title = 'Account Contacts';

    protected ?string $heading = 'Account Contacts';
}

class ManageAccountContacts extends ManageRelatedRecords
{
    protected static string $resource = AccountResource::class;

    protected static string $relationship = 'contacts';

    protected static ?int $navigationSort = 2;

    protected static ?string $navigationIcon = 'heroicon-o-user-group';

    protected static ?string $navigationLabel = 'Contacts';

    protected static ?string $breadcrumb = 'Contacts';

    protected static ?string $title = 'Account Contacts';

    protected ?string $heading = 'Account Contacts';
}

o.mOP•2d ago

Why is it when I tried adding a new Resource, the new For example resource SettingResource does not even show on the left side navigation? as Setting ?

Dennis Koch•2d ago

We just solved this in the other thread, right?

o.mOP•2d ago

Correct Are these Pages such as Pages\ListAccounts , Pages\ViewAccount, Pages\ManageAccountContacts Stored on Filement\Pages\... or Filament\Resources\Pages\... ?

o.mOP•2d ago

@morty I followed your implementation on the navigation but I think I am missing something here in order to display the pages that I wanted under this resource.

morty•2d ago

I'm not really following your settings example. Resource sub-navigation is done for each record of a resource. Perhaps you should be putting your sub-nav on the user resource from what it appears you're trying to achieve. Therefore when you click into a user you'd see the sub-nav. Otherwise, if you're just trying to cluster things then resource sub-navigation is not what you want. Instead you want https://filamentphp.com/docs/3.x/panels/clusters

o.mOP•2d ago

@morty Unfortunately each tab is not really tied down to the settings model.

morty•2d ago

I'm using clusters for my categories like so. You can change the position to the top with these too

o.mOP•2d ago

I will try clusters this time, The Settings structure in the model is quite different

o.mOP•2d ago

morty•2d ago

I watched the video you linked again. From what I gather, this is how it's structured: There is a Group resource. The group that you're working with is called 000 Jeff's Test Group. Therefore if you want to replicate this in Filament, you'd have a GroupResource listing and upon clicking into the 000 Jeff's Test Group record, then the resource subnav would be on that specific record, not the model.

o.mOP•2d ago

Should these tabs still all be inside the Cluster right?

morty•2d ago

https://demo.filamentphp.com/shop/products/products The demo app has a cluster demo

morty•2d ago

And here is the code for that demo site: https://github.com/filamentphp/demo

GitHub

GitHub - filamentphp/demo: Source code for the demo.filamentphp.com...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

o.mOP•2d ago

I see that categories is under the cluster

Gaming

Programming

Implementing tabs that changes the whole page

Did you find this page helpful?