Extend Decision Support Application with Custom SAPUI5 View

1. Open the project with decision support application in SAP Web IDE.

2. Open the manifest.json in the 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.

   

   After replacing <HTML5 Module Name>:

   

5. Save the changes.

1. Under the webapp folder add an ext 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.

   

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() {
   			if (!this._initModel) {
   				this._initModel = true;
   				var sharedModel = this.getView().getModel("sharedJSON");
   				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.

   

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.

    

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

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.

   

1. Import an image to webapp/asset folder of the decision support application in SAP Web IDE.

   

2. Select the image from your system. Click OK.

   

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"/>
   

   

5. Save the file.

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