web dynpro abap _ scn1

Download Web Dynpro Abap _ Scn1

Post on 28-Dec-2015

110 views

Category:

Documents

2 download

Embed Size (px)

DESCRIPTION

web dynpro abap

TRANSCRIPT

  • Getting Started Newsletters Store

    Products Services & Support About SCN Downloads

    Industries Training & Education Partnership Developer Center

    Lines of Business University Alliances Events & Webinars Innovation

    Login RegisterWelcome, Guest Search the Community

    Activity Communications Actions

    Brow se

    Web Dynpro ABAP 116 Posts 1 2 3 8

    PreviousNext

    The Requirement

    I recently had a requirement to embed a web based map within a Web Dynpro application to search for customers

    and display markers for each result found on the map. I know there is an existing component for mapping but it's a

    little bit restrictive in some areas and not in line with our organisations grand plan. Suffice to say we opted against

    using it and decided on Leaflet.js. It's OpenSource and free from any vendor specific lock in (I.e. Nokia, Google, ESRI,

    etc).

    The Approach

    The only way for us to achieve integration with a Javascript based web map with a Web Dynpro application in NW 7.3

    is via a BSP application embedded with an IFrame (but from NW 7.4 it may be possible with HTML5 integration but

    I've not tried it).

    IFrames have long been a contentious subject in web development. Most developers believe them to be evil

    and quick search in google can point you to a fair few posts around this. Things were so bad SAP banished

    them from ABAP WD (I don't know the version this happened from) deprecating it's from the language.

    However in relatively recent turn of events the IFrame is back and from NW 7.03 and you can use them without

    fear of persecution (well almost).

    But what about security?

    In terms of security the web map has the same origin and can utilise the same authentication procedures as the Web

    Dynpro Application it is embedded in.

    OK. But how can I react to the search event?

    Now the SAP Help states that an IFrame should be used with caution, as the WebDynpro and the embedded content

    are effectively two independent applications. Take a look at the SAP Help for more info.

    IFrame - Web Dynpro ABAP - SAP Library

    As such you cannot really react to events raised from the Web Dynpro within the embedded IFrame. You can however

    re-call the page, which will result in the page being rebuilt. This may sound terrible, but bare in mind that

    depending on the type of content being loaded on the page , a lot of the static content should be cached after

    the first load, so subsequent reloads may not be so costly.

    On a side note as of NW 7.4 WebSockets support was introduced to ABAP. In theory I believe it should be possible to

    use this to react to events triggered in ABAP within Javascript. Unfortunately it's something I have not had a chance

    to try out, but hopefully in the next evolution of this it will happen....

    I can't get the page to reload...

    Yep. After looking at the APIs and searching the forums I could not find a way to trigger an IFrame refresh within the

    standard WebDynpro APIs. I'm not sure why this is not possible, but hey, that's just the way it is. Thankfully there is a

    simple work around.

    All you need to do is pass a changing request parameter in the IFrame URI for the BSP Web Map. This forces the

    framework and thus the browser into thinking the content has changed and results in the page refreshing. I used a

    simple counter in the Web Dynpro code I wrote to get the URI for the map, that increments each time the search

    results were updated.

    Please note nothing in the code for the BSP web map reacts to this additional parameter and as such it has no effect

    on the actual application processing.

    METHOD get_map_uri.

    DATA: l_url TYPE agr_url2,

    l_counter TYPE char10,

    lt_url_params TYPE tihttpnvp,

    Stateful(ish) Web Dynpro IFrames with Server SideCookies

    Posted by Katan Patel Mar 21, 2014

  • lo_bsp_runtime TYPE REF TO cl_bsp_runtime.

    FIELD-SYMBOLS: TYPE ihttpnvp.

    APPEND INITIAL LINE TO lt_url_params ASSIGNING .

    -name = 'view'.

    -value = 'AddressSearch'.

    APPEND INITIAL LINE TO lt_url_params ASSIGNING .

    -name = 'gui'.

    -value = 'webdynpro'.

    " Add the optional sessionId param if passed

    IF im_session_id IS NOT INITIAL.

    APPEND INITIAL LINE TO lt_url_params ASSIGNING .

    -name = 's'.

    -value = im_session_id.

    ENDIF.

    " Added a counter to fudge url param and trigger refresh of iframe, which works

    wd_this->g_counter = wd_this->g_counter + 1.

    l_counter = wd_this->g_counter.

    CONDENSE l_counter.

    APPEND INITIAL LINE TO lt_url_params ASSIGNING .

    -name = 'c'.

    -value = l_counter.

    " Currently defaulting this to HTTPS but need a better way to identify this

    cl_bsp_runtime=>if_bsp_runtime~construct_bsp_url( EXPORTING in_protocol =

    'HTTP'

    in_application =

    'ZEI_MAP'

    in_page =

    'START.HTM'

    in_parameters =

    lt_url_params

    IMPORTING out_abs_url =

    re_map_uri ).

    ENDMETHOD.

    And then there is the session handling...

    So how can I access the search results in my map from the WebDynpro each time the search results change.

    At this point I should probably point out that I wrote a set of Restful APIs using BSP to generate GeoJSON that

    can be consumed by the web based map. For now that is all a little off topic for this blog and a much bigger

    subject in itself, as we need throw in a mix of Javascript, BSP, XML, JSON, HTTP and Simple Transformations

    to make it happen...

    So let's get back on track..I don't want to embed a heap of content into the request body of the map URI called from the

    Web Dynpro only to then push the same content back to the server in a follow up request to retrieve the actual map

    data for obvious reasons. Instead to get the search results map data I used something called server side

    cookies.

    They have actually been around for ages, but I only recently discovered they existed thanks to the main man of

    ABAP Thomas Jung who mentioned it in a forum post. These little gems can be used to store and retrieve

    large datasets on the server, independent of the session and persist them up until a specified expiry time has

    passed or can be explicitly deleted. They are also super easy to implement.

    Server-Side Cookies and Data Persistency (SAP Library - Business Server Pages)

    Two important fields for a server side cookie are the session ID and user ID and both must be specified when

    creating and retrieving them.

    To get a unique session ID for my current WD application session I make a call to function module

    TH_GET_SESSION_ID. I subsequently use this session id to set my server side cookie for the authenticated

    user. Next I set the URI of the IFrame to the web based map and also pass this session id as request

    parameter.

    In the web map I have some javascript code to retrieve the session id from the application request URI. I finally

    make the call to the Restful APIs to GET the map content and again pass this same session id as a request

    parameter. Using the session ID and the user ID of the authenticated user (which is the same user as was

    authenticated by the Web Dynpro) I am able to retrieve the server side cookie containing the search results

    and use this to create the map data to pass back to the embedded web map.

  • Note that when setting the time a server side cookie be realistic. Don't set huge timeouts. In my scenario,

    nobody is going to click a button and wait for a response greater than one minute. So persisting the server

    side cookies any longer than that makes no sense.

    The Conclusion

    Things are not so bad with the old IFrames if used responsibly. You'll be surprised at what you can achieve.

    Here is a pic of the map I created and embedded within a WebDynpro ABAP FPM based search for addresses. The

    map zooms to best dimensions to display all the search results on the map, each time a search is triggered.

    It works nicely in Chrome, Firefox, Safari and with a little extra work on the Javascript side also works in IE (SAP

    dropped an IE7 compatibility mode bombsell setting in the page header, which causes havoc with JS as a lot of

    functionality was not around then).

    384 View s 0 Comments

    Tags: abap, w eb_dynpro, open_source, w ebdynpro, w eb_dynpro_abap, javascript;, iframe, bsp;

    Make two components of Web Dynpro ABAP, suppose one for flight Booking and the other for Customer details : Take

    two Webdynpro Components separately, Example: ZZ_CALLING_APPLICATION and ZZ_CALLED_APPLICATION.

    The navigation PDF is attached.

    STEP 1: CREATE A WEBDYNPRO COMPONENT (SAY: ZZ_CALLING_APPLICATION) THAT WILL TAKE

    THE Date on Which Record Was Created MEANS AEDAT AND A BUTTON NAMED SHOW

    PURCHASE ORDER, AND A TABLE THAT WILL SHOW THE DETAILS OF PURCHASE ORDER OF THE

    MENTIONED DATE FROM EKKO TABLE.

    Open a new Window in Webdynpro as an action of aButton Click

    Posted by Joyjit Biswas Mar 17, 2014

  • STEP 2: CREATE AN ANOTHER COMPONENT (SAY: ZZ_CALLED_APPLICATION) WHERE TAKE A

    TABLE WITH ELEMENTS OF EKPO TABLE.

    STEP 3: GOTO THE CALLING APPLICATION, SELECT