1

Integration between HTML 5 Drag & Drop and SAP ABAP HTTP ICF

Services

Alessandro Spadoni & Patrizia RossiOctober 8th, 2011

2

Overview

Html 5 has the ability to create drag & drop events (DnD). The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page.

3

There are number of events which are fired during various stages of the DnD operation: Dragstart

Drag & Drop events

4

There are number of events which are fired during various stages of the DnD operation: Dragstart Drag Dragenter

5

Drag & Drop events

6

There are number of events which are fired during various stages of the DnD operation: Dragstart Drag Dragenter Dragover Dragleave

7

Drag & Drop events

8

There are number of events which are fired during various stages of the DnD operation: Dragstart Drag Dragenter Dragover Dragleave Drop

9

Drag & Drop events

10

There are number of events which are fired during various stages of the DnD operation: Dragstart Drag Dragenter Dragover Dragleave Drop Dragend

11

Drag & Drop events

12

Events Descriptiondragstart Fires when the user starts dragging of the object. The most important property of a dragstart

event object is dataTransfer. The setData() method can be called in response to the dragstart event.

drag Fires every time the mouse is moved while the object is being dragged.

dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.

dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drop The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. The most important property of a drop event object is dataTransfer. The getData() method can be called in response to the drop event.

dragend Fires when the user releases the mouse button while dragging an object.

Drag & Drop events - Summary

13

Next slide shows a first example of integration between Html 5 and Sap.Given a draggable element of type <table>, we can export his contents (DOM innerHTML) in excel format by calling a Sap SICF Service synchronously submitting an HTML form via POST method.SAP Service parses HTML code as XML using class CL_IXML and our custom class ZCL_HTML_TABLEPARSER. HTTP Response will return a binary Excel as Attachment.

Integration DnD with Sap – Part I

14

15

16

Integration DnD with Sap – Part II

Next slide shows a second example of integration.Dragging an AIRLINE image in a target area: On Drop event we can do an AJAX request to Abap SICF Service.Response is a JSON Object containing SFlights Data.

17

18

19

Additional Information Sources

W3C Specification: http://dev.w3.org/html5/spec/dnd.html

HTML5rocks: http://www.html5rocks.com/en/tutorials/dnd/basics/

20

Thank You!

Alessandro SpadoniSap Netweaver Consultant

Technis Blu S.R.L. alessandro.spadoni@technisblu.it @alespad

Patrizia RossiSap Netweaver Consultant

Technis Blu S.R.L. patrizia.rossi@technisblu.it @patty_1982