Pass data from one View to another view

[Former Member]

What is the recommended approach to pass data from one view to another view.

The data is binded to View1 and i am trying to fetch the data from view2 via var view1text = sap.ui.getCore().byId("textbox1").getText(); but not working.

I read from old blogs that event bus can also be used to pass data from view 1 and receive in view 2.

Are there any other approaches ?.please suggest with example codes

I need to fetch only 3 fields from view 1 to display in view 2

Appreciate your suggestions

[VenkyM]

Hi David,

You can pass data between two views using Model,

1. First create a Model in your component js file.

Component.js

  init : function() {

  UIComponent.prototype.init.apply(this, arguments);

  this.setModel(new sap.ui.model.json.JSONModel() , "TempDataModel");

  }

2.  Assign id to your Input field which you want to pass data.

View1.xml

<Label text="FirstName" />

<Input id="idFname" value="" />

3. Set that data to your Model which you have created in Component js file in Submit button Press Event (Here Model is "TempDataModel")

View1.controller.js

in Submit button Press event

var fname = sap.ui.getCore().byId(this.createId("idFname")).getValue();

this.getView().getModel("TempDataModel").setProperty("/",{ "FirstName":fname} );

4. Bind your Data to Control using Data binding concept

View2.xml

<Label text="FirstName" />

<Text text="{TempDataModel>/FirstName}" />

Please let me know if you need any clarifications.

[saivellanki]

Hi David,

Which mechanism are you using for navigation of one view to another view?

Here is a sample using app navigation: Plunker

For Routing with parameters: OpenUI5 Explored

Regards,

Sai Vellanki.

[Former Member]

I am using routing concept for navigation as below provided as example by Sai Vellanki

newpagecreateOperation: function(oEvent) {
   this._showObject1(oEvent.getSource()
  },

_showObject1: function(oItem) { 

this.getRouter().navTo("view2id"
{ 
//objectId: oItem.getBindingContext().getProperty("field1") });
objectId: oItem.getBindingContext("field1").getPath().substr(1);
//Cannot read property 'getPath' of undefined

},

navigation is successful with above code. But cannot pass parameters.

facing Cannot read property 'getPath' of undefined while navigating to view2.

The Example in the link of Routing with parameters displays a list item, in my case this is a footer button but not a list.

Can you share a similar sample with routing?

[vaibhav_gb]

Hello David,

As the button is in the Footer Im assuming the text is in the Content of the page you can try,

oEvent.getSource().getParent().getParent() [giving you the Page itself and you can refer to any field in the page later accordingly ]. How ever Just oEvent.getSource() will only give you only the Footer Button and its clearly not what you want to capture text from.

regards

GB

[Former Member]

you can set model on sap.ui.getCore().setModel(). This model can be accesed by all elements of the application.

[Former Member]

where shall i set this model , in view1 or view2  ?

[Former Member]

where you want, usually in the first one.

once you create the model, data binding made all work for you

if you fill one input inside view1, this data will be filled en the model, and could be visible in the view2.

you have good examples hear

OpenUI5 Explored

[Former Member]

Hi,

You can use JSON Model for that.For example.

var oModel = this.getView().getModel("view1");

var oData = oModel.getData();

var sModel = this.getView().getModel("view2");

var sData = sModel.getData();

sData.field1 = oData.field1;

sData.field2 = oData.field2;

sData.field3 = oData.field3;

sModel.setData(sData);

this.router.navTo("view2");

Yalçın

[Former Member]

i am facing error , cannot read property getdata of undefined.

[Former Member]

Hi,

When view1 is bound to a model then simply ask view1 for its binding context (and/or the object) from within the controller of view2.

Silvio

[Former Member]

can you share any sample example/code to achieve this?