CODEWITHSUNDEEP
routessapui5
mkbb
mkbb

Reputation: 31

SAPUI5 routing errors Control with ID app could not be found

I know that tere were smiliar questions, but non of the answer could solve my issue. I want to navigate from one page to another with btn click. When i press a button there is an arror in the console:

Target-dbg.js:386 Uncaught (in promise) Error: Control with ID app could not be found - Target: TargetReportsView
at constructor._refuseInvalidTarget (Target-dbg.js:386)
at Target-dbg.js:262

Here is my routing manifest:

"routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "async": true,
            "viewPath": "CompName.Emp_ITDB.Emp_ITDB.view",
            "controlAggregation": "pages",
            "controlId": "app",
            "clearControlAggregation": false
        },
        "routes": [{
            "name": "RouteMainView",
            "pattern": "RouteMainView",
            "target": ["TargetMainView"]
        }, {
            "name": "TargetReportsView",
            "pattern": "TargetReportsView",
            "greedy": false,
            "target": ["TargetReportsView"]
        }],
        "targets": {
            "TargetMainView": {
                "viewType": "XML",
                "transition": "slide",
                "clearControlAggregation": false,
                "viewId": "MainView",
                "viewName": "MainView"
            },
            "TargetReportsView": {
                "viewType": "XML",
                "viewName": "ReportsView",
                "viewId": "ReportsView"
            }
        }
    }

And my views: - Main

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable" controllerName="CompName.Emp_ITDB.Emp_ITDB.controller.MainView">
<App>
    <pages><Page title="EmployeeDB">
        <content>

        <Toolbar width="100%" id="toolbar1" design="Transparent">

            <content>

                <Button xmlns="sap.m" text="{i18n>databaseBar}" id="databaseBarBtn"/>

                <Button xmlns="sap.m" text="{i18n>reportsBar}" id="reportsBarBtn" press="NavigateToReports"/>

                <Button xmlns="sap.m" text="{i18n>adminBar}" id="adminBarBtn"/>

            </content>

        </Toolbar>

        </content>
        </Page>
    </pages>
</App>

and - Reports

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="CompName.Emp_ITDB.Emp_ITDB.controller.ReportsView" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="TargetReportsView">
    <pages>
        <Page title="Title">
            <content></content>
        </Page>
    </pages>
</App>

And last but not least my controloer:

sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("CompName.Emp_ITDB.Emp_ITDB.controller.MainView", {
    /**
     * Called when a controller is instantiated and its View controls (if available) are already created.
     * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
     * @memberOf CompName.Emp_ITDB.Emp_ITDB.view.MainView
     */

    getRouter : function () {
        return sap.ui.core.UIComponent.getRouterFor(this);
    },

    onInit: function () {},
    /**
     *@memberOf CompName.Emp_ITDB.Emp_ITDB.controller.MainView
     */
    ClearSearchBtnPressed: function (oEvent) {
        this.byId("employeeSearchBar").setValue("");
    },
    /**
     *@memberOf CompName.Emp_ITDB.Emp_ITDB.controller.MainView
     */
    NavigateToReports: function (oEvent) {
        this.getOwnerComponent().getRouter().getTargets().display("TargetReportsView");
    }
});

});

I tried everthing that google was able to show me. I am really confused now. And I also tried delete "rootview" in "sap.ui5" - not working. Any help will be welcomed! Thanks in advance!

Upvotes: 2

Views: 2824

Answers (2)

Dibya Ranjan
Dibya Ranjan

Reputation: 90

<App id="app"> </App>

Try doing this, this might help.

Upvotes: 1

Voyager
Voyager

Reputation: 840

I guess the Main view is your root view? The error occurs because your App in the Main view has no id, it should use the id "app" because this id is defined in the manifest as the controlId. This way the router can find and use it as the navigation container.

Upvotes: 2

Related Questions