Skip to Content

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>

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
    1. Alessandro Spadoni 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

      (0) 
      1. 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!

        (0) 
        1. Alessandro Spadoni 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.. 🙁

          (0) 
  2. 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.

    (0) 

Leave a Reply