Hi Guys,

I am writing down a very basic example of how to navigate between two views. I am using just one button per view for navigation so that it is easy to understand what exact steps would be required:

Create a New Application Project and two views: InitialView and FinalView.


Index.html:

<!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.ui.commons”

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

  </script>

  <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui-libs’ if required –>

  <script>

  sap.ui.localResources(“products”);

  var view = sap.ui.view({id:”View1″, viewName:”products.InitialView“, type:sap.ui.core.mvc.ViewType.JS});

  view.placeAt(“content”);

  </script>

  </head>

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

  <div id=”content”></div>

  </body>

</html>

InitialView.view.js:

sap.ui.jsview(“products.InitialView“, {

  /** 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 products.InitialView

  */

  getControllerName : function() {

  return “products.InitialView“;

  },

  /** 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 products.InitialView

  */

  createContent : function(oController) {

  var oButton = new sap.ui.commons.Button({text:”Go to Final View”, width:’200px’, press: function()

    {

    oController.doIt();

    }

  });

  return oButton;

 

  }

});

FinalView.view.js:

sap.ui.jsview(“products.FinalView”, {

  /** 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 products.FinalView

  */

  getControllerName : function() {

  return “products.FinalView“;

  },

  /** 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 products.FinalView

  */

  createContent : function(oController) {

  var oButton = new sap.ui.commons.Button({text:”Go back to Initial View”, width:’200px’, press:function()

    {

    oController.goBack();

    }

  });

return oButton;

  }

});


InitialView.controller.js:

sap.ui.controller(“products.InitialView“, {

  doIt: function (){

  sap.ui.getCore().byId(“View1“).removeAllContent();

  sap.ui.getCore().byId(“View1“).addContent(sap.ui.jsview(“products.FinalView“));

}

});

FinalView.controller.js:

sap.ui.controller(“products.FinalView“, {

  goBack: function (){

  sap.ui.getCore().byId(“View1“).removeAllContent();

  sap.ui.getCore().byId(“View1“).addContent(sap.ui.jsview(“products.InitialView“));

}

});

Output:


Initial View:

Capture.PNG

On click of above button, go to Final View:

Capture1.PNG

On click of above button, control would go back to initial view.

Hope it helps.

Thanks,

Taran

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