Let’s create a simple two page application as per the below-mentioned mockup design

 

First, we have to create a new project in eclipse. Below are the steps which we already saw in the previous blog post(here) :

Open eclipse, goto:New–>other–>Application Project–>Project Name(twoPageSimpleApp)–>select sap.m–>select create intial view–>Next–>give the name as first–>select javascript view–>Finish.

 

Now let’s open up the first view page, where we have a simple page returned in createContent part:

 return new sap.m.Page

instead of returning the first page directly, we can return an oPage variable to make the code more readable.

var oPage = new sap.m.PagePage

As we have already done a simple app example which you can find here, so we are not going to repeat the old steps .

As per our new mockup, we are going to add an evenListener button which will navigate to second page once we click on the submit button.

We can add the event listener with below code:

press:[oController.goToSecondPage,oController]

Now in the controller, we can add a custom controller function which should be called, when the submit button is pressed.Let’s go to first.controller.js and add an event listener function called with oEvt argument parameter.

goToSecondPage: function(oEvt){
 
 var oLabel = sap.ui.getCore().byId("idLabel");
 var oInputVal = sap.ui.getCore().byId("idInput").getValue();
 
 if (oInputVal !== undefined){
 oLabel.setText(oInputVal);
 app.to("idsecond1");
 }
 },

In the above code, we are trying to get the value of the idLabel which is an input field and then show it in the second page on the label.

As this application is going to contain two pages, so we are going to add one more view to the project.

 

For that, right click on the project–>New–>Other–>search for View–>Next–>give the name as second–>javascript–>Finish.

 

We will add a label to the second page

var oLabel = sap.m.Label("idLabel");

Also, we have to instantiate our second page. To do that let’s go to the index.html and add the changes as  mentioned below:

Now in the second page, we have to add a property called

showNavButton: true,

for oPage variable and also provide an actions listener function which will be executed when the back button is pressed.

navButtonPress:function(oEvt){app.back();},

 

This is how you create a  simple two page application in UI5 with back and forth navigation.

That’s all for now !

stay tuned for more posts 🙂