This document provides steps to create a SAPUI5 application with master-detail views using routing and OData service binding: 1. Create a destination in SAP Cloud Platform Cockpit for the OData service 2. Create a new SAPUI5 project and add routing configuration and data binding in manifest.json 3. Create two views for the master-detail UI and add controllers to handle routing and data loading 4. Implement the master view to display a product list and routing to the detail view 5. Implement the detail view to display product details using object page layout

1. Applicationthatwill be Created:
Step1: -
From web-ide,gototools->SAPCloudCockpit

2. Step2: Clickon Destination
Step3: Clickon“NewDestination”

3. Step4: Provide detailsasbelowinthe destinationandsave andcheckthe destination
Step5: Go to SAPweb-ide andCreate anew Projectfromtemplate. Provide projectdetailsandclickon
finish.

4. Step6: Openneo-app.jsonfile of yourproject
Addbelowdetailsunder“route”tag
{
"path":"/NorthwindService",
"target":{
"type":"destination",
"name":"Northwind"
},
"description":"NorthwindService"
}
Step7: Openmanifest.jsonfileandaddthe data source and create data model.
Inside sap.apptagpaste the following
"dataSources":{
"mainService":{
"uri":"/NorthwindService/V2/Northwind/Northwind.svc/",
"type":"OData",
"settings":{
"odataVersion":"2.0",
"localUri":"localService/metadata.xml"
}
}
}

5. Under “models”tagin“sap.ui5” paste the following
"": {
"dataSource":"mainService",
"preload":true
}
Step8: Create 2 additional viewsinyourapplicationbyrightclickonwebapp - > new -> SAPUI5 view

6. Step9: Addthe belowcode inmanifest.json toenablerouting.Change the view pathandview name as
peryour namespace andviewname
"routing":{
"config":{
"routerClass":"sap.m.routing.Router",
"viewType":"XML",
"viewPath":"com.jatinUI5Con.view",
"controlId":"Container",
"controlAggregation":"detailPages"
},
"routes":[{
"name":"Main",
"pattern":"",
"titleTarget":"",
"greedy":false,
"target":["Detail","Main"]
}, {
"name":"Detail",
"pattern":"detail/{productID}",
"titleTarget":"",
"greedy":false,
"target":["Main","Detail"]
}],
"targets":{
"Main": {
"transition":"slide",

7. "clearAggregation":true,
"viewName":"Main",
"viewLevel":1,
"controlAggregation":"masterPages"
},
"Detail":{
"viewType":"XML",
"transition":"slide",
"clearAggregation":true,
"viewName":"Detail",
"viewLevel":2
}
}
}
Step10: OpenMain.view.xmlandpaste the below code
<mvc:Viewxmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"
controllerName="com.jatinUI5Con.controller.Main"
xmlns:html="http://www.w3.org/1999/xhtml"xmlns:semantic="sap.m.semantic">
<semantic:MasterPage
id="page"
title="Products"
showNavButton="false">
<semantic:subHeader>
<Bar id="headerBar">

8. <contentMiddle>
<SearchField
id="searchField"
showRefreshButton="{=!${device>/support/touch} }"
tooltip="{i18n>masterSearchTooltip}"
width="100%"
search="onSearch">
</SearchField>
</contentMiddle>
</Bar>
</semantic:subHeader>
<semantic:content>
<PullToRefresh
id="pullToRefresh"
visible="{device>/support/touch}"
refresh="onRefresh"/>
<!-- For clientside filteringaddthistothe itemsattribute:parameters:
{operationMode:'Client'}}" -->
<List
id="list"
items="{
path: '/Products',
sorter:{
path: 'ProductName',
descending:false

9. }
}"
busyIndicatorDelay="{masterView>/delay}"
noDataText="{masterView>/noDataText}"
mode="{=${device>/system/phone} ?'None': 'SingleSelectMaster'}"
growing="true"
growingScrollToLoad="true"
updateFinished="onUpdateFinished"
selectionChange="onSelectionChange">
<items>
<ObjectListItem
type="{=${device>/system/phone} ?'Active':
'Inactive'}"
press="onSelectionChange"
title="{ProductName}"
numberUnit="{UnitsInStock}">
</ObjectListItem>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</mvc:View>

10. Step11: OpenMain.controller.jsandpaste the below code
sap.ui.define([
"sap/ui/core/mvc/Controller",
'sap/ui/model/Filter'
],function(Controller,Filter) {
"use strict";
returnController.extend("com.jatinUI5Con.controller.Main",{
onSelectionChange:function(oEvent){
var custID=
this.getView().getModel().getProperty(oEvent.getSource().getSelectedItem().getBindingContext().sPath)
.ProductID;
var oRouter= sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Detail",{productID:custID},false);
},
onSearch:function(oEvent){
var aFilters= [];
var sQuery= oEvent.getSource().getValue();
if (sQuery&& sQuery.length>0) {
var filter= new Filter("ProductName",
sap.ui.model.FilterOperator.Contains,sQuery);
aFilters.push(filter);
}
// update listbinding
var list= this.byId("list");

11. var binding= list.getBinding("items");
binding.filter(aFilters);
}
});
});
Step12: Open detail.view.xml andpaste the followingcode
<core:Viewxmlns:core="sap.ui.core"
xmlns="sap.uxap"
xmlns:layout="sap.ui.layout"
xmlns:m="sap.m"
xmlns:employment="sap.uxap.sample.SharedBlocks.employment"
controllerName="com.jatinUI5Con.controller.Detail"
height="100%">
<ObjectPageLayoutid="ObjectPageLayout"
enableLazyLoading="false"
showTitleInHeaderContent="false"
showEditHeaderButton="false"
>
<headerTitle >
<ObjectPageHeaderid="objectHeader"
objectTitle="{ProductName}"

12. objectImageShape="Circle"
isObjectIconAlwaysVisible="true"
isObjectTitleAlwaysVisible="true"
isObjectSubtitleAlwaysVisible="true">
<actions>
</actions>
</ObjectPageHeader>
</headerTitle>
<headerContent>
<layout:VerticalLayout>
<m:VBox id="catDesc">
<m:items>
<m:Texttext="{Description}"/>
<m:Image src="data:image/png;base64,{Picture}"
></m:Image>
</m:items>
</m:VBox>
</layout:VerticalLayout>

13. </headerContent>
<sections>
<ObjectPageSectiontitle="Categories">
<subSections>
<ObjectPageSubSection title="Categories">
<blocks>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
<ObjectPageSectiontitle="OrderDetails"importance="Medium">
<subSections>
<ObjectPageSubSection title="OrderDetails">
<blocks>
<m:Table
inset="false"
items="{
path: 'Order_Details',
sorter:{
path: 'OrderID'

14. }
}">
<m:headerToolbar>
<m:Toolbar>
<m:content>
<m:Title text="OrderDetails"level="H2"/>
<m:ToolbarSpacer/>
</m:content>
</m:Toolbar>
</m:headerToolbar>
<m:columns>
<m:Column
width="12em">
<m:Texttext="OrderID"/>
</m:Column>
<m:Column
minScreenWidth="Tablet"
demandPopin="true">
<m:Texttext="ProductID"/>
</m:Column>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"

15. hAlign="End">
<m:Texttext="UnitPrice"/>
</m:Column>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"
hAlign="Center">
<m:Texttext="Quantity"/>
</m:Column>
<m:Column
hAlign="End">
<m:Texttext="Discount"/>
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem>
<m:cells>
<m:Link
text="{OrderID}"
press="onOrderPress"/>
<m:Text
text="{ProductID}"/>
<m:Text
text="{UnitPrice}"/>

16. <m:ObjectNumber
number="{Quantity}"
unit="{WeightUnit}"
state="{=${Quantity} >10 ?'Success': 'Warning'}" />
<m:Text
text="{Discount}"/>
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
<footer>
</footer>
</ObjectPageLayout>
</core:View>

17. Step13: Opendetail controller.jsandpaste the below code
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],function(Controller,JSONModel) {
"use strict";
returnController.extend("com.jatinUI5Con.controller.Detail",{
onInit:function(){
var oViewModel=newJSONModel({
busy: false,
delay: 0,
lineItemListTitle :"CustomerOrders"
});
this.getView().setModel(oViewModel,"detailView");
var oRouter= sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("Detail").attachPatternMatched(this._onObjectMatched,this);
},
_onObjectMatched:function(oEvent){
var sObjectId= oEvent.getParameter("arguments").productID;
this.getView().getModel().metadataLoaded().then(function(){
var sObjectPath=
this.getView().getModel().createKey("Products",{
ProductID: sObjectId

18. });
this._bindView("/"+sObjectPath);
}.bind(this));
},
_bindView :function(sObjectPath) {
// Setbusyindicatorduringview binding
var oViewModel=this.getView().getModel("detailView");
// If the view wasnot boundyetitsnot busy,onlyif the binding
requestsdataitis setto busyagain
oViewModel.setProperty("/busy",false);
this.getView().bindElement({
path : sObjectPath,
events:{
dataRequested:function() {
oViewModel.setProperty("/busy",true);
},
dataReceived:function() {
oViewModel.setProperty("/busy",false);
}
}

19. });
//propertyBinding
this.getView().byId("catDesc").bindElement(sObjectPath+"/Category");
},
onOrderPress:function(oEvent){
// create popover
if (!this._oPopover){
this._oPopover=sap.ui.xmlfragment("com.jatinUI5Con.view.order",
this);
this.getView().addDependent(this._oPopover);
}
var oCtx = oEvent.getSource().getBindingContext();
this._oPopover.bindElement(oCtx.getPath()+"/Order");
// delaybecause addDependentwill doaasyncrerenderingandthe actionSheet
will immediatelyclosewithoutit.
var oControl = oEvent.getSource();
this._oPopover.openBy(oControl);
},
handleActionPress:function(oEvent){
this._oPopover.close();
}

20. });
});
Step15 : Run your application