Integration between HTML5 Drag & Drop and SAP ABAP HTTP ICF Services – PART II
(SITMIL related blogs:
[Results SAP Inside Track Milan 2011 Questionnaire | http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/26814]
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)
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 :