InputfieldAsmSelect

Sortable multiple-selection widget

Extends [[InputfieldSelectMultiple]] — all option management methods (addOption(), addOptions(), setOptions(), addOptionsString(), etc.) are inherited and documented in [[InputfieldSelect]]. Returns an array value where order is preserved (implements InputfieldHasSortableValue).

$f = $modules->get('InputfieldAsmSelect');
$f->name = 'categories';
$f->label = 'Categories';
$f->addOptions([1 => 'News', 2 => 'Events', 3 => 'Blog']);
$f->val([2, 1]); // pre-select Events and News, in that order
$form->add($f);

See [[Inputfield]] for the shared Inputfield API (labels, collapsed states, showIf, rendering, processing, etc.).

Properties

Property	Type	Default	Description
`sortable`	`bool`	`true`	Allow drag-to-reorder of selected items
`addable`	`bool`	`true`	Allow adding items to the selection
`deletable`	`bool`	`true`	Allow removing items from the selection
`hideDeleted`	`bool`	`true`	Remove items immediately when deleted; when `false`, marks for deletion
`deletedPrepend`	`string`	`'-'`	Character prepended to deleted item values when `hideDeleted` is `false`
`hideWhenEmpty`	`bool`	`false`	Hide the select when no options are available
`editLink`	`string`	`''`	URL pattern for item edit links, e.g. `/admin/page/edit/?id={value}`
`editLabel`	`string`	(icon)	Label/icon for the edit link
`editLinkModal`	`string\\|bool`	`true`	Open edit link in modal (`true`), `false` to open inline, or `'longclick'` for longclick-only modal
`editLinkOnlySelected`	`bool`	`true`	Show edit link only for previously selected items, not newly added ones
`editLinkButtonSelector`	`string`	`''`	CSS selector for buttons that become modal buttons in the edit link
`usePageEdit`	`int\\|bool`	`false`	When used with FieldtypePage, auto-enables page editor links (modal)
`addItemTarget`	`string`	`'bottom'`	Where new selections appear: `'top'` or `'bottom'`
`animate`	`bool`	`false`	Animate adding/removing of items
`removeLabel`	`string`	(icon)	Label/icon for the remove button
`sortLabel`	`string`	(icon)	Label/icon for the sort handle
`debugMode`	`bool`	`false`	Keep original `<select>` visible for debugging

Setting asmSelect options

Properties in the table above can be set directly on the Inputfield:

$f->sortable = false; // disable drag-to-reorder
$f->addable = false; // prevent adding new selections
$f->addItemTarget = 'top'; // new selections appear at the top

For setting multiple options at once, use setAsmSelectOptions():

$f->setAsmSelectOptions([
 'sortable' => false,
 'animate' => true,
 'addItemTarget' => 'top',
]);

Edit links

The editLink property adds an edit icon next to each selected item, linking to a URL where {value} is replaced by the item's option value.

$f->editLink = '/admin/page/edit/?id={value}';
$f->editLinkModal = true; // open in modal window (default)

When used with a FieldtypePage field and usePageEdit is enabled, edit links are configured automatically:

$f->usePageEdit = 1; // enables modal page editor links for selected pages

Deletion behavior

By default (hideDeleted = true), removing an item immediately hides it from the selected list. When hideDeleted is false, deleted items remain visible but are marked for deletion, with their submitted values prepended with deletedPrepend (default '-') so the receiving code can identify them.

$f->hideDeleted = false;
$f->deletedPrepend = '-'; // deleted item 'abc' is submitted as '-abc'

Notes

Selected item order is preserved after processInput() — $f->val() returns values in the order the user arranged them.
Requires jQuery and jQuery UI (loaded automatically).
The size attribute from InputfieldSelectMultiple is not used.
Source file: wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.module

API reference: methods, properties, hooks

Click any linked item for full usage details and examples. Hookable methods are indicated with the icon. In addition to those shown below, the InputfieldAsmSelect class also inherits all the methods and properties of: InputfieldSelectMultiple, InputfieldSelect, Inputfield, WireData and Wire.

Common
Properties

Common

Name	Return	Summary
InputfieldAsmSelect::getConfigInputfields() InputfieldAsmSelect::getConfigInputfields() InputfieldAsmSelect::getConfigInputfields()	`InputfieldWrapper`	Field config
InputfieldAsmSelect::render() InputfieldAsmSelect::render() InputfieldAsmSelect::render()	`string`	Render
InputfieldAsmSelect::renderReady() InputfieldAsmSelect::renderReady() InputfieldAsmSelect::renderReady($parent = null, bool $renderValueMode = false)	`bool`	Called before render()
InputfieldAsmSelect::set() InputfieldAsmSelect::set(string $key, mixed $value) InputfieldAsmSelect::set(string $key, mixed $value)	`Inputfield` `InputfieldAsmSelect` `InputfieldSelect`	Set Inputfield property or AsmSelect option
InputfieldAsmSelect::setAsmSelectOption() InputfieldAsmSelect::setAsmSelectOption(string $key, $value) InputfieldAsmSelect::setAsmSelectOption(string $key, $value)	`self`	Set custom option for AsmSelect
InputfieldAsmSelect::setAsmSelectOptions() InputfieldAsmSelect::setAsmSelectOptions(array $options) InputfieldAsmSelect::setAsmSelectOptions(array $options)	`self`	Set multiple custom options for AsmSelect

Properties

Name	Return	Summary
InputfieldAsmSelect::addItemTarget	`string`	Where to place new selected items in list: top or bottom DEFAULT: 'bottom'
InputfieldAsmSelect::addable	`bool`	Can items be added to selection? DEFAULT: true
InputfieldAsmSelect::animate	`bool`	Animate the the adding/removing of items in the list? DEFAULT: false
InputfieldAsmSelect::debugMode	`bool`	Debug mode keeps original select visible DEFAULT: false
InputfieldAsmSelect::deletable	`bool`	Can items be removed from selection? DEFAULT: true
InputfieldAsmSelect::deletedOpacity	`float` `string`	Opacity of deleted item, set to 1.0 to disable opacity adjustment (applicable only if hideDeleted=true)
InputfieldAsmSelect::deletedPrepend	`string`	Deleted item values are prepended with this character in the form submission (applicable only if hideDeleted=true) DEFAULT: '-'
InputfieldAsmSelect::editLabel	`string`	Text used in the "edit" link (if editLink is populated)
InputfieldAsmSelect::editLink	`string`	Optional URL options can link to with tag {value} replaced by option value, i.e. /path/to/page/edit?id={$value}
InputfieldAsmSelect::editLinkButtonSelector	`string`	Button selector for finding buttons that should become modal window buttons
InputfieldAsmSelect::editLinkModal	`string` `bool`	Whether the edit link (if used) should be modal or "longclick" for longclick modal only DEFAULT: true
InputfieldAsmSelect::editLinkOnlySelected	`bool`	When true, edit link only appears for items that were already selected DEFAULT: true
InputfieldAsmSelect::fieldset	`bool`	Use fieldset support? (for PW Fieldset types) DEFAULT: false
InputfieldAsmSelect::hideDeleted	`bool`	Hide items when deleted. If false, items remain but are marked for deletion DEFAULT: true
InputfieldAsmSelect::hideWhenEmpty	`bool`	Hide the <select> when there are no items available to select? DEFAULT: false
InputfieldAsmSelect::highlight	`bool`	Use the highlight feature? DEFAULT: false
InputfieldAsmSelect::highlightAddedLabel	`string`	Text that precedes highlight of added item DEFAULT: 'Added: '
InputfieldAsmSelect::highlightRemovedLabel	`string`	Text that precedes highlight of removed item DEFAULT: 'Removed: '
InputfieldAsmSelect::removeLabel	`string`	Text used in the "remove" link
InputfieldAsmSelect::sortLabel	`string`	Sortable handle/icon
InputfieldAsmSelect::sortable	`bool`	Should the list be sortable? DEFAULT: true
InputfieldAsmSelect::usePageEdit	`int` `bool`	Use page editor links for selected Page items, when user has edit permission? DEFAULT: false

Additional methods and properties

In addition to the methods and properties above, InputfieldAsmSelect also inherits the methods and properties of these classes:

API reference based on ProcessWire core version 3.0.267