Skip to Content

Integration between HTML 5 Drag & Drop and SAP ABAP HTTP ICF Services – PART I

This blog describes our technical presentation at Sap Inside Track Milan 2011. Together with [Alessandro Spadoni | http://openid.sap.com/ale.spadoni], I will describe native HTML5®

drag & drop and integration with SAP HTTP SICF Services.

What is Html5®Drag&Drop?

The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. There are a number of different events to attach to monitor the entire DnD process:

    • drag

    • dragenter

    • dragover

    • dragleave

    • drop

    • dragend

Reasons to use Html5®Drag&Drop:

0.1. Independency. It’doesn’t require any Javascript plugin or external Frameworks.

0.2.

Built-in Browser Support: it’s supported by Firefox 3.5+, Chrome 3.0+ , Safari 3.0 , IE 6+</li><li>Integration with other Web page applications: Html5 DnD works across frames, browser tabs and browser windows.</li></ul><p>In this blog I will describe the first one (of two) example pages prepared for Sap Inside Track Milan: an Html Table Drag to Excel .</p><p>An Html5® draggable element requires draggable+ attribute set  “true”.

Given a  +draggable element of  type  <table>, we can export  his contents (DOM innerHTML)  in excel format by calling a *Sap SICF Service* synchronously submitting an HTML form via POST method.</p><p>SAP Service parses HTML code as XML using class CL_IXML and our custom class ZCL_HTML_TABLEPARSER (soon on Code Exchange) . HTTP Response will return a binary Excel as Attachment.</p><p>As the following code and image show, we have a draggable element <table/> and a target element <div/> (an html Widget )</p><p>!https://weblogs.sdn.sap.com/weblogs/images/252056204/script.png|height=242|alt=Html Code|width=447|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/script.png!</p><p> !https://weblogs.sdn.sap.com/weblogs/images/252056204/sito_nologo.png|height=255|alt=Html page with widget|width=263|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/sito_nologo.png!</p><p>The table can be dragged  inside the widget.  </p><p>The <code>dataTransfer</code> property is core of the DnD. It holds the piece of data sent in a drag action. <code>dataTransfer</code> is set in the <code>dragstart</code> event and read/handled in the <code>drop</code> event. </p><p>Drop event makes an HTTP request to SAP (Submit Html Form). </p><p>We have created  Javascript Utility Class TableDrag to bind Events :</p><p>Event dragstart + (HtmlTable setData)

 

TableDrag.source(,      icon:’res/excel_icon.png’ });

Event drop (getData HtmlTable and Submit Form to SAP)                

TableDrag.target(,             class_active:’widget_active’,class_inactive:’widget_inactive’ }); // css classes

 

 !https://weblogs.sdn.sap.com/weblogs/images/252056204/codice2.jpg|height=105|alt=Html Code|width=435|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/codice2.jpg!

Excel

 

Complete flow chart

!https://weblogs.sdn.sap.com/weblogs/images/252056204/flow2_nologo.jpg|height=500|alt=Flow Chart|width=357|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/flow2_nologo.jpg!</body>

/
Excel
7 Comments
You must be Logged on to comment or reply to a post.