Routing View Loading

Question

I currently try to learn UI5 and right now the concept of routing. My current use case is, that the user selects one radio button out of a group and then presses a button. On my second view it should show the selected radio button.

I've set up both views, the routes and the targets. But it somehow does not want to load the View. If I have a look at the URL it enters the pattern of the route into it but it does not load the view - is there anything I need to do?

The rounter is initialized in the component.js
After I clicked the button the following method gets called:

this.getOwnerComponent().getRouter().navTo("overview");

this is my routing config:

        "flexEnabled": false,
        "rootView": {
            "viewName": "com.enh.ess.com.enh.ess.view.Booking",
            "type": "XML",
            "async": true,
            "id": "Booking"
        },
        // some stuff in between 
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "com.ess.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false,
                "bypassed": {
                    "target": "noFound"
                }
            },
            "routes": [
                {
                    "name": "home",
                    "pattern": "",
                    "target": "booking_tar"
                },
                {
                    "name": "overview",
                    "pattern": "overviewBooking",
                    "target": "Overview"
                }
            ],
            "targets": {
                "booking_tar": {
                    "viewType": "XML",
                    "transition": "slide",
                    "viewId": "Booking",
                    "viewName": "Booking"
                },
                "Overview": {
                    "viewType": "XML",
                    "viewName": "Overview"
                },
                "notFound": {
                    "viewId": "notFound",
                    "viewType": "XML",
                    "viewName": "NotFound",
                    "transition": "show"
                }
            }
        }

my rootView ( Booking.view.xml ) is built like this ( I've removed some stuff here, like the attributes for the buttons or the path of the contrllerName - and I added one "comment" for the button ):


<mvc:View controllerName="" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:layout="sap.ui.layout">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                        <layout:VerticalLayout>
                            <RadioButtonGroup id="" columns="1"/>
                            <layout:HorizontalLayout>
                                <Button /> <-- when this button gets clicked it should load the new view
                                <Button /> 
                            </layout:HorizontalLayout>
                        </layout:VerticalLayout>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

in my view Booking.view.xml I have the button. After I click it, it should navigate to the overview target / the Overview.viewl.xml - and as I said, it writes the value into the URL, but it doesn't load the view.

Do you have any idea what I also need to do? I've tried some things ( like view levels, that didn't work )

I am currently working in the WebIDE - if this is relevant for this.

thank you!

In your manifest.json, section "sap.ui5", what is your "rootView"? Also, how are structured your rootView and views? Maybe that's the point... — Cmdd
Ok, I think that's the point. First of all, I don't know if is a typo, the controllerName is missing in your Booking view. I suggest you to implement a more cleaner (in my opinion) structure for the routing, using a App.view.xml as rootView. I'll try to explain in a proper answer as soon as I can — Cmdd
Does this answer your question? Why Is My Main Controller Being Called Twice? — Boghyon Hoffmann
@BoghyonHoffmann I need to have a look on this if this will solve it, but yeah, my Main Controller got called twice - but now I've learned a new thing! Thanks! — Sasku

Cmdd Cmdd · Accepted Answer · 2021-04-20T08:55:25

I suggest you to use a different strategy for the XML "encapsulation" to better exploit the routing mechanism: create an (almost) empty root view, such as App.view.xml, as follows:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
  <App id="idAppControl">
    <pages>
      <!-- Routed views are added here -->
    </pages>
  </App>
</mvc:View>

Modify your manifest accordingly

In /sap.ui5/rootView:

{
  "viewName": "your.namespace.view.App",
  "type": "XML",
  "async": true
},

and in /sap.ui5/routing/config:

{
  "routerClass": "sap.m.routing.Router",
  "viewType": "XML",
  "async": true,
  "viewPath": "your.namespace.view",
  "controlAggregation": "pages",
  "controlId": "idAppControl"
},

Please note that the controlId and the ID of the <App> must be the same. Now you've prepared the "container" for your routes and your Views can be simplified as follows:

<mvc:View controllerName="your.namespace.controller.Booking"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page title="title" class="sapUiResponsiveContentPadding">
    <content>
      <!-- Your content here -->
    </content>
  </Page>
</mvc:View>

Same structure also for your detail page. Please remember that your Home page should have an empty routing pattern ("pattern" : "") in order to be the first hit route.

To learn more, take a loot at the tutorial Navigation and Routing.

Routing View Loading

1 Answers