Nova Multiselect

This Laravel Nova package adds a multiselect to Nova's arsenal of fields.

Requirements

• php: >=7.2

• laravel/nova: ^3.0

Features

• Multi- and singleselect with search
• Asynchronous search
• Reordering functionality with drag & drop
• Dependency on other Multiselect instances
• Distinct values between multiple multiselects

Screenshots

Installation

Install the package in a Laravel Nova project via Composer:

composer require optimistdigital/nova-multiselect-field

Usage

The field is used similarly to Nova's native Select field. The field type in the database should be text-based (ie

string

text

varchar

use OptimistDigital\MultiselectField\Multiselect;

public function fields(Request $request)
{
    return [
      Multiselect::make('Football teams')
        ->options([
          'liverpool' => 'Liverpool FC',
          'tottenham' => 'Tottenham Hotspur',
        ])
    // Optional:
    ->placeholder('Choose football teams') // Placeholder text
    ->max(4) // Maximum number of items the user can choose
    ->saveAsJSON() // Saves value as JSON if the database column is of JSON type
    ->optionsLimit(5) // How many items to display at once
    ->reorderable() // Allows reordering functionality
    ->singleSelect() // If you want a searchable single select field
    ->distinct('football') // Disables values used by other multiselects in same distinct group

    // Async model querying
    Multiselect::make('Artists')
      ->asyncResource(Artist::class),

      // If you want a custom search, create your own endpoint:
      ->api('/api/multiselect/artists?something=false', Artist::class),
];
}

Option groups

Option groups are supported. Their syntax is the same as Laravel's option group syntax.

In this example (from Nova docs), all values are grouped by the

group

->options([
    'MS' => ['label' => 'Small', 'group' => 'Men Sizes'],
    'MM' => ['label' => 'Medium', 'group' => 'Men Sizes'],
    'WS' => ['label' => 'Small', 'group' => 'Women Sizes'],
    'WM' => ['label' => 'Medium', 'group' => 'Women Sizes'],
])

Dependencies

You can make a Multiselect depend on another by using

dependsOn

->dependsOnOptions()

dependsOn

Usage:

Multiselect::make('Country', 'country')
    ->options([
        'IT' => 'Italy',
        'SG' => 'Singapore',
    ]),

Multiselect::make('Language', 'language')
    ->dependsOn('country')
    ->dependsOnOptions([
        'IT' => [
            'it' => 'Italian',
        ],
        'SG' => [
            'en' => 'English',
            'ms' => 'Malay',
            'zh' => 'Chinese',
        ]
    ]),
// Optionally define max number of values
->dependsOnMax([
    'IT' => 1,
    'SG' => 3,
])

Belongs-To-Many

You can use this field for

BelongsToMany

// Add your BelongsToMany relationship to your model:
public function categories()
{
    return $this->belongsToMany(\App\Models\Category::class);
}

// Add the field to your Resource:
Multiselect::make('Categories', 'categories')
  ->belongsToMany(\App\Nova\Resources\Category::class),

Options

Possible options you can pass to the field using the option name as a function, ie

->placeholder('Choose peanuts')

| Option | type | default | description | | ----------------------------- | ------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

options

['id' => 'value']

api($path, $resource)

search

['id' => 'value']

asyncResource($resource)

placeholder

max

groupSelect

singleSelect

saveAsJSON

optionsLimit

nullable

null

[]

reorderable

dependsOn

dependsOnOptions

dependsOn

belongsToMany

belongsTo

resolveForPageResponseUsing

clearOnSelect

distinct

indexDelimiter

', '

indexValueDisplayLimit

indexCharDisplayLimit

Localization

The translations file can be published by using the following publish command:

php artisan vendor:publish --provider="OptimistDigital\MultiselectField\FieldServiceProvider" --tag="translations"

You can then edit the strings to your liking.

Overwriting the detail field

You can overwrite the detail view value component to customize it as you see fit.

Create a new component for

NovaMultiselectDetailFieldValue

app.js

field

values

values

// in NovaMultiselectDetailFieldValue.vue

// in app.js

import NovaMultiselectDetailFieldValue from './NovaMultiselectDetailFieldValue';
Nova.booting((Vue, router, store) => {
  Vue.component('nova-multiselect-detail-field-value', NovaMultiselectDetailFieldValue);
});

Credits

• Tarvo Reinpalu
• shentao/vue-multiselect

License

This project is open-sourced software licensed under the MIT license.