Skip to Content

Worklist App- Navigation: Unable to navigate to the selected id

I have written code for routing and navigation with a local json model. In the json array, if I give the ID(key value) starting from 0, 1 ,2... i am able to navigate to the correct detail page. But if I change it, data is not displayed. The selected Id is taken as array index and returing the corresponding array value. Please help me.

The code is

Base controller

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("ProductDetails.controller.BaseController", {
		/**
		 * Convenience method for accessing the router.
		 * @public
		 * @returns {sap.ui.core.routing.Router} the router for this component
		 */
		getRouter: function() {
			return sap.ui.core.UIComponent.getRouterFor(this);
		},


		/**
		 * Convenience method for getting the view model by name.
		 * @public
		 * @param {string} [sName] the model name
		 * @returns {sap.ui.model.Model} the model instance
		 */
		getModel: function(sName) {
			return this.getView().getModel(sName);
		},


		/**
		 * Convenience method for setting the view model.
		 * @public
		 * @param {sap.ui.model.Model} oModel the model instance
		 * @param {string} sName the model name
		 * @returns {sap.ui.mvc.View} the view instance
		 */
		setModel: function(oModel, sName) {
			return this.getView().setModel(oModel, sName);
		}
	});


});

Master Controller

sap.ui.define([
	"ProductDetails/controller/BaseController"
], function(BaseController) {
	"use strict";


	return BaseController.extend("ProductDetails.controller.Master", {
		onInit: function() {


		},


		onPress: function(oEvent) {
			// The source is the list item that got pressed
			var oItem = oEvent.getSource();
			this.getRouter().navTo("slave", {
				ProductId: oItem.getBindingContext("product").getProperty("ProductId")
			});


		}


	});
});

Slave controller

sap.ui.define([
	"ProductDetails/controller/BaseController",
	"sap/ui/core/routing/History"


], function(BaseController, History) {
	"use strict";


	return BaseController.extend("ProductDetails.controller.Slave", {
		onInit: function() {
			this._oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			this._oRouter.getRoute("slave").attachPatternMatched(this._onDetailMatched, this);
		},
		_onDetailMatched: function(oEvent) {
			var Pid = oEvent.getParameter("arguments").ProductId;
			var sObjectPath = "product>/Products/" + Pid;
			var oView = this.getView();
			oView.bindElement(sObjectPath);
		},


		onBack: function() {
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();
			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
				oRouter.navTo("master", true);
			}
		}


	});
});

Master View

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core" controllerName="ProductDetails.controller.Master">
	<App id="app">
		<Page title="Master view">
			<content>
				<Table id="__table0" items="{ path: 'product>/Products' }">
					<items>
						<ColumnListItem id="__item0" press="onPress" type="Navigation">
							<cells>
								<Text text="{product>ProductId}" id="__text0"/>
								<Text text="{product>Name}" id="__text1"/>
								<Text text="{product>Price}" id="__text2"/>
							</cells>
						</ColumnListItem>
					</items>
					<columns>
						<Column id="__column0">
							<header>
								<Label text="Product Id" id="__label0"/>
							</header>
						</Column>
						<Column id="__column1">
							<header>
								<Label text="Product Name" id="__label1"/>
							</header>
						</Column>
						<Column id="__column2">
							<header>
								<Label text="Price" id="__label2"/>
							</header>
						</Column>
					</columns>
				</Table>
			</content>
		</Page>
	</App>
</mvc:View>

Slave View

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core" controllerName="ProductDetails.controller.Slave">
	<App id="app">
		<Page title="Product Details" showNavButton="true" navButtonPress="onBack">
			<ObjectHeader id="objectHeader" title="ID:{product>Name}" number="Price:{product>Price}" titleActive="true">
					<attributes>
					<ObjectAttribute text="Made In:{product>Made}"></ObjectAttribute>
					<ObjectAttribute text="{product>Supplier}"></ObjectAttribute>
				</attributes>
			</ObjectHeader>
		</Page>
	</App>
</mvc:View>

Products.json

{
  "Products":[
	{
		"Index": "0",
		"ProductId":"1",
		"Name":"Mouse",
		"Supplier":"lenovo",
		"Price":"2000",
		"Made":"India"
	},
	{
		"Index":  "1",
		"ProductId":"2",
		"Name":"Monitor",
		"Supplier":"Dell",
		"Price":"10000",
		"Made":"India"
	},
	{
		"Index":"2",
		"ProductId":"3",
		"Name":"Keyboard",
		"Supplier":"Dell",
		"Price":"5000",
		"Made":"India"
	},
	{
		"Index": "3",
		"ProductId":"4",
		"Name":"CPU",
		"Supplier":"Dell",
		"Price":"10000",
		"Made":"India"
	}]
}

Thanks,
Janani

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Oct 23, 2017 at 10:58 AM

    Hi Janani,

    Can you tell do you want to select id/index from particular row in table?

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Janani,

      Use 2 arguments in your router one for ProductId and another for Index.

      Do the changes as below.

      Manifest.json

      {
      	"pattern": "SlaveView/{ProductId}/{Index}",
      	"name": "object",
      	"target": [
      		"master",
      		"object"
      	]
      }

      Master.Controller.js

      this.getRouter().navTo("SlaveView", {
      	ProductId : ProductId,
      	Index : Index
      });

      Slave.Controller.js

      var ProductId =  oEvent.getParameter("arguments").ProductId;
      var Index =  oEvent.getParameter("arguments").Index;