Form, Grid to have Sections on main area with side area.

I have a form a want to display in like a main area with a side area.
Like this sample:
https://demo.filamentphp.com/shop/products/1/edit?activeRelationManager=0

I have the following code, what I'm doing wrong...?

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Grid::make([
                    'md' => 3,
                ])
                    ->schema([
                        Forms\Components\Section::make('Name')
                            ->schema([
                                Forms\Components\TextInput::make('name'),
                            ])
                            ->columns(2),
                        Forms\Components\Section::make('Date')
                            ->schema([
                                Forms\Components\DatePicker::make('created_at'),
                            ])
                            ->columns(1),
                    ]),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Grid::make([
                    'md' => 3,
                ])
                    ->schema([
                        Forms\Components\Section::make('Name')
                            ->schema([
                                Forms\Components\TextInput::make('name'),
                            ])
                            ->columns(2),
                        Forms\Components\Section::make('Date')
                            ->schema([
                                Forms\Components\DatePicker::make('created_at'),
                            ])
                            ->columns(1),
                    ]),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Grid::make([
                    'md' => 3,
                ])
                    ->schema([
                        Forms\Components\Section::make('Name')
                            ->schema([
                                Forms\Components\TextInput::make('name'),
                            ])
                            ->columns(2),
                        Forms\Components\Section::make('Date')
                            ->schema([
                                Forms\Components\DatePicker::make('created_at'),
                            ])
                            ->columns(1),
                    ]),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Grid::make([
                    'md' => 3,
                ])
                    ->schema([
                        Forms\Components\Section::make('Name')
                            ->schema([
                                Forms\Components\TextInput::make('name'),
                            ])
                            ->columns(2),
                        Forms\Components\Section::make('Date')
                            ->schema([
                                Forms\Components\DatePicker::make('created_at'),
                            ])
                            ->columns(1),
                    ]),
            ]);
    }

The above code gives me the sections stacked and not "Name" on the left (2 columns) and "Date" on the right (in one column).

Thank you for your help.

Pablo TorresOP•6/28/23, 9:14 PM

Looks like the answer is here

https://github.com/filamentphp/demo/blob/main/app/Filament/Resources/Shop/ProductResource.php

GitHub

demo/app/Filament/Resources/Shop/ProductResource.php at main · fila...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

Pablo TorresOP•6/28/23, 9:30 PM

For the record. I was not able to find any reference to Forms\Components\Group in the docs, here what worked for me.is

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Group::make()
                    ->schema([
                        Forms\Components\TextInput::make('uuid')
                            ->label('UUID')
                            ->required()
                            ->maxLength(36),
                    ])
                    ->columnSpan(['lg' => 2]),
                Forms\Components\Group::make()
                    ->schema([
                        Forms\Components\DateTimePicker::make('marked_ready_at')
                            ->disabled(),
                    ])
                    ->columnSpan(['lg' => 1]),
            ])
            ->columns(3);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Group::make()
                    ->schema([
                        Forms\Components\TextInput::make('uuid')
                            ->label('UUID')
                            ->required()
                            ->maxLength(36),
                    ])
                    ->columnSpan(['lg' => 2]),
                Forms\Components\Group::make()
                    ->schema([
                        Forms\Components\DateTimePicker::make('marked_ready_at')
                            ->disabled(),
                    ])
                    ->columnSpan(['lg' => 1]),
            ])
            ->columns(3);
    }

Thanks

public static function form(Form $form): Form { return $form ->schema([ Forms\Components\Group::make() ->schema([ Forms\Components\TextInput::make('uuid') ->label('UUID') ->required() ->maxLength(36), ]) ->columnSpan(['lg' => 2]), Forms\Components\Group::make() ->schema([ Forms\Components\DateTimePicker::make('marked_ready_at') ->disabled(), ]) ->columnSpan(['lg' => 1]), ]) ->columns(3); }

Form, Grid to have Sections on main area with side area.

Similar Threads

Similar Threads

Similar Threads