Filament•14mo ago

Custom field with multiple checkboxes

I'm trying to achieve the attached image with a custom component. Both checkboxes checked means that the student doubled that year. The data is inside a json field on the record, alongside other json data:

{
  "school_progress": [
    {
      "1": "1"
    },
    {
      "1": "1"
    },
    {
      "1": "1",
      "2": "1"
    },
    {
      "1": "1"
    }
  ],
  "school_changes": "",
  "school_change_reason": "",
  [...]
}

{
  "school_progress": [
    {
      "1": "1"
    },
    {
      "1": "1"
    },
    {
      "1": "1",
      "2": "1"
    },
    {
      "1": "1"
    }
  ],
  "school_changes": "",
  "school_change_reason": "",
  [...]
}

(I know the json format for the groups could be a lot simpler and cleaner and I will probably refactor this) I've started my custom component, creating the blade view, but I'm a bit lost at how to continue. - Can/should I use Filament form state to set the checkboxes, and listen to checkbox clicks to change the json accordingly? How? (this sounds ideal because it hooks into default Filament as much as possible) - If not, I guess I need a method to set the data, which will populate the checkboxes. And "manually" listen to changes, to set the form json? - Can I use Filament checkboxes inside my custom component?

Solution:

Eventually I found out that I can use ~~@foreach ($getChildComponents() ...~~

    @foreach ($getChildComponentContainer()->getComponents() as ...)

    @foreach ($getChildComponentContainer()->getComponents() as ...)

in the custom layout component blade, instead of {{ $getChildComponentContainer() }}....

Jump to solution

16 Replies

Patrick Boivin•14mo ago

Is the custom field only handling the checkboxes? Where does the rest of the information come from? (school_changes, school_change_reason)

JohnOP•14mo ago

Those would be handled by separate fields. But... if it's more convenient to separate, I could refactor the schema.

Patrick Boivin•14mo ago

Not sure, probably comes down to personal preference, but personally I like when 1 form field saves to 1 DB column. So if the column is a complex JSON object, I would take all of it into account in my custom field.

JohnOP•14mo ago

Actually I'm working on those other fields. And I found I can work them with ->statePath('json_col'). Yea, I would do that too. The data is legacy, the app is new.

Patrick Boivin•14mo ago

+ 1 for statePath(), it's a good solution

JohnOP•14mo ago

That works for the other fields, which I can do with standard components. But I still wouldn't know how to "tie things up" with my custom checkboxes component.

Patrick Boivin•14mo ago

Looking at the data format, I'm not really sure how you can map these values cleanly to a set of checkboxes:

    {
      "1": "1",
      "2": "1"
    },

    {
      "1": "1",
      "2": "1"
    },

I'm guessing the order of the Groups is always fixed somehow?

JohnOP•14mo ago

I can refactor that. Maybe {0: [1], 1: [1, 2]} or even [0, 2, 4, 5, 6] for only the checked indices. I guess my biggest question is, how can I two-way bind my checkboxes?

Patrick Boivin•14mo ago

I think something along those lines would be easier to use with regular Filament checkboxes:

  "school_progress": {
    "group_1": {
        "option_1": 1,
        "option_2": 0,
    },
    
    ...
  },

  "school_progress": {
    "group_1": {
        "option_1": 1,
        "option_2": 0,
    },
    
    ...
  },

JohnOP•14mo ago

So... build a grid with every checkbox a standard one, the first column having no labels? I thought about that too. I could bind everything with ->statePath

Patrick Boivin•14mo ago

(Untested)

Group::make([
    Group::make([
        Checkbox::make('option_1'),
        Checkbox::make('option_2'),
    ])->statePath('group_1')
])->statePath('school_progress')

Group::make([
    Group::make([
        Checkbox::make('option_1'),
        Checkbox::make('option_2'),
    ])->statePath('group_1')
])->statePath('school_progress')

JohnOP•14mo ago

I can try something like that. Still, I would like to understand how custom fields work, state/wire/bind wise. Maybe some plugin that offers a simple custom field to check out...

Patrick Boivin•14mo ago

Do you have access to Laracasts?

Patrick Boivin•14mo ago

This goes quite deep into custom fields and components: https://laracasts.com/series/build-advanced-components-for-filament

Laracasts

Build Advanced Components for Filament

Once you're confidently building interfaces with all the components that are included with Filament, you'll likely want to begin building your own custom ones. Hi, I'm Dan: the co-founder of Filament. This series will teach you how to build components, like custom form fields and table columns, and how to distribute them in a plugin package. Me...

JohnOP•14mo ago

Only a free account. But most of that series seems free. Definitely going to watch! Thanks! extractPublicMethods() .... I was wondering where that magic came from. And now I know. ^^

Solution

John•8mo ago

Eventually I found out that I can use ~~@foreach ($getChildComponents() ...~~

    @foreach ($getChildComponentContainer()->getComponents() as ...)

    @foreach ($getChildComponentContainer()->getComponents() as ...)

in the custom layout component blade, instead of {{ $getChildComponentContainer() }}. Now I can apply my custom layout/styling "inside"/"between" the default or custom components provided by ->schema([...]), instead of only "around" the fully rendered set of child components.

Gaming

Programming

Custom field with multiple checkboxes