I have been trying to route from View1 to View2. My code is the same as what is given in the SAPUI5 SDK, with some minor changes according to my project. I tried multiple solutions given on the internet but none of them worked.
View1.controller.js
onNav: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2");
//return this.getOwnerComponent().getRouter().navTo("View2");
},
manifest.json
"routes": [
{
"pattern": "",
"name": "View1",
"target": "View1"
},
{
"pattern": "View2",
"name": "View2",
"target": "View2"
}
],
"targets": {
"View1": {
"viewId": "View1",
"viewName": "View1"
},
"View2": {
"viewId": "View2",
"viewName":"View2"
}
}
The error shown is:
sap.ui.core.UIComponent.getRouterFor is not a function
Double check if you have the following:
1) Router class declared in the routing configuration of the manifest.json file:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
},
"routes": [
]
2) Router was initialize. This is almost always done inside Component.js:
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
},
3) Check if this inside your onNav method is your controller.
For that, you can add a breakpoint inside it, open the browser console use the following call:
this.getMetadata()
Use the sap.ui.core.UIComponent.getRouterFor(this) inside a controller onInit method. You should get the reference for the router at that point.
Related
I've created a sapui5 project from master-detail template. What I want to achieve is showing an empty list (which is in the master view) via mobile without navigating to DetailNoObjectsAvailable view. I just can't find where DetailNoObjectsAvailable view is called from.
The reason why I want to achieve this is that when there are no objects in the list in the beginning and then an object is added to odata source, I see nothing but 'No objects available' and I can not navigate to the master list to refresh it manually. I have to refresh the whole page in fiori client browser to see it. When the list is not empty in the beginning and I add an object to odata source, the list refreshes automatically and I face no problems seeing it.
I haven't changed anything in the routing definition:
"routes": [
{
"pattern": "",
"name": "master",
"target": [
"object",
"master"
]
}, {
"pattern": "visitors_view/{objectId}",
"name": "object",
"target": [
"master",
"object"
]
}
],
"targets": {
"master": {
"viewName": "Master",
"viewLevel": 1,
"viewId": "master",
"controlAggregation": "masterPages"
},
"object": {
"viewName": "Detail",
"viewId": "detail",
"viewLevel": 2
},
"detailObjectNotFound": {
"viewName": "DetailObjectNotFound",
"viewId": "detailObjectNotFound"
},
"detailNoObjectsAvailable": {
"viewName": "DetailNoObjectsAvailable",
"viewId": "detailNoObjectsAvailable"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
}
}
The mechanism routing to the notFoundobject is found in manifest.json:
manifest.json: bypassed + target in routing config
"routing": {
"config": {
"routerClass": "sap.f.routing.Router",
"viewType": "XML",
"viewPath": "test.test.view",
"controlId": "layout",
"controlAggregation": "beginColumnPages",
"bypassed": {
-------> "target": "notFound" <--------
},
"async": true
},
"targets": {
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
}
}
View in webapp/view:
<mvc:View
controllerName="test.test.controller.NotFound"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<MessagePage
id="page"
title="{i18n>notFoundTitle}"
text="{i18n>notFoundText}"
icon="sap-icon://document">
</MessagePage>
</mvc:View>
That is what you are looking for right?
Maybe your problem is solved by changing from "target": "notFound" to "target": "master" within the bypassed section in manifest.json.
UPDATE: Detail.controller.js
_onBindingChange : function () {
var oView = this.getView(),
oElementBinding = oView.getElementBinding();
// No data for the binding
if (!oElementBinding.getBoundContext()) {
this.getRouter().getTargets().display("detailObjectNotFound"); <------------
// if object could not be found, the selection in the master list
// does not make sense anymore.
this.getOwnerComponent().oListSelector.clearMasterListSelection();
return;
}
Solved the problem by commenting some lines in ListSelector.js. They caused an error in the console, which in its turn was the cause of my problem:
constructor : function () {
this._oWhenListHasBeenSet = new Promise(function (fnResolveListHasBeenSet) {
this._fnResolveListHasBeenSet = fnResolveListHasBeenSet;
}.bind(this));
this.oWhenListLoadingIsDone = new Promise(function (fnResolve, fnReject) {
this._oWhenListHasBeenSet
.then(function (oList) {
oList.getBinding("items").attachEventOnce("dataReceived",
function (oData) {
if (!oData.getParameter("data")) {
fnReject({
list : oList,
error : true
});
}
var oFirstListItem = this.getFirstListItem();
if (oFirstListItem) {
fnResolve({
list : oList,
firstListitem : oFirstListItem
});
}
// else {
// fnReject({
// list : oList,
// error : false
// });
//}
}.bind(this)
);
}.bind(this));
}.bind(this));
},
I am working on UI5 application using Web IDE and I have created a view where I need to bind the data based on parameter received from last view. But the patternMatched event is not firing.
manifest.json
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "oomsdisplay.pso.com.view",
"controlId": "app",
"controlAggregation": "pages",
"bypassed": {
"target": ["notFound"]
},
"async": true
},
"routes": [{
"pattern": "",
"name": "worklist",
"target": ["worklist"]
}, {
"pattern": "ZISOHSet/{objectId}",
"name": "object",
"target": ["object"]
}, {
"pattern": "ZISOHSet/{objectId}",
"name": "payobject",
"target": ["payobject"]
}],
"targets": {
"worklist": {
"viewName": "Worklist",
"viewId": "worklist",
"viewLevel": 1
},
"object": {
"viewName": "Object",
"viewId": "object",
"viewLevel": 2
},
"objectNotFound": {
"viewName": "ObjectNotFound",
"viewId": "objectNotFound"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
},
"payobject": {
"viewName": "PayObject",
"viewId": "payobject",
"viewLevel": 2
}
}
}
Component.js
init: function() {
UIComponent.prototype.init.apply(this, arguments);
// ...
this.getRouter().initialize(); // create the views based on the url/hash
},
Now, I have created a view. When I press the button on view, my second view i.e. PayObject will be called. Here is my code on button press of view one:
fViewPayment: function(oEvent) {
this.getRouter().getTargets().display("payobject", {
objectId: "MyParameterhere"
});
},
Now, here is my PayObejct view's init handler with object matched handler. But it is not working.
onInit: function() {
// ...
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("payobject").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) { // this event handler is not firing
var sObjectId = oEvent.getParameter("arguments").objectId;
sap.m.MessageBox.show(sObjectId);
// ...
},
If you have two routes with the same pattern, only the first one will be matched in the Router.
{
"pattern": "ZISOHSet/{objectId}",
"name": "object",
"target": ["object"]
}, {
"pattern": "ZISOHSet/{objectId}",
"name": "payobject",
"target": ["payobject"]
}
So in this case "object" will me matched. Change the patter of one of your routes and try again.
Furthermore, use navTo() when navigating:
this.getRouter().navTo("payobject", {
objectId: "MyParameterhere"
});
Instead of using
getTargets().display
Use method navTo from your Router object
https://sapui5.hana.ondemand.com/#/api/sap.ui.core.routing.Router/overview
You have to routes with identical patterns: "object" and "payobject", I would try to remove one and check again.
All other routings are fine, but for some reason the main controller is being called twice. Why would this happen?
onInit: function() {
var oRouter = this.getOwnerComponent().getRouter();
oRouter.getRoute("main").attachMatched(this._onRouteMatched, this);
this.getView().setModel(new JSONModel({
Jobs: []
}), "job");
},
Is this down to the routing config?
"rootView": {
"viewName": "CompleteSurvey.view.Main",
"type": "XML"
},
"routing": {
"routes": [{
"name": "main",
"pattern": "",
"target": ["main"]
}],
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "CompleteSurvey.view",
"controlId": "app",
"controlAggregation": "pages"
},
"targets": {
"main": {
"viewName": "Main"
}
}
}
The reason why your Main controller is created twice is because its view is created twice.
Your Component fetches manifest.json and looks at the rootView to create the assigned view ("CompleteSurvey.view.Main").
Your router gets initialized, sees that the current hash / pattern is "", and creates the corresponding view which is the "Main" view again.
The current best practice is to have a separate root view. You can keep the Main for the "" pattern, but avoid using the same view again as a root view.
For further references, take a look at the tutorial Navigation and Routing and this answer.
I'm getting an error while I'm trying to navigate to another page in the sapui5 application. I'm trying to figure out what I am doing wrong. The directory Structure of my application is as below:
In manifest file
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}
, {
"pattern": "Course/{courseId}",
"name": "course",
"target": "course"
}],
"targets": {
"home": {
"viewName": "Home",
"viewLevel" : 1
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
} ,
"course": {
"viewPath": "dlesDLESdashboard.view.Course",
"viewName": "CourseDetail",
"viewLevel" : 2
}
}
},
When I click on my navigate button I am triggering this event by default I'm giving static ID later I'll change.
handleCourseClick : function(oEvent){
this.getRouter().navTo("course",{courseId :"222222"});},
I'm not sure this information is good enough to find out my error or not.
The Error is that when I click on the tile I'm getting this error instead of navigating to my course detail page.
Check your controller, there might be something wrong with your view and controller connection. check namespace, name of controller etc and verify it.
sap.ui.define([
"sap/ui/model/json/JSONModel",
"locations/util/Utils",
"locations/controller/BaseController"
], function(BaseController, JSONModel, Utils) {
I declared these in the wrong order, and caused the same problem.
I am following the tutorial here and I got stuck on routing with parameters.
The example app did not run on my local use, I therefore change it to make use of local data. However, I get the error "Uncaught Error: Invalid value "Invoices/1" for segment "{invoicePath}"" when I click on an element in the invoices list. It should open up a new Detail page and display the product name and the amount.
Here is my routing manifest:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.wt.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [
{
"pattern": "",
"name": "overview",
"target": "overview"
},
{
"pattern": "detail/{invoicePath}",
"name": "detail",
"target": "detail"
}
],
"targets": {
"overview": {
"viewName": "Overview"
},
"detail": {
"viewName": "Detail"
}
}
}
Invoices.json example data:
{
"Invoices": [
{
"ProductName": "Pineapple",
"Quantity": 21,
"ExtendedPrice": 87.2000,
"ShipperName": "Fun Inc.",
"ShippedDate": "2015-04-01T00:00:00",
"Status": "A"
}
]
}
InvoiceList.controller.js. Where I populate the Invoices list and call the view change.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/wt/model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.InvoiceList", {
onPress: function (oEvent) {
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail", {
invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
});
}
});
});
The error message is raised by the the router library. The route is defined as detail/{invoicePath} and you pass Invoice/1 as parameter, which is not allowed as the parameter contains the slash which is considered as URL segment separator.
However, you mentioned that you could not run the example locally and did some adoptions. The path looks like you are using a JSONModel now. This means you need to adopt several parts in your example as well.
InvoiceList controller:
oItem.getBindingContext("invoice").getPath().substr(10)
The binding context should be /Invoices/1 and you want to pass the only the index. Therefore you need to cut off /Invoices/.
Detail controller:
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/Invoices/"+ oEvent.getParameter("arguments").invoicePath,
model: "invoice"
});
}
This will bind your view to /Invoices/1 in the corresponding model.
#matbtt 's answer is right.
Another solution is to excaping the PATH. No substr and special offset is needed.
encodeURIComponent(oItem.getBindingContext("invoice").getPath())
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
model: "invoice"
});
}
both JSON Model and OData would work well.