Navigation between two views by using SAP UI5 - PART I

[karthikarjun]

Hi all,

Questions:

i wanna to navigate from one view to other view by using SAP UI5 project. what to do ? how to do?

Solution:

There are diiferent ways to navigate from one views to other.

- Using App Container

- Using Routing Concepts

- Declare and Destroy my view

Here i will show one simple example for navigation.

1. APP CONTAINER:

- SAP Mobile lib has this CLASS sap.m.App - it is a container which holds all your views at one place.

Index page:

<script>

  sap.ui.localResources("sap_web_nav");

  var view = sap.ui.view({id:"idV11", viewName:"sap_web_nav.V1", type:sap.ui.core.mvc.ViewType.JS});

  var view2 = sap.ui.view({id:"idV12", viewName:"sap_web_nav.V2", type:sap.ui.core.mvc.ViewType.JS});

  var app = new sap.m.App({

  id:"myApp"

  });

  app.addPage(view );

  app.addPage(view2 );

  app.placeAt("content");

    </script>

Here we added our two views in one single app container,

View1 :

  var oControllerElements = [];

  var oMatrix = new sap.ui.commons.layout.MatrixLayout({

  columns : 2

  });

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

  text  : "Click",

  press : oController.handlePressClickMe

  });

  oMatrix.createRow(new sap.ui.commons.Label({text : "Name"}), new sap.ui.commons.TextField({id:"idTextFieldName"}));

  oControllerElements.push(oMatrix);

  oControllerElements.push(oButton);

  return oControllerElements;

View 1 controller.js:

handlePressClickMe : function(){

  sap.ui.getCore().byId("myApp").to("idV12");

  sap.ui.getCore().byId("idV2Label").setText("My Name is: "+sap.ui.getCore().byId("idTextFieldName").getValue());

}

so by using "to" property from sap.m.app API we can easy to navigate from one view to other view

Thanks,

Karthik A