F
Filament•2w ago
jjo63

Building own "resource" to run within the Filament UI

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
5 Replies
awcodes
awcodes•2w ago
jjo63
jjo63OP•7d ago
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 🙂
Povilas K
Povilas K•7d ago
@jjo63 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');
    }
}
// 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>
<!-- 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,
    ]);
use App\Filament\Pages\CustomSearch;

// In the panel() method:
return $panel
    ->pages([
        CustomSearch::class,
    ]);
jjo63
jjo63OP•4d ago
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. 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.
Povilas K
Povilas K•2d ago
Well, I used AI only to provide a quick answer with the IDEA on how you should go, not for literal copy-pasting the answer, so of course, you need to double-check, and that's why AI generators and assistants won't replace devs anytime soon, because in 99% cases some modifications are needed anyway, so devs need to understand how it works. But something for me to think about for the future: probably on this Discord and forums it's dangerous/harmful to just give the answer from AI, as most people seem to be not experienced enough to process it. That said, maybe sometimes it's better to provide this answer than no answer at all, as reproducing the situation for me and providing the working code would take an hour or two (which I don't have as free time).
Want results from more Discord servers?
Add your server