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

[arthursilva]

Hello,

Did you correctly import the xsodata to your project ?

Just a few points to be considered:

1. Configure your hana server on Destinations on SCP;
2. Check whether file neo-app.json from your project is corretly pointing to the hana server

{
      "path": "/destinations/<server_destination_name_goes_here>",
      "target": {
        "type": "destination",
        "name": "<destination_name>"
    },
    "description": "<description>"
    }

3. Update manifest.json by adding a main service which points to the xsodata file.

"dataSources": {
  "mainService": {
    "uri": "/<destination_name>/public/iot/services/iot.xsodata",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0",
      "localUri": "localService/metadata.xml"
    }
  }}

4. Now, you're ready to call the xsodatsa entity right out to your code.

<Table
  items="{
    path: '/History',
    sorter: {
      path: '',
      descending: false
    }
}"

Regards
Arthur Silva

[former_member45380]

Thanks for your help!

my controller should be

			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();
			    self = this;
			        oModel.read("/History", {
			          method:"GET",
			          success: function(data){
			        	  oJsonModel.setData(data);
			            console.log(data.results[0]);
			            var results = oJsonModel.getProperty("/results");
			            console.log(results);
			          			         			          }, 
			          error: function(){
			          
			        }});
			        console.log(oJsonModel);
			        self.getView().setModel(oJsonModel);

and my view:

<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"
				items="{
          			path: '/results'
        	}">
				
		<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="{ROUND}"/>
				<Text text="{IN_AMOUNT}" />
				<Text text="{IN_PRICE}" />
			</ColumnListItem>
		</items>
	</Table>
	
		</content>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button text="Next" press="onNavigate" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

[junwu]

https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Table/code

your table are missing something

[former_member45380]

Yes, but I dont know what to fill into "path" and the other stuff. I think I have two major problem.

1. How can i access my data via xsodata service in my controller and store it into a JSON or ODATA Model?

2. How can access the new model in my xml view?

Thanks for your thoughts!

I tried this at my view

<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"
				 items="{
          			path: '/History'
        	}">
		<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="{ROUND}"/>
				<Text text="{IN_AMOUNT}" />
				<Text text="{IN_PRICE}" />
			</ColumnListItem>
		</items>
	</Table>
	
		</content>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button text="Next" press="onNavigate" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

[former_member45380]

I tried to define a JSONModel in my controller like this:

onInit: function(){         
var oModel =  new sap.ui.model.json.JSONModel();  
             oModel.loadData("https://XXXX/cosma_bca3/webapp/services/historyincoming.xsodata/History?&format=json");

console.log(oModel); 
},

My browser output looks like this:

I think it looks good, but I still need to bind this data to my table.

[junwu]

this.getView().setModel(oModel) by doing this, the model will be available to view