Skip to Content
Author's profile photo Alessandro Spadoni

Integration between HTML5 Drag & Drop and SAP ABAP HTTP ICF Services – PART II

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>

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Trond Stroemme
      Trond Stroemme
      Hi,

      I've been reading both blogs and have tried to reproduce this technology in my own environment. Unfortunately, the above info seems a bot fragmented and incomplete.

      Example: you talk about the JSON Object; where is this defined? What is it? Is it a specific ABAP class, and if so, where do I find it? Do I write it itself, and if so, how? Or is it provided by SAP or a third party? Who? Where?

      Then, the Ajax SICF service... again, can you describe how this is defined/setup?

      Trying to piece all this together when the technology is new and relatively unknown is difficult, with the fragments you have provided. A food, working example, explained step-by-step, would be nice!

      Regards,
      Trond

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni
      Blog Post Author
      Hi Trond,
      i'm sorry if  info seems fragmented...you 're right , probably i omitted some infos like SICF services , AJAX , JSON ecc..
      also my english is not so good 🙂

      We can define this example in 2 main sides:
      -Javascript side: we need to bind standard Javascript events to perform some actions..on dragstart event we set data (ID image = SFLIGHT-CARRID), on drop event we get data and call SAP Service via AJAX.
      Javascript methods are event.dataTransfer.setData and event.dataTransfer.getData

      AJAX url is a SICF service..in my example http://alessandro-pc:8000/zsitmil/carrid/(ID CARRID) that is my local NSP SAP Netweaver.

      AJAX call gets a JSON String Object as response that contains Flights Data.

      -Abap Side:
      we need to create a custom SICF Service  (setting a User+Password in SICF Node to make the service anonymous with no password required) that selects SFLIGHT using "carrid" provided by the http request and returning a JSON Object as Http Response using custom class ZCL_DOCUMENT_JSON by Uwe Fetzer.
      Http Handler Method IF_HTTP_EXTENSION~HANDLE_REQUEST is entirely pasted in this blog.

      I uploaded this package that contains full Sflight Example (html,javascript) and Abap Sflight Handler Class (Saplink).
      You also need  Abap class ZCL_JSON_DOCUMENT_CLASS (https://cw.sdn.sap.com/cw/groups/zjson)

      I uploaded the zipped package here http://goo.gl/sEoVv .

      Inside the package,drag_drop_events.html describes main Dnd Javascript Events and how they're fired.

      You have to change Url in DndUtil.js SAPurls.SFLIGHT: 'http://alessandro-pc:8000/zsitmil/carrid/' with your SICF Node Url

      I hope that i helped you
      Alessandro

      Author's profile photo Trond Stroemme
      Trond Stroemme
      Hi Alessandro,

      thanks for the above, and sorry if my original comment sounded too bad. I just felt it needed a bit more detail, at least for those not too used to working with web services and ICF.

      I'll try implementing this technique, and see how I can use it also in WDA.

      Thanks again!

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni
      Blog Post Author
      try to download the zip file..so you can see Javascript Html5 Drag&Drop events in detail 🙂

      However,as you said these arguments are really new,
      for example I noticed that event.datatransfer.setDragImage javascript method to set a custom drag icon doesn't work in Internet Explorer.. 🙁

      Author's profile photo Former Member
      Former Member

      Hi Alessandro, I tried to reproduce what you have done but keep on getting error in AJAX call, should I enable anything in the browser? I appreciate your reply. And thanks for an amazing blog.

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni
      Blog Post Author

      Hi Raghavendra,

      some blog content may have been lost from transiction to old sdn to new scn...i will fix it in the next few day!