Hi,
I'm developing a SAPUI5 which consisted of one (Results) view and I want to add another on a button click on the first one. It should open after clicking a simple button.
For now, I've created new (Detail) view, App.view and changed manifest, and now after clicking the button it's adding /detail to URL, but the view doesnt change. (.../index.html/detail)
I've tried changing rootView (from Results) it doesn't display anything.
"rootView": { "viewName": "Data.view.App", to App
How do I perform view change?
Also tried to follow step 31: Routing and Navigation
There are two views Results with the navigation button and Detail that I can't display.
Manifest
"routing": {
"targets": {
"Result": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "Results",
"viewLevel": 1
},
"Detail": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "Detail",
"viewLevel": 2
}
},
"routes": [{
"name": "Result",
"pattern": "",
"titleTarget": "Results",
"greedy": false
}, {
"name": "Detail",
"pattern": "detail",
"titleTarget": "Details",
"greedy": false
}],
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.wt.view",
"controlId": "app",
"controlAggregation": "pages"
}
}
App.controller
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Data.controller.App", {
});
});
App.view
<mvc:View
controllerName="sap.ui.demo.wt.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App class="nyAppDemoWT" id="app"/>
</mvc:View>
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"Data/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("Data.Component", {
metadata: {
manifest: "json"
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
}
});
});
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Data</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.netweaver.ondemand.com/1.44.12/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"Data": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "Data"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Results.controller
var goRouter;
onInit: function() {
goRouter = sap.ui.core.UIComponent.getRouterFor(this);....},
handlePress: function (oEvent) {
//var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
//console.debug(oRouter); //undefined
console.debug(oEvent.getSource().getBindingContext().getObject());
goRouter.navTo("Detail");
}