Skip to Content

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

XML View : Navigation between two views

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>

Helpful Answer

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