cancel
Showing results for 
Search instead for 
Did you mean: 

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

1a1t1u2y
Explorer
0 Kudos

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.

Accepted Solutions (0)

Answers (2)

Answers (2)

vsingh_mscg
Explorer

Your binding the list to /Meetups in details view, obviously its going to show the whole list.

<List id="list" items="{/Meetups}" noDataText="{i18n>noDataText}">

Remove list xml and just use:

<Text text="{itm}" />
1a1t1u2y
Explorer
0 Kudos

hi

thanks to your advise, I could create the program without showing the whole list.

thank you!