How not to display DetailNoObjectsAvailable view via mobile? - sapui5

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));
},

Related

Why it does not show two columns?

I am trying to use Flexible Column Layout on my app and I have trouble with the routing. However it does not show the expected result on the screen.
The routing is defined as follows:
"routing": {
"config": {
"routerClass": "sap.f.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.example.RequestAccess.view",
"controlId": "fcl",
"transition": "slide",
"bypassed": {}
},
"routes": [{
"pattern": "jobprofile",
"name": "jobprofile",
"target": [
"JobProfileSelector",
"JobProfileOrder"
]
}, {
"pattern": ":layout:",
"name": "authorize",
"target": [
"Authorization"
]
}],
"targets": {
"Authorization": {
"viewName": "Authorization",
"controlAggregation": "beginColumnPages"
},
"JobProfileOrder": {
"viewName": "JobProfileOrder",
"controlAggregation": "midColumnPages"
},
"JobProfileSelector": {
"viewName": "JobProfileSelector",
"controlAggregation": "beginColumnPages"
}
}
}
},
when I do the call
var oRouter = this._getRouter();
oRouter.navTo("jobprofile");
it shows one column layout instead two columns. I expect to be two columns, because I have defined:
"pattern": "jobprofile",
"name": "jobprofile",
"target": [
"JobProfileSelector",
"JobProfileOrder"
]
Two targets for the path /jobprofile.
I expect, that the app should show like this:
What am I doing wrong?
Update
I have created an example app https://github.com/softshipper/fclpoc.
Click on Go to jobprofile
and you will redirect to page /jobprofile path. Here I expect, that it is going to show me Second and Third view next to each other, like master detail view.
You have to adjust property layout of your FlexibleColumnLayout in order to have 1, 2 or 3 columns. Default is 1.
In your root view, you already have a binding on this property, which is a good idea.
<FlexibleColumnLayout id="fcl"
stateChange="onStateChanged"
layout="{/layout}"
backgroundDesign="Solid">
</FlexibleColumnLayout>
However, you are not calling function _updateLayout from the App.controller.js anywhere.
I suggest refactoring this controller to adjust the layout based on the active route.

Sapui5 Router is not working for the second time in Master Detail App

Hello Everyone,
Im facing an issue in Routing in Master Detail Application. When im clicking on Master Record for the first time. It is redirecting to Detail View. But if i click on another record in Master View, Router is not navigating to Detail View..
Can some one help me to clear my issue ??
If you see the above pic, When i hit on First Record corresponding details are loaded in Detail View.
If i hit on second Record(highlighted in Red) my Detail page is not getting triggered.
Below is the code im trying...
Master.controller.js
onItemPress: function (oEvent) {
var contextPath = oEvent.getParameter('listItem');
var getPath = contextPath.getBindingContext("masterModel").getPath().split("/")[1];
sap.ui.getCore().selRecordData = contextPath.getBindingContext("masterModel").getModel().getData()[getPath];
this._router.navTo("detail");
},
Detail Controller.js
onInit: function () {
var oComponent = this.getOwnerComponent();
this._router = oComponent.getRouter();
this._router.getRoute("detail").attachPatternMatched(this._routePatternMatched, this);
},
_routePatternMatched: function () {
var detailModel = new sap.ui.model.json.JSONModel();
detailModel.setData(sap.ui.getCore().selRecordData);
this.getView().setModel(detailModel, "detailModel");
}
manifest.json
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "sap.m.serviceRequestLast.view",
"controlAggregation": "pages",
"controlId": "idSplitApp",
"clearControlAggregation": false
},
"routes": [{
"pattern": "",
"name": "master",
"target": [
"detail",
"master"
]
}, {
"pattern": "detail",
"name": "detail",
"target": [
"master",
"detail"
]
}
],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": 1
},
"detail": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": 2
}
}
}
Can some one please help me to sort my issue..
Thank you in advance..

Routing with Parameters - patternMatched Event Not Fired

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.

Uncaught TypeError:this.getRouter is not a function

Tring to add an object route to the main route(table page), but return this.getRouter is not a function error.
In main Controller:
onPress : function(oEvent) {
this._showObject(oEvent.getSource());
},
_showObject : function (oItem) {
this.getRouter().navTo("object", {
objectId: oItem.getBindingContext().getProperty("task_id")
});
},
In Component.js(I've checked , it's already loaded, no error produced)
sap.ui.define(["sap/ui/core/UIComponent"],
function (UIComponent) {
"use strict";
return UIComponent.extend("cts.mobile.Component", {
metadata : {
rootView : "cts.mobile.view.TaskTest",
routing : {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "cts.mobile.view",
"controlId": "taskapp", //in task.view.xml
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"pattern": "",
"name": "task",
"target": "task"
},
{
"pattern": "ProductCollection/{objectId}",
"name": "object",
"target": "object"
}
],
"targets": {
"worklist": {
"viewName": "TaskTest",
"viewId": "TaskTest",
"viewLevel": 1
},
"object": {
"viewName": "Object",
"viewId": "object",
"viewLevel": 2
}
}
}
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
// Parse the current url and display the targets of the route that matches the hash
this.getRouter().initialize();
}
});
}
);
this value in _showObject:
f {mEventRegistry: Object, oView: f}
How to fix this error?
Try
return this.getOwnerComponent().getRouter();
Instead of what you now have in the getRouter function.
Tried
onPress : function(oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("object", {
objectId:
oEvent.getSource().getBindingContext().getProperty("task_id")
});
And it's working.
ref: https://openui5.hana.ondemand.com/#docs/guide/e5200ee755f344c8aef8efcbab3308fb.html
Thanks to #hdereli
I forgot to include the helper : BaseController.js
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this)
},

navTo only working for one page

I have a the following function in my controller file:
handleNavTo : function (oEvent){
var page = oEvent.getSource().data("navToPage");
var router = sap.ui.core.UIComponent.getRouterFor(this);
router.navTo(page);
}
So I don't have to write out a new function for each link, I'm using a data attribute in an XML view to pass in the page I want to navigate to, like this:
<StandardTile
title="{i18n>tileEmployees}"
press="handleNavTo"
data:navToPage="employees"
icon="sap-icon://employee"/>
<StandardTile
title="{i18n>tileProducts}"
press="handleNavTo"
data:navToPage="products"
icon="sap-icon://product"/>
I have the routing configured in a manifest.json file:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "testApp.view",
"controlId": "app",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
}
},
"routes": [
{
"pattern": "",
"name": "appHome",
"target": "home"
},
{
"pattern": "products",
"name:": "products",
"target": "products"
},
{
"pattern": "employees",
"name": "employees",
"target": "employees"
}
],
"targets": {
"home": {
"viewName": "Home",
"viewLevel": 1
},
"notFound": {
"viewName": "NotFound",
"transition": "flip"
},
"products": {
"viewPath": "testApp.view.products",
"viewName": "ProductsSplitView",
"viewType": "JS",
"viewLevel": 2
},
"employees": {
"viewPath": "testApp.view.employees",
"viewName": "EmployeesSplitView",
"viewType": "JS",
"viewLevel": 2
}
}
My problem is that clicking on the tiles only works for the Employees page. I know the routing is configured correctly for the products page as I can type in the url in the address bar and it brings up the page: mydomain.com/#/products.
I get no errors, it just seems to silently fail. the data attribute value is being called correctly, if I console.log(page) in the controller function I get the correct value, so this has be stumped.
Any help would be appreciated.
i would guess that it does not find the route by name because you have a typo in the route config: "name:": "products", should be "name": "products",