Create a Web Dynpro ABAP Application and Embedd a Map

Former Member — Fri, 06 Sep 2013 05:28:26 GMT

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

Re: Create a Web Dynpro ABAP Application and Embedd a Map

Kiran_Valluru — Sun, 08 Sep 2013 14:39:04 GMT

Hi,

Check this document for your requirement http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b0bca5ae-3c5c-2d10-938d-a81787f59ace?overridelayout=true

You can also create an iFrame UI element and pass the google map URL to display maps.

Hope this helps u.,

Regards,

Kiran

Re: Create a Web Dynpro ABAP Application and Embedd a Map

Former Member — Mon, 09 Sep 2013 08:54:33 GMT

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.

Integrating Google map on WDA - ABAP through IFrame chips:
The web dynpro component WDR_CHIP_PAGE is used to create the application configuration.
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.

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.
Design three containers in the layout for Start, Destination and Map respectively and save the configuration.
From the chip catalog, create Iframe chips by right clicking the Iframe node and specify unique configuration id and assign it to a package.
In the component defined tab, select header and specify attributes and define inport parameters.
Embed the google chip in the page created previously by drag and drop from the chip catalog to the container.
Display the connection with the two inport parameters and save the configuration.
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

Question Re: Create a Web Dynpro ABAP Application and Embedd a Map in Technology Q&A

Create a Web Dynpro ABAP Application and Embedd a Map

Re: Create a Web Dynpro ABAP Application and Embedd a Map

Re: Create a Web Dynpro ABAP Application and Embedd a Map