This is the 2nd part of Blog (here Part I ) where Me & Patrizia want to to describe our Sap Inside Track Milan session  about the integration between Html5® Drag&Drop and Abap Sicf Services.

(SITMIL related blogs:


SAP Inside Track Milan 2011 - The reporting

[Results SAP Inside Track Milan 2011 Questionnaire |]


In part I , Patrizia described how we can convert an Html Table to Excel using a SICF Service that converts html  dinamically, submittin' a classic Html form to a SICF service returning a Binary Excel as Attachment.

This 2nd example describe the tipical "Sap World" example: SFLIGHT Table.  We have three draggable images  rapresenting three Airline Companies and each Object Image ID is a SAP Sflight Airline Code (SFLIGHT-CARRID).


Html code , draggable="true"


On dragstart event , ID is SET using event.dataTransfer.setData Method.
On drop event we have to call SAP to Select Flights Data: unlike the previous example described by Patrizia (Dnd to Excel) , here we can do an AJAX Request to SAP SICF Service because we haven't to do with Binary Files (No Excel) but it's only text .

After event.dataTransfer.getData Method is called (on drop event) , we can do an AJAX Request using SFLIGHT-CARRID code (i used jQuery $.ajax method)

Below a piace of Javascript code (TableDrag is an utility class to bind Dnd Events,[here source code |])




         TableDrag.source({ object:document.getElementById("LH"),




                        } });,                                                            icon:'res/excel_icon.png'});






On Abap Side , Ajax SICF Service selects SFLIGHT Table  and responses with a lightweight JSON Object (thank to ZCL_JSON_DOCUMENT Class By Uwe Fetzer).

Very Important : we must set response header "Access-Control-Allow-Origin" because AJAX request is from a different domain (wikipediaCORS).



Useful Links :


Part I of this Blog  


W3C Dnd spec </p>


Filter Blog

By date: