I'm facing problem.
I want to create split screen page looks like "Routing in a split screen layout with the master detail pattern"(https://sapui5.hana.ondemand.com/#/sample/sap.ui.core.sample.RoutingMasterDetail/preview) by using mockdata.
I expect detail page has shown bound data when I would press the list data on master page.
However detail page displays all data in "Meetups.json" though specific data should be displayed by "navTo()" method.
these are my source.
please give me some advice.
regards,
<manifest.json>
"routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "async": true, "viewPath": "test2.test2.view", "controlId": "Listpage", "bypassed": { "target": [] } }, "routes": [ { "name": "master", "pattern": "", "target": [ "master" ] }, { "name": "dataget", "pattern": "Meetups/{bukrs}", "target": [ "master","details" ] } ], "targets": { "master": { "viewName": "List", "viewPath": "test2.test2.view", "controlAggregation": "masterPages", "viewLevel": 0 }, "details": { "viewName": "Data", "viewPath": "test2.test2.view", "controlAggregation": "detailPages", "viewLevel": 1 } } }
<List.view.xml>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:semantic="sap.m.semantic" xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="test2.test2.controller.List" afterInit="action" action:wiring="\{'afterInit':\{'navigation':\{'routeName':'Data'\}\}\}"> <semantic:MasterPage id="page" title="{masterView>/title}"> <semantic:subHeader> <Bar id="headerBar"> <contentMiddle> <SearchField id="searchField" width="100%" search="onSearch"> </SearchField> </contentMiddle> </Bar> </semantic:subHeader> <semantic:content> <List headerText="{i18n>headerText}" id="list" items="{/Meetups}" noDataText="{i18n>noDataText}"> <items> <ObjectListItem title="{bukrs}" type="Active" press="onSelectionChange"> </ObjectListItem> </items> </List> </semantic:content> </semantic:MasterPage> </mvc:View>
<Data.view.xml>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:semantic="sap.m.semantic" xmlns:smartchart="sap.ui.comp.smartchart" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:sl="sap.ui.comp.navpopover" xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="test2.test2.controller.Data" afterInit="action" action:wiring="\{'afterInit':\{'navigation':\{'routeName':'List'\}\}\}"> <semantic:DetailPage id="page" navButtonPress="onNavBack" showNavButton="{device>/system/phone}" title="{i18n>detailTitle}" busy="{detailView>/busy}" busyIndicatorDelay="{detailView>/delay}"> <semantic:content> <SearchField xmlns="sap.m" id="searchField" showRefreshButton="{= !${device>/support/touch} }" width="100%" search="onSearch"> </SearchField> <List id="list" items="{/Meetups}" noDataText="{i18n>noDataText}"> <items> <ObjectListItem title="{itm}"> </ObjectListItem> </items> </List> </semantic:content> </semantic:DetailPage> </mvc:View>
<List.controller.js>
/*global location*/ sap.ui.define([ "test2/test2/controller/BaseController" ], function (BaseController) { "use strict"; return BaseController.extend("test2.test2.controller.List", { onInit: function () { this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this); }, _onMasterMatched : function() { this.getRouter().navTo("dataget", {bukrs:1}, true); }, onSelectionChange: function (oEvent) { var sBukrs = oEvent.getSource().getBindingContext().getProperty("bukrs"); this.getOwnerComponent().getRouter().navTo("dataget", {bukrs: sBukrs}); } }); });
<Data.comtroller.js>
/*global location*/ sap.ui.define([ "test2/test2/controller/BaseController", "sap/ui/model/json/JSONModel" ], function (BaseController, JSONModel) { "use strict"; return BaseController.extend("test2.test2.controller.Data", { onInit: function () { this.getOwnerComponent().getRouter().getRoute("dataget").attachPatternMatched(this._onRouteMatched, this); }, _onRouteMatched: function(oEvent) { this._bukrs = oEvent.getParameter("arguments").bukrs; this.getView().bindElement("/Meetups/" + this._bukrs); } }); });
<Meetups.json>
[{ "bukrs":1, "code":11, "cname":20, "year":4, "div":1, "monthly":[{"jan":10}, {"feb":10}, {"mar":10}, {"apr":10}, {"may":10}, {"jun":10}, {"jul":10}, {"aug":10}, {"sep":10}, {"oct":10}, {"nor":10}, {"dec":10} ], "itm":5 }, { "bukrs": 2, "code":12, "cname":20, "year":4, "div":1, "monthly":[{"jan":20}, {"feb":10}, {"mar":10}, {"apr":10}, {"may":10}, {"jun":10}, {"jul":10}, {"aug":10}, {"sep":10}, {"oct":10}, {"nor":10}, {"dec":10} ], "itm":10 }, { "bukrs": 3, "code":13, "cname":20, "year":4, "div":1, "monthly":[{"jan":30}, {"feb":10}, {"mar":10}, {"apr":10}, {"may":10}, {"jun":10}, {"jul":10}, {"aug":10}, {"sep":10}, {"oct":10}, {"nor":10}, {"dec":10} ], "itm":15 }, { "bukrs": 4, "code":14, "cname":20, "year":4, "div":1, "monthly":[{"jan":40}, {"feb":10}, {"mar":10}, {"apr":10}, {"may":10}, {"jun":10}, {"jul":10}, {"aug":10}, {"sep":10}, {"oct":10}, {"nor":10}, {"dec":10} ], "itm":20 } ]
<metadata.xml>
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"> <edmx:DataServices xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" m:DataServiceVersion="1.0"> <Schema Namespace="NerdMeetup.Models" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://schemas.microsoft.com/ado/2006/04/edm"> <EntityType Name="Meetup"> <Key> <PropertyRef Name="bukrs"/> </Key> <Property Name="bukrs" Type="Edm.String" Nullable="true" /> <Property Name="code" Type="Edm.String" Nullable="true" /> <Property Name="cnames" Type="Edm.String" Nullable="true" /> <Property Name="year" Type="Edm.String" Nullable="true" /> <Property Name="div" Type="Edm.String" Nullable="true" /> <Property Name="monthy" Type="Edm.String" Nullable="true" /> <Property Name="itm" Type="Edm.String" Nullable="true" /> </EntityType> <ComplexType Name="LocationDetail" /> <EntityContainer Name="NerdMeetups" m:IsDefaultEntityContainer="true"> <EntitySet Name="Meetups" EntityType="NerdMeetup.Models.Meetup" /> <FunctionImport Name="FindUpcomingMeetups" EntitySet="Meetups" ReturnType="Collection(NerdMeetup.Models.Meetup)" m:HttpMethod="GET" /> </EntityContainer> </Schema> </edmx:DataServices> </edmx:Edmx>
※I expected when I have pressed the data "1", "5" would be displayed on detail page.