Skip to Content

Problem binding data from view 1 to view2

Hi i'm having problems trying to bind my model data,

The problem is when i clic on one item of my table is routing to my "details" view and even my uri is changing. For example: to http://localhost:57936/PruebaKaufmann/index.html#/detail/0 if i clic on the first item but is not printing info. What could be ? (i'm using northwind's odata)


this if what should print if i clic on my first item

"ID": 0,
"Name": "Bread",
"Description": "Whole grain bread",
"ReleaseDate": "/Date(694224000000)/",
"DiscontinuedDate": null,
"Rating": 4,
"Price": "2.5",

this is my view1 (Main.xml)

<Panel>
	<Table id="miTabla" items="{/}" mode="SingleSelectMaster" selectionChange="onSelectionChange" >
		<columns>
			<Column>
				<Text text="ID" />
			</Column>
			
			<Column>
				<Text text="Nombre" />
			</Column>
			
			<Column>
				<Text text="Precio" />
			</Column>
		</columns>
		
		<items>
			<ColumnListItem press="itemPress" type="Navigation">
				<cells>
					<ObjectIdentifier title="{Name}" titleActive="true"/>
					<Text text="{ID}" />
					<ObjectNumber number="{Price}"/>
				</cells>
			</ColumnListItem>
		</items>
	
	</Table>
</Panel>

and this is it's controller

onInit : function() {
	var sURI = "http://services.odata.org/V2/OData/OData.svc";
	var oDataModel = new ODataModel(sURI, true);
	var oModel = new JSONModel();
	
	var oTable = this.byId("miTabla");
	
	oDataModel.read("/Products", {
		success: function(oData, response) {
			var oResults = oData.results;
			oModel.setData(oResults);
			oTable.setModel(oModel);
		}
	});
},


onSelectionChange : function(oEvt) {
	var item = oEvt.getParameter("listItem");
	item.firePress();
},


itemPress : function(oEvent) {
	var sId = oEvent.getSource().getBindingContext().getProperty("ID");
	this.getOwnerComponent().getRouter()
	.navTo("detail", 
		{Id: sId});
},


algunEvento : function() {
	MessageToast.show("Bienvenido a Kaufmann");
}

and this is my second view (detail)

<semantic:FullscreenPage
id="page"
navButtonPress="onNavBack"
showNavButton="true"
title="Pagina Detalles">
	<semantic:content>
		<Label text="{ID}" />
		<Label text="{Name}" />
		<Label text="{Description}" />
		<Label text="{ReleaseDate}" />
		<Label text="{DiscontinuedDate}" />
		<Label text="{Rating}" />
		<Label text="{Price}" />
	</semantic:content>
</semantic:FullscreenPage>

and the controller of above view:

onInit: function() {
	this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
},


_onRouteMatched : function(oEvent) {
	var Id = oEvent.getParameter("arguments").Id;
	this.getView().bindElement("/Id/" + Id);
},


onNavBack : function() {
	var oHistory = sap.ui.core.routing.History.getInstance(),
	sPreviousHash = oHistory.getPreviousHash();
	if (sPreviousHash !== undefined) {
		// The history contains a previous entry
		history.go(-1);
	}
}

and for last but not least, my manifest:

"routing": {
		"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "prueba.kaufmann.view",
				"controlId": "app",
				"controlAggregation": "pages",
				"async": true,
				"transition": "slide"
			},
			"routes": [
				{
					"pattern": "",
					"name": "Main",
					"target": "Main"
				},
				{
					"pattern": "detail/:Id:",
					"name": "detail",
					"target": "detail"
				}
			],
			"targets": {
				"Main": {
					"viewId": "main",
					"viewName": "Main"
				},
				"detail": {
					"viewId": "detail",
					"viewName": "Detail"
				}
			}

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Apr 26 at 02:55 AM

    Your bind element need the entire context path, not just the ID. You can either contruct it yourself in the controller or pass it from your itemPress event

    Add comment
    10|10000 characters needed characters exceeded