cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

navigation using navContainer

Go to solution
Former Member

on ‎01-14-2015 4:24 AM

0 Kudos

Hi all,

How to navigate between pages using NavContainer concept?

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎01-14-2015 6:14 AM
0 Kudos


Hi Indu,

These links might help you.

Events fired on the Pages

Handling Navigation and Lifecycle Events

Passing Data when Navigating

Thank you.

Regards,

              Pruthvi.

Show replies
Show replies
Former Member
‎01-14-2015 8:42 AM
0 Kudos

Hi prithvi,

Thanks for the reply. Can you provide some sample code which uses NavContainer concept to navigate between views ?

Thanks & Regards

Indrajith

Former Member
‎01-14-2015 9:03 AM
0 Kudos

<!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>

Former Member
‎01-14-2015 9:03 AM
0 Kudos

Hope this example helps.

Thank you.

Regards,

               Pruthvi.

Former Member
‎01-14-2015 9:29 AM
0 Kudos

Hi Pruthivi,

In the above example you used sap.m.App control. Just wanted to know if we can use sap.m.Navcontiner instead of sap.m.App??

Regards,

Varun V

Former Member
‎01-14-2015 9:32 AM
0 Kudos

Yes Varun,

You can use NavContainer instead, App is a direct subclass of NavContainer.

Thank you.

Regards,

               Pruthvi.

Former Member
‎01-14-2015 10:00 AM
0 Kudos

Thanks Pruthvi.

Former Member
‎01-14-2015 11:56 AM
0 Kudos

Hi Pruthvi,

I just used NavContainer instead of sap.m.App and after running the code i am not getting any output. Also, checked the browsers console for errors and there were no errors. Can you please assist me on this.

<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",

     press:function(oEvent){

      oAppContainer.addPage(oPage1);

      oAppContainer.to("page1");   

     } 

     

     

     

      })]

   });

    

     var oAppContainer = new sap.m.NavContainer({initialPage : null,

      afterNavigate : function (oEvent) {

         alert('After Navigate');

        }

     });

    

     oAppContainer.addPage(oPage1);

     oAppContainer.fireAfterNavigate({});

    

     oAppContainer.placeAt('content');

  </script>

Former Member
‎01-14-2015 12:05 PM
0 Kudos

Hi Varun.

Set Height and width that should solve the issue.

Ex :-

<!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.ui.commons,sap.ui.ux3,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",

     press:function(oEvent){

      oAppContainer.addPage(oPage1);

      oAppContainer.to("page1");   

     } 

     

     

     

      })]

   });

    

     var oAppContainer = new sap.m.NavContainer({initialPage : null,
             width :"98%",
             height:"16em",

      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>

Thank you.

Regards,

              Pruthvi.

Former Member
‎01-14-2015 12:23 PM
0 Kudos

Hi Pruthuvi,

Yes it worked after setting the width and height. Just wanted to know why is it required to add width and height especially for navcontainer to work?

Regards,

Varun V

Former Member
‎01-14-2015 12:24 PM
0 Kudos

It is a known bug, but has been fixed in app.

Former Member
‎01-14-2015 12:26 PM
0 Kudos

Thanks for the inputs pruthvi.

Former Member
‎01-14-2015 5:28 PM
0 Kudos

Please mark answer if you found it useful.

Thank you.

Regards,

             Pruthvi.

Answers (1)

Answers (1)

Former Member
‎01-14-2015 9:16 AM
0 Kudos

thank you pruthvi.

Regards

Indrajith

Show replies
Show replies
agentry_src
Active Contributor
‎01-14-2015 12:18 PM
0 Kudos

Please mark this Discussion with a Correct Answer and Helpful Answer where appropriate.  See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.

Regards, Mike
SAP Customer Experience Group - CEG

Ask a Question