Skip to Content

1) In this demo I would like to show how to navigate through multiple views and controllers.

2)  In the first page “PAGE1” ,message will be prompted to enter first name.Pressing the submit button will navigate to “PAGE2”


Capture.JPG


   3) In the second page , first name will be displayed and  message will be prompted to enter last  name.Pressing the submit button will navigate to “PAGE3”.

Capture_1.JPG


    4) In the third page “PAGE3” both first name and last name will be displayed:


Capture_2.JPG


Pre-Requisites for this demo :  

  1. a) Eclipse Mars  with  SAP UI5 Installed
  2. b) Tomcat server 7.0

Lets start the demo.

Step1 : Create new Application Project

File->New->Other->SAPUI5 Application Development->Application Project-> Enter name “FioriDemo” ->Enter initial view name as “Page1” -> Click Finish


Capture_3.JPG



Capture_4.JPG


Capture_5.JPG



Step 2: In the index.html , enter the below code:

<!DOCTYPE HTML>

<html>

      <head>

            <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

            <meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>

            <script src=“resources/sap-ui-core.js”

                        id=“sap-ui-bootstrap”

                        data-sap-ui-libs=“sap.m,sap.ui.commons,sap.ui.ux3”

                        data-sap-ui-theme=“sap_bluecrystal”>

            </script>

            <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

            <script>

                        sap.ui.localResources(“fioridemo”);

  1. jQuery.sap.require(“sap.ui.core.routing.Router”);

                    

                        console.log(“router initialised”);

                    

                        jQuery.sap.require(“sap.ui.core.routing.HashChanger”);

                    

                        console.log(“Hash changer initialised”);

                    

                        var oShell = sap.ui.ux3.Shell(“shellId”,{

                              appTitle: “fioridemo”,

                              showLogoutButton: false,

                              showSearchTool: false,

                              worksetItems: [

                                          new sap.ui.ux3.NavigationItem(“page1Id”,{

                                                key: “Page1”,

                                                text: “Page1”

                                          }),

                                          new sap.ui.ux3.NavigationItem(“page2Id”, {

                                                key: “Page2”,

                                                text: “Page2”

                                          }),

                                          new sap.ui.ux3.NavigationItem(“page3Id”, {

                                                key: “Page3”,

                                                text: “Page3”

                                          })

                              ],

                              worksetItemSelected: function(e) {

                                    this.removeAllContent();

                                

                                    var selected = e.getParameter(“key”);

                                

                                    var oHashChanger = new sap.ui.core.routing.HashChanger();

                                    oHashChanger.setHash(router.getURL(selected));

                                

                              },

                              content: [new sap.ui.view({

                                    id: “view1Id”,

                                    viewName: “fioridemo.Page1”,

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

                              })]

                          

                        });

                    

                        console.log(“shell variable created”);

                    

                        oShell.placeAt(‘container’);

                    

                        console.log(“shell placed at container”);

                    

                        var router = new sap.ui.core.routing.Router([

                           {

                                 pattern: “”,

                                 name: “Page1”,

                                 view: “fioridemo.Page1”,

                                 viewType: sap.ui.core.mvc.ViewType.JS,

                                 targetControl: “shellId”,

                                 targetAggregation: “content”, //content/Page

                                 clearTarget: true,

                                 callback: function() {

                                       oShell.setSelectedWorksetItem(“page1Id”);

                                 }

                           },

                           {

                                 pattern: [“Navigate2”, “Page2”],

                                 name: “Page2”,

                                 view: “fioridemo.Page2”,

                                 viewType: sap.ui.core.mvc.ViewType.JS,

                                 targetControl: “shellId”,

                                 targetAggregation: “content”,

                                 clearTarget: true,

                                 callback: function() {

                                       oShell.setSelectedWorksetItem(“page2Id”);

                                 }

                           } ,

                           {

                                 pattern: [“Navigate3”, “Page3”],

                                 name: “Page3”,

                                 view: “fioridemo.Page3”,

                                 viewType: sap.ui.core.mvc.ViewType.JS,

                                 targetControl: “shellId”,

                                 targetAggregation: “content”,

                                 clearTarget: true,

                                 callback: function() {

                                       oShell.setSelectedWorksetItem(“page3Id”);

                                 }

                           }

                                                                 

                                                                 

                        ]);

                    

                        console.log(“router created”);

                    

                        router.register(“appRouter”);

                    

                        console.log(“router registerd”);

                    

                        router.initialize();

                    

                        console.log(“router initialized”);

            </script>

      </head>

      <body class=“sapUiBody” role=“application”>

            <div id=“container”></div>

      </body>

</html>



Step 3:  In the Page1.view.js  , enter the below code:

  1. sap.ui.jsview(“fioridemo.Page1”, {

      /** Specifies the Controller belonging to this View.

      * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

      * @memberOf fioridemo.Page1

      */

      getControllerName : function() {

            return “fioridemo.Page1”;

      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

      * Since the Controller is given to this method, its event handlers can be attached right away.

      * @memberOf fioridemo.Page1

      */

      createContent : function(oController) {

        

            var oText = new sap.ui.commons.TextView({

                  text: “Enter First Name: “

            })

        

            var oInput = new sap.ui.commons.TextField(this.createId(“fname”),{

                  value: “Varun”

            });

        

            var oButton = new sap.ui.commons.Button({

                  text: “submit”,

                  press: function() {

                        oController.navigateToPage2(“Page2”);

                  }

            });

        

            var ele = [oText, oInput, oButton];

        

            return ele;

        

      }

});



Step 4 : In Page1.controller.js enter the below code:

  1. sap.ui.controller(“fioridemo.Page1”, {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other onetime initialization.

* @memberOf fioridemo.Page1

*/

      onInit: function() {

            this.myModel = new sap.ui.model.json.JSONModel();

      },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller’s View is rerendered

* (NOT before the first rendering! onInit() is used for that one!).

* @memberOf fioridemo.Page1

*/

//    onBeforeRendering: function() {

//

//    },

/**

* Called when the View has been rendered (so its HTML is part of the document). Postrendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

* @memberOf fioridemo.Page1

*/

//    onAfterRendering: function() {

//

//    },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf fioridemo.Page1

*/

//    onExit: function() {

//

//    }

  

      navigateToPage2: function(view) {

        

            var json = {};

            json.fname = sap.ui.getCore().byId(this.createId(“fname”)).getValue();

        

            this.myModel.setData(json);

        

            sap.ui.getCore().setModel(this.myModel);

        

            var oRouter = sap.ui.core.routing.Router.getRouter(“appRouter”);

        

            oHashChanger = sap.ui.core.routing.HashChanger.getInstance();

        

            oHashChanger.setHash(oRouter.getURL(view));

        

        

      }

});



Step 5 : Create new view “Page2” and “Page3”.

File->New->Other->SAPUI5 Application Development->View-> Enter name “Page2”.

File->New->Other->SAPUI5 Application Development->View-> Enter name “Page3”.

In the  “Page2.view.js”  enter the below code:

  1. sap.ui.jsview(“fioridemo.Page2”, {

      /** Specifies the Controller belonging to this View.

      * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

      * @memberOf fioridemo.Page2

      */

      getControllerName : function() {

            return “fioridemo.Page2”;

      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

      * Since the Controller is given to this method, its event handlers can be attached right away.

      * @memberOf fioridemo.Page2

      */

      createContent : function(oController) {

        

        

            var oText = new sap.ui.commons.TextView({

                  text: “Your First Name is: “

            });

        

            var oInput = new sap.ui.commons.TextField(this.createId(“fname”),{

                  value: “{/fname}”

            });

        

        

            var oText1 = new sap.ui.commons.TextView({

                  text: “Enter Last Name: “

            })

        

            var oInput1 = new sap.ui.commons.TextField(this.createId(“lname”),{

                  value: “cbv”

            });

        

        

        

            var oButton = new sap.ui.commons.Button({

                  text: “submit”,

                  press: function() {

                        oController.navigateToPage3(“Page3”);

                  }

            });

        

            var ele = [oText,oInput,oText1, oInput1, oButton];

        

            return ele;

      }

});

In the Page2.controller.js enter the below code:

  1. sap.ui.controller(“fioridemo.Page2”, {

      /**

      * Called when a controller is instantiated and its View controls (if available) are already created.

      * Can be used to modify the View before it is displayed, to bind event handlers and do other onetime initialization.

      * @memberOf fioridemo.Page1

      */

            onInit: function() {

                  this.myModel = new sap.ui.model.json.JSONModel();

            },

      /**

      * Similar to onAfterRendering, but this hook is invoked before the controller’s View is rerendered

      * (NOT before the first rendering! onInit() is used for that one!).

      * @memberOf fioridemo.Page1

      */

//          onBeforeRendering: function() {

      //

//          },

      /**

      * Called when the View has been rendered (so its HTML is part of the document). Postrendering manipulations of the HTML could be done here.

      * This hook is the same one that SAPUI5 controls get after being rendered.

      * @memberOf fioridemo.Page1

      */

//          onAfterRendering: function() {

      //

//          },

      /**

      * Called when the Controller is destroyed. Use this one to free resources and finalize activities.

      * @memberOf fioridemo.Page1

      */

//          onExit: function() {

      //

//          }

        

            navigateToPage3: function(view) {

              

                  var json = {};

                  json.fname = sap.ui.getCore().byId(this.createId(“fname”)).getValue();

                  json.lname = sap.ui.getCore().byId(this.createId(“lname”)).getValue();

              

                  this.myModel.setData(json);

              

                  sap.ui.getCore().setModel(this.myModel);

              

                  var oRouter = sap.ui.core.routing.Router.getRouter(“appRouter”);

              

                  oHashChanger = sap.ui.core.routing.HashChanger.getInstance();

              

                  oHashChanger.setHash(oRouter.getURL(view));

              

              

            }

      });

In the Page3.view.js , enter the below code:

  1. sap.ui.jsview(“fioridemo.Page3”, {

      /** Specifies the Controllerbelonging to this View.

      * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

      * @memberOf fioridemo.Page3

      */

      getControllerName : function() {

            return “fioridemo.Page3”;

      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

      * Since the Controller is given to this method, its event handlers can be attached right away.

      * @memberOf fioridemo.Page3

      */

      createContent : function(oController) {

        

            var oText0 = new sap.ui.commons.TextView({

                  text: “Your Full Name is :”

            });

            var oText = new sap.ui.commons.TextView({

                  text: “{/fname}”

            });

        

            var oText1 = new sap.ui.commons.TextView({

                  text: “{/lname}”

            });

            var ele = [oText0,oText,oText1];

        

            return ele;

      }

});



Step 6 : Run the application

Right click “index.htm”->Run On Server->Select Tomcat 7->Select the current project and press Finish.


Capture_5.JPG


Capture_6.JPG






Capture_6.1.JPG




Enter the First Name and press “submit” button:

Capture_7.JPG



PAGE2 will be dispayed .First name from PAGE1  is  displayed ,also enter the last name and press “submit” button.


Capture_8.JPG


PAGE3 will be displayed with the following output:


Capture_9.JPG











































To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply