I’m seeking guidance on best practices for creating a custom form within a Filament page. The form is quite simple: it includes a single input field and a button that triggers a modal dialog. The primary goal is to fetch a price from an external API. This form is independent of any Filament resource (i.e., no CRUD operations are involved; it’s purely a search function).
Current Approach & Issues • Since this is a standalone page within Filament, I assume that a Livewire component isn’t necessary. • However, If the "Search" field is empty, I’m facing an issue where the required field validation does not trigger when the modal appears, and I click the confirmation button. • The current approach works - I can dd() inside the SearchPriceAPI function - but I feel like this might not be the best implementation.
Step 1 - Create filament page:
php artisan make:filament-page SearchPrice
php artisan make:filament-page SearchPrice
Step 2 - Build correspondent form:
class SearchPrice extends Page implements HasForms{ use InteractsWithForms; protected static ?string $navigationIcon = 'heroicon-o-document-text'; protected static string $view = 'filament.pages.search-price'; public ?array $data = []; public function form(Form $form): Form { return $form ->schema([ TextInput::make('Search')->required(), Actions::make([ Action::make('Search') ->requiresConfirmation() ->action(fn() => $this->SearchPriceAPI()) ]), ]) ->statePath('data'); // ✅ Bind form state to $data } public function SearchPriceAPI() { // Send Get Request to obtain the price // Show data to the user }}
class SearchPrice extends Page implements HasForms{ use InteractsWithForms; protected static ?string $navigationIcon = 'heroicon-o-document-text'; protected static string $view = 'filament.pages.search-price'; public ?array $data = []; public function form(Form $form): Form { return $form ->schema([ TextInput::make('Search')->required(), Actions::make([ Action::make('Search') ->requiresConfirmation() ->action(fn() => $this->SearchPriceAPI()) ]), ]) ->statePath('data'); // ✅ Bind form state to $data } public function SearchPriceAPI() { // Send Get Request to obtain the price // Show data to the user }}