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
- SAP Managed Tags:
2 Comments
