In her article How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder, Stefanie Bacher explained how to display a route with Google Maps where the start and end of the route are transferred from Web Dynpro. Further in the TechEd 2010 session CD163 – Creating Mashup User Interfaces with the New Web Dynpro ABAP Page Builder, the basics of creating ABAP Web Dynpro CHIPs was covered. This blog assumes the readers are familiar with concepts from these sources.
The features described in the blog are based on Web Dynpro ABAP in enhancement package 2 for SAP NetWeaver 7.0. For more information, visit the Web Dynpro ABAP homepage.
Start by creating a BSP application.
Next create a Page with flow logic for this application.
Now define the layout for the Page by navigating to the Layout tab. Copy the News Bar code inside the Body tags.
Next create an ABAP Web Dynpro application. Define a context for the application to hold the city name. Define an interface method to import the name of the city in the Web Dynpro Application. Add a new context element and add the city to the context element.
Create a view for the application and define a context for the view to hold the city name. Bind the context of the view to the context of the component controller. In the layout for the main view create an IFrame.
Override the WDDOMODIFYVIEW method of the view to set the source for the IFrame. Concatenate the city name and the page attribute to the URL of the Page created above. Set the URL as a source for the IFrame by calling the SET_SOURCE method of the IFrame object.
Save and activate the component.
Create a Web Dynpro CHIP for the component created above and provide the Interface View, the Plug Name and the CHIP Icon.
The CHIP will now be available in the CHIP catalog of the Page Builder. Create an Application Configuration and open it in the Page Builder, prepare the layout and add the CHIP from the CHIP catalog.
Connect the CHIP to the Source CHIP by mapping the Destination to the City attribute.
Test the application. You should see the route on the Google Map and the News for the city in the Google News Bar.