How to bind data to using odata model? I'm getting error like Resource not found for the segment 'results'.
My code:
var url = "/sap/opu/odata/sap/ZODATA_SERVICE_NAME";
var oModel = new sap.ui.model.odata.ODataModel(url,false);
oModel.read("/EntityDataSet", null, null, true, function(oData) {
that.getView().setModel(oModel,"student");
},
function(error) {
});
<Table headerDesign="Standard"
items="{student>/results}"
id="table" >
<columns>
<Column >
<header>
<Label text="studentName" width="100%"/>
</header>
</Column>
<Column >
<header>
<Label text="studentRank" width="100%"/>
</header>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
text="{student>StudentName}"/>
text="{student>Rank}"/>
</cells>
</ColumnListItem>
</items>
</Table>
the ODataMOdel you are using is deprecated, make sure to use the v2.ODataModel instead
you don't need to execute an HTTP call via JavaScript (ODataModel.read(...) ) to get the data in order to bind it to the table.
I think you did not clearly understand OData and models in UI5. Having a look at the official SAPUI5 Tutorials might help you out.
Anyway, here is a running jsbin example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Table
id="myTable"
growing="true"
growingThreshold="10"
growingScrollToLoad="true"
busyIndicatorDelay="0"
items="{/Customers('ALFKI')/Orders}">
<headerToolbar>
<Toolbar>
<Title text="Orders of ALFKI"/>
<ToolbarSpacer/>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="OrderID"/>
</Column>
<Column>
<Text text="Order Date"/>
</Column>
<Column>
<Text text="To Name"/>
</Column>
<Column>
<Text text="Ship City"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active">
<cells>
<ObjectIdentifier title="{OrderID}"/>
<Text
text="{
path:'OrderDate',
type:'sap.ui.model.type.Date',
formatOptions: {
style: 'medium',
strictParsing: true
}
}"/>
<Text text="{ShipName}"/>
<Text text="{ShipCity}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/odata/v2/ODataModel"
], function (Controller, ODataModel) {
"use strict";
return Controller.extend("MyController", {
onInit : function () {
// in component based apps you would not
// even need this piece of code:
this.getView().setModel(
new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
json : true,
useBatch : false
})
);
}
});
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
try changing
that.getView().setModel(oModel,"student");
to
this.getView().setModel(oModel,"student");
that.getView().setModel(oModel,"student"); //incorrect
this.getView().setModel(oModel,"student"); //refers to this particular controller
Related
I have a table(sap.m.table) with radiobutton control in the first column.
The table shows different "prices" from which the user should be able to choose only one. My problem is, when i use the cancel button it should delete all selections made (in dropdowns, datefilter, etc.). It works for every control except radiobutton.
<ColumnListItem> <cells>
<RadioButton id="radiobutton" groupName="tablebuttons" select="onSelect"/>.....
When i leave the view with the cancel button and then open it again in the same session, the previous selected radiobutton is still selected.
I cant find any method to set it to unselected. When i use this.getView().byId("radiobutton").getSelected()
it always gives back "false".
Is it because there is one button for each table row and i only select (the first?) one? If so, how can i search all button for the selected one and deselect it?
You must have added id="radiobutton" to the template list item which is used for aggregation binding. That is why calling byId("radiobutton") does not return any rendered radio button but the template instance. If you check the IDs of the radio buttons from the HTML document, you'll notice that they all contain the generated prefix __clone0, __clone1, etc.
I can't find any method to set it to unselected.
To deselect a radio button, use:
In case of RadioButton: .setSelected(false)
In case of RadioButtonGroup: .setSelectedIndex(-1)
But you might not even need any sap.m.RadioButton to add manually to the table. Since sap.m.Table extends from sap.m.ListBase, it can have a radio button in each list item via mode="SingleSelectLeft". Here is a demo:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/model/json/JSONModel"
], JSONModel => sap.ui.xmlview({
async: true,
viewContent: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="MyController"
>
<Table
mode="SingleSelectLeft"
selectionChange=".onSelectionChange"
includeItemInSelection="true"
items="{prices>/}">
<columns>
<Column>
<Text text="Price"/>
</Column>
<Column>
<Text text="Foo"/>
</Column>
</columns>
<items>
<ColumnListItem selected="{prices>selected}" >
<ObjectNumber number="{prices>price}" />
<Text text="bar" />
</ColumnListItem>
</items>
</Table>
<Button
class="sapUiTinyMargin"
text="Deselect"
type="Emphasized"
press=".onResetPress"
/>
</mvc:View>`,
controller: sap.ui.controller("MyController", {
onInit: function() {
const model = new JSONModel(this.createModelData());
this.getView().setModel(model, "prices");
},
onResetPress: function() {
const model = this.getView().getModel("prices");
model.setProperty("/", this.createModelData());
},
createModelData: () => [{
price: 111.01,
}, {
price: 222.0245,
}, {
price: 333,
}],
}),
}).loaded().then(view => view.placeAt("content"))));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>
IMO, you should use a model to set/reset values and not called the setter function of control. here is an example of using MVC
http://jsbin.com/zijajas/edit?html,js,output
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:table="sap.ui.table">
<table:Table id="Table1" rows="{/}"
selectionMode="None">
<table:title>
<Button icon="sap-icon://reset" press="reset" />
</table:title>
<table:columns>
<table:Column>
<Label text="Employee name"/>
<table:template>
<Text text="{name}" ></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Company"/>
<table:template>
<Text text="{company}"></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Radio"/>
<table:template>
<RadioButtonGroup selectedIndex="{radio}">
<RadioButton text="no" />
<RadioButton text="yes" />
</RadioButtonGroup>
</table:template>
</table:Column>
<table:Column>
<Label text="Bonus"/>
<table:template>
<Input value="{bonus}" />
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>
controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var oController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
this.getView().setModel(new JSONModel([{
name : "John",
company: "apple inc",
radio: 0,
bonus: "0"
}, {
name : "Mary",
company: "abc inc",
radio: 0,
bonus: "0"
},
]));
},
reset: function() {
var oModel = this.getView().getModel();
oModel.getProperty('/').forEach(function(item) {
item.radio = 0;
item.bonus = 0;
});
oModel.refresh();
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
Is it possible to disable row selector for particular rows. setEnable method is not available for sap.ui.table. Please find the attached screenshot for better understanding.
please go through the following code. It might help you.
sap.ui.controller("my.controller", {
onInit: function() {
var model = new sap.ui.model.json.JSONModel([
{Product: "Power Projector 4713", Weight: "33"},
{Product: "Gladiator MX", Weight: "33"},
{Product: "Hurricane GX", Weight: "45"},
{Product: "Webcam", Weight: "33"},
{Product: "Monitor Locking Cable", Weight: "41"},
{Product: "Laptop Case", Weight: "64"}
]);
var vw = this.getView();
vw.setModel(model);
// disable checkboxes
var tbl = vw.byId('tblProduct');
tbl.addDelegate({
onAfterRendering: function() {
var header = this.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();
this.getItems().forEach(function(r) {
var obj = r.getBindingContext().getObject();
var enabled = parseInt(obj.Weight, 10) > 40;
var cb = r.$().find('.sapMCb');
var oCb = sap.ui.getCore().byId(cb.attr('id'));
oCb.setEnabled(enabled);
});
}
}, tbl);
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
}).placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="chartView" type="sapui5/xmlview">
<mvc:View
controllerName="my.controller"
xmlns:l="sap.ui.layout"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<App>
<pages>
<Page title="Table CheckBox Disable" class="marginBoxContent" >
<content>
<Table id="tblProduct" mode= "MultiSelect"
selectionChange = "rowSelect"
items="{/}">
<columns>
<Column>
<Label text="Product" />
</Column>
<Column>
<Label text="Weight" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Product}" />
<Text text="{Weight}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
Regards,
Farooq.
I have an SAPUI5 app with 2 views. When I try navigate from the first view to the second view with an router it throws this error:
"Uncaught TypeError: JSONModel is not a constructor(…)"
The problem is I have to consume the content of the JSON to fill a table and with this error it is still empty
In a similar case/application my code runs without a problem, so I would be happy if someone can read my code if there are some errors...
Main.view.xml
<mvc:View controllerName="App.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page>
<content>
<Table id="paramTable" items="{/callbackData}" width="auto" class="sapUiResponsiveMargin">
<columns>
<Column>
<Label text="Parameter"></Label>
</Column>
<Column width="10%">
<Label text="CurrentVal"></Label>
</Column>
<Column width="10%">
<Label text="TargetVal"></Label>
</Column>
<Column width="30%">
<Label text="Description"></Label>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{key}"></ObjectIdentifier>
</cells>
<Text text="{currentVal}"></Text>
<Text text="{operator} {targetVal}"></Text>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
Main.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller , JSONModel) {
"use strict";
return Controller.extend("App.controller.Main", {
onInit : function() {
this.getView().setModel(new JSONModel({
callbackData: []
}));
},
setTableData : function() {
var here = this;
$.ajax({
url : '../../test.xsjs',
type : "GET",
success : function(data) {
here.getView().getModel().setProperty("/callbackData", data);
}
});
}
});
});
Thanks in advance!!!
var oModel = new JSONModel({
callbackData: []
});
this.getView().setModel(oModel);
This question already has answers here:
bindProperty to Single OData Entity
(2 answers)
Closed 18 days ago.
How to fetch single entity record data please find the code below
binding in xml table.am doing like below
table in xml view
<Table items="{/dum}" id="table" width="auto">
When you can bind the url directly to the table:
If I give like below am getting all records.
var url = "/myentity";
var table = oView.byId("table");
table.bindItems({
path: url,
template: table.getBindingInfo("items").template
});
If I give var url = "/myentity('srujan')";
am not able to get particular user data
HTTP request failed400,Bad Request,{"error":{"code":"005056A509B11EE1B9A8FEC11C23378E","message":{"lang":"en","value":"System query options '$orderby,$skip,$top,$skiptoken,$inlinecount' are not allowed in the requested URI"
Here's the snippet that shows how bindElement ("binding" in the XML) it works for your case:
var oModel = new sap.ui.model.json.JSONModel({
"Product(1)": {
Price: 100,
Name: "Product # 1"
},
Products: [{
Price: 200,
Name: "Product # 1"
}, {
Price: 500,
Name: "Product # 2"
}, {
Price: 542,
Name: "Product # 3"
}]
});
sap.ui.getCore().setModel(oModel);
sap.ui.xmlfragment({
fragmentContent: document.getElementById("table").textContent
}).placeAt("content");
<!DOCTYPE html>
<html>
<body>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="table" type="sapui5/xml">
<Table xmlns="sap.m" binding="{/Product(1)}">
<columns>
<Column>
<Label text="Binding" />
</Column>
<Column>
<Label text="Column 2" />
</Column>
<Column>
<Label text="Column 3" />
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="/Products(1) on table" />
<Text text="{Name}" />
<Text text="{Price}" />
</ColumnListItem>
<ColumnListItem binding="{/Products/2}">
<Text text="/Products/2 on item" />
<Text text="{Name}" />
<Text text="{Price}" />
</ColumnListItem>
</items>
</Table>
</script>
<div id="content"></div>
</body>
</html>
I have an XML view which I am using to display an IconTabBar. On the user selecting one of these "IconTab's" I would like to trigger a method in the controller js file.
I have the following code for one of the IconTab definitions.
<IconTabFilter text="Data" icon="sap-icon://documents" press="onData">
<content press="onData" id="data">
<cmn:Tree nodes="{/aRoot}">
<cmn:TreeNode text="{#name} TagNameHere?"></cmn:TreeNode>
</cmn:Tree>
</content>
</IconTabFilter>
I was assuming the press="onData" would allow me to trigger a method on the controller file. It does not.
Does anyone know if this can be done and if so how?
Thanks
Martin
You can use the select(oControlEvent) event of the parent IconTabBar by switching the logic according to the key value of IconTabFilter
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar select="onSelectChanged">
<items>
<IconTabFilter key="1" text="Test1">
<Text text="Test1 " />
</IconTabFilter>
<IconTabFilter key="2" text="Test2">
<Text text="Test2 " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<script>
sap.ui.controller("test.controller", {
onSelectChanged: function(oEvent) {
var key =oEvent.getParameters().key;
if(key=='1') {
alert("Click Test1");
}
else if(key == '2')
{
alert("Click Test2")
};
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
</script>
<boy class="sapUiBody" id="content" />