Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

navigation using navContainer

Hi all,

How to navigate between pages using NavContainer concept?

Tags:
Former Member
Former Member replied

<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>

<script id='sap-ui-bootstrap' type='text/javascript'
  src='/sapui5/resources/sap-ui-core.js'
  data-sap-ui-theme='sap_bluecrystal'
  data-sap-ui-libs='sap.m'></script>
  <!-- add 'sap.ui.table' and/or other libraries if required -->

<script>
 
  var oPage1 = new sap.m.Page("page1",{
title: "Page1", // string
showNavButton: false, // boolean
showHeader: true, // boolean
navButtonText: undefined, // string
enableScrolling: true, // boolean
icon: undefined, // sap.ui.core.URI
backgroundDesign: sap.m.PageBackgroundDesign.Standard, // sap.m.PageBackgroundDesign
navButtonType: sap.m.ButtonType.Back, // sap.m.ButtonType, since 1.12
showFooter: true, // boolean, since 1.13.1
tooltip: undefined, // sap.ui.core.TooltipBase
   content:[new sap.m.Button({text:"Button in Page 1", press:function(oEvent){
    oAppContainer.addPage(oPage2);
    oAppContainer.to("page2");
   }})]
});
 
  var oPage2 = new sap.m.Page("page2",{
title: "Page2", // string
showNavButton: false, // boolean
showHeader: true, // boolean
navButtonText: undefined, // string
enableScrolling: true, // boolean
icon: undefined, // sap.ui.core.URI
backgroundDesign: sap.m.PageBackgroundDesign.Standard, // sap.m.PageBackgroundDesign
navButtonType: sap.m.ButtonType.Back, // sap.m.ButtonType, since 1.12
showFooter: true, // boolean, since 1.13.1
tooltip: undefined, // sap.ui.core.TooltipBase
   content:[new sap.m.Button({text:"Button in Page 2"})]
});
 
  var oAppContainer = new sap.m.App({initialPage : null,
   afterNavigate : function (oEvent) {
    alert('After Navigate');
   }
  });
 
  oAppContainer.addPage(oPage1);
  oAppContainer.fireAfterNavigate({});
 
  oAppContainer.placeAt('content');
</script>

</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>

1 View this answer in context

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question