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 ($getChildComponents() ...

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

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

in the custom layout component blade, instead of

{{ $getChildComponentContainer() }}

{{ $getChildComponentContainer() }}

.

Now I can apply my custom layout/styling "inside"/"between" the default or custom components provided by

->schema([...])

->schema([...])

, instead of only "around" the fully rendered set of child components.

Jump to solution

Custom field with multiple checkboxes

{
  "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": "",
  [...]
}

Solution

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

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

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

in the custom layout component blade, instead of

{{ $getChildComponentContainer() }}

{{ $getChildComponentContainer() }}

.

Now I can apply my custom layout/styling "inside"/"between" the default or custom components provided by

->schema([...])

->schema([...])

, instead of only "around" the fully rendered set of child components.

Jump to solution

Custom field with multiple checkboxes

Custom field with multiple checkboxes

Similar Threads

Similar Threads

Similar Threads