$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
0

Create sap.m.Table with xsodata service

Mar 30, 2017 at 08:07 AM

312

avatar image

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

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

5 Answers

Best Answer
Jun Wu Mar 30, 2017 at 01:14 PM
0

check how your model looks like, then update your binding

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

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>
0

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

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

should be this

0
Felix Hoehn
Mar 30, 2017 at 11:52 AM
0

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.


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

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

0
Jun Wu Mar 30, 2017 at 12:43 PM
0
Show 1 Share
10 |10000 characters needed characters left characters exceeded

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>

0
Felix Hoehn
Mar 30, 2017 at 02:04 PM
0

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>
Share
10 |10000 characters needed characters left characters exceeded
Arthur Silva Apr 14, 2017 at 01:22 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded