How to show two different JSON models data in same UI5 Page

[Former Member]

Hi Friends,

I have two different JSON models one is Header and another one is Item details, right now there is no relationship between two models.

I Created an UI page using XML format. In UI page There is two components 1) List 2) Table. I need to bind the Header data into List, Item details data in Table. How to bind the data to UI?

I try to bind the data using "items" attribute, but always showing Headers data only. What is the syntax to specific JSON to binding the data to specific UI component?

XML Layout :

<List  items="{/results}" > ....... </List>
<Table items="{/results}" noDataText="Details Not Available"></Table>

JSON Objects :

var headerModel= new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(headerModel, "oHeaderDataModel");

var detailsModel= new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(detailsModel, "oDetailsDataModel");

Before Navigating to Target View I'm setting headerModel to View.

var view2 = sap.ui.getCore().byId('TargetView');
view2.setModel(headerModel);

How to specify the "oHeaderDataModel" to List View as well as "oDetailsDataModel" to Table.

Thanks in Advance,

Venu.

[Former Member · Accepted solution]

Resolved using bindAggregation method.

this.getView().byId("TableID").bindAggregation("items", "/results", id_tbl_row);
this.getView().byId("TableID").setModel(oDetailsDataModel);

[kai2015]

if you just want to have global access to those models

bind your models as you mentioned:

1. var headerModel= new sap.ui.model.json.JSONModel(); 
2. sap.ui.getCore().setModel(headerModel, "oHeaderDataModel"); 
3. var detailsModel= new sap.ui.model.json.JSONModel(); 
4. sap.ui.getCore().setModel(detailsModel, "oDetailsDataModel"); 

After that you can access them by doing like this:

1. <List  items="{oHeaderDataModel>/results}" > ....... </List> 

You will get more information, if you search for "named binding"

[former_member193023]

Hi Venu,

Assign ID to your List and Table in the view.

Now on the controller assign model as follows.

this.getView().byId("TableID").setModel("oDetailModel");

this.getView().byId("ListID").setModel("oHeaderModel");

Thanks,

Parth Jhalani

[former_member82178]

Hi Venu

I guess, the appropriate discussion space for this question is:

Thanks & Regards

Madhu Sudhan

[agentry_src]

Moved as suggested to the  as appropriate for UI5 questions.

NOTE: One can report items as being in the Wrong Space by using the Alert Moderator button and assigning the category as Wrong Space.  Brings it to our attention faster than posting a comment.

Thanks, Mike (Moderator)

Message was edited by: Michael Appleby