Integration between HTML 5 Drag Drop and SAP

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

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

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

4

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

6

Drag & Drop events There are number of events which are fired during various stages of the Dn. D operation: q Dragstart q Dragenter q Dragover q Dragleave 7

8

Drag & Drop events There are number of events which are fired during various stages of the Dn. D operation: q Dragstart q Dragenter q Dragover q Dragleave q Drop 9

10

Drag & Drop events There are number of events which are fired during various stages of the Dn. D operation: q Dragstart q Dragenter q Dragover q Dragleave q Drop q Dragend 11

Drag & Drop events Summary Events Description dragstart Fires when the user starts dragging of the object. The most important property of a dragstart event object is data. Transfer. The set. Data() 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 data. Transfer. The get. Data() method can be called in response to the drop event. dragend Fires when the user releases the mouse button while dragging an object. 12

Integration Dn. D with Sap – Part I 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 inner. HTML) 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

14

15

Integration Dn. D 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. 16

17

18

Additional Information Sources W 3 C Specification: http: //dev. w 3. org/html 5/spec/dnd. html HTML 5 rocks: http: //www. html 5 rocks. com/en/tutorials/dnd/basics/ 19

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 20