Visual Composer demo – Customer and Google API

Blog for Visual Composer  

Title: Combining Customer BAPI and GoogleMap in your portal

 

Introduction

 

I wanted to build a composite application,  so I read  about other mash-up applications on SDN. One Mash up your application gave a good overview of the topic.  I figured that I want to reconstruct the example, but in the process, I came across a few changes, which I believe make the creation of mash-ups with SAP technology easier to understand.

 

There is an existing WIKI  description of using Google via URL but I chose a different implementation method where you are more free to customize in a Javascript, since I store a .jsp file in the KM-repository at our SAP EP server. This, on the other hand, requires that you sign up for a free API-key from Google. It gives more flexibility in my opinion.

   

Details

 

My composite application is just a simple Address –> Map application that is based on BAPI and Google Map API. Hardly any coding needed.

 

1)      I created a simple customer model using the BAPI_Customer_Getdetail2

 

    “

 

2)      I only choose the fields, CITY, COUNTRY; POSTL_CODE, STREET as input to the CustomerAddress Form.

  

 

 

 

  

3)      Notice I made a new invisible field “SAMLET” where I added all the fields as for getting the right syntax for the Google Map I am going to use later on.

 

   

 

4)      I registered for a free Google Map API, so I could use it from our own homepage.

Take your time to read the specifications for the Map API – it provides lots of possibilities with Traffic Overlayer, driving directions, zoom etc.

 

5)      I added a HTML view,  which I connected with the CustomerAdress form via a “Select”

   

    “

 

6)      Now, I stored almost exact the demo-example from Google Map on how to retrieve a location from an address using the Geocoding example

http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html

 

I took the source code (View Source in tools), changed the API key to the one I just registered and that was it.

**********************  JSP Source Coe **********************

 

   

   

   

     

    var map = null;

    var geocoder = null;

 

  function initialize() {

           

      if (gup(‘address’) != ”)

      {

            if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById(“map_canvas”));

        map.setCenter(new GLatLng(55.715443, 12.550362), 13);

        geocoder = new GClientGeocoder();

      }

             showAddress();

      }

    }

            function gup( name )

            {

                        name = name.replace(/[[]/,”\[“).replace(/[]]/,”\]”);

                        var regexS = “[\?&]”+name+”=([^&#]*)”;                        var regex = new RegExp( regexS );

                        var results = regex.exec( window.location.href );

                        if( results == null )

                                    return “”;

                        else

                                    return results[1];

            }

 

    function showAddress() {

 

              var address = gup(‘address’);

            //  alert(address);

      if (geocoder) {

        geocoder.getLatLng(

          address,

          function(point) {

            if (!point) {

              alert(address + ” not found”);

            } else {

              map.setCenter(point, 13);

              var marker = new GMarker(point);

              map.addOverlay(marker);

              marker.openInfoWindowHtml(address);

            }

          }

        );

      }

    }

   

   

 

 

 

 

     

  

 

************** End of JSP Source Code *************************

 

Of course I made small changes as for example not showing an input box, and changing the default map location etc.

 

The file was stored at our own demo environment as a JSP-file. This is the file you want to reference, look up the file – find the exact http:// location at the Portal, and then you are all set.

 

 

“

Just remember to “parse” in the address at the end of the “Assigned value” URL in the Select between Customeradress Form and your map HTML view –?address=” & @samlet   –  or whatever you prefer to call your variable made in step 3. Notice that I blanked out the exact link to our portal as well as part of the Google API key

 

This is the end-product when deployed from VC into the Portal.

   ”

 

  

Conclusion

Now you can internalize the Google API into your website and extend the Customer BAPI in a mash-up application.