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 | 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)
Below a piace of Javascript code (TableDrag is an utility class to bind Dnd Events,[here source code | http://jsfiddle.net/alespadoni/SAtRm/])
$(document).ready(function(){
/...
TableDrag.source({ object:document.getElementById("LH"),
dragStartAction:function(e){
e.dataTransfer.setData("Text","LH");
$('#carrid').html('\'LH\'');
} });
TableDrag.target(, 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 :
Html5rocks.com </p>
6 Comments
