on 02-12-2014 10:40 AM
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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);
}
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
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)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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;
}
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.