Keystone-classic: New field type: multiselect

[JedWatson]

Similar to the select field, but allows the selection of multiple values (stores values as an array of Numbers or Strings).

UI configurable as either a list / grid of checkboxes, or a tags-style list (similar to _many_ relationships).

[cdion]

Hey, is there an ETA for this Field Type? I have a bunch of use cases for multi-select in my domain.

[ovaillancourt]

:+1:

[JedWatson]

Hey guys, happy to put this (back) on the radar - just didn't end up with a use-case in the projects we've used keystone for yet.

Watch for it in one of the upcoming versions.

(caveat: we are mid-refactor of the field types to make them extendable and may wait for that to land before doing this, so as not to create huge conflicts between branches)

[jossmac]

Hi, just thought I'd mention that when I need this in a project I use a relationship with many: true for the same result.

styles: { type: Types.Relationship, label: 'Styles', ref: 'Style', many: true },

Whilst it seems a bit messy at first, having the items available to edit in the admin interface is actually pretty useful. If you want to hide it from the client use hidden: true.

[ovaillancourt]

Thanks for the tip @JossMackison , I have to admit we didn't think about this approach but it might indeed be the best.

@JedWatson - If you need help with anything don't hesitate to reach out. We might be able to give a hand with a little direction on the correct implementation strategy.

[akoesnan]

Jed, I am intersted in this as well. Do you have guide to add a new type, I would love to help.

[3ffon]

Hey guys !

Any news on this field ? sounds like the dream field to work along with the storage api .

[raoabishay]

This is a very essential feature. Would be waiting for this one!

[ajarbol]

+1

[kadosh1000]

Hi I have published my npm package:
https://github.com/kadosh1000/keystone-custom-fieldtypes

It allows you to create custom field types, and copy your custom fieldTypes from a selected dir into the keystone's fields dir and registers it.

[creynders]

We're closing all feature requests to keep the issue tracker unpolluted. From now on submit feature requests on productpains.com!

https://productpains.com/post/keystonejs/new-field-type-multiselect

[r3wt]

essential features > roadmap

[jorisw]

I have found the following workaround that doesn't involve putting the desired values in a List linked via Relationship.

I just set a particular field as a nested plain object with Boolean fields in there. Functionality wise, this achieves what a multi select with predefined options would.

myList.add({
    "hobbies":
        {
            "travel":           {type: Types.Boolean},
            "music":            {type: Types.Boolean},
            "gardening":        {type: Types.Boolean},
            "collecting":       {type: Types.Boolean},
            "sports":           {type: Types.Boolean},
            "reading":          {type: Types.Boolean},
            "volunteering":     {type: Types.Boolean},
            "cooking":          {type: Types.Boolean},
            "culture":          {type: Types.Boolean},
            "friends-family":   {type: Types.Boolean}
        },
});

These options will show up in the Admin UI after creating a list entry, and the Admin UI as well as the REST API will correctly translate them to Mongoose.

[r3wt]

Thanks @jorisw for your helpful workaround.

[phoniks]

Truth be told, this workaround had an unexpected advantage over a normal multi-select list because I can actually set different input types for each item in the list. Not sure how I'll make it work in the UI, but for my purposes, I think the lack of that functionality led to a happy ending.

[MillerApps]

This is likely a stupid question but for the workaround how would I be able to use this within a form (event registration)? I haven’t been able to get it working. Thanks In adavnce!

[askdesigners]

This is actually really shitty! I didn't even investigate if this was possible because I assumed it was...

[internetErik]

@MillerApps Maybe this is something you're looking for?

Regarding the workaround from @jorisw, and regarding connecting this to some front-end form, the following may be helpful.

Assuming you have a model MyList with the code from @jorisw

// this is probably in /routes/views
keystone.list('MyList')
      .model
      .findOne({})
      .exec((err, result) => {
        locals.hobbies = Object.keys(result).map(key => ({name: result[key], value:  result[key]}))
        next();// or view.render('something')
      });

Assuming .hbs (since this is what I do)

<form>
{{#each hobbies}}
  <input type="checkbox" name="{{ name }}" {{#if value}}checked{{/if}} />
{{/each}}
</form>

[askdesigners]

I ended up storing it as a text array as I'm mostly working with it via an API. Not very user friendly I must say.

[agmt5989]

The documentation for the Select field type states:

If you want to provide multiple values, you can use TextArray or NumberArray, although neither will have the same constrained input. You can limit the options using a pre-save hook.

Does anyone know exactly how to implement this pre-save constraint hook on the TextArray field type? I'm trying not to follow relationships for my current use-case