Skip to Content

Basic steps for navigation between two views using SAPUI5

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

Be the first to leave a comment
You must be Logged on to comment or reply to a post.