Crud: Add support to HTML fieldset

[enniosousa]

I have a model with a lot of inputs and I am separating by tabs, but it is not enough. I need use HTML fieldset to separate my form's inputs.

So I suggest it to be future feature.

[enniosousa]

I found a solution very good using fieldset with(out) tabs.

vendor.backpack.crud.inc.show_fields.blade.php (original)

{{-- Show the inputs --}}
@foreach ($fields as $field)
    <!-- load the view from the application if it exists, otherwise load the one in the package -->
    @if(view()->exists('vendor.backpack.crud.fields.'.$field['type']))
        @include('vendor.backpack.crud.fields.'.$field['type'], array('field' => $field))
    @else
        @include('crud::fields.'.$field['type'], array('field' => $field))
    @endif
@endforeach

vendor.backpack.crud.inc.show_fields.blade.php (modified)

{{-- Show the inputs --}}
<?php $fieldsets = $fields->mapToGroups(function ($item, $key) {return [isset($item['fieldset']) ? $item['fieldset'] : 'none' => $item];}); ?>
@foreach ($fieldsets as $fieldset=> $fields)
    <?= $fieldset !== 'none' ? ""
        ."<fieldset class=\"col-md-12\" style=\"border:solid 1px #333!important;padding:0 10px 10px 10px;border-bottom:none;\">"
        ."<legend style=\"width:auto!important;border:none;font-size:15px;font-weight:600;padding:0 10px;\">$fieldset</legend>" : "" ?>
        @foreach($fields as $field)
            @if(view()->exists('vendor.backpack.crud.fields.'.$field['type']))
                @include('vendor.backpack.crud.fields.'.$field['type'], array('field' => $field))
            @else
                @include('crud::fields.'.$field['type'], array('field' => $field))
            @endif
        @endforeach
    <?= $fieldset !== 'none' ? "</fieldset>" : "" ?>
@endforeach

Input example

[ // Text
    'name' => 'title',
    'label' => "Title",
    'type' => 'text',

    // optional
    //'fieldset' => '', // <------------------------------- HERE
],

[tabacitu]

Hi @enniosousa - interesting suggestion. I'll leave this open for more people to say what they think about it.

I think the solution you've found is a pretty good implementation for Backpack itself, but for your project I would suggest using the custom_html field type instead? You should be able to easily open and close a fieldset using:

$this->crud->addField([   // CustomHTML
    'name' => 'fieldset_open',
    'type' => 'custom_html',
    'value' => '<fieldset>'
]);

and

$this->crud->addField([   // CustomHTML
    'name' => 'fieldset_close',
    'type' => 'custom_html',
    'value' => '</fieldset>'
]);

This solution would probably be better for _your project_, since it doesn't involve overwriting any Backpack blade files. So less to maintain for you, less upgrade steps in the future.

Hope it helps.
Cheers!

[tabacitu]

On second thought, I'm going to close the issue as it's the first time anybody requests this feature, and it seems like we already have a pretty good solution for it (see above).

If anybody else needs fieldset support, I'm sure they'll find this thread on Google. If that's you, please comment if you think the solution above isn't easy enough, and we might reopen the issue for full fieldset support.

Cheers!

PS. Thanks for bringing this up @enniosousa !

[paperscissors]

Hey, found this via google 👍

@tabacitu, your solution is simple enough, but I do like the idea that @enniosousa brings forth. Seems like a lot less clutter on the CRUD controller, and less chance of missing a closing fieldset tag, perhaps?

[selected-pixel-jameson]

Maybe I'm missing something, but the solution proposed by @tabacitu doesn't seem to work. The fieldset is rendered and closed immediately. It doesn't stay open until the second custom_html element.

[pxpm]

@selected-pixel-jameson I think @tabacitu solution have an error. Both fields have the same name.

It should be:

$this->crud->addField([   // CustomHTML
    'name' => 'fieldset_open',
    'type' => 'custom_html',
    'value' => '<fieldset>'
]);

$this->crud->addField([   // CustomHTML
    'name' => 'fieldset_close',
    'type' => 'custom_html',
    'value' => '</fieldset>'
]);

[selected-pixel-jameson]

Yeah I saw that, but I changed it and it still wasn't working... at least I thought I changed it.

[pxpm]

Has stated by @selected-pixel-jameson I could confirm that @tabacitu solution does not work at all.

The fieldset tag is autoclose because of parent div element.

This was introduce when adding field wrapper to fields.

As a workaround @selected-pixel-jameson please override custom_html.blade.php in your project and remove the wrapper from field leaving only:

    {!! $field['value'] !!}

I am going to open an issue with this specific scenario.

Best,
Pedro