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"}