No reaction after calling oRouter.navTo

Question

I have created a Business Configuration Maintenance Object app according to this tutorial https://developers.sap.com/tutorials/abap-environment-business-configuration-object.html.

To skip the single root entity page, I followed the step-by-step guide on the website https://community.sap.com/t5/technology-blogs-by-sap/how-to-create-a-fiori-elements-app-for-a-rap-bo-with-transport-selection/ba-p/13562792. Despite the adjustments, the navigation doesn't work; instead, it shows an empty page. Calling the method navTo from the router object in the component.js file doesn't navigate to the desired path.

sap.ui.define(["sap/fe/core/AppComponent"], function (Component) {
  "use strict";

  return Component.extend("io.acme.sadsenderdetail.Component", {
    metadata: {
      manifest: "json",
    },
    init: function () {
      Component.prototype.init.apply(this, arguments);
      const oRouter = this.getRouter();
      oRouter.navTo("SenderDetailAll", { key: "(1)" });
    },
  });
});

It doesn't append the path SenderDetailAll to the URL. By appending the path SenderDetailAll(1) manually to the URL https://port8080-workspaces.eu20.applicationstudio.cloud.sap/index.html#/SenderDetailAll(1), it works. Best regards

Update

The definition of the routing in the manifest.json

"routing": {
  "config": {},
  "routes": [
    {
      "pattern": "SenderDetailAll({key}):?query:",
      "name": "SenderDetailAllObjectPage",
      "target": "SenderDetailAllObjectPage"
    },
    {
      "pattern": "SenderDetailAll({key})/_SenderDetail({key2}):?query:",
      "name": "SenderDetailObjectPage",
      "target": "SenderDetailObjectPage"
    }
  ],
  "targets": {
    "SenderDetailAllObjectPage": {
      "type": "Component",
      "id": "SenderDetailAllObjectPage",
      "name": "sap.fe.templates.ObjectPage",
      "options": {
        "settings": {
          "editableHeaderContent": false,
          "contextPath": "/SenderDetailAll",
          "navigation": {
            "_SenderDetail": {
              "detail": {
                "route": "SenderDetailObjectPage"
              }
            }
          }
        }
      }
    },
    "SenderDetailObjectPage": {
      "type": "Component",
      "id": "SenderDetailObjectPage",
      "name": "sap.fe.templates.ObjectPage",
      "options": {
        "settings": {
          "editableHeaderContent": false,
          "contextPath": "/SenderDetailAll/_SenderDetail"
        }
      }
    }
  }
}

Answer 1

The navTo function takes the name of the route not the pattern.

  oRouter.navTo("SenderDetailAllObjectPage", { key: "1" });

So this should work for you.