Bind table in XML View

[Former Member]

Hello all,

Does somebody knows an example or a tutorial to show a table which is bound to an OData query in a XML view (with all the steps you need to do in the controller and Component.js files)?

Thanks in advance,

Pieter

[saurabh_vakil · Accepted solution]

Hi Pieter,

As Maksim has correctly pointed you need to use items and not rows in your <Table> tag in the view. Try the below:

In your controller, add a name to the model while setting it to the table/view as below:

oItemModel = new sap.ui.model.json.JSONModel();
oHeaderModel.loadData(<service URL>,parameters);
view.byId("itemsTable").setModel(oItemModel,"tabModel");

In your view:

<Table id="itemsTable"
     items="{path:'tabModel>/d/results'}">

Then within the <items> aggregation:

<items>
  <ColumnListItem id="itemListItem">
       <cells>
            <Text text="{path:'tabModel>Description'}" />
       </cells>
   </ColumnListItem>
</items>

Regards,

Saurabh

[Former Member · Accepted solution]

Hi Saurabh,

Thank you! Now the table is displayed with the correct values.

Kind regards,

Pieter

[john_fitzgerald · Accepted solution]

Hi Guys,

Im trying something similar - not really sure where Im going wrong. I get "No data" in the data section of the table. Can anyone help? Heres what Im doing

In the controller

onInit: function() {

  oItemModel = new sap.ui.model.json.JSONModel(); 
  oItemModel.loadData("http://111.11.1.11:8001/ABS_PACK/XSJS/LIST.xsjs");  
  this.getView().byId("itemsTable").setModel(oItemModel,"tabModel");

}

In the XML view

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
  controllerName="p_tst_ui_m.TABLE" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="Schemas"> 
  <content> 
<Table id="itemsTable" 
     items="{path:'tabModel>/results'}"> 
       <columns>
        <Column id="NAME" width="auto">
            <Text text="Schema Name" />
         </Column>
     </columns>
              <items> 
  <ColumnListItem id="itemListItem"> 
        <cells> 
            <Text text="{path:'NAME'}" /> 
        </cells> 
    </ColumnListItem> 
  </items> 
  </Table>
  </content> 
  </Page> 
</core:View>

This is what the JSON of my service looks like

{"results":[{"NAME":"SAMMY"}]}

[saurabh_vakil · Accepted solution]

Hi John,

In your view where you declare the Text UI element under the ColumnListItem try writing the path like below:

<Text text="{path:'tabModel>NAME'}" />

Also you can debug the controller and check if the data is actually getting loaded in the oItemModel.

Regards,

Saurabh

[john_fitzgerald · Accepted solution]

H Saurabh,

I updated the tag in the table as suggested, but there was no change. So like you suggested, I tried debugging the code. This is what I get. Any idea what could be wrong?

Could it be that the service and UI5 app are on the same server that could cause the issue?

[saurabh_vakil · Accepted solution]

Hi John,

Instead of setting the model to the core you can try setting it to your view which contains the table like below:

this.getView().byId("itemsTable").setModel(oItemModel,"tabModel"); 

Also, ensure that on your index.html file you have included the below within the bootstrap:

data-sap-ui-xx-bindingSyntax="complex"

Regards,

Saurabh

[john_fitzgerald · Accepted solution]

That did the trick(complex) Saurabh - genius. thanks so very much. Would have market it as answered but I should have opened a new thread for tht. Sorry.

[saurabh_vakil · Accepted solution]

No problem John, the important thing is that your problem is solved.

Regards,

Saurabh

[venkatachala_ck]

Hi Pieter,

try this code

in your view

<Table  id="ID_CAUSETABLE" inset="false">

				<columns>
					<Column id="col1">
						<Text text="ID" />
					</Column>
					<Column id="col2">
						<Text text="NAME" />
					</Column>
				</columns>
			</Table>

in your controller

var aData = [{"Id":"E0001","Name":"ABC"},

                   {"Id":"E0002","Name":"DEF"},

                   {"Id":"E0003","Name":"GHI"},

                   {"Id":"E0005","Name":"JKL"} ];

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

  oModel.setData(aData);

  oCAUSE_TABLE.setModel(oModel);

oCAUSE_TABLE.setMode(sap.m.ListMode.SingleSelectLeft);

  oCAUSE_TABLE.bindItems("/", new sap.m.ColumnListItem({

  cells: [

          new sap.m.Text({

  text: "{Id}"

  }),

  new sap.m.Text({

  text: "{Name}"

}),

  ]

  }));

[former_member182372]

SAPUI5 SDK - Demo Kit

[Former Member]

Thanks Maksim, but do I have to do the same steps as to show data from json files?

[junwu]

what steps?

[Former Member]

Hi Jun,

I will explain my problem.

There are two views (one overview view and one list view). In the overview you can click on different categories, one of them is Orders with delivery block, and you will navigate to the second screen where a table of all these orders are displayed.

This is my init function of the List.controller.js file:

In the debugger, the oData will retrieve the correct data from the SAP System:

But all these values are not shown in the table of the view List.view.xml.

For the xml coding I didn't found a good example to use..

Kind regards,

Pieter

[former_member182372]

not rows but items in <Table>