Filament•3mo ago

Toggle fieldsets visibility, but also save hidden data.

My form has a selector with many 'providers'. When selecting a provider, inputs relating to that particular provider are shown. Problem is that I want user to be able to switch between providers, without losing settings for other providers. What is the most straight-forward way to accomplish this? Simply showing/hiding fieldset doesn't work, because data for hidden fields is not saved.

12 Replies

ChesterS•3mo ago

use ->dehydrate(true) on hidden fields maybe? Not sure exactly what you're trying to achieve tbh

Jouri JalvingOP•3mo ago

That's doesn't seem to work. What I'm trying to achieve is basically tabs, but because there are many options I want to display a select instead of tabs.

ChesterS•3mo ago

What do you mean 'it doesn't work' ? Can you give a small example of your code?

Jouri JalvingOP•3mo ago

So for example like this:

Forms\Components\Select::make('provider')
  ->options(Provider::class)
  ->required()
  ->live(),
Forms\Components\TextInput::make('provider1_api_key')
  ->hidden(fn($get) => $get('provider') !== Provider::PROVIDER1->value)
  ->required(fn($get) => $get('provider') === Provider::PROVIDER1->value)
  ->dehydrated(true),
Forms\Components\TextInput::make('provider2_api_key')
  ->hidden(fn($get) => $get('provider') !== Provider::PROVIDER2->value)
  ->required(fn($get) => $get('provider') === Provider::PROVIDER2->value)
  ->dehydrated(true),

Forms\Components\Select::make('provider')
  ->options(Provider::class)
  ->required()
  ->live(),
Forms\Components\TextInput::make('provider1_api_key')
  ->hidden(fn($get) => $get('provider') !== Provider::PROVIDER1->value)
  ->required(fn($get) => $get('provider') === Provider::PROVIDER1->value)
  ->dehydrated(true),
Forms\Components\TextInput::make('provider2_api_key')
  ->hidden(fn($get) => $get('provider') !== Provider::PROVIDER2->value)
  ->required(fn($get) => $get('provider') === Provider::PROVIDER2->value)
  ->dehydrated(true),

In real life I'm using fieldsets to group multiple inputs, but I've tried a basic version like this as well. When selecting provider1, the provider2_api_key gets cleared when saving.

ChesterS•3mo ago

So you want both provider1_api_key and provider2_api_key to be available when they submit, no matter what they select in the provider field, right?

Jouri JalvingOP•3mo ago

Exactly

ChesterS•3mo ago

I'm not sure where you use this, but if this is a page, you can try $this->form->getRawData() This might not be practical for your use case though And you might have to filter out other data manually. Not sure if there's a better way to do this tbh. Typical Filament behaviour is to get rid of hidden fields That being said, it feels like there might be a better solution for what you're trying to do. Forms do have tabs - does that not work for you? A hacky approach would be to do something like this

  ->extraAttributes(fn ($get) => [
      'class' => $get('provider') !== Provider::PROVIDER2->value) ? 'hidden' : ''
  ])

  ->extraAttributes(fn ($get) => [
      'class' => $get('provider') !== Provider::PROVIDER2->value) ? 'hidden' : ''
  ])

but that looks weird haha

Jouri JalvingOP•3mo ago

Yeah I feel like this solution is getting convoluted. Tabs works, but it's not ideal since there are many 'providers' to Select from. Also a Select allows users to search for a specific provider more easily. A tabs bar would be very wide and practically unusable. But I'm definitly open to other solutions!

ChesterS•3mo ago

Hmm looks like the CSS solution might be what you want? You want the form to be there but hidden - so hide the fieldsets using CSS based on the value of provider ?

Jouri JalvingOP•3mo ago

Well... it's not pretty but I guess that might be the best solution! Thanks for thinking with me!

ChesterS•3mo ago

Haha no worries. Look into repeaters/builder - might be a better solution (depending on what you want to achieve) https://filamentphp.com/docs/3.x/forms/fields/builder

Jouri JalvingOP•3mo ago

I'll look into it, might be something there!

Gaming

Programming

Toggle fieldsets visibility, but also save hidden data.

Did you find this page helpful?