Skip to Content
Technical Articles

Building connected UI5 apps using Fiori Elements

It is a common requirement to enable app to app navigation and intra-app navigation when building a suite of UI5 apps. Anybody who has experience with traditional UI5 apps (free style apps before the Fiori elements era) will acknowledge that it is a bit challenging to implement and a variety of approaches can be used to achieve this. Things are streamlined a lot in apps using Fiori elements and usage of navigation controller(provided as part of extension API). In this blog I will share my experience building apps that talk to each other.

The first app for this demo is a bit more complicated than the apps I used in previous blogs. The List report has multiple entities (this feature is available Fiori version 1.60 and above for on premise customers) shown in separate tabs and each tab navigates to a different object page( See UI5 SDK link for more details). The second app used here is a simple list report (to demo app to app navigation).

 

There can be three usecases –

1. Internal navigation – This is the case of navigation within the views of the same application, from one object page to another. To implement this, we must build a binding context for the target view by passing key valuesand use the NavigationController’s navigateInternal method.

 

2. External navigation to a simple application – In this case we can simply navigate with the semantic object and pass it the preferred mode as a parameter. The preferred mode could me create, display(default) or edit. Use the NavigationController’s navigateExternal method using the outbound configured in manifest. In addition to this, for create mode we need to maintain inbound parameters in the target application’s manifest. Check out the onWBSPress method in the objectPageEx.controller.js file and outbound in manifest.

3. External Navigation to a complex application – Complex application can be thought of as the one with multiple entities and object pages. So, by just passing the key values to the target application and outbound, application cannot decide which object page to navigate to.Here we cannot use navigation controller’s navigateExternal method similar to point 2.  (Refer to the block diagram) We want to navigate from WBS Object Page to Order Object Page.

To achieve this a technique called the hash replacement is used. Replace the hash of the current application with the target application’s hash in the URL. Then use the sap.m.URLHelper to navigate to the application.

 

Application Demo –

Putting it all together :

Order CDS –

@AbapCatalog.sqlViewName: 'ZCUSTORD'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Custom Order'

@ObjectModel.createEnabled: true
@ObjectModel.deleteEnabled: true
@ObjectModel.updateEnabled: true

define view zcustom_order
  as select from zcustomorder
  association [* ] to zcustom_notif as _NotifHelp on _NotifHelp.qmnum = zcustomorder.qmnum
                                                   and _NotifHelp.qmart like 'M%'
{

      @UI : {
        lineItem: [{ position: 10 }],
        selectionField: [{ position: 10 }],
        fieldGroup: [{
                  qualifier: 'Header1',
                  position : 10
              },
              {
                  qualifier: 'Overview1',
                  position : 10
              }]
      }      
  key aufnr,
      @UI : {
       lineItem: { position: 20 },
       selectionField: { position: 20 },
       fieldGroup: {
                 qualifier: 'Overview1',
                 position : 20
             }
      }
      ktext,
      @UI : {
      lineItem: [{ position: 30 }],
      selectionField: [{ position: 30 }],
      fieldGroup: {
             qualifier: 'Overview2',
             position : 10
         }
      }
      auart,
      @UI : {
      lineItem: [{ position: 40 }],
      selectionField: [{ position: 40 }],
      fieldGroup: {
             qualifier: 'Overview2',
             position : 20
         }
      }
      @Consumption.filter.defaultValue: '30'
      auftyp,
      @UI : {      
      selectionField: [{ position: 50 }],
      fieldGroup: {
             qualifier: 'Overview3',
             position : 10
         }
      }
      werks,
      @UI : {
      lineItem: [{ position: 60 }],
      selectionField: [{ position: 60 }],
      fieldGroup: {
             qualifier: 'Overview4',
             position : 20
         }
      }
      phas0,
      @UI : {
      lineItem: [{ position: 10 }],
      selectionField: { position: 70 },
      fieldGroup: {
             qualifier: 'Overview4',
             position : 10
         }

      }
      @Consumption.valueHelp: '_NotifHelp'
      qmnum,
      @UI : {
      lineItem: [{ position: 10 }],
      selectionField: { position: 80 },
      fieldGroup: {
             qualifier: 'Overview3',
             position : 20
         }
      }
      @Consumption.filter: {selectionType : #SINGLE, multipleSelections: false}
      @EndUserText.label: 'Order Start Date'
      orderstart,
      
      objecttyp, 
      
      @UI : {
      
      
      fieldGroup: {
             qualifier: 'Overview1',
             position : 30
         }
      }
      
      @EndUserText.label: 'Linked WBS'
      posid,     
      
      _NotifHelp
}

Nofification CDS –

@AbapCatalog.sqlViewName: 'ZCUSTNOTIF'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@OData.publish: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Custom notification'

@ObjectModel.createEnabled: true
@ObjectModel.deleteEnabled: true
@ObjectModel.updateEnabled: true

define view zcustom_notif
  as select from zcustomnotif
{
@UI : {
    lineItem: [{position: 10 }],
    selectionField: [{position: 10}],
    fieldGroup: [{position: 10,
    qualifier: 'Overview1' },{position: 10, qualifier: 'Header1'}]
}
  key qmnum,
  @UI : {fieldGroup: [{position: 10,
  
    qualifier: 'Overview2' }],
    selectionField: [{position: 20}],
    lineItem: [{position: 20 }]}
  qmtxt,
  @UI : {fieldGroup: [{position: 10,
    qualifier: 'Overview3' }],
    selectionField: [{position: 30}],
    lineItem: [{position: 30 }]}
  qmdat,
  @UI : {fieldGroup: [{position: 10,
    qualifier: 'Overview4' }],
    selectionField: [{position: 40}],
    lineItem: [{position: 40 }]}
  aufnr,
  @UI : {fieldGroup: [{position: 20,
    qualifier: 'Overview1' }],
    selectionField: [{position: 50}],
    lineItem: [{position: 50 }]}
  qmart, 
  
  objecttyp

}

WBS CDS –

@AbapCatalog.sqlViewName: 'ZCUSTWBS'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Custom WBS'
@OData.publish: true
define view ZCUSTOM_WBS as select from zcustomwbs {
@UI : {
        lineItem: [{ position: 10 }],
        selectionField: [{ position: 10 }],
        fieldGroup: [{
                  qualifier: 'Header1',
                  position : 10
              },
              {
                  qualifier: 'Overview1',
                  position : 10
              }]
      }      
    key posid,
    @UI : {
        lineItem: [{ position: 20 }],
        selectionField: [{ position: 20 }],
        fieldGroup: [
              {
                  qualifier: 'Overview1',
                  position : 20
              }]
      }      
    aufnr,
    @UI : {
        lineItem: [{ position: 30 }],
        selectionField: [{ position: 30 }],
        fieldGroup: [
              {
                  qualifier: 'Overview2',
                  position : 10
              }]
      }      
    pspid,
    @UI : {
        lineItem: [{ position: 40 }],
        selectionField: [{ position: 40 }],
        fieldGroup: [
              {
                  qualifier: 'Overview2',
                  position : 20
              }]
      }      
    pkokr,
    @UI : {
        lineItem: [{ position: 50 }],        
        fieldGroup: [
              {
                  qualifier: 'Overview3',
                  position : 10
              }]
      }      
    pbukr,
    @UI : {
        
        selectionField: [{ position: 60 }],
        fieldGroup: [
              {
                  qualifier: 'Overview3',
                  position : 20
              }]
      }      
    werks,
    objecttyp,
    @UI : {        
        
        fieldGroup: [
              {
                  qualifier: 'Overview4',
                  position : 10
              }]
      }      
    prctr
}

Order Notification UI5 App source code –

ObjectPageEx.controller.js

sap.ui.controller("zcustomorder.ext.controller.ObjectPageExt", {
	onInit: function () {
		that = this;
		//Automatic value help for Object Page smart field
		var fld = this.oView.byId("zcustomorder::sap.suite.ui.generic.template.ObjectPage.view.Details::zcustom_order--RF1::qmnum::Field");
		if (fld) {
			var oConfig = fld.getConfiguration();
			if (!oConfig) {
				oConfig = new sap.ui.comp.smartfield.Configuration();
			}
			oConfig.setPreventInitialDataFetchInValueHelpDialog(false);
			oConfig.setDisplayBehaviour(sap.ui.comp.smartfield.DisplayBehaviour.descriptionAndId);
			fld.setConfiguration(oConfig);
		}
		
		//Convert Smart field into URL
		var notifFld = this.getView().byId(
			"zcustomorder::sap.suite.ui.generic.template.ObjectPage.view.Details::zcustom_order--RF1::qmnum::Field"
		);
		if (notifFld) {
			notifFld.attachPress(this.onNotifPress);
		}
		
		var wbsFld = this.getView().byId(
			"zcustomorder::sap.suite.ui.generic.template.ObjectPage.view.Details::zcustom_order--RF2::posid::Field"
		);
		if (wbsFld) {
			wbsFld.attachPress(this.onWBSPress);
		}
	
	},
	
	onWBSPress : function(){
		var sPath = that.getView().getBindingContext().getPath();
		var wbs = that.getView().getModel().getProperty(sPath + "/posid");
		var oNavControl = that.extensionAPI.getNavigationController();
		oNavControl.navigateExternal("WBS", {
			posid: wbs
		});
	},
	
	onNotifPress : function(){
		var sPath = that.getView().getBindingContext().getPath();
		var notifNo = that.getView().getModel().getProperty(sPath + "/qmnum");
		var oModel = that.getOwnerComponent().getModel();
		// Create a target Path
		var targetPath = "/" + oModel.createKey("zcustom_notif", {
			qmnum: notifNo
		});
		// Create binding context and navigate in function callback
		oModel.createBindingContext( targetPath , that.navigateInt, true );
	},
	
	//Callback function 
	navigateInt : function(oContext){
		var oNavControl = that.extensionAPI.getNavigationController();
		oNavControl.navigateInternal(oContext);
	},

	onCreateNotification: function (oEvent) {
		var oNavControl = this.extensionAPI.getNavigationController();
		var oModel = this.getOwnerComponent().getModel();
		var sPath = oEvent.getSource().getBindingContext().getPath();
		var notNo = oModel.getProperty(sPath + "/qmnum");
		var ordNo = oModel.getProperty(sPath + "/aufnr");
		var ordStart = oModel.getProperty(sPath + "/orderstart");
		oNavControl.navigateExternal("Notification", {
			qmnum: notNo,
			aufnr: ordNo,
			qmdat: ordStart,
			preferredMode: "create"
		});

	}
});

manifest.json –

{
	"_version": "1.8.0",
	"sap.app": {
		"id": "zcustomorder",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"tags": {
			"keywords": []
		},
		"dataSources": {
			"ZCUSTOMORDER_SRV": {
				"uri": "/sap/opu/odata/sap/ZCUSTOMORDER_SRV/",
				"type": "OData",
				"settings": {
					"localUri": "localService/ZCUSTOMORDER_SRV/metadata.xml",
					"annotations": [
						"localAnnotations",
						"ZCUSTOMORDER_ANNO_MDL"
					]
				}
			},
			"localAnnotations": {
				"uri": "annotations/annotations.xml",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "annotations/annotations.xml"
				}
			},
			"ZCUSTOMORDER_ANNO_MDL": {
				"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZCUSTOMORDER_ANNO_MDL',Version='0001')/$value/",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": ""
				}
			}
		},
		"offline": false,
		"sourceTemplate": {
			"id": "servicecatalog.connectivityComponentForManifest",
			"version": "0.0.0"
		},
		"crossNavigation": {
			"inbounds": {
				"intent1": {
					"signature": {
						"parameters": {},
						"additionalParameters": "allowed"
					},
					"semanticObject": "zcustord",
					"action": "manage"
				}
			},
			"outbounds": {
				"WBS": {
					"semanticObject": "zcustwbs",
					"action": "manage"
				},
				"Notification": {
					"semanticObject": "zcustnot",
					"action": "manage"
				}
			}
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"
		]
	},
	"sap.ui5": {
		"resources": {
			"js": [],
			"css": []
		},
		"dependencies": {
			"minUI5Version": "1.38.34",
			"libs": {},
			"components": {}
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ListReport|zcustom_order": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ListReport/zcustom_order/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ObjectPage|zcustom_order": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ObjectPage/zcustom_order/i18n.properties"
			},
			"": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneWay",
					"defaultCountMode": "Request"
				},
				"dataSource": "ZCUSTOMORDER_SRV",
				"preload": true
			}
		},
		"extends": {
			"extensions": {
				"sap.ui.controllerExtensions": {
					"sap.suite.ui.generic.template.ObjectPage.view.Details": {
						"controllerName": "zcustomorder.ext.controller.ObjectPageExt",
						"sap.ui.generic.app": {
							"zcustom_order": {
								"EntitySet": "zcustom_order",
								"Header": {
									"Actions": {
										"Notification": {
											"id": "Notification",
											"text": "{@i18n>CREATE}",
											"press": "onCreateNotification"
										}
									}
								}
							}
						}
					},
					"sap.suite.ui.generic.template.ListReport.view.ListReport": {
						"controllerName": "zcustomorder.ext.controller.ListReportExt",
						"sap.ui.generic.app": {
							"zcustom_order": {
								"EntitySet": "zcustom_order",
								"Actions": {}
							}
						}
					}
				}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": false
		}
	},
	"sap.ui.generic.app": {
		"_version": "1.3.0",
		"settings": {
			"forceGlobalRefresh": false
		},
		"pages": {
			"ListReport|zcustom_filter": {
				"entitySet": "zcustom_filter",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"smartVariantManagement": true,
						"quickVariantSelectionX": {
							"showCounts": false,
							"enableAutoBinding": false,
							"variants": {
								"0": {
									"key": "t0",
									"entitySet": "zcustom_order",
									"annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Order"
								},
								"1": {
									"key": "t1",
									"entitySet": "zcustom_notif",
									"annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Notif"
								},
								"2": {
									"key": "t2",
									"entitySet": "zcustom_order_chart",
									"annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#Chart"
								}
							}
						}
					}
				},
				"pages": {
					"ObjectPage|zcustom_order": {
						"entitySet": "zcustom_order",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					},
					"ObjectPage|zcustom_notif": {
						"entitySet": "zcustom_notif",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					}
				}
			}
		}
	},
	"sap.platform.hcp": {
		"uri": ""
	}
}

local annotation file –

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="/sap/bc/ui5_ui5/ui2/ushell/resources/sap/ushell/components/factsheet/vocabularies/UI.xml">
		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="/sap/opu/odata/sap/ZCUSTOM_ORDER_CDS/$metadata">
		<edmx:Include Alias="ZCUSTOMORDER_SRV" Namespace="ZCUSTOMORDER_SRV"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Capabilities.V1.xml">
		<edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
	</edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="zcustomorder.ZCUSTOMORDER_SRV">
			<!--===============================================================================
                Entity Type from chosen collection 
                ================================================================================-->
			<Annotations Target="ZCUSTOMORDER_SRV.zcustom_orderType">
				<Annotation Term="UI.HeaderInfo">
					<Record Type="UI.HeaderInfoType">
						<PropertyValue Property="TypeName" String="{@i18n&gt;ORDER}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;ORDERS}"/>
						<PropertyValue Property="Title">
							<Record Type="UI.DataField">
								<PropertyValue Property="Value" Path="objecttyp"/>
							</Record>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="UI.SelectionVariant" Qualifier="Order">
					<Record Type="UI.SelectionVariantType">
						<PropertyValue Property="ID" String="SEL01"/>
						<PropertyValue Property="Text" String="{@i18n&gt;ORDER}"/>
					</Record>
				</Annotation>
				<Annotation Term="UI.HeaderFacets">
					<Collection>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Header1"/>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.Facets">
					<Collection>
						<Record Type="UI.CollectionFacet">
							<PropertyValue Property="ID" String="GeneralInformation"/>
							<PropertyValue Property="Label" String="{@i18n&gt;OVERVIEW}"/>
							<PropertyValue Property="Facets">
								<Collection>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview1"/>
										<PropertyValue Property="ID" String="RF2"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview2"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview3"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview4"/>
										<PropertyValue Property="ID" String="RF1"/>
									</Record>
								</Collection>
							</PropertyValue>
						</Record>
					</Collection>
				</Annotation>
			</Annotations>
			<Annotations Target="ZCUSTOMORDER_SRV.ZCUSTOMORDER_SRV_Entities/zcustom_order">
				<Annotation Term="Capabilities.UpdateRestrictions">
					<Record Type="Capabilities.UpdateRestrictionsType">
						<PropertyValue Property="Updatable" Path="phas0"/>
					</Record>
				</Annotation>
				<Annotation Term="Capabilities.DeleteRestrictions">
					<Record Type="Capabilities.DeleteRestrictionsType">
						<PropertyValue Property="Deletable" Path="phas0"/>
					</Record>
				</Annotation>
			</Annotations>
			<Annotations Target="ZCUSTOMORDER_SRV.zcustom_order_chartType">
				<Annotation Term="UI.PresentationVariant" Qualifier="Chart">
					<Record Type="UI.PresentationVariantType">
						<PropertyValue Property="Visualizations">
							<Collection>
								<AnnotationPath>@UI.Chart#Chart1</AnnotationPath>
							</Collection>
						</PropertyValue>
						<PropertyValue Property="ID" String="CH1"/>
						<PropertyValue Property="Text" String="{@i18n&gt;CHART}"/>
					</Record>
				</Annotation>
			</Annotations>
			<Annotations Target="ZCUSTOMORDER_SRV.zcustom_notifType">
				<Annotation Term="UI.HeaderInfo">
					<Record Type="UI.HeaderInfoType">
						<PropertyValue Property="TypeName" String="{@i18n&gt;NOTIFICATION}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;NOTIFICATIONS}"/>
						<PropertyValue Property="Title">
							<Record Type="UI.DataField">
								<PropertyValue Property="Value" Path="objecttyp"/>
							</Record>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="UI.Facets">
					<Collection>
						<Record Type="UI.CollectionFacet">
							<PropertyValue Property="ID" String="GeneralInformation"/>
							<PropertyValue Property="Label" String="{@i18n&gt;OVERVIEW}"/>
							<PropertyValue Property="Facets">
								<Collection>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview1"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview2"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview3"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview4"/>
									</Record>
								</Collection>
							</PropertyValue>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.HeaderFacets">
					<Collection>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Header1"/>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.SelectionVariant" Qualifier="Notif">
					<Record Type="UI.SelectionVariantType">
						<PropertyValue Property="ID" String="SEL02"/>
						<PropertyValue Property="Text" String="{@i18n&gt;NOTIFICATION}"/>
					</Record>
				</Annotation>
				<Annotation Term="UI.FilterFacets">
					<Collection/>
				</Annotation>
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

WBS UI5 App source code –

ObjectPageEx.controller.js

sap.ui.controller("zcustomwbs.ext.controller.ObjectPageExt", {

	onInit: function(){
		that = this;
		//Convert Smart field into URL
		var ordFld = this.getView().byId(
			"zcustomwbs::sap.suite.ui.generic.template.ObjectPage.view.Details::ZCUSTOM_WBS--RF1::aufnr::Field"
		);
		if (ordFld) {
			ordFld.attachPress(this.onOrderPress);
		}
	},
	
	onOrderPress : function(){
		var sPath = that.getView().getBindingContext().getPath();
		var order = that.getView().getModel().getProperty(sPath + "/aufnr");
		if (order) {
			var currentURL = window.location.href;
			//Build modified URL
			var idx = currentURL.indexOf("#zcustwbs");
			var modURL = currentURL.slice(0, idx);
			// After semantic object and action, we need to append the information of which object page it needs to navigate to 
			var hash = "#zcustord-manage&/zcustom_order('" + order + "')";
			modURL = modURL + hash;
			//Navigate to second app using URLHelper
			sap.m.URLHelper.redirect(modURL, false);
		} 
	}
	
});

manifest.json –

{
	"_version": "1.8.0",
	"sap.app": {
		"id": "zcustomwbs",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"tags": {
			"keywords": []
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/opu/odata/sap/ZCUSTOM_WBS_CDS/",
				"type": "OData",
				"settings": {
					"annotations": ["ZCUSTOM_WBS_CDS_VAN", "localAnnotations"],
					"localUri": "localService/metadata.xml"
				}
			},
			"ZCUSTOM_WBS_CDS_VAN": {
				"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZCUSTOM_WBS_CDS_VAN',Version='0001')/$value/",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "localService/ZCUSTOM_WBS_CDS_VAN.xml"
				}
			},
			"localAnnotations": {
				"uri": "annotations/annotations.xml",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "annotations/annotations.xml"
				}
			}
		},
		"offline": false,
		"sourceTemplate": {
			"id": "ui5template.smartTemplate",
			"version": "1.40.12"
		},
		"crossNavigation": {
			"inbounds": {
				"intent1": {
					"signature": {
						"parameters": {},
						"additionalParameters": "allowed"
					},
					"semanticObject": "zcustwbs",
					"action": "manage"
				}
			}
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": ["sap_hcb", "sap_belize"]
	},
	"sap.ui5": {
		"resources": {
			"js": [],
			"css": []
		},
		"dependencies": {
			"minUI5Version": "1.38.34",
			"libs": {},
			"components": {}
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ListReport|ZCUSTOM_WBS": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ListReport/ZCUSTOM_WBS/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ObjectPage|ZCUSTOM_WBS": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ObjectPage/ZCUSTOM_WBS/i18n.properties"
			},
			"": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"defaultBindingMode": "TwoWay",
					"defaultCountMode": "Inline",
					"refreshAfterChange": false,
					"metadataUrlParams": {
						"sap-value-list": "none"
					}
				}
			}
		},
		"extends": {
			"extensions": {
				"sap.ui.controllerExtensions": {
					"sap.suite.ui.generic.template.ObjectPage.view.Details": {
						"controllerName": "zcustomwbs.ext.controller.ObjectPageExt",
						"sap.ui.generic.app": {
							"ZCUSTOM_WBS": {
								"EntitySet": "ZCUSTOM_WBS"
							}
						}
					}
				}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": false
		}
	},
	"sap.ui.generic.app": {
		"_version": "1.3.0",
		"settings": {
			"useColumnLayoutForSmartForm": false
		},
		"pages": {
			"ListReport|ZCUSTOM_WBS": {
				"entitySet": "ZCUSTOM_WBS",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"condensedTableLayout": true,
						"smartVariantManagement": true,
						"enableTableFilterInPageVariant": true
					}
				},
				"pages": {
					"ObjectPage|ZCUSTOM_WBS": {
						"entitySet": "ZCUSTOM_WBS",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					}
				}
			}
		}
	},
	"sap.platform.hcp": {
		"uri": ""
	}
}

local annotation file –

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="/sap/bc/ui5_ui5/ui2/ushell/resources/sap/ushell/components/factsheet/vocabularies/UI.xml">
		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="/sap/opu/odata/sap/ZCUSTOM_WBS_CDS/$metadata">
		<edmx:Include Alias="ZCUSTOM_WBS_CDS" Namespace="ZCUSTOM_WBS_CDS"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Aggregation.V1.xml">
		<edmx:Include Alias="Aggregation" Namespace="Org.OData.Aggregation.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/462030211/Analytics.xml">
		<edmx:Include Alias="Analytics" Namespace="com.sap.vocabularies.Analytics.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Authorization.V1.xml">
		<edmx:Include Alias="Auth" Namespace="Org.OData.Authorization.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Capabilities.V1.xml">
		<edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470974/Common.xml?api=v2">
		<edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470971/Communication.xml?api=v2">
		<edmx:Include Alias="Communication" Namespace="com.sap.vocabularies.Communication.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Core.V1.xml">
		<edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Measures.V1.xml">
		<edmx:Include Alias="Measures" Namespace="Org.OData.Measures.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/496435637/PersonalData.xml">
		<edmx:Include Alias="PersonalData" Namespace="com.sap.vocabularies.PersonalData.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Validation.V1.xml">
		<edmx:Include Alias="Validation" Namespace="Org.OData.Validation.V1"/>
	</edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="zcustomwbs.ZCUSTOM_WBS_CDS">
			<!--===============================================================================
                Entity Type from chosen collection 
                ================================================================================-->
			<Annotations Target="ZCUSTOM_WBS_CDS.ZCUSTOM_WBSType">
				<Annotation Term="UI.HeaderInfo">
					<Record Type="UI.HeaderInfoType">
						<PropertyValue Property="TypeName" String="{@i18n&gt;WBS}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;WBS}"/>
						<PropertyValue Property="Title">
							<Record Type="UI.DataField">
								<PropertyValue Property="Value" Path="objecttyp"/>
							</Record>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="UI.HeaderFacets">
					<Collection>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Header1"/>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.Facets">
					<Collection>
						<Record Type="UI.CollectionFacet">
							<PropertyValue Property="ID" String="GeneralInformation"/>
							<PropertyValue Property="Label" String="{@i18n&gt;OVERVIEW}"/>
							<PropertyValue Property="Facets">
								<Collection>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview1"/>
										<PropertyValue Property="ID" String="RF1"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview2"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview3"/>
									</Record>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#Overview4"/>
									</Record>
								</Collection>
							</PropertyValue>
						</Record>
					</Collection>
				</Annotation>
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

 

10 Comments
You must be Logged on to comment or reply to a post.