CODEWITHSUNDEEP
sapui5
Sasku
Sasku

Reputation: 516

Routing View Loading

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?

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

        "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!

Upvotes: 1

Views: 1087

Answers (1)

Cmdd
Cmdd

Reputation: 897

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.

Upvotes: 4

Related Questions