Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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:

On click of above button, go to Final View:

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

Hope it helps.

Thanks,

Taran

Labels in this area