Filament•4mo ago

Dynamic Form Component

What I'm trying to achieve is to dynamically append additional form components to the parent form. The additional form components are encapsulated in a service class, and each service class has custom form components. When a user selects the service type from the dropdown, I want to take the selected state value, instantiate that service class to retrieve its form components, and then append those to the child container. What I did: I was able to replace the full form, but instead, I would like to append the additional form components to the parent form if possible.

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

public static function form(Form $form): Form
{
    $serviceTypeOption = ServiceTypeManager::options();
    return $form
        ->schema([
            TextInput::make('name'),
            Select::make('service_type')
                ->live()
                ->options($serviceTypeOption)
                ->afterStateUpdated(function (Select $component) use ($form) {
                    $state = $component->getState();
                    ServiceTypeManager::make($state)->form($form)->fill();
                })
        ]);
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

class GoogleCalendarServiceType extends BaseServiceType
{
    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('slacker')->label('Slacker'),
        ]);
    }
}

Solution:

Thank you! This is what I managed to get working. ```php public static function form(Form $form): Form {...

Jump to solution

2 Replies

Lara Zeus•4mo ago

you can add a section, and set its schema base on the selected service

Section::make()
->live()
->schema(function ($get, $record, $set): array {
  $schema=[];
  /// if $get('service_type') ... else
  $schema=[]=TextInput::make('model_id');
  return $schema;
}

Section::make()
->live()
->schema(function ($get, $record, $set): array {
  $schema=[];
  /// if $get('service_type') ... else
  $schema=[]=TextInput::make('model_id');
  return $schema;
}

this also can give you an idea https://github.com/danharrin/form-builder/blob/main/app/Http/Livewire/Form.php#L31

Solution

UnderOath777•4mo ago

Thank you! This is what I managed to get working.

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

 public static function form(Form $form): Form
    {
        $serviceTypeOption = ServiceTypeManager::options();
        return $form
            ->schema([
                TextInput::make('name'),
                Select::make('service_type')
                    ->live()
                    ->options($serviceTypeOption)
                    ->afterStateUpdated(function (Select $component) {
                        $component->getContainer()
                            ->getComponent('settings')
                            ->getChildComponentContainer()
                            ->fill();
                    }),
                Group::make(static function (Get $get) {
                    $value = $get('service_type');
                    if ($value) {
                        return ServiceTypeManager::make($value)->formComponents();
                    }
                    return [];
                })->statePath('settings')
                    ->key('settings')
            ]);
    }

Gaming

Programming

Dynamic Form Component