Passing values using pages in Application

[Former Member]

Hi Experts,

I am currently learning SAp UI5 from ondemand UI5 sites. Have tried one application in which we are navigating from page 1 to page 2 within one application. Now I want to pass a value say it the name of a person to the next page saying "Hello James". I could not find the way to achieve this.

My requirement:

1)In the first page , I have one label, one text field and one button.

2)In the second page only one label where I want to get the value submitted in the first page.

Does any one have idea on this.

Thanks ,

Prabha

[saivellanki]

Hi Mohanty,

If you're using sap.m.NavContainer / sap.ui.core.Routing.Router for the Navigation, you can pass parameters from first view using .to / .navTo method -

In First Page -

// For sap.m.NavContainer
.to("secondView","slide",{Mode:"ViewInspectionNotifications",Notification:"210004532",DefectItem:"0003"});
// For sap.ui.core.Routing.Router
.navTo("secondView",{Mode:"ViewInspectionNotifications",Notification:"210004532",DefectItem:"0003"});

secondView will be your view name

slide is the transition name

Mode,Notification and DefectItem are the parameters that I am passing from first view to second view. Once you pass them from first view, you have to fetch those parameters in second view.

In Second Page -

this.addEventDelegate({
  onBeforeShow: function(event) {
  var params = event.data;
  if(params.Mode == "ViewInspectionNotifications"){
  var selectedNotificationNo = params.Notification;  //You can fetch "210004532" which is passed from first view
  var selectedDefectItem = params.DefectItem;      //You can fetch "0003" which is passed from first view
       }
  }
}, this);

Alternatively, you can try using a global JSON model for whole application and store the data using sap.ui.getCore().getModel().setProperty() method in first view and you can fetch those parameters in second view using sap.ui.getCore().getModel().getProperty() method.

Regards,

Sai Vellanki.

[Former Member]

Hi Sai,

Many thanks for your help. But could u please send me the complete code for easy understanding.

Thanks,

Prabha

[saivellanki]

Hi Mohanty,

Here you go -

Using Parameters Passing through .to method : Plunker - Parameter Values

Alternatively, you can use a global json model.

So, whenever you're fetching some values like for example, the sample I provided above which has Product and Weight. So, once you click on the list item you get the values, then you could do

var oSelectedTitle = "Gladiator MX"; // I have just hardcoded the value, but you will get it dynamically in the application.
this.getView().getModel().setProperty("/modelData/productName", oSelectedTitle);

"/modelData/productName" will hold the value through out the application. You can bind it to Label/Text/Input control, any control which supports property binding. For example, take Label control -

new sap.m.Label({text:"{/modelData/productName}"});

Regards,

Sai Vellanki.

[preetamr]

Hi,

You just have to use a json model to hold the data and you can use it in both the views.

Both the examples do the job very fine:

http://output.jsbin.com/URIviru/2

https://github.com/lemaiwo/SAPUI5-part1/tree/master/FirstSAPUI5Project

Regards,

Preetam

[NagaPrakashT]

Hi Mohanty,

Please refer these blog posts.

SAPUI5 - Passing parameters between views - YouTube

Thanks,

Naga

[santhu_gowdaz]

check this example,

http://output.jsbin.com/URIviru/2

[Former Member]

Hi Santosh,

I have been through all these samples but here we are not passing values, its only clearing one view content and placing a new content.

It would be very much helpful if I can pass values in between views.

Thanks,
Prabha