1. Integration between HTML 5 Drag & Drop and SAP ABAP HTTP ICF Services Alessandro Spadoni & Patrizia Rossi October 8th, 2011 1

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. 2

3. There are number of events which are fired during various stages of the DnD operation: Dragstart 3 Drag & Drop events

4. 4

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

6. 6

7. 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. 8

9. 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. 10

11. 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. EventsDescription dragstart 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. 12 Drag & Drop events - Summary

13. Next slide shows a first example of integration between Html 5 and Sap. Given a draggable element of type, 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. 13 Integration DnD with Sap – Part I

14. 14

15. 15

16. 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. 17

18. 18

19. 19 Additional Information Sources W3C Specification: http://dev.w3.org/html5/spec/dnd.htmlhttp://dev.w3.org/html5/spec/dnd.html HTML5rocks: http://www.html5rocks.com/en/tutorials/dnd/basics/http://www.html5rocks.com/en/tutorials/dnd/basics/

20. 20 Thank You! Alessandro Spadoni Sap Netweaver Consultant Technis Blu S.R.L. alessandro.spadoni@technisblu.it @alespad Patrizia Rossi Sap Netweaver Consultant Technis Blu S.R.L. patrizia.rossi@technisblu.it @patty_1982