Demo Tour Logistics

This sample application demonstrates the integration of a Tourplanning Webservice for routes on a GeoMap. At the beginning you will see a simplified logistic situation with stores and production sites. A click on the stores shows the local inventory situation in a Microchart, the “Plan Route” button resolves the shortage situation in the Berlin store. Actually it makes a Webservice call to routing service and shows the planned route on the GeoMap.

Load the data and Initialize the Model

Controller code

onInit: function() {			         
    this.oVBI = null;
    var oController = this;
    var oModel = new sap.ui.model.json.JSONModel();
    var data = $.getJSON("media/Tour.json", function(data){
		oModel.setData(data);
		oController.oData = data;
	});
    this.getView().setModel(oModel);
    this.oVBI = this.getView().byId(this.createId("VBITour"));
    var oModelCharts = new sap.ui.model.json.JSONModel();
    sap.ui.getCore().setModel(oModel);
},

In function onInit we create a JSONModel, and initialize the JSONModel with the data from the Logistic Tour Sample. The model will serve as data container for our Logistic Tour Sample.

Our logistic Model has a Production Site in the middle and four stores which get their deliveries from the Production Site.

Add GeoMap control to view

XML View code

<vbm:GeoMap id="VBITour" width="100%" 
               height="100%" 
               centerPosition='8.6948125;49.4042720;0' 
               zoomlevel="6" />			 
               ....		    
   <vbm:vos>
     <vbm:Spots id="spots" items="{/Spots}">
        <vbm:items>
          <vbm:Spot 
                  key="{key}"
                  icon="{icon}"
                  position="{position}" 
                  tooltip="{tooltip}" 
                  ......
                  image="{image}"
                  scale="{scale}"
                  click= "onClickSpot">
          </vbm:Spot>			
       </vbm:items>
    </vbm:Spots>
    <vbm:Routes id="routes" items="{/Routes}">
       <vbm:items>
          <vbm:Route
                  key="{key}"
                  position="{poslist}" 
                  tooltip= "{tooltip}"
                  color= "{color}"
                  colorBorder="{colorBorder}"
                  ......
                  start="{start}"
                  end="{end}"
                  hotDeltaColor="RHLSA(0;0;1;1)" />
     </vbm:items>
   </vbm:Routes>		
 </vbm:vos>
</vbm:GeoMap>

Next we define a GeoMap control on the XML-view with some settings for size and a initial section of the map to show. We define a Spots aggregation as child of the VOs aggregation. We initialize the attribute items in of the Spots aggregation we via template binding to an array of spots in the model. The attributes of the template object are bound to model attributes. Besides bound attributes, the template can also have attributes with static values, such as contenSize, which will than be equal for all instances in the aggregation. We proceed the same way for the aggregation of routes.

In total this will initialize the Logistic Model mentioned above with the VOs representing the various components.

Open Detailwindow for "onClickSpot" event

Controller code

		
onClickSpot : function(evt) {
   var sLabelText = evt.getSource().getLabelText();
   if ( sLabelText == "Heidelberg" ){
        this.DetailWindowGen(evt, 0 )
       }
   else if ( sLabelText == "Zürich" ){
        this.DetailWindowGen(evt, 2 )
       }
   else if ( sLabelText == "Wien" ){
        this.DetailWindowGen(evt, 1 )
 	  }
   else if ( sLabelText == "Paris" ){
        this.DetailWindowGen(evt, 3 )
       }
   else {
         //  Berlin Store
        this.DetailWindowGen(evt, 4 )
	  }		
},

With the click event on a Spot we receive the properties of the clicked Spot as parameter. We use this information to open a Detailwindow with a Microchart at the corresponding Spot. The microchart shows the utilization/inventory situation of the site.

There is also a "Plan Route" button at the bottom of the Detailwindow, raising a "Press" event.

Event handler for "Press Event"

Controller code

new sap.ui.layout.HorizontalLayout({
    content : {
     path : "/Chart/Buttons",
     template : new sap.m.Button({
        text :  '{text}',
        press :  function() { oController.onPlanRoute( oSpot )} 
	    })
      }
    })
......
onPlanRoute : function( oSpot  ) {
   if ( oSpot.getProperty("labelText") == "Berlin"){
	   this.PlanBerlinRoute( oSpot );
		   }
	 }

From the event press we receive the origin Spot with all its parameters. These are routed to the onPlanRoute event handler.

For the Berlin site (which shows shortage of inventory) this call is routed to the function calculateRoute which is a wrapper of a Webservice for routeplanning.

Call Routing Webservice

Controller code

calculateRoute : function(oRouteStart, oRouteEnd, 
                          sTypeOfTransport, sRoutingMethod, 
                          sColor, oModel, oPin ){
                           
                            ......
// Call Routing Webservice, 
// receive the results data in a string sRoute   
                            ......
    oModel.oData.Routes[0].poslist = sRoute;
    var oRoute = oModel.oData.Routes[0];
    oRoute.poslist = sRoute;
    oRoute.linewidth = "5";
    oRoute.color = "RGB(97,166,86)";
    oRoute.colorBorder = "RGBA(255,255,255,255)";
    oRoute.tooltip = sTooltip; 
    oModel.setData(oData);	                          
 };

The calculateRoute function takes a bunch of parameters for the Webservice, most important the Start- and Endpoint of the route. It returns with routing string sRoute, containing the concatenated waypoints. The result is is written back to the model, replacing the former unplanned route. Thereafter a re-render is triggered. Also the inventory situation is updated.