cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 Routing not working

Go to solution
SageDev
Explorer

on ‎02-02-2024 3:00 PM

0 Kudos

Hello experts,

I am trying to add routing to a UI5 (OpenUI5 - v1.120.3) application. I have followed the Walkthrough tutorial on UI5 Demo kit site. On step number 30, I have added routing config in manifest.json, initialized router in Component.js, and made sure that all views are in their proper expected place.

I am using the UI5 CLI (v3.2.0) to develop the application. Before the routing step everything was working as expected. When I run the app with routing (as per step 30) the page goes blank and I see these warnings in browser console,

SageDev_0-1706881233326.png

No matter what I do, nothing works. I downloaded and started the step 30 code and to my surprise that code also gives me these warnings but the page comes up and routing works.

SageDev_1-1706882030469.png

The only difference in both the code bases is that I am instantiating ComponentContainer from index.js file instead of doing it from index.html file. But I don't think it should matter since everything else works.

Can someone please guide as to what I may be missing here.

Labels:
Show replies
Show replies
junwu
Active Contributor
‎02-02-2024 3:57 PM
0 Kudos
if you don't provide code and error info, how can we help?
SageDev
Explorer
‎02-02-2024 4:23 PM
0 Kudos
SCN is not allowing to upload the code as ZIP file so I've put the code here - https://drive.google.com/file/d/1kMbPRrJJCh10L0TSTkpw65VmEcYQ8a56/view?usp=sharing
Answer

Accepted Solutions (1)

Accepted Solutions (1)

SageDev
Explorer
‎02-04-2024 5:11 PM
0 Kudos

I found the issue and its resolution. It was caused by the auto-complete feature of VSC extension - "UI5 Language Assistant".

The correct routing config in manifest.json is (notice the "path" property):

SageDev_0-1707066439972.png

The routing config options as suggested by auto-complete is (notice the "viewPath" property):SageDev_1-1707066507707.png

Once I changed it to "path" instead of "viewPath" it was resolved. I am opening an issue in the extension's Github repo to track it officially.

Show replies
Show replies

Answers (1)

Answers (1)

junwu
Active Contributor
‎02-02-2024 4:26 PM
0 Kudos

paste the important code here.

Show replies
Show replies
SageDev
Explorer
‎02-02-2024 4:34 PM
0 Kudos

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>UI5 Training app</title>
    <script
        id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:ui5/training/index"
        data-sap-ui-resourceroots='{
            "ui5.training": "./"
        }'>
    </script>

</head>
<body class="sapUiBody" id="content">
    <!-- <div data-sap-ui-component data-name="ui5.training" data-id="container" data-settings='{"id" : "training"}'></div> -->
    <!-- <div>Hello World</div> -->
</body>
</html>

index.js

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], (ComponentContainer) => {
    "use strict";
    new ComponentContainer({
        name: "ui5.training",
        id: "container",
        settings : {
            id : "training"
        },
        async: true
    }).placeAt("content");
});

 

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {
    "use strict";
    return UIComponent.extend("ui5.training.Component", {
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "manifest": "json"
        },

        init() {
            UIComponent.prototype.init.apply(this, arguments);
            const oData = {
                user : {
                    name : "John"
                }
            };
       
            const oModel = new JSONModel(oData);
            this.setModel(oModel);
            this.getRouter().initialize();
        }
    });
});

 

manifest.json

"sap.ui5": {
    ...
    "rootView": {
        "viewName": "ui5.training.view.App",
        "type": "XML",
        "id": "app"
    },
    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "ui5.training.view",
            "controlId": "app",
            "controlAggregation": "pages"
        },
        "routes": [
            {
                "pattern": "",
                "name": "overview",
                "target": "overview"
            },
            {
                "pattern": "detail",
                "name": "detail",
                "target": "detail"
            }
        ],
        "targets": {
            "overview": {
                "id": "overview",
                "name": "Overview"
            },
            "detail": {
                "id": "detail",
                "name": "Detail"
            }
        }
    }
  }

App.view.xml

<mvc:View xmlns="sap.m" controllerName="ui5.training.controller.App"
  xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core">
  <Shell>
    <App id="app" class="myApp" />
  </Shell>
</mvc:View>

 

Overview.view.xml

<mvc:View
    controllerName="ui5.training.controller.App" displayBlock="true"
    xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core">
          <Page title="{i18n>homePageTitle}" class="sapUiSizeCozy">
          <content>
               <Button text="Test button" />
          </content>
         </Page>
</mvc:View>

These are the main files related to this problem. I can see the Shell when the app runs but the Overview page doesn't load.

Ask a Question