Routing View Loading - sapui5

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!

Answer 1

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 look at the tutorial Navigation and Routing.