Skip to Content
avatar image
Former Member

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

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    avatar image
    Former Member
    Jan 19, 2015 at 11:01 AM

    Resolved using bindAggregation method.

    this.getView().byId("TableID").bindAggregation("items", "/results", id_tbl_row);
    this.getView().byId("TableID").setModel(oDetailsDataModel);
    
    Add comment
    10|10000 characters needed characters exceeded

  • Jan 15, 2015 at 01:12 PM

    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"

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 14, 2015 at 07:09 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 14, 2015 at 12:41 PM

    Hi Venu

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

    UI Development Toolkit for HTML5 Developer Center

    Thanks & Regards

    Madhu Sudhan

    Add comment
    10|10000 characters needed characters exceeded