Skip to Content
0

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

Oct 23, 2017 at 08:47 AM

41

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Irfan Gokak Oct 23, 2017 at 10:58 AM
0

Hi Janani,

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

Show 5 Share
10 |10000 characters needed characters left characters exceeded

I need to select the Id.

0

From where? On which action?

0

In Slave controller, under _onDetailMatched function

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

by using this line, I am able to get the ID of the selected element.

The next line

var sObjectPath ="product>/Products/" + Pid;

It returns the path as /Products/1 if I selected the first item. And in the slave view I am getting second element's details.

In Pid i am getting the selected element's ID. With this ID how can i get the index value of the selected element?

0

Hi Janani ,

If you Slave view data depends on the Index value instead of ProductID .. than in the first place only instead of sending Product Id in navto function send Index ..

this.getRouter().navTo("slave", { Index: oItem.getBindingContext("product").getProperty("Index")}) ;

If you want both the values in the Slave view than you can even send the whole selected product object instead of just one single property ..

this.getRouter().navTo("slave", { Product: oItem.getBindingContext("product").getProperty()}) ;

Note : after making these changes you need to change the _detailsMatched function too to access Index or object :

if index is passed

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

var sObjectPath = "product>/Products/" + index;

if object(product) is passed

var Object = oEvent.getParameter("arguments").Product;

var sObjectPath = "product>/Products/" + Product.Index;

Thanks

Viplove

0

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;
0