Need help in routing and passing parameters to another view ? Find it here. (Eclipse IDE)

[Former Member]

Hello Everyone,

In this blog post we will learn how to navigate to a different view through the concept of routing and pass the data/parameters to that view.

Below is the step by step procedure:

1. Create a new SAPUI5 application project in Eclipse IDE.
   
   
   
   
2. In the Create a New View window, provide the initial view name and choose the type of view as XML.
   
   
   
   
   
3. As we require two views to for the navigation, create another view called “SecondView” of the same type (XML).
   Note: Here we require one more view which is a kind of container of all the views in the application. Create one more view and name this view as “MainView”.
   
   
4. After the above steps, we create an initialComponent.jsfile in theWebContentfolder that will hold our application setup. The init function of the component is automatically invoked by SAPUI5when the component is instantiated. Our component inherits from the base classsap.ui.core.UIComponentand it is obligatory to make the super call to theinitfunction of the base class in the overriddeninitmethod.

The structure of the project now looks like :

5.  Now, we are ready with the creation of all the files required, let’s go step by step and add the code in these files.

Index.html


On the index page we now instantiate the component instead of the view. The helper method sap.ui.core.ComponentContainer instantiates the component by searching for a Component.js file in the namespace that is passed in as an argument. The component automatically loads the root view that we have defined above and displays it. If you now call the index.html file, the app is now packaged into a UI component.

Note : Please remember to change the path of controller in the views and controllers, since we added a property data-sap-ui-resourceroots='{"NavigationDemo": "./"}'. Append "NavigationDemo." before the already existing path.

FirstView.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

        controllerName="NavigationDemo.navigationdemo.FirstView" xmlns:html="http://www.w3.org/1999/xhtml">

    <Page title="Navigation Demo">

        <content>

            <VBox>

                <HBox>

                    <Label text="Username" class="sapUiSmallMargin" />

                    <Input type="Text" placeholder="Enter the username.." id="idUserName" />

                </HBox>

                <HBox>

                    <Label text="Email ID" class="sapUiSmallMargin" />

                    <Input type="Email" placeholder="Enter the email id.." id="idEmail"/>

                </HBox>

                <Button text="Go to the next view" type="Emphasized" class="sapUiSmallMargin" press="onButtonPress"/>

            </VBox>

        </content>

    </Page>

</core:View>

    FirstView.controller.js

sap.ui.controller("NavigationDemo.navigationdemo.FirstView", {

    onInit: function() {

    },

    onButtonPress: function(){

        //Setting the data to the model

        var username = this.getView().byId("idUserName").getValue();

        var email = this.getView().byId("idEmail").getValue();

        this.getView().getModel("Details").setData({

            username: username,

            email: email

            });

        //Navigating to second page

        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

        oRouter.navTo("secondView");

    }

});

     SecondView.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"

    xmlns="sap.m" controllerName="NavigationDemo.navigationdemo.SecondView"

    xmlns:html="http://www.w3.org/1999/xhtml">

    <Page title="Navigation Demo - Second View" showNavButton="true"

        navButtonPress="onNavBack">

        <content>

            <VBox>

                <Text text="{Details>/username}" class="sapUiSmallMargin" />

                <Text text="{Details>/email}" class="sapUiSmallMargin" />

            </VBox>

        </content>

    </Page>

</core:View>

     SecondView.controller.js

sap.ui.controller("NavigationDemo.navigationdemo.SecondView", {

    onNavBack: function(){

    

        //Navigating to second page

        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

        oRouter.navTo("firstView");

    }

});

     MainView.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

        controllerName="NavigationDemo.navigationdemo.MainView" xmlns:html="http://www.w3.org/1999/xhtml">

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

</core:View>

     Component.js

sap.ui.define([

    "sap/ui/core/UIComponent",

    "sap/ui/model/json/JSONModel"

], function(UIComponent, JSONModel){

    "use strict";

    return UIComponent.extend("NavigationDemo.Component",{

        metadata: {

            "version": "1.0.0",

            "rootView": {

                viewName: "NavigationDemo.navigationdemo.MainView",

                type: sap.ui.core.mvc.ViewType.XML

            },

            "dependencies": {

                "libs": ["sap.ui.core", "sap.m", "sap.ui.layout"]

            },

            "routing": {

                "config": {

                    "routerClass": "sap.m.routing.Router",

                    "viewType": "XML",

                    "viewPath": "NavigationDemo.navigationdemo",

                    "controlId": "app",

                    "controlAggregation": "pages"

                },

                  "routes": [

                         {

                             "pattern": "",

                             "name": "firstView",

                             "target": "firstView"

                         },

                         {

                             "pattern": "secondView",

                             "name": "secondView",

                             "target": "secondView"

                         }

                ],

                "targets": {

                    "firstView": {

                          "viewName": "FirstView"

                    },

                    "secondView": {

                          "viewName": "SecondView"

                    }

                }

            }

        },

  

        init: function(){

            UIComponent.prototype.init.apply(this, arguments);

            this.getRouter().initialize();

      

            //Creating a JSON model

            var oModel = new JSONModel();

            this.setModel(oModel,"Details");

        }

    });

});

Working :

First view :

Second view :

Thank You

Happy Coding!

Please provide your valuable feedback.
Ashutosh Hans