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

image



Html code , draggable="true"

image




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

image





 

Useful Links :

 

Part I of this Blog  

 

W3C Dnd spec  

 

Html5rocks.com </p>

Actions

Filter Blog

By date: