Drag and Drop Functionality in UI5

[archisman92]

Hello UI5 Experts,

This weekend i felt like exploring the Drag and Drop capability of UI5 controls that has been made available for UI5 version greater than 1.56. Drag and drop is a very intuitive user experience and may come up as a requirement any time in one of our projects. While exploring a few resources, i came across this great post which seemed to serve my purpose perfectly. Here is the link to it:

https://sapyard.com/advance-sapui5-21-drag-and-drop-with-custom-button-control/

 

To my dismay, the end product was not working. So i took it upon myself to complete this and here i am presenting the same to you.

 

Here we have a list of employee records and instead of selecting a record and hitting the Delete Button, here we are providing the capability to drag the record on the delete button to perform the same function.

 

Initial Screen

 

Now i will drag and drop the second record on the Delete button it should disappear from the table.

 

Dragging second record to the delete button

 

Voila! Record has been deleted

 

So let us go a bit deeper and see what's really happening here.

 

First we need to specify the "DragInfo" for the Table control as shown below. The source aggregation is "items" as we will be looking to drag a ColumnListItem from the Table.

 

<mvc:View controllerName="DragNDrop.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

	displayBlock="true" xmlns="sap.m" xmlns:dnd="sap.ui.core.dnd" xmlns:control="DragNDrop.controls">

	<App>

		<pages>

			<Page title="{i18n>title}" titleAlignment="Center">

				<content>

					<Table items="{EmpData>/content}">

						<dragDropConfig>

							<dnd:DragInfo sourceAggregation="items"/>

						</dragDropConfig>

						<columns>

							<Column>

								<header>

									<Text text="Emp Name"/>

								</header>

							</Column>

							<Column>

								<header>

									<Text text="Emp ID"/>

								</header>

							</Column>

						</columns>

						<items>

							<ColumnListItem>

								<cells>

									<Text text="{EmpData>Name}"/>

									<Text text="{EmpData>ID}"/>

								</cells>

							</ColumnListItem>

						</items>

					</Table>

				</content>

 

Next we specify the "DropInfo" of the Delete button as shown in the below code:

 

	<footer>

					<Bar>

						<contentMiddle>

							<control:DeleteButton id="deleteButtonId" text="Delete" type="Reject" icon="sap-icon://delete" width="30%">

								<control:dragDropConfig>

									<dnd:DropInfo drop="onDrop"/>

								</control:dragDropConfig>

							</control:DeleteButton>

						</contentMiddle>

					</Bar>

				</footer>

			</Page>

 

Now if you notice, my Button is a custom button control here. This is because for a Button control, by default the "droppable" meta-data property is set to false. So we need to change that to true in order to be able to drop items into the button. Below code snippet shows how the meta-data is updated.

 

sap.ui.define([

	"sap/m/Button"

], function (Button) {

	"use strict";

	return Button.extend("DragNDrop.controls.DeleteButton", {

		metadata: {

			dnd: {

				droppable: true

			}

		},

		renderer: {}

	});

});

Once a item is "dropped" in the above Button, the "drop" event is triggered which calls the below function in the controller. This function gets the context of the item that was dragged w.r.t the table model and deletes the entry from the model.

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"sap/m/MessageBox"

], function(Controller,MessageBox) {

	"use strict";



	return Controller.extend("DragNDrop.controller.View1", {

		inIt:function(){},

		onDrop:function(oEvent){

			var bindingContext=parseInt(oEvent.getParameters('dragSession').draggedControl.getBindingContextPath().split('/')[2]);

			var oEmpModel=this.getOwnerComponent().getModel("EmpData");

			var oEmpModelData=oEmpModel.getData().content;

			oEmpModelData.splice(bindingContext,1);

			oEmpModel.setProperty('/content',oEmpModelData);

			

			oEmpModel.refresh();

			MessageBox.success("Employee record deleted!");

		}

	});

});

 

Hope this blog helps you implement the drag-drop functionality in your future projects. Below are a few URLs that you may refer to for more information:

 

• https://sapui5.hana.ondemand.com/#/topic/3ddb6cde6a8d416598ac8ced3f5d82d5


• https://sapui5.hana.ondemand.com/1.36.6/docs/guide/7b52540d9d8c4e00b9723151622bbb64.html

 

Thanks,

Archisman