How to display a route in a SAP Cloud Platform Application Enablement IoT Application

Introducing

In this short blog i want to cover how we can display a route in SAP Application Enablement.

Please check also the other blogs in this litte series:

Creating the Application in SAP Web IDE Full Stack

In contrast to the this blog we start now to create an Freestyle IoT Application by selecting the  corresponding template:

 

Basic Information of our Application

Data Source

Page Layout

 

Now we´re ready an can complete the wizard.

As result we can now see our newly created empty application which (opened in layout editor):

 

To display our route wen need first an “Map Control”, for this open the “IoT” controls and drag and drop the “Map” element to the view:

If we now run our app we can only see an empty map, so it´s time to enhace our application.

 

Some adjustements

We need now to add a new function to our “model.js”:

getTripsModel: function()

In this function we implement the details about our route, e.g. the coordinates from our route.

I´am choosing here the route from my employer to SAP WDF 21 ,o)

model.js:

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device"
], function(JSONModel, Device) {
	"use strict";

	return {

		createDeviceModel: function() {
			var oModel = new JSONModel(Device);
			oModel.setDefaultBindingMode("OneWay");
			return oModel;
		},
		getTripsModel: function() {
			var oModel = new JSONModel();
			var oData = [{
				type: "by Car",
				tooltip: "Göttingen to SAP WDF 21",
				color: "rgb(139, 243, 87)",
				startIcon: "sap-icon://shipping-status",
				endIcon: "sap-icon://car-rental",
				startMarkerAlignment: "5",
				endMarkerAlignment: "1",
				position: [{
						lng: "9.928290000000061",
						lat: "51.53708"
					}, {
						lng: "9.929671883583069",
						lat: "51.53778065648096"
					}, 
                                          

                                                  .....some more coordinates......



                                        {
						lng: "8.636890053749084",
						lat: "49.2953241210286"
					}
				]
			}
	};

});

 

Now adapt the “IoTMap” control in the view.

Main.view.xml:

 <iot:IoTMap centerPosition="8.8;50.09;0.0" id="__tmap0" routes="{routesModel>/routes}" enableClustering="false" zoomlevel="6">
  <iot:routes>
    <iotele:IoTMapRouteElement showMarkers="true" startMarkerImage="{routesModel>startMarkerImage}" 
     endMarkerImage="{routesModel>endMarkerImage}" startMarkerAlignment="
     {routesModel>startMarkerAlignment}" endMarkerAlignment="{routesModel>endMarkerAlignment}" 
     showDots="true" showDirection="true" tooltip="{routesModel>tooltip}" position="
     {path:'routesModel>position',templateShareable:'false'}" routeColor="{routesModel>color}">
	<iotele:position>
	   <iotele:IoTMapRoutePositionElement latitude="{routesModel>lat}" longitude="{routesModel>lng}"/>
	</iotele:position>
	   </iotele:IoTMapRouteElement>
   </iot:routes> 
</iot:IoTMap>

And finally define in the controller the “onInit” Method.

Main.controller.js:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"route/model/model"
], function(Controller, Model) {
	"use strict";
	return Controller.extend("route.controller.Main", {

		onInit: function() {
			//getting the data from Model.js
			var routesModel = Model.getTripsModel();
			//setting routesModel to the view
			this.getView().setModel(routesModel, "routesModel");
		}

	});
});

 

The complete project canbe found here: https://github.com/fableh/scp_iot_ae_route_example.git

Run the application

If we start our application we can see our route which we´ve defined in our simple iot application:

Add a Thing on your Route

Of course what´s missing at this point is to display out IoT related data

Let´s do it now, just display now our “Thing” at our starting point.

Main.view.xml:

<iot:IoTMap 	things="{path:'/Things',parameters:{expand:' DYN_ENT_iotae_sycor_syc_sap_blogs_notebooks__Image, HierarchyElements, DYN_ENT_iotae_sycor_syc_sap_blogs_notebooks__CPU, DYN_ENT_com_sap_appiot_eventtypes__StandardEventType '}}" centerPosition="8.8;50.09;0.0" id="__tmap0" routes="{routesModel>/routes}" enableClustering="false" zoomlevel="6">
						<iot:things>
									<iotele:IoTMapElement latitude="{Latitude}" longitude="{Longitude}" thingid="{ThingId}">
										<iotele:status>
											<iotele:IoTStatusElement id="__element0" highSeverity="{DYN_ENT_com_sap_appiot_eventtypes__StandardEventType/High}"
												lowSeverity="{DYN_ENT_com_sap_appiot_eventtypes__StandardEventType/Low}"
												mediumSeverity="{DYN_ENT_com_sap_appiot_eventtypes__StandardEventType/Medium}"/>
										</iotele:status>
										<iotele:thingcard>
											<iotele:IoTThingCardElement thingCardImage="{ThingId}" MultiThingCardHeaderPosition1="{ThingName}"
												MultiThingCardHeaderPosition2="{ThingExternalId}" SingleThingCardContactInfo1="{BusinessPartnerName}"
												SingleThingCardContactInfo2="{BPMobilePhoneNumber}" SingleThingCardContactInfo3="{BPLandlinePhoneNumber}"
												SingleThingCardContactsVisible="true" SingleThingCardEventsVisible="true" SingleThingCardHeaderPosition1="{ThingName}"
												SingleThingCardHeaderPosition2="{BusinessPartnerName}" SingleThingCardHeaderPosition3="{ThingId}" SingleThingCardSecondSectionTitle="Events"
												SingleThingCardFooterVisible="true" MultiThingCardFooterVisible="true" SingleThingCardThirdSectionTitle="Contact Info"
												singleThingCardFooterText="Analysis Page" multiThingCardFooterText="Thing List" singleThingCardTitle="Thing Detail"
												multiThingCardTitle="Thing Overview" multiThingCardRowSelect="oMultiRowSelect" multiThingCardFooterSelect="oMultiFooterSelect"
												singleThingCardHeaderSelect="oSingleHeaderSelect" singleThingCardFooterSelect="oSingleFooterSelect"/>
										</iotele:thingcard>
									</iotele:IoTMapElement>
								</iot:things>
						<iot:routes>
							<iotele:IoTMapRouteElement showMarkers="true" startMarkerImage="{routesModel>startMarkerImage}" endMarkerImage="{routesModel>endMarkerImage}" startMarkerAlignment="{routesModel>startMarkerAlignment}" endMarkerAlignment="{routesModel>endMarkerAlignment}" showDots="true" showDirection="true" tooltip="{routesModel>tooltip}" position="{path:'routesModel>position',templateShareable:'false'}" routeColor="{routesModel>color}">
								<iotele:position>
									<iotele:IoTMapRoutePositionElement latitude="{routesModel>lat}" longitude="{routesModel>lng}"/>
								</iotele:position>
							</iotele:IoTMapRouteElement>
						</iot:routes> 
					</iot:IoTMap>

Lets see what happening now on our application…….yeeeees we got our Thing  at the map as expected:

 

 

Conclusion

In this blog we´ve build a tiny “IoT Freestyle Application” on top of SAP Cloud Platform IoT Application Enablement. I think this work´s as aspected and it´s a really nice approach how we can visualize e.g. a fleet or vehicle data.

 

Helpful links

Example app of this blog

SAP Cloud Platform IoT Application Enablement

SAP CP IoT AE Reuse Controls and Templates – Developer Guide

SAP CP IoT AE Reuse Controls and Templates – Developer Guide – Code Sample

SAP IoT Application Enablement Reuse Controls and Templates

 

cheers,

fabian