Adding drag-n-drop to standard UI components
Switch branches/tags
Nothing to show
Clone or download
Latest commit 12fdd2a Aug 7, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
modules Upgrade to platform-6.6.1 Aug 14, 2017
.gitignore Upgrade to platform-6.4.0 Feb 2, 2017 Update Aug 7, 2018
build.gradle Fix deploy tomcat directory Aug 23, 2017
settings.gradle Upgrade to platform-6.2.2, add readme Jul 26, 2016

Drag & Drop

This project demonstrates the following concepts of the CUBA platform:

  • Extending functionality of screens defined in the platform.
  • Using screen companions.
  • Adding drag-n-drop functionality to standard CUBA UI components.


A user should be able to move users between groups in the Access Groups screen using drag-n-drop.


  • Open the project in CUBA Studio, execute Run > Create database, then Run > Start application server and open the application at http://localhost:8080/app.

  • Open the Administration > Access Groups screen.

  • You can drag a user from the table and drop it to a group to move it to this group.

Implementation Details

  • The com/company/dd/gui/group/group-browse-ext.xml screen in the GUI module extends the group-browse.xml screen of the platform. The screen is registered in the screens.xml with the same identifier as the base screen (sec$Group.browse), so it will replace the base screen in the application.

  • The group-browse-ext.xml screen descriptor defines a companion class for the web client:

  • The GroupBrowseExt screen controller defines the interface for the companion and delegates initialization of the drag-n-drop functionality to the companion implementation.

  • The GroupBrowseCompanion.initDragAndDrop() method obtains Vaadin components from CUBA table and tree and initializes their drag-n-drop parameters.

Based on CUBA Platform 6.6.1


Please use for discussion, support, and reporting problems coressponding to this sample.