Skip to Content
0
Jul 26, 2018 at 09:08 AM

[sapui5] showing details by clicking list data in master page

1481 Views Last edit May 24, 2020 at 11:49 AM 2 rev

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.

Attachments

menu.png (26.6 kB)
file.png (34.9 kB)