Filament•2y ago

Expose group of fields as a new single reusable field

Hi there! First of all thank you for this amazing framework! I'm looking to build a reusable from input/component. It's a text input and a select. Ideally I'd provide this field as a new component that exposes a single value to the form state. I see two ways of making this work: 1. Build a group/component that has it's own schema of Input and Select.

class MonetaryInput extends Group
{
  public static function make()
  {
    $this->schema([
      Input::make(),
      Select::make(),
    ])
  }
}

class MonetaryInput extends Group
{
  public static function make()
  {
    $this->schema([
      Input::make(),
      Select::make(),
    ])
  }
}

Is there a go-to way of doing this? Ideally I can reuse the existing Input and Select like in the example above. Is there a way of exposing a single named property to the form state? 2. Build a view component and write the input/select myself. Downside is that you would have to implement the inputs and selects and can't really reuse the existing filament input components.

6 Replies

Dan Harrin•2y ago

you're nearly there extend Group, override the setUp() method then call parent::setUp(), then $this->schema() you dont need to override make()

ThandruilOP•2y ago

Makes sense! And what about

Is there a way of exposing a single named property to the form state?

Dan Harrin•2y ago

ah so it should be JSON? yes that is possible essentially it is ->statePath('nameoffield') if you want a better DX than having to use that... then maybe extend Component instead of Group, make a new make() method which accepts the state path, pass that state path to the constructor, call schema() and statePath() in the constructor to set the state path. then you dont need setUp() either then also check the $view of the Group component and copy that $view to your new component

ThandruilOP•2y ago

Hmm yes so for example i have this form

$form->schema([
   MonetaryInput::make('price'),
])

$form->schema([
   MonetaryInput::make('price'),
])

which would ideally result in

{
    "price": "£123.00"
}

{
    "price": "£123.00"
}

{
  "price": {
    "currency": "gbp",
    "amount": 12300,
  }
}

{
  "price": {
    "currency": "gbp",
    "amount": 12300,
  }
}

I know the latter is possible with statePath now but would like to know if option one is also possible (and recommend). Maybe using the hydrate... methods?

Dan Harrin•2y ago

the problem is not the saving, its the loading again you then have to extract the currency from the formatted string and not all currencies have their symbols at the start json or 2 separate columns is your best bet here

ThandruilOP•2y ago

👌 Thanks mate!

Gaming

Programming

Expose group of fields as a new single reusable field