History: Transfer Field Type
Source of version: 4 (current)
Copy to clipboard
{syntax type="markdown" editor="wysiwyg"} # 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"}