Building own "resource" to run within the Filament UI

[trim sand]

Hi all, can't quite figure out (and am still relatively new to laravel & filament) what steps I would need to follow to be able to add a menu option on the left (where the resource links are placed by default) which will take me to my own resource - which isn't going to return a $table or anything but will allow me to embed code the way I want that will be presented within the overall Filament UI.

I'm not sure of all the terminology so not confident in googling for the answer! I have access to all the Laracasts videos so if anyone can point me to the right video or other documentation that would be fab.

many thanks
j

[heavy agate]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[dry forge]

https://filamentphp.com/docs/3.x/panels/resources/custom-pages

[trim sand]

Thanks, of course that's exactly where I needed to start.

My objective is to present a (text) search field which, upon submission, generates a query which will be executed within Supabase and renders a result set. The default search and result presentation of Filament tables isn't what I want so do need to code something for myself. Any pointers to a suitable "primer' video (or doc) for this? I do realise this is outside of Filament so am chancing my arm here on requesting a small amount of off-topic help 🙂

[pseudo hazel]

@trim sand As an experiment, I've put your question into Claude AI and it gave me pretty good answer, pasting it below. Haven't tried it myself but the direction seems pretty good.

The general idea is that any custom page in Filament is a Livewire component, so in the Blade file you use things like wire:submit="search"

Also as you want to use Filament UI you need to use Filament components such as <x-filament::button type="submit" class="mt-4">

// app/Filament/Pages/CustomSearch.php
namespace App\Filament\Pages;

use Filament\Pages\Page;
use Illuminate\Contracts\View\View;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;

class CustomSearch extends Page
{
    use InteractsWithForms;
    
    protected static ?string $navigationIcon = 'heroicon-o-magnifying-glass';
    protected static ?string $navigationLabel = 'Custom Search';
    protected static ?string $title = 'Custom Search';
    protected static ?string $slug = 'custom-search';
    
    public ?string $searchQuery = '';
    public $searchResults = [];
    
    public function mount(): void
    {
        $this->form->fill();
    }
    
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('searchQuery')
                    ->label('Search Term')
                    ->placeholder('Enter your search term')
                    ->required(),
            ]);
    }
    
    public function search(): void
    {
        $this->validate();
        
        // Here you would implement your Supabase search logic
        // Example:
        // $this->searchResults = YourSupabaseService::search($this->searchQuery);
    }
    
    public function render(): View
    {
        return view('filament.pages.custom-search');
    }
}

<!-- resources/views/filament/pages/custom-search.blade.php -->
<x-filament-panels::page>
    <form wire:submit="search">
        {{ $this->form }}
        
        <x-filament::button type="submit" class="mt-4">
            Search
        </x-filament::button>
    </form>

    @if(count($searchResults) > 0)
        <div class="mt-6">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    @foreach($searchResults as $result)
                        <div class="mb-4 p-4 border rounded">
                            <!-- Customize this based on your result structure -->
                            <h3 class="text-lg font-semibold">{{ $result->title ?? '' }}</h3>
                            <p>{{ $result->description ?? '' }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</x-filament-panels::page>

AdminPanelProvider.php:

use App\Filament\Pages\CustomSearch;

// In the panel() method:
return $panel
    ->pages([
        CustomSearch::class,
    ]);

[trim sand]

Thanks for the suggestion, not getting too far with this (own lack of knowledge probably though I know that AI-generated code can be spot-on sometimes and lead you down many rabbit holes when it isn't 🙂 Cannot judge if it's my problem or the suggested code's problem but am hitting many obstacles. Will feedback when I have it unravelled.

[trim sand]

This block of code

public function render(): View
{
    return view('filament.pages.custom-search');
}

with this piece of code, I was presented at runtime with a completely unstyled form. When I commented out this function, my form was displayed within the context and styling of the rest of the Filament app.

I think this serves as a warning again to take care when using AI to generate code, especially when the language or framework is unfamiliar as it took me quite some time to unravel why I had no styling.