Skip to Content

Extend Decision Support Application with Custom SAPUI5 View

test
0 %
Extend Decision Support Application with Custom SAPUI5 View
Details

Extend Decision Support Application with Custom SAPUI5 View

June 23, 2020
Created by
October 15, 2019
Extend the SAP IoT Decision Support application using SAP Web IDE by adding a custom SAPUI5 view to display device event payload data.

You will learn

  • How to extend a decision support application with custom SAPUI5 view
  • How to expose device event payload data in decision support application


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.

  1. From SAP IoT launchpad, launch the Decision Support Definition application.

    Select Decision Support from SAP Fiori launchpad
  2. Select High Greenhouse Temperature from the list of decision support definitions.

  3. In the Definition page, create a new entry for Externalized Data.

    Create new externalized data
  4. 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.

  5. 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.

    Display of a sample payload

    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.

    Enter configuration for externalized data
  6. Select the field User Interface Relevant.

  7. Click Save.

Log on to answer question
Step 2: Add view extension to application descriptor
  1. Open the project with decision support application in SAP Web IDE.

  2. Open the manifest.json in the Code Editor.

    Open manifest.json in code editor
  3. 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
      }
    }
    
  4. 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.

    Highlight of application id

    After replacing <HTML5 Module Name>:

    Add view extension configuration
  5. Save the changes.

Log on to answer question
Step 3: Add files for custom view
  1. Under the webapp folder add an ext folder.

    Add new folder in projectEnter name for new folder
  2. Inside ext folder, add 2 additional folders controller and view.

  3. Inside the controller folder, add a new file named EventInfo.controller.js.

    Add new file to projectEnter name for new file
  4. 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>");
    			}
    		}
    	});
    })();    
    
  5. Replace <HTML5 Module Name> with sap.app.id in manifest.json. It’s the same name used in Step 2.

  6. Replace <EXTERNALIZED_DATA_ALIAS> with the alias defined in Step 1 of this tutorial.

  7. Save the file.

    Updated controller file
  8. 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>    
    
  9. Replace <HTML5 Module Name> with sap.app.id defined in manifest.json.

  10. Save the file.

    Update view xml file

For additional information on SAPUI5 model view controller programming model, see Model View Controller.

Log on to answer question
Step 4: Add translation texts
  1. 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  
    
  2. Save the file.

    Updated translation file
Log on to answer question
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.

Decision Support runtime with view extension
Changes made in Decision Support Externalized Data definitions are automatically available to Fiori notifications that were generated before these changes were made.
×
Step 6: Add custom image to page header
  1. Import an image to webapp/asset folder of the decision support application in SAP Web IDE.

    Import a new image file to project
  2. Select the image from your system. Click OK.

    Select the image file from local file system
  3. Open the file annotations.xml in webapp folder.

  4. Add the following annotation in the section HeaderInfoType.

    <PropertyValue Property="ImageUrl" String="asset/your image name"/>
    
    Update annotation
  5. Save the file.

  6. To test the changes, please follow the instructions in Build, Deploy and test Notification and Decision Support application.

    Decision Support runtime with header image
Log on to answer question
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:

  1. From SAP IoT launchpad, select the Decision Support Definition tile.

    Select Decision Support in SAP Fiori launchpad
  2. Select a decision support configuration.

  3. Select an existing option under Possible Actions section.

  4. In the details page of the selected option, click Edit on the header toolbar.

  5. Enter a link in the field Action History Intent or URL.

    Configuration of action history
    • 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.

  6. Click Save

  7. A link View Object will be displayed on the action history entry for the configured option.

    Display of View Object link in action history
Log on to answer question

Next Steps

Back to top