Skip to Content
0
Jun 04, 2020 at 06:13 PM

SAPUI5 view change

965 Views

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