Filament•2mo ago

Adjust columns of form within `createOptionForm()` method

Hi, I'm allowing the creation of records "on the fly" by using the createOptionForm() method on a Select form field, and it's functionally working well. However, I'm struggling to enable a multi-column layout of the fields in this form compared to the original/"parent" form. I have attached screenshots of both forms. As you'll see, the "parent" form is formatted as desired, but applying the same column rules to the fields for the createOptionForm() doesn't have the same effect. I would very much appreciate any ideas on how this can be adjusted! Thanks in advance. 🙏

Solution:

Wrap the modal form’s fields in a Grid layout component and apply your settings to that.

Jump to solution

2 Replies

Solution

awcodes•2mo ago

Wrap the modal form’s fields in a Grid layout component and apply your settings to that.

Adapt.Patrick•2mo ago

Thanks for the suggestion, @awcodes and please forgive my ignorance but I'm not sure I understand where I'm supposed to declare the Grid layout component. 🤔 Below is a skeleton of my current structure for the form & nested create flow (in the form() method):

return $form
          ->schema([
              Select::make('parent_id')
                  ->label('Parent Company')
                  ->columnSpan(2)
                  ->relationship(name: 'parent', titleAttribute: 'name', modifyQueryUsing: function ($query) {
                      return $query->whereNull('parent_id');
                  })
                  ->createOptionForm(
                    // Create form fields
                  )
                  ->createOptionModalHeading('Create Parent Company')
                  ->createOptionAction(
                      fn (Action $action) => $action->modalWidth('lg'),
                  )
                  ->searchable()
                  ->preload(),
              // Other form fields
          ])
          ->columns(2);

return $form
          ->schema([
              Select::make('parent_id')
                  ->label('Parent Company')
                  ->columnSpan(2)
                  ->relationship(name: 'parent', titleAttribute: 'name', modifyQueryUsing: function ($query) {
                      return $query->whereNull('parent_id');
                  })
                  ->createOptionForm(
                    // Create form fields
                  )
                  ->createOptionModalHeading('Create Parent Company')
                  ->createOptionAction(
                      fn (Action $action) => $action->modalWidth('lg'),
                  )
                  ->searchable()
                  ->preload(),
              // Other form fields
          ])
          ->columns(2);

Could you indicate where the Grid is supposed to be implemented, please? I have tried implementing it as a Closure to the ->createOptionForm() method (e.g. ->createOptionForm(fn() => Grid::make()->schema()) but it doesn't seem to like it there, so I might be going wrong somewhere... 😬😓 DW. Got it. 🤦‍♂️😅 Thanks again @awcodes! For the benefit of anybody else who discovers this thread, my solution was as follows:

return $form
          ->schema([
              Select::make('parent_id')
                  ->label('Parent Company')
                  ->columnSpan(2)
                  ->relationship(name: 'parent', titleAttribute: 'name', modifyQueryUsing: function ($query) {
                      return $query->whereNull('parent_id');
                  })
                  ->createOptionForm([
                    Grid::make()
                      ->columns(2)
                      ->schema([
                        // Create form fields
                      ])
                  ])
                  ->createOptionModalHeading('Create Parent Company')
                  ->createOptionAction(
                      fn (Action $action) => $action->modalWidth('lg'),
                  )
                  ->searchable()
                  ->preload(),
              // Other form fields
          ])
          ->columns(2);

return $form
          ->schema([
              Select::make('parent_id')
                  ->label('Parent Company')
                  ->columnSpan(2)
                  ->relationship(name: 'parent', titleAttribute: 'name', modifyQueryUsing: function ($query) {
                      return $query->whereNull('parent_id');
                  })
                  ->createOptionForm([
                    Grid::make()
                      ->columns(2)
                      ->schema([
                        // Create form fields
                      ])
                  ])
                  ->createOptionModalHeading('Create Parent Company')
                  ->createOptionAction(
                      fn (Action $action) => $action->modalWidth('lg'),
                  )
                  ->searchable()
                  ->preload(),
              // Other form fields
          ])
          ->columns(2);

I made the mistake previously of trying to use Filament\Tables\Components\Grid when I should have been using Filament\**Forms**\Components\Grid. 🙄

Gaming

Programming

Adjust columns of form within `createOptionForm()` method