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.
On selecting a row and Clicking the button "Show on Maps".
On selecting a row and Clicking the button "Take me there!!"
Three things has to be done to bring this
- Creating Remote Function Call in ECC using ABAP
- Creating Flavor with Custom Table
- 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=300x300&data="+url;
Now show the hidden HTML Viewer and a script button behind to close(Hide) the QRCode.
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.
Preview of Google Analytics
My next blog: Chat, Maps & Google Analytics on Personas 3.0
4 Comments
