Step 1: Configure externalized data in decision support definition
In order to display device event payload data to a custom SAPUI5 view, the person configuring the decision support action must explicitly expose the data by defining externalized data configuration in decision support definition.
-
From SAP IoT launchpad, launch the Decision Support Definition application.
-
Select High Greenhouse Temperature
from the list of decision support definitions.
-
In the Definition page, create a new entry for Externalized Data.
-
Enter a value for the field Alias. In this example, we’ll enter the value DEVICE
. This value will be used in the controller of the custom SAPUI5 view.
-
Enter the binding path for this alias. This path should be defined according to the JSON structure of the payload defined in the decision support action.
Here is the payload that we have defined in the decision support action in step 3 of Model the needed Decision Support based on IoT data.
The value of the field Data Binding should have the format:
{ Path of exposed data in JSON payload }
In this example, we would like to expose the data under properties.device
, we enter the value {properties.device}
in the field.
-
Select the field User Interface Relevant.
-
Click Save.
Step 2: Add view extension to application descriptor
-
Open the project with decision support application in SAP Web IDE.
-
Open the manifest.json
in the Code Editor.
-
Update the value of JSON key sap.ui5.extends.extensions.sap.ui.viewExtensions.sap.suite.ui.generic.template.ObjectPage.view.Details
as follows:
"BeforeSubSection|RSInsts|ColumnFacet": {
"className": "sap.ui.core.mvc.View",
"viewName": "<HTML5 Module Name>.ext.view.EventInfo",
"viewData": {
"settings": {
"modelName": "sharedJSON"
}
},
"type": "XML",
"sap.ui.generic.app": {
"title": "",
"enableLazyLoading": true
}
}
-
Replace <HTML5 Module Name>
with the name of the decision support HTML5 module. You can find this name from the sap.app.id
property in the same manifest.json. In this example, it’s greenhousedecisionsupport
.
After replacing <HTML5 Module Name>
:
-
Save the changes.
Step 3: Add files for custom view
-
Under the webapp
folder add an ext
folder.

-
Inside ext
folder, add 2 additional folders controller
and view
.
-
Inside the controller
folder, add a new file named EventInfo.controller.js
.

-
Copy the following content into the file:
(function () {
"use strict";
/*global sap, jQuery */
sap.ui.controller("<HTML5 Module Name>.ext.controller.EventInfo", {
onBeforeRendering:function() {
var settings = this.getView().getViewData().settings;
if (!this._initModel && settings) {
this._initModel = true;
var sharedModel = this.getView().getModel(settings.modelName);
this.getView().setModel(sharedModel);
this.getView().bindElement("/extData/<EXTERNALIZED_DATA_ALIAS>");
}
}
});
})();
-
Replace <HTML5 Module Name>
with sap.app.id in manifest.json. It’s the same name used in Step 2.
-
Replace <EXTERNALIZED_DATA_ALIAS>
with the alias defined in Step 1 of this tutorial.
-
Save the file.
-
Inside the view
folder, add a new file named EventInfo.view.xml
with the following content:
<mvc:View controllerName="<HTML5 Module Name>.ext.controller.EventInfo"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<f:SimpleForm editable="false" layout="ColumnLayout" title="" columnsM="2" columnsL="3" columnsXL="4">
<f:content>
<core:Title text="{@i18n>deviceInformation}" />
<Label text="{@i18n>Exception}" />
<Text text="{exception}" />
<Label text="{@i18n>ServicePriorityCode}" />
<Text text="{ServicePriorityCode}" />
<Label text="{@i18n>ProcessingTypeCode}" />
<Text text="{ProcessingTypeCode}" />
<Label text="{@i18n>Customer}" />
<Text text="{CustomerID}" />
<core:Title text="{@i18n>additionalInfo}" />
<Label text="{@i18n>InstallationPointId}" />
<Text text="{InstallationPointID}" />
<Label text="{@i18n>DataOriginTypeCode}" />
<Text text="{DataOriginTypeCode}" />
</f:content>
</f:SimpleForm>
</mvc:View>
-
Replace <HTML5 Module Name>
with sap.app.id defined in manifest.json
.
-
Save the file.
For additional information on SAPUI5 model view controller programming model, see Model View Controller.
Step 4: Add translation texts
-
Add the following content in the i18n.properties
file in the webapp/i18n
folder:
#XFLD
deviceInformation=Device Information
#XFLD
Exception=Exception Code
#XFLD
ServicePriorityCode=Service Priority
#XFLD
ProcessingTypeCode=Processing Type
#XFLD
Customer=Customer Id
#XFLD
additionalInfo=Additional Information
#XFLD
InstallationPointId=Installation Point
#XFLD
DataOriginTypeCode=Data Origin Type
-
Save the file.
Step 5: Test custom SAPUI5 view
Please follow in instructions in Build, Deploy and test Notification and Decision Support application.
A new Notification has to be generated in order for the new Externalized Data definition to take effect. If you open a notification that was generated before the Externalized Data definition was defined, the fields in the custom view will not display any values.
Decision support application with a custom SAPUI5 view displaying data from the device event payload.
Step 6: Add custom image to page header
-
Import an image to webapp/asset
folder of the decision support application in SAP Web IDE.
-
Select the image from your system. Click OK.
-
Open the file annotations.xml
in webapp
folder.
-
Add the following annotation in the section HeaderInfoType
.
<PropertyValue Property="ImageUrl" String="asset/your image name"/>
-
Save the file.
-
To test the changes, please follow the instructions in Build, Deploy and test Notification and Decision Support application.
Step 7: Add navigation to action history details (optional)
You can provide a link as part of the action history entry that allows a user to navigate to a page which has additional information about the result of the executed option. To enter a link for action history:
-
From SAP IoT launchpad, select the Decision Support Definition tile.
-
Select a decision support configuration.
-
Select an existing option under Possible Actions section.
-
In the details page of the selected option, click Edit on the header toolbar.
-
Enter a link in the field Action History Intent or URL.
-
The link can be an URL (starts with http or https) or a SAP Fiori intent (e.g. MySalesOrder-display)
-
The link can include values returned in the response of the executed option using the notation {result.somefield}. Please consult the documentation of each service for the field names in the response.
For example, ObjectID
is a name of one of the fields returned in the response from the executed option and its value is bound to the parameter internalID
of the link to a service ticket: https://mytenant.crm.ondemand.com/sap/ap/ui/clogin?internalID=
{result.ObjectID} &type=COD_SRQ_AGENT_TT
.
-
The string can also include values from event payload as in the other fields in decision support configuration. Please see step 3 of Model the Needed Decision Support Based on IoT Data for more information on the definition of the event payload.
For example:
https://mytenant.crm.ondemand.com/sap/ap/ui/clogin?internalID=
{properties.device.CustomerID} &type=COD_SRQ_AGENT_TT
.
-
Click Save
-
A link View Object will be displayed on the action history entry for the configured option.