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: 

XML View : Navigation between two views

sanketchimalwar
Participant

on ‎01-07-2015 2:23 PM

0 Kudos

Hi ,

I have created a simple application for navigation between two view. The first view is "login" and the second view is "forgot". I am trying to achieve navigation when i click on the URL "forgot password" in "login" view.

To confirm if the event controllers are working, I inserted a alert message which works fine on URL press. But when i insert the code app.to(""idlogin1"")  , it doesn't work showing error in the line. "app is not defined". This issue also comes with JS views.

Following is the code for all the files.

Index.HTML

<!DOCTYPE HTML>

<html>

  <head>

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

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

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

  id="sap-ui-bootstrap"

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

  data-sap-ui-resourceroots='{"view": "./"}'

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

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.localResources("view");

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

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

  var page1 = sap.ui.view({id:"idlogin1", viewName:"view.forgot", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page).addPage(page1);

  app.placeAt("content");

  </script>

  </head>

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

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

  </body>

</html>

login.view.xml

<sap.ui.core.mvc:View controllerName="view.login"

    xmlns="sap.m"

    xmlns:sap.ui.layout.form="sap.ui.layout.form"

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

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

    <Page title="Title">

        <content>

            <sap.ui.layout.form:SimpleForm id="form0" editable="false" layout="ResponsiveGridLayout">

                <sap.ui.layout.form:content>

                    <sap.ui.core:Title text="Title"></sap.ui.core:Title>

                    <Label text="Username"></Label>

                    <Input width="100%"></Input>

                    <Label text="Password"></Label>

                    <Input width="100%"></Input>

                    <Button id="button0" text="Button" width="100px"></Button>

                    <Link id="link0" text="Forgot Password"></Link>

                </sap.ui.layout.form:content>

            </sap.ui.layout.form:SimpleForm>

        </content>

    </Page>

</sap.ui.core.mvc:View>

login.controller.js

sap.ui.controller("view.login", {

forgot: function(){

    app.to("idlogin1");

}

});

forgot.view.xml

<sap.ui.core.mvc:View controllerName="view.forgot"

    xmlns="sap.m"

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

    <Page title="Title">

        <content>

            <Button id="button0" text="Back" width="100px"></Button>

        </content>

    </Page>

</sap.ui.core.mvc:View>

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (1)

Answers (1)

Qualiture
Active Contributor
‎01-07-2015 2:50 PM
0 Kudos

You have defined variable 'app' in the index.html page, but you are trying to call it from the login.controller.js file, which is not possible

It's better to move it to a parent Component.js, see also the Application Best Practices doc

Show replies
Show replies
sanketchimalwar
Participant
‎01-07-2015 6:00 PM
0 Kudos

Hi Robin,

How can this be declared in parent file "Component.js" and used in the login.controller.js ??

Rgds

Sanket

kedarT
Active Contributor
‎01-07-2015 8:57 PM
0 Kudos

Hi Sanket,

Add an id for the sap.m.App something  like this:

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

You could get the instance of the App using below code

oApp = sap.ui.getCore().byId("App")

Hope this helps

Regards,

Kedar

sanketchimalwar
Participant
‎01-08-2015 8:56 AM
0 Kudos

Hi Kedar,

Can you share with me where exactly should i make those changes ? Should i do it in Component.js as mentioned by Robin or in login.controller.js ?

Rgds

Sanket

former_member207744
Contributor
‎01-08-2015 9:12 AM
0 Kudos

Replace existing with below code in index.html

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

and in login.controller.js, inside forgot function place below code

var oApp = sap.ui.getCore().byId("App");

oApp.to("idlogin1");

sanketchimalwar
Participant
‎01-08-2015 9:22 AM
0 Kudos

Hi Sriram,

Thanks for the help. It worked.

Rgds

Sanket

Ask a Question