How to implement custom_checklist_from_array? Like checklist but the data is inputted in CrudController - laravel-backpack

Question

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

Answer 1

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.

Answer 2

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',
];