2

I want to use Checklist Field in laravel backpack, but it says that we have to need a relation with another table. But I would like to put the Options in my CrudController like select_from_array.

I have no idea how to custom this field.

I want to use checklist instead of select_from_array

Andrew Wijaya
  • 191
  • 1
  • 9

2 Answers2

4

Create a file at resources/views/vendor/backpack/crud/fields/checklist_direct.blade.php with the below content (checklist_direct can be any name you choose):

<!-- checklist with directly provided options -->
<!-- checklist_filtered -->
@php
    $options = isset($field['options']) ? $field['options'] : [];
@endphp

<div @include('crud::inc.field_wrapper_attributes') >
    <label>{!! $field['label'] !!}</label>
    @include('crud::inc.field_translatable_icon')
    <?php $entity_model = $crud->getModel(); ?>

    <div class="row">
        @foreach ($options as $option)
            <div class="col-sm-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="{{ $field['name'] }}[]"
                               value="{{ $option }}"
                               @if( ( old( $field["name"] ) && in_array($option , old( $field["name"])) ) )
                                  checked = "checked"
                               @endif > {!! $option !!}
                    </label>
                </div>
            </div>
        @endforeach
    </div>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
</div>

Then update your call to addField to in your controller would look something like:

   $this->crud->addField([
        'label'     => 'Printers',
        'type'      => 'checklist_direct',
        'name'      => 'printer',
        'attribute' => 'printer_name',
        'options'   => ['HP', 'Cannon', 'Dell'],
    ]);

NOTE: You might also consider using an enum column on your table and using the enum.blade.php field template or possibly making a custom enum field that uses checkboxes instead of a select box.

Wesley Smith
  • 19,401
  • 22
  • 85
  • 133
0

I needed to do some updates on the code. I create a file at resources/views/vendor/backpack/crud/fields/checklist_array.blade.php with the below content (checklist_array can be any name you choose):

I updated the code for the one below, One of the updates I did was, when editing it did not bring the selected values. Now you are bringing through script in javascript

<!-- checklist with directly provided options -->
<!-- checklist_filtered -->
@php
$options = isset($field['options']) ? $field['options'] : [];

// calculate the value of the hidden input
$field['value'] = old(square_brackets_to_dots($field['name'])) ?? ($field['value'] ?? ($field['default'] ?? []));

if (is_string($field['value'])) {
    $field['value'] = json_decode($field['value']);
} 

// define the init-function on the wrapper
$field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitChecklist';
@endphp

@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')

<input type="hidden" value='@json($field['value'])' name="{{ $field['name'] }}">

<div class="row">
    @foreach ($options as $option)
    <div class="col-sm-4">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="{{ $field['name'] }}[]" value="{{ $option }}" @if( ( old( $field["name"] )
                    && in_array($option , old( $field["name"])) ) ) checked="checked" @endif> {!! $option !!}
            </label>
        </div>
    </div>
    @endforeach
</div>

{{-- HINT --}}
@if (isset($field['hint']))
<p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->fieldTypeNotLoaded($field))
@php
$crud->markFieldTypeAsLoaded($field);
@endphp
{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
<script>
    function bpFieldInitChecklist(element) {
                //console.log(element);
                var hidden_input = element.find('input[type=hidden]');
                var selected_options = JSON.parse(hidden_input.val() || '[]');
                var checkboxes = element.find('input[type=checkbox]');
                var container = element.find('.row');

                // set the default checked/unchecked states on checklist options
                checkboxes.each(function(key, option) {
                    var id = $(this).val();
                    if (selected_options.map(String).includes(id)) {
                        $(this).prop('checked', 'checked');
                    } else {
                        $(this).prop('checked', false);
                    }
                });

                // when a checkbox is clicked
                // set the correct value on the hidden input
                checkboxes.click(function() {
                    var newValue = [];

                    checkboxes.each(function() {
                        if ($(this).is(':checked')) {
                            var id = $(this).val();
                            newValue.push(id);
                        }
                    });

                    hidden_input.val(JSON.stringify(newValue));

                });
            }

</script>
@endpush

@endif
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}

   //form
   $this->crud->addField([
        'label'     => 'Printers',
        'type'      => 'checklist_direct',
        'name'      => 'printer',
        'attribute' => 'printer_name',
        'options'   => ['HP', 'Cannon', 'Dell'],
    ]);
 
//model
protected $casts = [
        ...
        'printer' => 'array',
    ];
Jackson Meires
  • 95
  • 7