Skip to Content
0

How to bind JSON data to SAP.UI.table,Treetable

Jan 27, 2017 at 09:17 AM

163

avatar image

Hi Everyone,

Please help if I did any mistake in Binding JSON data to tree table. Please find below code and JSON data.

When I click on Button, I am displaying Dialog box fragment which should display my tree Table please find the below code from my controller where Odata services is loaded and displaying tree table in Dialog Box

onEditBrands:function(){
		
		var sService = "/sap/opu/odata/sap/ZCRM_BRAND_ASSIGNMENT_SRV" ;
		var oModel = new sap.ui.model.odata.ODataModel(sService , true);
		var oView = this.getView();
		oModel.read("/BrandSet",null,null,true,
				function Sucess(oData){
			oView.setModel(new sap.ui.model.json.JSONModel(oData , "BrandTree"));
		},function error(response){
			console.log(response);
		});
		
		
		if (! this._oDialogBrand) {
		      this._oDialogBrand = sap.ui.xmlfragment("crm.fragment.BrandSelect", this.getView().getController());
		    } 


		this._oDialogBrand.setContentWidth("480px");
		this._oDialogBrand.open();
		
	},


Please find my Tree Table fragment binding code where I am binding data which I am getting from OData model in JSON format.

<core:FragmentDefinition
  xmlns="sap.ui.table"
  xmlns:m="sap.m"
  xmlns:core="sap.ui.core">
  <m:Dialog
     id="selectBrand"
    title="Brand Assignment"
     >

      <m:content>
      
 <TreeTable
        id="treeTable"
        selectionMode="MultiToggel"
        enableColumnReordering="false"
        expandFirstLevel="false"
        rows="{
            path : 'BrandTree>/results',
            parameters : {
               countMode: 'Inline'
            }
        }">
 
        <columns>
 
            <Column label="Brands">
                <template>
                    <m:Text text="{BrandTree>ID}"/>
                </template>
            </Column>
 
            <Column label="HierarchyLevel">
                <template>
                    <m:Text text="{BrandTree>ParentID}"/>
                </template>
            </Column>       
 
        </columns>
        
    </TreeTable>
   </m:content>
   <m:beginButton>
       <m:Button type="Emphasized" text="Close" press="_handleTreeClose" />
   </m:beginButton>
  </m:Dialog>
</core:FragmentDefinition>

Please find the below JSON format data which I consumed from Odata service

{


  "d" : {


   
"__count" : "28",


   
"results" : [


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "001",


       
"Name" : "Brand1",


       
"ParentID" : "001",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "002",


        "Name" : "Brand2",


       
"ParentID" : "002",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"uri" :  /sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "003",


       
"Name" : "Brand3",


       
"ParentID" : "003",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "004",


       
"Name" : "Brand4",


       
"ParentID" : "004",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "005",


        "Name" : "Brand5",


       
"ParentID" : "005",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('006')",


         
"uri" :  /sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('006')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "006",


       
"Name" : "Brand6",


       
"ParentID" : "006",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('007')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('007')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "007",


       
"Name" : "Brand7",


       
"ParentID" : "007",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('008')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('008')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "008",


       
"Name" : "Brand8",


       
"ParentID" : "008",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('009')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('009')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "009",


       
"Name" : "Brand9",


       
"ParentID" : "009",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('010')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('010')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "010",


       
"Name" : "Brand10",


       
"ParentID" : "010",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('011')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('011')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "011",


       
"Name" : "Brand11",


       
"ParentID" : "011",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('012')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('012')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "012",


       
"Name" : "Brand12",


       
"ParentID" : "012",


       
"Level" : 0,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "001",


       
"Name" : "Brand3-1",


       
"ParentID" : "003",


       
"Level" : 1,


        "DrilldownState" :
"expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "002",


       
"Name" : "Brand3-2",


       
"ParentID" : "003",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


          "id"
: 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "003",


       
"Name" : "Brand3-3",


       
"ParentID" : "003",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "004",


       
"Name" : "Brand3-4",


       
"ParentID" : "003",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "005",


       
"Name" : "Brand3-5",


       
"ParentID" : "003",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "001",


       
"Name" : "Brand7-1",


       
"ParentID" : "007",


        "Level"
: 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "002",


       
"Name" : "Brand7-2",


       
"ParentID" : "007",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


          "id"
: 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "003",


       
"Name" : "Brand7-3",


       
"ParentID" : "007",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "004",


       
"Name" : "Brand7-4",


       
"ParentID" : "007",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "001",


       
"Name" : "Brand12-1",


       
"ParentID" : "012",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "002",


       
"Name" : "Brand12-2",


       
"ParentID" : "012",


       
"Level" : 1,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('001')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "001",


       
"Name" : "Brand1-1-1",


       
"ParentID" : "001",


       
"Level" : 2,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


          "id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('002')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "002",


        "Name"
: "Brand1-1-2",


       
"ParentID" : "001",


       
"Level" : 2,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('003')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "003",


       
"Name" : "Brand1-1-3",


       
"ParentID" : "001",


       
"Level" : 2,


        "DrilldownState"
: "expanded"


      },


      {


       
"__metadata" : {


         
"id" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('004')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "004",


       
"Name" : "Brand1-1-4",


       
"ParentID" : "001",


       
"Level" : 2,


       
"DrilldownState" : "expanded"


      },


      {


       
"__metadata" : {


         
"id" :  /sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"uri" : 
/sap/opu/odata/SAP/ZCRM_BRAND_ASSIGNMENT_SRV/BrandSet('005')",


         
"type" : "ZCRM_BRAND_ASSIGNMENT_SRV.Brand"


        },


       
"ID" : "005",


       
"Name" : "Brand1-1-6",


       
"ParentID" : "001",


       
"Level" : 2,


       
"DrilldownState" : "expanded"


      }


    ]


  }


}


10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Jun Wu Jan 27, 2017 at 01:46 PM
0
oView.addDependent(this._oDialogBrand);
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Jun Wu,

As you suggested, I have changed code as below .I can see data in table.Thanks for your help.

if (! this._oDialogBrand) {
		      this._oDialogBrand = sap.ui.xmlfragment("crm.fragment.BrandSelect", this);
		    } ,
oView.addDependent(this._oDialogBrand);

<br>
0
Sai Vellanki Jan 27, 2017 at 11:14 AM
0

Hi Viswanath,

I guess you're binding should be like below, here is a sample: Plunker

        rows="{
            path : 'BrandTree>/d/results',
            parameters : {
               countMode: 'Inline'
            }
        }"

Regards,

Sai.

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hi Sai,

Thanks for your response. Now I binding issue is resolved with your help .

I am binding model to Fragment in controller as mentioned below

onEditBrands:function(){
		
		var sService = "/sap/opu/odata/sap/ZCRM_BRAND_ASSIGNMENT_SRV" ;
		var oModel = new sap.ui.model.odata.ODataModel(sService , true);
		var oView = this.getView();
		oModel.read("/BrandSet",null,null,true,
				function Sucess(oData){
			oView.setModel(new sap.ui.model.json.JSONModel(oData , "BrandTree"));
		},function error(response){
			console.log(response);
		});
		
		
		if (! this._oDialogBrand) {
		      this._oDialogBrand = sap.ui.xmlfragment("crm.fragment.BrandSelect", this.getView().getController());
		    } 




		this._oDialogBrand.setContentWidth("480px");
		this._oDialogBrand.open();
		
	},
<br>

In console I can see OData as attached screen shot. Could you please let me know how to bind, as I am unable to get data yet. Could you please help here

odataresult.png (28.8 kB)
0

Hi Sai,

In plunker you didn't used below code.Even if we add this code also it's not effecting output. But If remove this code in my project it's throwing attached error and Dialog box is not opening. please see the attached error.This is just my observation. Could you please explain what is the importance of parameters

parameters:{
               countMode:'Inline'}
error.png (8.1 kB)
0

Hi Sai,

Thanks for your help .

Regards,

Viswanath

0
Jun Wu Jan 27, 2017 at 12:34 PM
0
oView.setModel(new sap.ui.model.json.JSONModel(oData , "BrandTree"));

how about

oView.setModel(new sap.ui.model.json.JSONModel(oData ), "BrandTree");
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks for your response.

I have changed as you suggested, still I am unable to get data in tree table.

Regards,

Viswanath

0