menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Twill

Rapidly create a custom admin console that content publishers will love. Twill is an open source CMS toolkit for Laravel, crafted by AREA 17.

Channels
Team

Dynamic Multi Select Fields (Passing in options)

April 30, 2019 at 11:21am

Dynamic Multi Select Fields (Passing in options)

April 30, 2019 at 11:21am
Hello.
So I want to include a drop-down multi select component in my form for one module that allows the user to link another entity. Something like this:
@formField('select', [
'name' => 'office',
'label' => 'Office',
'placeholder' => 'Select an office',
'options' => $options (where this is array of key (id) value pairs queried from the DB)
])
Is this possible?
Thanks
Jon

April 30, 2019 at 11:48am
Hey Jonathan, interestingly I've just had this same problem and now have a solution. I've documented it at https://markwillia.ms/dynamic-multi-select-fields-in-twill-cms/ hope this helps
like-fill
3
Hi that's great, thanks! That is pretty much what I'd figured out myself over the past hour, but it's still really useful to have a well documented example for all to see.
like-fill
1

May 9, 2019 at 10:19am
thanks for writing this down. I think you could also replace your view's loop with data from your model's controller formData function ;)
Did anybody perhaps figure out how to use multi_select field with a simple array. Not a relations ship or anything, just an array of values? I have it stored in json, casted to array.
Twill stores values without a problem to fe. ['value', 'another-value'], but doesn't load it back.
I guess the problem is with array formatting, but I am unable to find what the appropriate format should be. I tried with ['value' => 'value', 'another-value' => 'another-value'] and ['value' => true, 'another-value' => true] but it doesn't work.

June 19, 2019 at 12:54pm
It works when saving, but when you retrieve again the record, I haven't found any way to get the data back on display. So while it works saving data, it's not useful as the final user won't see the options he checked (and think they haven't saved) :( :( :( The Vue components don't have any way yet to set 'selected' or 'unselected' data (as for example passing a 'checked' attribute to all the attributes that are currently on), or I've been unable to find the way to do so in docs, or looking into the vue components.
Only workaround I can think of is to use an extended custom Vue component, or ignoring content fields and using just 'ol plain forms for this kind of situation?
Edited

July 11, 2019 at 2:55pm
Hi guys! If you check the source code of the multiselect field, you'll notice the following:
$options = method_exists($options, 'map') ? $options->map(function($label, $value) {
return [
'value' => $value,
'label' => $label
];
})->values()->toArray() : $options;
Edited
like-fill
2
If you want to provide options manually with a simple array, you would need to make sure to use label and value as array keys.
Also, to make sure the multiselect displays selected values after save, the field is currently expecting an id because it does array_pluck($item->$name, 'id') when injecting in Vuex. For the case where you are simple using a json column, you could use a custom accessor where id value is the same as the actual value. Not ideal though, we should definitely support this without those tricks.
Cool, now got it, many thanks

March 29, 2021 at 10:37pm

May 18, 2021 at 2:47pm
If not for this snippet I would have been stuck, thank you :D