In this Blog I will try to explain how to create a Web Dynpro CHIP which uses JavaScript to display some information and integrate it into a Web Dynpro ABAP Application Using the Page Builder. As an example we would use the Google News Bar to embed a customized news slideshow in our Web Dynpro CHIP. The destination city selected by the user will be passed as a parameter to the Google News Bar and it will display the news for that city. The Javascript code required to embed the News Bar can be found here.
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.
In order to get the city for which the news needs to be displayed define a page attribute of type string to hold the name of the city. Next pass this attribute to the options variable in the Javascript function LoadNewsBar(). This will ensure that the News Bar displays the news for the name of the city passed in the page attribute.
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.
