Loading...
 
Skip to main content

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