How to Integrate Microsoft Bing Maps into SAP EHS Management

Size: px

Start display at page:

Download "How to Integrate Microsoft Bing Maps into SAP EHS Management"

Emil Powers
5 years ago
Views:

1 How to Integrate Microsoft Bing Maps into SAP EHS Management Applies to: Component Extension 1.0 for SAP Environment, Health, and Safety Management. For more information, visit the Sustainability homepage. Summary This tutorial explains how to embed a map into SAP EHS Management to visualize the address of a location on the map. The map is realized as a Web Dynpro CHIP (Collaborative Human Interface Part) and integrated into the Web Dynpro side panel of the maintenance screen for location master data. Author: Bruno Haller Company: SAP AG Created on: 10 January 2011 Author Bio Bruno Haller is a senior software developer at SAP AG. He has over 10 years of experience in developing applications in the environment, health and safety (EHS) area SAP AG 1

2 Table of Contents Introduction... 3 Prerequisites... 3 Create a CHIP for Bing Map Integration... 4 Build a HTML Wrapper for Bing Map Control... 4 Create a URL CHIP... 6 Embed the Map CHIP into the Location Side Panel... 8 Create an enhancement configuration... 8 Edit the Side Panel... 8 Test the Result Related Content Licensing Copyright SAP AG 2

Introduction SAP Environment, Health, and Safety Management (SAP EHS Management) uses locations for identifying real places, virtual spaces or objects.

3 Introduction SAP Environment, Health, and Safety Management (SAP EHS Management) uses locations for identifying real places, virtual spaces or objects. The location is a central master data object that can be organized in a structure to represent where a location exists spatially or functionally in a company. Examples of a location are a plant, a piece of equipment, or a work area. The master data maintenance screen for locations is a Web Dynpro ABAP application based on FPM (Floorplan Manager). It uses the Web Dynpro side panel to display additional context information, such as the position of a location within the company s location structure. The goal of this tutorial is to use the address information that is contained within each location and to visualize it on a map. Prerequisites This tutorial uses advanced concepts of Web Dynpro for ABAP and therefore, advanced knowledge of Web Dynpro for ABAP is required. For more information about Web Dynpro for ABAP, see help.sap.com SAP AG 3

Create a CHIP for Bing Map Integration Build a HTML Wrapper for Bing Map Control Bing Maps, designed by Microsoft, offers several techniques to embed a map into a Web page or Web application.

If no geographical coordinates are available, the address information has to be converted first (this process is called Geocoding ).

4 Create a CHIP for Bing Map Integration Build a HTML Wrapper for Bing Map Control Bing Maps, designed by Microsoft, offers several techniques to embed a map into a Web page or Web application. Direct URL embedding requires geographical coordinates. The address information contained within a location though can also consist of individual fields like street, city, zip, or country. If no geographical coordinates are available, the address information has to be converted first (this process is called Geocoding ). The Bing Maps AJAX Control supports geocoding of address information and displaying it on an embedded map. It was chosen, since it is rather simple to embed it into an HTML page and to pass the location address into it. Note: Other technologies (such as Web Services) exist to perform Geocoding. This tutorial shall be kept simple and avoid development effort as much as possible. The following steps describe how to use a simple BSP application to embed the Bing Maps AJAX control. Note: Any other technology like PHP, JSP, or even plain HTML in combination with JavaScript will work also. BSP is chosen to keep the example simple and consistent on one application server. Open transaction SE80 and create a new BSP Application. Create a new BSP page. Define a page attribute address that will be used for receiving the URL parameter with the location s address SAP AG 4

Use HTML and Javascript in the Page Layout to embed the Bing Maps AJAX Control. <%@page language="abap"%> <html xmlns="http://www.w3.

5 Use HTML and Javascript in the Page Layout to embed the Bing Maps AJAX Control. language="abap"%> <html xmlns=" <head> <script type="text/javascript" src=" <script type="text/javascript"> var map; function OnPageLoad() { map = new VEMap('myMap'); map.loadmap(); map.setmapstyle(vemapstyle.hybrid); map.find(null, '<%= address %>'); map.hidedashboard(); map.hidescalebar(); } </script> </head> <body onload="onpageload();" style="margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;"> <div id="mymap" style="position:relative;width:100%;height:100%;"></div> </body> </html> Test the page (right click: Test ) by appending a URL parameter with a valid address, for example,?address=walldorf SAP AG 5

Add the URL parameter sap-config-mode=config to enter configuration mode. 3. Right click on the folder Left and choose Create. 4.

6 Create a URL CHIP To integrate the previously created HTML page with Web Dynpro, it is necessary to create a Web Dynpro CHIP for it. In our case, it is sufficient to create a CHIP that contains the URL for the Bing Map Ajax Control Wrapper. 1. Start the Web Dynpro application WDR_CHIP_CATALOG. 2. Add the URL parameter sap-config-mode=config to enter configuration mode. 3. Right click on the folder Left and choose Create. 4. Enter a configuration ID and choose the Create pushbutton. 5. Enter the HTTP URL to the previously created HTML page in the field "chipaddress". Make sure to enter exactly <EHFND_LOC_ADDRESS> as a place holder in the URL. It will be replaced with the location s address at runtime SAP AG 6

7 6. Add a custom parameter to increase the displayed height. 7. Save and close the configurator SAP AG 7

Embed the Map CHIP into the Location Side Panel Create an enhancement configuration The location side panel that is delivered with component extension 1.

To embed the map, a modification-free enhancement shall be made to this configuration. 1.

In the start screen of the configurator, select "Other Functions Create Enhancement". 3. Enter a configuration ID, press OK and save the configuration.

8 Embed the Map CHIP into the Location Side Panel Create an enhancement configuration The location side panel that is delivered with component extension 1.0 for SAP EHS Management is defined in Web Dynpro configuration EHFND_LOC_OIF_SIDE_PANEL. To embed the map, a modification-free enhancement shall be made to this configuration. 1. Use SE80 to find the Web Dynpro configuration EHFND_LOC_OIF_SIDE_PANEL and start the configurator. 2. In the start screen of the configurator, select "Other Functions Create Enhancement". 3. Enter a configuration ID, press OK and save the configuration. Edit the Side Panel 1. Create a new application configuration of Web Dynpro application WDR_CHIP_PAGE. In it, use the enhanced component configuration that was created in the previous step. 2. Start the application configuration by pressing the Test button and add the following URL parameters: page_type=side_panel side_panel_editor_enabled=x sap-config-mode=config 2011 SAP AG 8

Open the Chip Catalog with the link on the upper right of the screen. 6.

9 3. The Side Panel Editor opens and shows a preview of the currently configured CHIPs (only the location structure by default). 4. Click on Add Panel Entry and give it the name Map. 5. Open the Chip Catalog with the link on the upper right of the screen. 6. Find the URL CHIP you have created previously, and use drag and drop to embed it into the new side panel entry. 7. Save the configuration and close the configurator SAP AG 9

10 Test the Result Start SAP EHS Management and open the master data maintenance screen of any location. Make sure that a valid address is entered. On the bottom of the side panel you should now see a new entry called Map. Click it to expand the map CHIP and verify the result. Congratulations! You have successfully configured Bing Maps for use in SAP EHS Management SAP AG 10

11 Related Content Read more about the Microsoft Bing Maps AJAX Control Another interesting SDN tutorial: How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder Learn more about SAP EHS Management and Sustainability. For more information, visit the Sustainability homepage. Licensing Be aware of the general licensing terms and conditions for the usage of Bing Maps and refer to for detailed information. You can get further information on the required licenses via Lars.Koessler@schweickertgruppe.de SAP AG 11

12 Copyright Copyright 2011 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iseries, pseries, xseries, zseries, eserver, z/vm, z/os, i5/os, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty SAP AG 12

How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder

How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder Applies to: Web Dynpro ABAP in enhancement package 2 for SAP NetWeaver 7.0. For more information, visit the Web Dynpro