The idea is to bring the area of the Sold to party from the Sales and Distribution cycle on the Google map

so that the user can know exactly where the location of the area and also show the top areas in Sales and distribution on the Map.

        For this purpose we build a Custom UI5 table and populate the data from the SD Cycle. When the user selects a document from the table and clicks on the “Show on map” button the area is shown as a Marker on the map. If the user wants to go to a particular place he/she can click on the “Take me there” button then the QR Code gets generated and user can scan the QR Code on a Smartphone or Tablet, it takes the user to the desired location using the Google maps.


When the Flavor is Loaded.

Onloading.JPG

On selecting a row and Clicking the button “Show on Maps”.

Maps.JPG

On selecting a row and Clicking the button “Take me there!!”

QR Code.JPG

Three things has to be done to bring this

  1. Creating Remote Function Call in ECC using ABAP
  2. Creating Flavor with Custom Table
  3. Embedding Maps and QR Code

Creating Remote Function Call in ECC using ABAP

1.Details RFC –  ZRFC_COUNT_TEST

Create a RFC to get the data from the Table VBAK to prepare a Custom table using UI5 and Html Viewer.

Source Code:

SELECT * FROM VBAK INTO CORRESPONDING FIELDS OF TABLE DETAILS1 where ernam = user and VBTYP = doc_type

Tables Parameter:

2. Select City – ZRFC_CITY

Write a RFC to fetch the correct city for the desired Sold-to-Part in the Document

Source Code:

TABLES:KNA1.

data : city1 type STANDARD TABLE OF KNA1,

      wa_city TYPE kna1.

SELECT * from KNA1 into CORRESPONDING FIELDS OF wa_CITY where KUNNR = stp.

  ENDSELECT.

city = wa_city-ort01.

Parameters:

Creating Flavor with Custom Table


     This part has been beautifully done here Custom tables in Personas (take 2) by Steve Rumsby. I am adding few functionalities hope he doesn’t get mad at me and also thank you Steve for wonderful post.

     Add a event listener to the Custom UI5 Table

var oTable2 = new sap.ui.table.Table({

     title: “Sales Order Details”,

     visibleRowCount: 15,

     columnHeaderHeight: 30,

     selectionMode: sap.ui.table.SelectionMode.Single,

rowSelectionChange: function(oEvent){

var path = oEvent.getParameter(“rowContext”);

gdata=oModel2.getProperty(“KUNNR”, path);

document.getElementById(“test”).innerHTML=gdata;}

});

We are getting the value of the SOLD-TO-PARTY i.e KUNNR field and updating a hidden <p> element named test for the map to fetch the value.

</div><p hidden id=”test”></p><div id=”button”>


Make Sure the Cross domain Error does not occur setting the value of “document.domain” for the HTML viewer.

Embedding Maps and QR Code

     This is the trickiest part first lets build the map.

Map:


     Fetch the sold to party stored in the hidden <p> tag.


var stp = window.document.getElementById(“wnd[0]/usr/htmlViewerPersonas_1460964388149”).contentDocument.getElementById(‘test’).innerHTML;


     Get the Sold to party of the selected row from the UI5 Custom table and using the RFC get the corresponding Place of the STP.


var rfc = session.createRFC(“ZRFC_CITY”);

rfc.setParameter(“STP”, stp);

rfc.requestResults(JSON.stringify([“CITY”]));

rfc.send();

var city = rfc.getResult(“CITY”);


Build the Map and pass the value of the city to display it in the map.


Note : To use the Map service API Key is needed

You can Sign Up using the link Sign Up for the Google Maps AP


function initMap() {

        var map = new google.maps.Map(document.getElementById(“map”), {

          zoom: 8,

          center: {lat: -34.397, lng: 150.644}

        });

        var geocoder = new google.maps.Geocoder();

                 geocodeAddress(geocoder, map);

             }

//Rest of the code goes for selecting the place and placing the marker


After building the HTML File in a variable update the content of the HTML Viewer.

Attach the script to the Script Button.

QR CODE:


Fetch the sold to party stored in the hidden <p> tag.


var stp = window.document.getElementById(“wnd[0]/usr/htmlViewerPersonas_1460964388149”).contentDocument.getElementById(‘test’).innerHTML;


Use the same RFC above to get the value of the City.

Build the URL for the google map as below

var url = “https://www.google.co.in/maps/dir/“+”end_users_location”+”/”+city+”/data=!4m2!4m1!3e4”;

Update the content of a hidden HTML Viewer to by calling a QR Generator API with URL specified.

ID_OF_Hidden_HTML_Viewer.url=”https://api.qrserver.com/v1/create-qr-code/?size=300×300&data=“+url;

Now show the hidden HTML Viewer and a script button behind to close(Hide) the QRCode.

Details.JPG


And that’s all Everything is set now.


You can now view the place in Maps and also scan qr code to open the Directions in your Smartphone or Tablet.


Waiting for SP03 to be installed to explore more and also for making Personas run on Mobile and Tablets.


My next blog will be on Highest Area of sales area to the lowest on the Google Map with the function to chat directly from the flavor and use Google Analytics on Flavor to view how many Active users are present and what events get triggered and rendering time of the flavor and much more features.


Maps Area.JPG

Preview of Google Analytics


google analytics.JPG


My next blog: Chat, Maps & Google Analytics on Personas 3.0



To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply