Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

Overview

This article describes, how to include arbitrary HTML-code in a CHIP, which can be integrated in Page Builder for Web Dynpro ABAP. This technique enables you to embbed typical Mashup content like YouTube Videos, Google Gadgets and many more. To achieve this, the HTML code needs to be located in a Business Server Page (BSP) on the ABAP application server. There is an URL associated with each BSP, and therefore CHIPs pointing to BSPs can be defined using the Web CHIP.

Availability

The feature is supported for systems with SAP_BASIS >= 7.02. This is the case for systems on SAP NetWeaver 7.02 or SAP enhancement package 5 for SAP ERP 2005.

How-To Guide

Get a HTML snippet

There are many sources of HTML, e.g. the administrative functions of Google Gadgets used in iGoogle. Here's the Link to the Google test environment for the Google maps gadget, where the HTML can be retrieved by pressing 'Get the code'.

Create a BSP application and BSP page.

  • In SE80, create a BSP application...
  • ... and a BSP page

Insert HTML into BSP

Replace the template code by the snippet code. Here, we insert (and format) the Google Gadget code for Google-Maps got from the Google test environment in the first part. The Code is marked red. Make sure, to change the editor settings in SE80 (Utilities -> Settings -> ABAP Editor) to 'Back-End Editor' or 'Front-End Editor (Old)', because the new Front-End Editor performs word-wraps and will corrupt the value of the 'src' attribute.

Add URL-Parameters for location

Now, we want to add an URL-parameter 'q' to our BSP, so an external caller can specify the location to be displayed. To achieve this, we slightly change the code a bit: the URL attribute used in the script tag is now filled within an inplace ABAP section within the BSP. In the ABAP, the URL parameter 'q' is retrieved by method GET_FORM_FIELD of the BSP standard object REQUEST. The code now looks like this:

Define a CHIP

To use this BSP as a CHIP, we have to create a Page with the Pagebuilder and insert a Web CHIP with the BSP's URL. Creating a Page is documented here, so we start with a blank page called in configuration mode. Here we search for the CHIP 'Web-CHIP' in the CHIP catalog and insert it into the page:

Specify the URL by calling the panel menu entry 'Define URL'. Here, the URL has the following format:
/sap(====)/<ICF-path to BSP application>/<BSP application>/<BSP page>
For instance, the URL of the BSP page 'z_sdn_google_maps' of the BSP application 'z_sdn_example' located in the ICF node '/sap/bc/bsp/sap' would be:
/sap(====)/bc/bsp/sap/z_sdn_example/z_sdn_google_maps
The prefix (====) prevents an additional roundtrip when starting the BSP page.

In addition, we have to define the URL parameter 'q' for the address by calling the panel menu entry 'Define URL parameters':

Parametrize CHIP

The CHIP parameter for the location now can either be configured (by calling the panel menu entry 'or wired. If supplied by either way, wiring wins:

Switch on BSP-Caching

As the code of our BSP will not change often in end-user environments, it should be cached as long as possible on the client. This can be achieved by setting the appropriate parameter in the header data of the BSP:

Be aware, that you have to clear the browser cache after each modification of the code.

Security aspects

When creating BSPs, please behold the security aspects. In particular, be aware, that parameters passed by URL from the Pagebuilder have to be escaped according to their current context. This can be achieved by calling the ABAP command escape. An example is delivered in SAP_BASIS 7.02 in BSP application WDR_TEST_CHIP.

Appendix

JavaScript on SDN

SDN does not allow posting certain javascript code fragements. Unallowed parts have been masked using $-characters. When implementing the code, please remove all $-characters.

HTML-snippet of Google Gadget

<%
  data:
    lv_source type string,
    lv_location type string.

    lv_location = request->get_form_field( 'q' ).
    lv_location = escape( val = lv_location format = cl_abap_format=>e_html_js_html ).

    concatenate 'http://www.gmodules.com/ig/ifr'
                '?url=http://www.google.com/uds/modules/elements/localsearch/localsearch.xml'
                '&amp;up_location='
                lv_location
                '&amp;up_largeMapMode=1'
                '&amp;up_kml=0'
                '&amp;up_traffic='
                '&amp;up_locationCacheString='
                '&amp;up_locationCacheLat='
                '&amp;up_locationCacheLng='
                '&amp;up_mapType=m'
                '&amp;up_idleZoom=11'
                '&amp;up_transitionQuery='
                '&amp;up_rawquery='
                '&amp;up_selectedtext='
                '&amp;synd=open'
                '&amp;w=320'
                '&amp;h=200'
                '&amp;title=Google Maps'
                '&amp;lang=all'
                '&amp;country=ALL'
                '&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999'
                '&amp;output=js'
            into lv_source.
%>
<html>
  <head>

    <scr$ipt
      src="<%= lv_source %>" >
    </scr$ipt>

  </head>

  <body style="margin:0; padding:0">
  </body>
</html>

HTML-snippet with JavaScript API of Google Maps

This code fulfills the same purpose as the discussed example, but uses the JavaScript API of Google Maps as documented here. The URL of the BSP can be parametrized with the URL-Parameter 'address'. In the JavaScript function 'initialize' it's first converted to a geocoded format (JS Object google.maps.LatLng) before it can be used to instantiate the actual Maps-object (google.maps.Map).

<!DOCTYPE html>
<html>
  <head>
    <me$ta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
    </style>

    <scr$ipt ty$pe="text/javascript"
       src="http://maps.google.com/maps/api/js?sensor=false">
    </scr$ipt>

    <scr$ipt ty$pe="text/javascript">
    var map;
    var geocoder;
    function initialize() {
         geocoder = new google.maps.Geocoder();
         geocoder.geocode( { 'address':'<%= request->get_form_field( 'address' )%>'},  function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                       map.setCenter(results[0].geometry.location);
                       var marker = new google.maps.Marker({
                          map: map,
                          position: results[0].geometry.location
                       });
                   } else {
                     ale$rt("Geocode was not successful for the following reason: " + status);
                   }
               });
         var latlng = new google.maps.LatLng(-34.397, 150.644);
         var myOptions = {
               zoom: 8,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
         map = new google.maps.Map(document.getElementById("map_canvas"),
             myOptions);
         }
    </scr$ipt>
  </head>

  <body on$load="initialize()">
    <div id="map_canvas" style="width:100%; height:100%">
    </div>
  </body>

</html>

1 Comment

  1. Thank you very much!

    I used your guide for implementing a similar iframe, but without creating a BSP page (the google link is set directly in the 'define URL' function of the web chip).

    But it still has an URL parameter (filled via Tagging).