Binding TextView with Json Model

[former_member286937]

Hi All,

I am creating an sapui5 app along with Local JSON data and I am unable to fetch the value of Purchase Order Detail in TextView i.e. unable to bind them.

At the same time i am able to bind Purchase Order with the action ListItem.

Below is my code:

//JSON Model

var data = {

  "Purchase Order List" : [

      {"Purchase Order" : "001", "Purchase Order Detail":"abc"},

      {"Purchase Order" : "002", "Purchase Order Detail":"xyz"}

  ]

};

//code

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData(data);

sap.ui.getCore().setModel(oModel);

var oApp = new sap.m.App("mApp", { initialPage:"mainPage" });  

var oPage = new sap.m.Page(

  {

    id : "mainPage",

    title: "List of Purchase Orders",

    enableScrolling: false

  });

var oTextView = new sap.ui.commons.TextView("textView",

                                            {

  text: "{/Purchase Order Detail}"

});

     var detailPage = new sap.m.Page(

  {

    id : "detailPage",

    title: "Detail",

    enableScrolling: false,

    showNavButton : true,

    content:[oTextView],

    navButtonPress : function()

    {

    detailPage.unbindElement ();

    oApp.to("mainPage");

  },

  });  

var oList = new sap.m.List(

  { 

  id : "mainList",  

  inset : false,  

  visible : true,  

  }); 

    var actionListItem = new sap.m.ActionListItem("action",

{

  text : "{Purchase Order}",

  press : function(oControlEvent) {

  oApp.to("detailPage", this.getBindingContext());

  }

});

    oList.bindItems("/Purchase Order List", actionListItem);

    oPage.addContent(oList);

oApp.addPage(oPage); 

oApp.addPage(detailPage); 

oApp.placeAt("content"); 

Please suggest how the binding will take place between TextView and  Properties which i have created in JSON Model.

Also suggest if anything other than TextView can be used.

Regards,

Abhilasha

[former_member183518 · Accepted solution]

If you'll have to bind the product details to the TextView, the binding path must be

/Purchase Order List/0/Purchase Order Detail - > 1st index

/Purchase Order List/1/Purchase Order Detail - > 2nd index.

Example - JS Bin - Collaborative JavaScript Debugging

1. Consider  removing the spaces in the Model keys.

2. Don't mix up sap.ui.commons with sap.m. You can go for sap.m.Text instead of TextView.

3. Understand the difference between property binding & aggregation binding.

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/708342c9-7705-3310-649e-ffcc55b77...

[former_member286937 · Accepted solution]

Hi Sakthivel,

Following is the link for my demo app.

JS Bin - Collaborative JavaScript Debugging

It has to go like while clicking on action List item, the Purchase Order Detail corresponding to Purchase Order has to be displayed on the text which is placed at detail page.

Please suggest how binding would take place.

Regards,

Abhilasha

[karthikarjun · Accepted solution]

Hi Abhilasha,

will this help?

Small changes I did in your code. JS Bin - Collaborative JavaScript Debugging

1. Don't give space to your model path

Thanks,

Karthik A

[karthikarjun · Accepted solution]

Adding More comments:

Example2:

JS Bin - Collaborative JavaScript Debugging

1. According to model binding, will get a data dynamically and show it in detail screen

2. Use this.getBindingContext().getModel().getProperty(this.getBindingContext().getPath()).Purchase_Order_Detail;

Thanks,

KA

[kedarT]

Hi Abhilasha,

Firstly, are you able see the data in your model in debugging?

Secondly, you need to set the model to the Page.

Hope this helps.

[former_member286937]

Hi Kedar,

I am able to see data in my model while debugging and model has also been set to the page.

FYI..Using JS Bin for debugging.

Regards,

Abhilasha

[SergioG_TX]

please remove spaces on your model data var data = { "PurchaseOrderData": [ {"PurchaseOrder": value, "PurchaseDetail": value }, ... ] };

[former_member286937]

Hi Sergio,

Removing spaces doesn't make any difference.

Please suggest the syntax for binding JSON Model with TextView so that i can get values in the TextView.

Also suggest if i can use Label instead of TextView and binding for the same with JSON model.

Thanks and regards,

Abhilasha