History: Transfer Field Type
Source of version: 3 (current)
- «
- »
Copy to clipboard
! Transfer Field Type
This field type implements the [https://element-plus.org/en-US/component/transfer.html|Element Plus Transfer] component and leverages [https://github.com/SortableJS/Sortable|SortableJS] to provide a re-ordering feature for items in the list.
It's used across all fields that support multi-valued items, which are:
* ((Category Tracker Field))
* ((Country Selector))
* ((Multiselect Tracker Field))
* ((Dynamic items list))
* ((Items List and Item Link Tracker Fields))
* ((User Selector))
!! Development
* Initial code: https://gitlab.com/tikiwiki/tiki/-/merge_requests/5108
* Development ideas: ((dev:Review all selectors and pickers))
!! Usage
!!! 1. Related field options
The Transfer field type is accompanied by a set of field options that can be used to customize the behavior of the component:
||Name|Description|Type|Default|
Filterable|Render a search box allowing the user to filter items within the list|yes/no|no|
Filter Placeholder|Placeholder text for the filter input|text|Enter keyword|
Source List Title|Label for the left list|text|List|
Target List Title|Label for the right list|text|Selected|
Ordering|Enable the re-ordering feature of items in the list|yes/no|no||
!!! 2. Example
Let's see an example using the Multiselect field.
We have to edit the field input type option to set it to -+Transfer+-.
{img src="display2060" link="display2060" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
''Do not forget to specify the options of your multiselect field. ;)''
That is it. We now get the following output in the form
{img src="display2061" link="display2061" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}