F
Filament•18h ago
o.m

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
15 Replies
o.m
o.mOP•18h 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
morty•18h ago
morty
morty•18h ago
Resource sub-navigation is what you're looking for I think
morty
morty•18h ago
o.m
o.mOP•18h ago
Hi, Morty would it be okay if you could guide me through this?
morty
morty•18h ago
I've got my own projects I'm working on but if you post in here I'll help when I can.
morty
morty•18h ago
This is what you're looking for, right?
No description
o.m
o.mOP•17h 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
morty•17h ago
Yes, it's loading a manage related records page but you can also just do custom pages.
No description
morty
morty•17h ago
o.m
o.mOP•17h ago
@morty in my current setup do you recommend me to use Resource or Custom pages ?
morty
morty•16h 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.m
o.mOP•12h 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?
No description
o.m
o.mOP•11h 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
morty•10h 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';
}

Did you find this page helpful?