Filament•16mo ago

Custom Page with Form Builder

Hello Guys, I'm testing the Custom Page and i have a problem with the Repeater Component. It's simply don't start the component. The warning in browser console is printed. This is my blade content:

<x-filament-panels::page>
    {{ $this->form }}
</x-filament-panels::page>

<x-filament-panels::page>
    {{ $this->form }}
</x-filament-panels::page>

This is my page class:

<?php

namespace App\Filament\Pages;

use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Pages\Page;

class Settings extends Page implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

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

    protected static string $view = 'filament.pages.settings';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Repeater::make('items')
                ->schema([
                    TextInput::make('title')->required(),
                ])
                ->addActionLabel('Add member')
                ->defaultItems(3)
            ]);
    }

}

<?php

namespace App\Filament\Pages;

use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Pages\Page;

class Settings extends Page implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

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

    protected static string $view = 'filament.pages.settings';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Repeater::make('items')
                ->schema([
                    TextInput::make('title')->required(),
                ])
                ->addActionLabel('Add member')
                ->defaultItems(3)
            ]);
    }

}

10 Replies

awcodes•16mo ago

You’re on the right track but you’re not doing everything needed to set it up. You need to call $this->form->fill() in the mount function. You’ll also need to create a public property for the form data and set that to the statePath for the form.

awcodes•16mo ago

Read through all of https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component before trying to implement forms on a custom page.

Adding a form to a Livewire component - Form Builder - Filament

adriejsilvaOP•16mo ago

Oh man, it's work nowww!!! Thank you Why this different are in diff pages? I had already seen, buty is two commands differents to create a Page

adriejsilvaOP•16mo ago

https://filamentphp.com/docs/3.x/panels/pages

Pages - Panel Builder - Filament

adriejsilvaOP•16mo ago

In that case, in panel builder, its my case, don't have all process. Have a motive?

awcodes•16mo ago

Sorry, not sure what you’re asking.

adriejsilvaOP•16mo ago

Sorry, my english is a little bad.

adriejsilvaOP•16mo ago

What is difference beetween: https://filamentphp.com/docs/3.x/panels/pages And https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

Pages - Panel Builder - Filament

Adding a form to a Livewire component - Form Builder - Filament

awcodes•16mo ago

There is no difference. You’re just assuming that the two are different. When you create a custom page it’s basically just a shell that is a livewire component. So the process in the second link is the application of your functionality to the livewire component. It’s fair that there’s some confusion there, but understanding livewire should help with the mental model of how it works. It has to be described this way in the docs because you can use the forms, or any of the other packages without the panels.

adriejsilvaOP•16mo ago

You are right, I'll take some time to read more about liveware. Thank you for your help

Gaming

Programming

Custom Page with Form Builder