Skip to Content
Author's profile photo Fabian Lehmann

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
Project Name: scp_iot_ae_route
Namespace: route
Title: scp_iot_ae_route

 

Data Source
Service: IOTAS_ADVANCEDLIST-THING-ODATA
Property Sets: <your iot ae id>..syc.sap.blogs.notebooks.CPU

 

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

 

 

 

 

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hayato Okamoto
      Hayato Okamoto

      Thanks, Fabian, this is beneficial information to me.
      I am also interested in displaying a route which data comes from Application Enablement because the location data usually comes from sensors automatically, so I would like to connect the sensor data with the IoT application.
      Is it possible to change data sources to Application Enablement?

      Author's profile photo Robin Franzke
      Robin Franzke

      Also interested in the answer!