Skip to Content

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>

To report this post you need to login first.

7 Comments

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

  1. Trond Stroemme
    Great blog! What do you use to create the web pages? Since DnD is not (yet) supported by Web Dynpro ABAP, I guess it is time to brush off the BSP skills? Or can we integrate html5 into WDA…?

    Regards,
    Trond

    (0) 
  2. Sergio Ferrari
    I’m feeling lucky to meet you and Alessandro in person next Saturday at SAP Inside Track in Milan.
    Thanks a lot for sharing these very interesting experience.

    Sergio

    (0) 

Leave a Reply