cancel
Showing results for 
Search instead for 
Did you mean: 

Navigation between views in SAPUI5

arindam_samanta
Participant
0 Kudos

Hi Experts,

How to navigate between views with in a single apps in SAPUI5?

Could you please provide a simple example having two views using XML code with deatil steps. That will help to get understabd the whole process on this regard.

One thing: The two view code should be in XML view , not JS view.

Thanks & regards,

Arindam Samanta.

Accepted Solutions (0)

Answers (5)

Answers (5)

Former Member
0 Kudos

Hi Arindam Samanta,

Check this out

Hope this will help you

Cheers,

Samba

rauf_shaikh
Active Participant
0 Kudos

Hi Arindam,

I have created one very simple demo sapui5 application which consist of two XML views and it will show how to navigate from one XML view to another.

Just go and download the example application zip and import it into your Eclipse.

Click Here to download.

Add alert messgaes whereve neccessory to understand the flow of the application

I hope this helps you.

Regards,

Rauf

0 Kudos

Hi  Rauf,

I am not able to navigate the two XML views

My index.html is


  <script>

  sap.ui.localResources("ghmanagesystem");

  //var app = new sap.m.App({initialPage:"idGHFirst1"});

  var page2 = sap.ui.view({id:"idGHLoginForm1", viewName:"ghmanagesystem.GHLoginForm", type:sap.ui.core.mvc.ViewType.XML});

  var page = sap.ui.view({id:"idGHFirst1", viewName:"ghmanagesystem.GHFirst", type:sap.ui.core.mvc.ViewType.XML});

  var app = new sap.m.App("id1",{pages:[page2], initialPage:"idGHFirst1"});

  app.addPage(page);

  app.addPage(page2);

  app.placeAt("content");

  </script>

GHFirst,controller.xml


onButtonClick : function(){

  alert("onButtonClick");

  var bus = sap.ui.getCore().getEventBus();

  bus.publish("nav", "to", {

  id : "GHLoginForm",

  data :{

  key : "HI"

  }

  });

  }

GHLoginForm.controller.xml


onInit: function() {

  this.getView().addEventDelegate({

  onBeforeShow : jQuery.proxy(function(oEvt) {

  this.onBeforeShow(oEvt);

  }, this)

  });

  },

  onBeforeShow : function(oEvent){

  var data = oEvent.data.key;

  },

I have written this controllers and index file. Please review this code..

Regards,

Prashant

murmelssonic
Active Participant
0 Kudos

Very handy code Rauf, just what I needed to avoid all the subrouting in Component.js and gets round the lack of being able to specify onBeforeShow in the View code (i.e. in the non-JS View code of XML).

Thanks!

former_member189237
Participant
0 Kudos

Hi Rauf,

I have an example of xml views. But I am not able to navigate from one view to other view. And also not able to download the example you provided above. Please help me

Thanks

Navdeep

Former Member
0 Kudos

Hi find the below code

App.js

createContent: function (oController) {

  // create app

  this.app = new sap.m.SplitApp();

  // load the master page

  var master = sap.ui.xmlview("Master", "sap.ui.demo.myFiori.view.Master");

  master.getController().nav = this.getController();

  this.app.addPage(master, true);

  // load the empty page

  var empty = sap.ui.xmlview("Empty", "sap.ui.demo.myFiori.view.Empty");

  this.app.addPage(empty, false);

  return this.app;

  }

View1.xml

<core:View

  controllerName="sap.ui.demo.myFiori.view.View1"

  xmlns="sap.m"

  xmlns:core="sap.ui.core" >

<Page

  title="View1"

  >

***add ur contents***

*** on press call controller*****

press="OnPress"

********************************

<footer>

  <Bar>

</Bar>

  </footer>

  </Page>

</core:View>

View1.controller


**within controller**



OnPress : function (evt) {

var context = evt.getSource().getBindingContext();

this.nav.to("View2", context);

}



*******************************************************************************************

View2.xml

within view2****

<Page

  title="View2"

  showNavButton="true"

  navButtonPress="handleNavBack" >

**ur content**

</Page>

View2.controller


**within controller**

handleNavBack : function (evt) {

  this.nav.back("View1");

  }

****************************************************

Regards

Pavan

Former Member
0 Kudos

Hi Pavan,

          Thanks for your example code. But I'm unable to navigate back to my first view. I tried various ways to navigate but i failed. In my project i have a Login screen and home screen. Once i logged in and i'm in the home page, i have button when clicked opens a popover with two buttons when i click the yes button to logout i should go to the Login page. Please help me out solve this.

below is my code to popover.

handleLogout : function(evt) {

  var oLogout = this.byId("logoutBtn");

  var oPopover = new sap.m.Popover(

  {

  showHeader : false,

  contentWidth : "150px",

  contentHeight : "50px",

  placement : sap.m.PlacementType.Top,

  content : [ new sap.m.Label({

  text : "Logout?",

  contentWidth : "15%",

  contentHeight : "15%",

  footer : [ new sap.m.Bar({

  contentMiddle : [

  new sap.m.Button({

  text : "Yes"

  }), new sap.m.Button({

  text : "No"

  }) ]

  }) ]

  }) ],

  footer : new sap.m.Bar(

  {

  contentMiddle : [

  new sap.m.Button(

  {

  text : "Yes",

  press : function(evt) {

  this.nav.back("Login");

  }

  }),

  new sap.m.Button(

  {

  text : "No",

  press : function() {

  oPopover.close();

  }

  }) ]

  }),

  });

  oPopover.openBy(oLogout);

  }

Former Member
0 Kudos

Hi Moulika


Please find the attached files it contains the index.html file, view1.view.js(login page), view2.view.js(Main page with popup) in .txt format, according to your requirement.

Hope this helps


Let me know if any issue.


Regards,

Pavan

Former Member
0 Kudos

Hi Pavan,

          Thank you so much for ur Files. Now I'm able to Navigate my views.

Regards,

Moulika

ranjit_rao
Participant
0 Kudos

Hi Pavan,

Even I was trying  to add a zipped content to a reply, but it did not allow me saying .zip is not an allowed attachments' format.
How did you attach these zip files

Former Member
0 Kudos

Hi Pavan,

Thanks for your inputs. I have tried with your files but not able to navigate between views. Iam getting error like "Uncaught TypeError: Cannot read property 'to' of undefined" after clicking on login button

Please help me in this issue.

Thanks in advance

Regards,

Raghu.

Former Member
0 Kudos

Navigation concept wont change accord to views. It's the same for JS View , XML Views. The View Navigation will be handled only in the controller. See here for details on Navigation

Documentation/AdvancedTopics/Navigation – SAPUI5 Wiki (TIP CORE User Interface)

Documentation/AdvancedTopics/Mobile/BestPractice/Navigation – SAPUI5 Wiki (TIP CORE User Interface)...

Former Member
0 Kudos

This message was moderated.

Former Member
0 Kudos

Maybe you can use this to convert the code:

Regards,

RW

arindam_samanta
Participant
0 Kudos

Hi Robbe,

Yes, I saw this tool. Its a very good tool and helps to reduce development time. But I am not able to get the view navigation. Could you please provide a simple application havig two views and navigation button to navigate between two views.

Thanks & Regards,

Arindam Samanta.

Former Member
0 Kudos

Arindam,

I only work with JS views, so I won't be able to help you.

Regards,

RW

arindam_samanta
Participant
0 Kudos

Hi Robbe,

Thank you Robbe for you kind response. No problem...

arindam_samanta
Participant
0 Kudos

Hi Robbe,

Could you please provide same thing with JS views...

I can convert the whole application from JS view to XML view. It will help me also. I can work with that and could be able to complete my requirement.

Thank & Regards,

Arindma Samanta.

Former Member
0 Kudos

I always use a container, defined in the index.html file. With the setContent() method I define the content. So if I want to show the login view, I fill that container with the view. When I press the login button, I change the content of the container, with e.g. the list view.

e.g.

In the index.html file:


var login_view = sap.ui.view({id:"idLogin", viewName:"incident_desktop_web_app.Login", type:sap.ui.core.mvc.ViewType.JS});

var list_view = sap.ui.view({id:"idList", viewName:"incident_desktop_web_app.List", type:sap.ui.core.mvc.ViewType.JS});

Container


var oShell = new sap.ui.ux3.Shell(....);

oShell.addContent(login_view);

The function called when you press the login button (in the controller of the login view)


shell.setContent(sap.ui.getCore().byId("idList"));

As you can see, in the index.html I can refer to the var name "login_view". Once outside index.html, I use the id "idList".

I hope this is enough information.

Kind regards,

RW

arindam_samanta
Participant
0 Kudos

Hi Robbe,

Thanks for your reply.

Could you please create a demo apps for the same in JSbin and send me the link. It is more helpful for me.

Regards,

Arindam Samanta.

Former Member
0 Kudos

Index.html


<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <script src="resources/sap-ui-core.js"

                id="sap-ui-bootstrap"

                data-sap-ui-libs="sap.ui.commons"

                data-sap-ui-theme="sap_goldreflection">

        </script>

        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>

                sap.ui.localResources("navigation");

                var view1 = sap.ui.view({id:"idView1", viewName:"navigation.View1", type:sap.ui.core.mvc.ViewType.JS});

                var view2 = sap.ui.view({id:"idView2", viewName:"navigation.View2", type:sap.ui.core.mvc.ViewType.JS});

               

                var container = new sap.ui.commons.Panel("idContainer");

                container.setTitle(new sap.ui.core.Title({text: "This is view 1"}));

                container.addContent(view1);

               

               

               

                container.placeAt("content");

        </script>

    </head>

    <body class="sapUiBody" role="application">

        <div id="content"></div>

    </body>

</html>

View1.view.js


sap.ui.jsview("navigation.View1", {

    /** 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 navigation.View1

    */

    getControllerName : function() {

        return "navigation.View1";

    },

    /** 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 navigation.View1

    */

    createContent : function(oController) {

        var button = new sap.ui.commons.Button("idButton1", {

            text: "to view 2",

            press: function (oEvent){

                sap.ui.getCore().byId("idContainer").removeAllContent();

                sap.ui.getCore().byId("idContainer").addContent(sap.ui.getCore().byId("idView2"));

                sap.ui.getCore().byId("idContainer").setTitle(new sap.ui.core.Title({text: "This is view 2"}));

            }

        })

   

    return button;

    }

});

View2.view.js


sap.ui.jsview("navigation.View2", {

    /** 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 navigation.View2

    */

    getControllerName : function() {

        return "navigation.View2";

    },

    /** 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 navigation.View2

    */

    createContent : function(oController) {

        var button = new sap.ui.commons.Button("idButton2", {

            text: "to view 1",

            press: function (oEvent){

                sap.ui.getCore().byId("idContainer").removeAllContent();

                sap.ui.getCore().byId("idContainer").addContent(sap.ui.getCore().byId("idView1"));

                sap.ui.getCore().byId("idContainer").setTitle(new sap.ui.core.Title({text: "This is view 1"}));

            }

        })

   

    return button;

    }

});

former_member184741
Active Contributor
0 Kudos

thanks robbe..nice and clear code