Create a Web Dynpro ABAP Application and Embedd a Map

[Former Member]

Hi,

Lately I have been seeing a lot of discussions around how easy it is to use CHIPs to build Web Dynpros with Maps (Google maps), but I was wondering if someone could provide a step by step guide on how to do it. I have seen some guides which explain how to create the CHIPs, but I am not quite sure how to put them on a Web Dynpro ABAP application.

Thanks in advance.

Regards,

Ricardo

[Former Member]

  Google MAP Integrator using Iframe Chips :

• A CHIP (Collaborative Human Interface Part) is a small, widget-type, encapsulated, piece of software that can be combined in a layout with other CHIPs to form a page or side panel. CHIPS are enhanced webdynpro components which can be either Iframe or link chips defined with a URL.

• In Web dynpro ABAP, instead of using  Webdynpro  ABAP chips always to define the content of the page, we can also create URL based chips.  These URL based chips are called IFrame chips which displays web page and we can define parameters as inports.

1. Integrating Google map on WDA - ABAP through IFrame chips:
2. The web dynpro component WDR_CHIP_PAGE is used to create the application configuration.
3. Create an application configuration by specifying unique configuration ID.

  –        Choose create button and assign to a local package.  

–        On the structure tab, select or create an appropriative component configuration and save the changes.

4. Test the application and add the parameter &sap-config-mode = config to end of the URL in the address bar. So the page is switched to configuration mod where we can create or edit the layout.
5. Design three containers in the layout for Start, Destination and Map respectively and save the configuration.
6. From the chip catalog, create Iframe chips by right clicking the Iframe node and specify unique configuration id and assign it to a package.
7. In the component defined tab, select header and specify attributes and define inport parameters.
8. Embed the google chip in the page created previously by drag and drop from the chip catalog to the container.
9. Display the connection with the two inport parameters and save the configuration.
10. Voila the application is ready for testing.

• Platform: ECC6.0
• Configuration Details:
• Component Name: WDR_CHIP_PAGE
• Create the application configuration

• On the structure tab, choose appropriate component or create new if required and save the entries, the configuration is done and appears under the application node.

       

• Test the application, in the page invoked, add the parameter &sap-config-mode = config to end of the URL in the address bar which will switch to configuration mode to edit the page as per requirement.
• We need to prepare the layout like given below through container settings available.

       

• Create Iframe chips which will point to google map locator by specifying the following attribute details.

Attribute                     Value  

               Address                  http://www.google.de/maps?output=embed

        and specify values for other attributes like chip-icon, title, description and height.

• Next, define two inport parameters also: SADDR – start DADDR – Destination (to find out route from source to destination).

  

• Embed the Iframe chip created into the page created by drag and drop from chip catalog and specify the parameter value for start and destination

    

• Choose apply after specifying start and destination parameter values.

• The connection created is displayed.

     

• Test the application.

     

Hope this gives you better understanding.

Best Regards,

Abirami S