Transfer

🔁 Transfer Component in Lowcoder

The Transfer component in Lowcoder facilitates the movement of items between two lists, allowing users to select and transfer items from one side to the other. This is particularly useful for assigning roles, selecting options, or managing item distributions within applications.

🔧 Key Features

• Dual List Interface: Presents two lists side by side, enabling intuitive item transfers.

• Search Functionality: Includes search bars for filtering items within each list.

• Customisable Titles: Allows setting custom titles for both source and target lists.

• Responsive Design: Adapts seamlessly to various screen sizes and devices.

🛠 Configuration Options

• Data Binding: Bind the component to dynamic data sources using Lowcoder's data binding syntax ({{ }}), ensuring real-time data representation.

• Default Selections: Predefine selected items to appear in the target list upon component load.

• Styling Options: Customize the appearance, including dimensions, borders, and colors, to align with your application's design.

• Event Handlers: Define actions to be executed upon item transfers, such as updating databases or triggering other components.

⚙️ Integration Tips

• Dynamic Data Integration: Bind the Transfer component to queries or variables to reflect real-time data changes.

• Event Handling: Implement event handlers to perform actions like updating user roles or permissions based on item transfers.

• Combining with Other Components: Use in conjunction with components like Tables or Forms to enhance functionality and user interaction.

Component Playground

On Component Playground, you can interact with the Transfer component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Transfer component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Transfer component, we have shown how to use different properties of the Transfer component. It also includes the Styling properties of the Transfer component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Transfer component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
items	Array	Returns Array of Objects containing all the items of the Transfer component
hidden	Boolean	Returns True or False based on whether the Transfer component is hidden or not
searchInfo	Array	Returns an Array containing the Search term being searched in Transfer component
selectedKeys	Array	Returns an Array containing the keys of the Selected items
targerObject	Array	Returns an Array of Objects containing list of all the items present in Target section
targetKeys	Array	Returns an Array containing list of Keys of all the items present in Target section

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Change	Triggers, when anything Changes on the Transfer component
Search	Triggers, when a User searches inside the Transfer component
Selection Change	Triggers, when a User selects or unselects an item on the Transfer component

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setItems() :

transfer1.setItems() method sets the Transfer component's Items property, which gets shown in the Transfer component.

transfer1.setItems([
  {
    "key": "1",
    "title": "Content 1"
  },
  {
    "key": "2",
    "title": "Content 2"
  },
  {
    "key": "3",
    "title": "Content 3"
  }
]);

clearItems() :

transfer1.clearItems() clears the Transfer component's Items property and empties the Items from the Transfer component.

transfer1.clearItems();

resetItems() :

transfer1.resetItems() method resets the Transfer component's Items property to the default Items of the Transfer component.

transfer1.resetItems();

setTargetKeys() :

transfer1.setTargetKeys() method sets the Transfer component's targetKeys property, which shows items in the Transfer component's Target section.

transfer1.setTargetKeys(["1","3"]);

clearTargetKeys() :

transfer1.clearTargetKeys() clears the Transfer component's targetKeys property and empties the items from the Transfer component's Target section.

transfer1.clearTargetKeys();

resetTargetKeys() :

transfer1.resetTargetKeys() method resets the Transfer component's targetKeys property to the default targetKeys value of the Transfer component.

transfer1.resetTargetKeys();

📌 Use Cases

• User Role Assignment: Assign or revoke user roles by transferring users between available and assigned lists.

• Feature Selection: Enable users to select desired features or options from a list of available items.

• Task Allocation: Distribute tasks among team members by moving tasks between unassigned and assigned lists.

• Permission Management: Manage access permissions by transferring resources between accessible and restricted lists.