Skip to Content

Binding TextView with Json Model

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Oct 27, 2015 at 06:53 PM

    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-ffcc55b77aa7?QuickLink=index&…

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 27, 2015 at 03:55 PM

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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Oct 27, 2015 at 04:36 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded