Create sap.m.Table with xsodata service

[former_member45380]

Hi,

I know there are already a lot of examples out there, but I still failed.
The setup is quite simple, I created a xsodata service file in the folder services "historyincoming.xsodata".

service {
"_SYS_BIC"."cosma_bca3/USER_HISTORY" as "History"
with ("GAMEID", "IN_AMOUNT", "IN_PRICE", "ROUND", "ROLE")
key ("GAMEID")
;
}

The xsodata service is working...

Now I just want to build a view with a sap.m.table to display some of the data.

I got a view "HistoryIncoming.view.xml" and I already created a table:

<mvc:View
	height="100%"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:t="sap.ui.table"
	controllerName="cosmacosma.controller.HistoryIncoming">
	<Page
		title="XXX"
		class="sapUiContentPadding"
		showNavButton="true"
		navButtonPress="onNavBack" >
		<headerContent>
				 <Label text="Round: {ModelRound>/round}"/>
		</headerContent>
		<subHeader>


		</subHeader>
		<content>
		<Table id="idHistoryIncoming"
				inset="true">
		<columns>
			<Column
				width="12em">
				<Text text="Round" />
			</Column>
			<Column
				minScreenWidth="Tablet"
				demandPopin="true">
				<Text text="Incoming Amount" />
			</Column>
			<Column
				minScreenWidth="Tablet"
				demandPopin="true"
				hAlign="Right">
				<Text text="Incoming Price" />
			</Column>
		</columns>
	</Table>
		</content>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button text="Next" press="onNavigate" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

The UI looks like this:

Now my problem is to connect the table with my xsodata service. I tried many different things, but nothing worked. My HistoryIncoming.controller.js is empty at the moment. I would like to display the round, incoming amount and the incoming price from the xsodata service.

Hope somebody got some ideas - Thanks!

Best regards,

Felix

[junwu · Accepted solution]

check how your model looks like, then update your binding

[former_member45380 · Accepted solution]

I did this in my controller:

onInit: function(){
			
			    var oModel = new sap.ui.model.odata.v2.ODataModel({
			        serviceUrl: "https://XXX.hana.ondemand.com/cosma_bca3/webapp/services/historyincoming.xsodata/",
			        /*headers: {
			            "myHeader1" : "value1",
			            "myHeader2" : "value2"
			        }*/
			    });
			    var oJsonModel = new sap.ui.model.json.JSONModel();
			        oModel.read("/History", {
			          method:"GET",
			          success: function(data){
			        	  oJsonModel.setData(data);
			            console.log(data);
			            
			          }, 
			          error: function(){
			          
			        }});
			        console.log(oJsonModel);
			        sap.ui.getCore().setModel(oJsonModel);

and now I think my oJsonModel looks good, as you can see in my browser console:

Is my Datamodel correct? And does my xml view has access to the model now?

I think my bindings should look like this now:

<mvc:View
	height="100%"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:t="sap.ui.table"
	controllerName="cosmacosma.controller.HistoryIncoming">
	<Page
		title="COSMA 4.0"
		class="sapUiContentPadding"
		showNavButton="true"
		navButtonPress="onNavBack" >
		<headerContent>
				 <Label text="Round: {ModelRound>/round}"/>
		</headerContent>
		<subHeader>


		</subHeader>
		<content>
		<Table id="idHistory"
				inset="false"
				>
		<columns>
			<Column
				width="12em">
				<Text text="Round" />
			</Column>
			<Column
				minScreenWidth="Tablet"
				demandPopin="true">
				<Text text="Incoming Amount" />
			</Column>
			<Column
				minScreenWidth="Tablet"
				demandPopin="true"
				hAlign="Right">
				<Text text="Incoming Price" />
			</Column>
		</columns>
		<items>
			<ColumnListItem>
				<Text text="{results/0/ROUND}"/>
				<Text text="{results/0/IN_AMOUNT}" />
				<Text text="{results/0/IN_PRICE}" />
			</ColumnListItem>
		</items>
	</Table>
	
		</content>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button text="Next" press="onNavigate" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>
<br>

[former_member45380 · Accepted solution]

Or do I need to include the path in my xml view?

		<Table id="idHistory"
				inset="false"
				 items="{
          			path: '/History'
        	}">

[junwu · Accepted solution]

<Table id="idHistory"
				inset="false"
				 items="{
          			path: '/results'
        	}">

should be this