SelectField

Column Type varchar/integer/etc

Other Select Fields

You may actually want to use one of the following MultiSelectField, BelongsToField, HasOneField, HasManyField, BelongsToManyField, OrderableBelongsToManyField as these all extend SelectField with extra functionality.

Options

You can use the setOptions method to set an array that will be passed to vue-multiselect.

Note that the index of the array is what will be stored in the database and the values are used as labels.

E.g.

SelectField('my_simple_select')
    ->setOptions([
        0 => 'Foo',
        1 => 'Bar',
        2 => 'Baz',
    ]),

Or:

SelectField('my_simple_select')
    ->setOptions([
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    ]),

You might want to pass in a list of

SelectField('my_thing_lookup')
    ->setOptions(Thing::orderBy('name', 'ASC')->select('name', 'id')->get()->pluck('name', 'id')->toArray()),

This would store the id. If you are doing this, you might want to use a relation ship field instead (see above).

Option Groups

You may wish to split your Options into groups. Acheiving this requires two steps. Firstly, set some additional settings.

->setSettings([
    'group_label'     => 'group',
    'group_value'     => 'group_options',
])

group_label refers to the array key of an item that will be used as a label for the group. group_value refers to the array key of an array of options that should be in the group.

Then you will have to provide your options in a new format, using the group_label and group_value that you have specified

->setOptions([
    [
        'group' => 'Test Group 1',
        'group_options' => [
            [
                'id' => 1,
                'name' => 'Test 1',
            ],
            [
                'id' => 2,
                'name' => 'Test 2',
            ],
        ],
    ],
    [
        'group' => 'Test Group 2',
        'group_options' => [
            [
                'id' => 3,
                'name' => 'Test 3',
            ],
            [
                'id' => 4,
                'name' => 'Test 4',
            ],
        ],
    ],
]);

Ajax

You can enable Ajax lookups by using the useAjax($route, $callback) method.

$route should be the URL that will be used to lookup results. This URL should return a JSON array of objects with index and label attribute that match those used in the field's settings.

$callback is a way of manipulating the found data. For most cases you can just supply the class name. For more control you can pass any type of callable. This allows you to return any data you like, in any order you like.

As of Ensō 3.3, ajax lookups will standardise the response structure by passing models through \Yadda\Enso\Crud\Resources\ListResource. The default track_by and label_by are defined in the configuration in enso/settings.php as select_track_by and select_label_by, and default to id and label

You can the resource used on a per-controller basis by overriding it's makeListCollection function.

Warning!
If you upgrade to Ensō 3.3 form a previous version, you may need to update the `select_label_by` to `name` to ensure that existing data stored in the database remains valid.
Example
->useAjax('/admin/users/search/', User::class)

Ajax Labels

By default, when shown in a select list the name attribute will be used as a label. If this doesn't exist, the title attribute will be used and if that doesn't exist it will fall back to using the key (usually id).

You can override this behaviour by overriding the getCrudLabel method on your model. For example by combining a name and quote field.

public function getCrudLabel(): string
{
    return $this->name . ': "' . substr(strip_tags($this->quote), 0, 20) . ' ..."';
}

Settings

Setting some options is now deprecated.

  • Instead of setting 'multiple' directly, use a different field type, e.g. MultiSelectField
  • Instead of setting 'ajax_url' directly, call useAjax() instead