sapui5 odata binding in controller - odata

I am building app on demo MyFiorri application and I have problem binding data using ODATA. I defined odata in component.js
jQuery.sap.declare("sap.ui.demo.myFiori.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.myFiori.Component", {
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.myFiori.view.App",
type : "JS",
viewData : { component : this }
});
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/messageBundle.properties"
});
oView.setModel(i18nModel, "i18n");
// // Using OData model to connect against a real service
var url = "http://localhost:8080/serveris/SERVERIS.svc/";
var oModel = new sap.ui.model.odata.ODataModel(url, true, "", "");
oView.setModel(oModel);
sap.ui.getCore().setModel(oModel);
// set device model
var deviceModel = new sap.ui.model.json.JSONModel({
isTouch : sap.ui.Device.support.touch,
isNoTouch : !sap.ui.Device.support.touch,
isPhone : sap.ui.Device.system.phone,
isNoPhone : !sap.ui.Device.system.phone,
listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
});
deviceModel.setDefaultBindingMode("OneWay");
oView.setModel(deviceModel, "device");
// done
return oView;
}
});
Now, I need to read these data:
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xml:base="http://localhost:8080/serveris/SERVERIS.svc/">
<script id="tinyhippos-injected"/>
<id>http://localhost:8080/serveris/SERVERIS.svc/Users</id>
<title type="text">Users</title>
<updated>2014-05-27T18:07:01.403+03:00</updated>
<author>
<name/>
</author>
<link href="Users" rel="self" title="Users"/>
<entry>
<id>
http://localhost:8080/serveris/SERVERIS.svc/Users(0)
</id>
<title type="text">Users</title>
<updated>2014-05-27T18:07:01.404+03:00</updated>
<category term="serveris.User" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<link href="Users(0)" rel="edit" title="User"/>
<link href="Users(0)/TasklistDetails" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/TasklistDetails" title="TasklistDetails"type="application/atom+xml;type=feed"/>
<content type="application/xml">
<m:properties>
<d:Login>jonas</d:Login>
<d:Passw>saugus</d:Passw>
<d:UserId>0</d:UserId>
</m:properties>
</content>
</entry>
<entry>
<id>
http://localhost:8080/serveris/SERVERIS.svc/Users(1)
</id>
<title type="text">Users</title>
<updated>2014-05-27T18:07:01.405+03:00</updated>
<category term="serveris.User" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<link href="Users(1)" rel="edit" title="User"/>
<link href="Users(1)/TasklistDetails" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/TasklistDetails" title="TasklistDetails"type="application/atom+xml;type=feed"/>
<content type="application/xml">
<m:properties>
<d:Login>petras</d:Login>
<d:Passw>pass</d:Passw>
<d:UserId>1</d:UserId>
</m:properties>
</content>
</entry>
</feed>
I made login.view.xml and login.controller.js in which i want ta access these data
login.view.xml
<core:View
controllerName="sap.ui.demo.myFiori.view.login"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core" >
<Page
title="{i18n>LoginIn}">
<VBox
class="marginBoxContent" >
<items>
<Label text="username" />
<Input
id="nameInput"
type="Text"
placeholder="enter username ..." />
<Label text="Pasword" />
<Input
id="passwInput"
type="Password"
placeholder="enter password..." />
<Button text="Prisijungti" press="handleContinue" />
</items>
</VBox>
</Page>
</core:View>
login.controller.js
jQuery.sap.require("sap.ui.demo.myFiori.util.Formatter");
sap.ui.controller("sap.ui.demo.myFiori.view.login", {
handleContinue : function (evt) {
// var authinfo = this.getCore().getModel().getData().Users[0]; In this line I should get data
var name = this.getView().byId("nameInput").getValue();
var paswd = this.getView().byId("passwInput").getValue();
if (name == "authinfo.login" && paswd == "authinfo.passw") {
var context = evt.getSource().getBindingContext();
this.nav.to("Master", context);
}
else {
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show("there is no such user or bad login data");
}
}
});
I hope I clearly described my problem.

Put a debug breakpoint in handleContinue function and try to see what shows up in log for sap.ui.getCore().getModel().getData().
If you're able to log something, try to see this way in console:
var theModel = sap.ui.getCore().getModel()
theModel.oData
See what you get as the output and then you can continue.

Related

ui5 sap.m.table dynamic binding using ODataModel

I have a struggling with my table and it's data, let me give you some context info, I'm using the version 1.72.3, my app is a standalone app hosted in a Nginx, all proxies are in place and working fine.
I have a View like a worklist (a view with one table) and I need to query the back-end using filters but JSONModel not allow it so my idea was simple
I create a propetry in JSONModel called "salesOrders"
using the event attachPatternMatched I call the back-end using oDataModel
I set the property "salesOrders" with the result of oDataModel's call
I bind my table to the property
I place all the code but my best result on screen was
This is the definition of my table in the view.
<Table noDataText="Drop column list items here and columns in the area above" items="{salesOrderListView>/salesOrders}"
id="tableSalesOrders" growingScrollToLoad="true" sticky="ColumnHeaders" growing="true">
<items>
<ColumnListItem type="Navigation" id="item0" press="onPressSalesOrder">
<cells>
<ObjectIdentifier xmlns="sap.m" title="{ path: 'Vbeln', formatter: '.formatter.numberNoZeros' }" titleActive="fasle" id="identifier0"/>
<Link xmlns="sap.m" text="{Customer/Name1}" id="link0" press="onPressCustomer"/>
<Link xmlns="sap.m" text="{Vendor/Ename}" id="link1" press="onPressVendor"/>
<core:Icon src="sap-icon://flag" size="2em" id="icon0" color="{ path: 'Lsstk', formatter: '.formatter.flagStatusColorC' }"/>
<core:Icon xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
src="sap-icon://flag" size="2em" id="icon0_copy2" color="{ path: 'Cmgst', formatter: '.formatter.flagStatusColorCred' }"/>
<core:Icon xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"
src="sap-icon://flag" size="2em" id="icon0_copy" color="{ path: 'Lfstk', formatter: '.formatter.flagStatusColor' }"/>
<Text xmlns="sap.m" text="{Vdatu}" id="text1"/>
<ObjectNumber xmlns="sap.m" number="{ path: 'Kwmeng', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0" textAlign="Center"/>
<ObjectNumber xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m"
number="{ path: 'Kwmengdlvy', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0_copy2" textAlign="Center"/>
<ObjectNumber xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m"
number="{ path: 'Kwmengdiff', formatter: '.formatter.numberNoDecimals' }" unit="CJ" id="number0_copy" textAlign="Center"/></cells>
</ColumnListItem>
</items>
<columns>
<Column id="column0">
<header>
<Label text="{i18n>vbelnLabel}" id="label0"/>
</header>
</Column>
<Column id="column1" minScreenWidth="Large" demandPopin="true" popinDisplay="Inline">
<header>
<Label text="{i18n>customerName1Label}" id="label1"/>
</header>
</Column>
<Column id="column2" minScreenWidth="Large" demandPopin="true" popinDisplay="Inline" popinHAlign="Left">
<header>
<Label text="{i18n>vendorEnameLabel}" id="label2"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy6"
demandPopin="true">
<header>
<Label text="Aprobación Comercial" id="label2_copy6" wrapping="true"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy5"
demandPopin="true">
<header>
<Label text="Aprobación Crediticia" id="label2_copy5" wrapping="true"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy4"
demandPopin="true">
<header>
<Label text="Expedición" id="label2_copy4"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy2">
<header>
<Label text="{i18n>vdatuLabel}" id="label2_copy2" wrapping="true"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy"
minScreenWidth="Large" demandPopin="true" popinDisplay="Inline">
<header>
<Label text="{i18n>kwmengLabel}" id="label2_copy" wrapping="true"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy7"
demandPopin="true" minScreenWidth="Large" popinDisplay="Inline">
<header>
<Label text="{i18n>kwmengDlvyLabel}" id="label2_copy7" wrapping="true"/>
</header>
</Column>
<Column xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="sap.m" id="column2_copy3">
<header>
<Label text="{i18n>kwmengDiffLabel}" id="label2_copy3" wrapping="true"/>
</header>
</Column>
</columns>
<headerToolbar>
<Toolbar width="100%" id="toolbar1">
<content>
<Title id="SalesOrderListHeader" text="{salesOrderView>/salesOrderTableTitle}"/>
<ToolbarSpacer/>
<SearchField id="searchField" tooltip="{i18n>salesOrderSearchTooltip}" search="onSearch" width="auto"/>
</content>
</Toolbar>
</headerToolbar>
</Table>
An in my controller I have this
sap.ui.define([
// "sap/ui/core/mvc/Controller",
"riders/polux/controller/BaseController",
"sap/ui/model/json/JSONModel",
"sap/ui/core/routing/History",
"riders/polux/model/formatter"
], function (BaseController, JSONModel, History, formatter) {
"use strict";
return BaseController.extend("riders.polux.controller.SalesOrderList", {
formatter: formatter,
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf riders.polux.view.SalesOrderList
*/
onInit: function () {
var headerTitle, oViewModel, iOriginalBusyDelay, oTable = this.byId("tableSalesOrders");
// Put down salesOrderList table's original value for busy indicator delay,
// so it can be restored later on. Busy handling on the table is
// taken care of by the table itself.
iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
// Model used to manipulate control states
oViewModel = new JSONModel({
headerTitle: headerTitle,
queryMode: "", //queryMode,
tableBusyDelay: 0,
salesOrders: null
});
this.getRouter().getRoute("SalesOrderList").attachPatternMatched(this._onObjectMatched, this);
this.setModel(oViewModel, "salesOrderListView");
// Make sure, busy indication is showing immediately so there is no
// break after the busy indication for loading the view's meta data is
// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
oTable.attachEventOnce("updateFinished", function () {
// Restore original busy indicator delay for salesOrderList's table
oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
});
// Add the page to the flp routing history
},
_onObjectMatched: function (oEvent) {
var oViewModel = this.getModel("salesOrderListView");
var oTable = this.getView().byId("tableSalesOrders");
var headerTitle, oResourceBundle = this.getResourceBundle();
var queryMode = oEvent.getParameter("arguments").queryMode;
switch (queryMode) {
case "P":
headerTitle = oResourceBundle.getText("salesOrderListViewTitleP");
break;
case "H":
headerTitle = oResourceBundle.getText("salesOrderListViewTitleH");
break;
}
oViewModel.setProperty("/headerTitle", headerTitle);
this.addHistoryEntry({
title: headerTitle,
icon: "sap-icon://table-view",
intent: "#PortalPollux-display&/SalesOrderList/" + queryMode
}, true);
var salesOrders = oViewModel.getProperty("/salesOrders");
if (!salesOrders) {
var odata = new sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/sap/ZPOLLUX_SRV/");
odata.read("/SalesOrderSet", {
success: function (oData, response) {
oViewModel.setData({
salesOrders: oData
}, true);
}
});
}
},
/*
*#memberOf riders.polux.controller.SalesOrderList
*/
onGoBack: function (oEvent) {
//This code was generated by the layout editor.
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
// Go one screen back if you find a Hash
if (sPreviousHash !== undefined) {
window.history.go(-1);
}
// If you do not find a correct Hash, go to the Source screen using default router;
else {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("TargetLaunchpad", true);
}
},
onPressCustomer: function (oEvent) {
// The source is the list item that got pressed - custom
this._showObjectCustomer(oEvent.getSource());
},
onPressVendor: function (oEvent) {
// The source is the list item that got pressed - custom
this._showObjectVendor(oEvent.getSource());
},
onPressSalesOrder: function (oEvent) {
// The source is the list item that got pressed - custom
this._showObjectSalesOrder(oEvent.getSource());
},
_showObjectCustomer: function (oItem) {
this.getRouter().navTo("customer", {
objectId: oItem.getBindingContext().getProperty("Kunnr")
});
},
_showObjectVendor: function (oItem) {
this.getRouter().navTo("vendor", {
objectId: oItem.getBindingContext().getProperty("Pernr")
});
},
_showObjectSalesOrder: function (oItem) {
this.getRouter().navTo("RouteSalesOrder", {
objectId: oItem.getBindingContext().getProperty("Vbeln")
});
}
});
});
I'm fighting with this for two days and I can figure out where is my error.
Can somebody help me, please?
Best Regards and Thank you in advance
From my experience using a JSONModel as solution will introduce other problems:
- you only filter the datasets you fetched. But its likely you don't load them all
- no automatic loading indication, no error handling while loading
- complicated coding for operations on loaded datasets
My solution would be to grab the table binding and apply filters in the controller. However this can not be done in the init() function, since no table binding is set up. I usually use a navigation event that may carries a query parameter from the url that must be applied to the filters as well.
onInit: function() {
...
this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this);
...
}
_onMasterMatched: function() {
var oList = this.byId("myTable");
oList.getBinding("items").filter(new Filter(...));
}
You bound your items property to the path salesOrderListView>/salesOrders, so you are using named model with the name salesOrderListView. At the same time your field binding path looks like Customer/Name1 and it actually point to an unnamed model. In your case it has to be like salesOrderListView>Customer/Name1
When you call odata.read you directly set the JSON model data by this:
oViewModel.setData({
salesOrders: oData
}, true);
but if you look at oData variable during debugging you will see that most probably it is not an array, it's an object with structure:
{ d: { results: [.....] } }
So, I would try to assign data to the model this way:
oViewModel.setData({
salesOrders: oData.d.results
}, true);

How to bind oData to table with parameter

I have oData by path Northwind Customers('ANATR')/Orders
I can't bind it to table Customer orders
Here I have /Customers('" + oArgs.customerId + "')/Orders like in oData link
OrderList.controller.js
sap.ui.define([
"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sap.ui.demo.nav.controller.customer.OrderList", {
onInit: function () {
var oRouter = this.getRouter();
oRouter.getRoute("customer").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Customers('" + oArgs.customerId + "')/Orders",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
}
});
});
And here I link it to bind data {path : '/Orders'} how to insert {CustomerID} parameter?
OrderList.view.xml
<mvc:View
controllerName="sap.ui.demo.nav.controller.customer.OrderList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Page
id="orderListPage"
title="{i18n>OrderList}"
showNavButton="true"
navButtonPress=".onNavBack"
class="sapUiResponsiveContentPadding">
<Panel accessibleRole="Region">
<headerToolbar>
<Toolbar>
<Title text="{i18n>orderListTitle}"/>
<ToolbarSpacer/>
<SearchField
width="50%"
search=".onFilterOrders"/>
</Toolbar>
</headerToolbar>
<Table
id="orderList"
class="sapUiResponsiveMargin"
width="auto"
items="{
path : '/Orders'
}">
<columns>
<Column
hAlign="End"
minScreenWidth="Small"
demandPopin="true"
width="4em">
<Text text="{i18n>columnOrderID}"/>
</Column>
<Column>
<Text text="{i18n>columnCustomerID}"/>
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="false">
<Text text="{i18n>columnOrderDate}"/>
</Column>
<Column
hAlign="End">
<Text text="{i18n>columnPrice}"/>
</Column>
</columns>
<items>
<ColumnListItem
type="Navigation"
press=".onPress">
<cells>
<ObjectNumber number="{OrderID}" emphasized="false"/>
<ObjectIdentifier title="{CustomerID}"/>
<Text text="{OrderDate}"/>
<ObjectNumber
number="{
parts: [{path: 'Freight'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
</Page>
</mvc:View>
path : '/Orders' is an absolute binding (slash at the beginning). This means UI5 will try to fetch https://services.odata.org/V2/Northwind/Northwind.svc/Orders.
Also you bound your view to a list of things. In general, this is not what you want.
What you want is to bind your view against a single Customer entity
oView.bindElement({
path : "/Customers('" + oArgs.customerId + "')",
events: {
...
}
});
and then use relative binding (no slash at the beginning) for the Orders:
items="{
path : 'Orders'
}"

Consuming OData V4 from SAPUI5

I am trying to use OData V4 with SAPUI5. Although it seems quite straight forward, I am facing couple of issues.
I am using sap.ui.layout.sample.SimpleFormToolbar sample from Demokit. Implemented a OData V4 service to display the data in the simple form.
Changes i have done in this app:
1. manifest.json and
2. Page.view.xml for Context Binding of form control
3. Removed code reference to mockdata in controller and index.html
However, I am not able to get data with following errors:
2019-07-07 08:58:23.736110 Failed to update path /Suppliers(12345)/Country - **Error: Must not change a property before it has been read**
**Uncaught Error: Must not change a property before it has been read**
Another error is related batch mode. I have not implemented any batch processing in Odata impl.
2019-07-07 08:58:24.279114 **$batch failed** - Error: Network error
2019-07-07 08:58:24.281175 Failed to read path /Suppliers(12345) - Error: **HTTP request was not processed because $batch failed**
The code i am using is:
//manifest.json
{
"_version": "1.12.0",
"sap.app": {
"id": "sap.ui.layout.sample.SimpleFormToolbar",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"supplierOData": {
"uri": "https://supplierappp1014576trial.hanatrial.ondemand.com/SupplierApp/SupplierService.svc/",
"type": "OData",
"settings": {
"odataVersion": "4.0"
}
}
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.layout.sample.SimpleFormToolbar.Page",
"type": "XML",
"async": true
},
"dependencies": {
"libs": {
"sap.ui.layout": {}
}
},
"models": {
"": {
"dataSource": "supplierOData",
"settings" : {
"synchronizationMode" : "None"
}
}
},
"config": {
"sample": {
"files": [
"Page.view.xml",
"Page.controller.js",
"manifest.json"
]
}
}
}
}
//Page.view.xml
<mvc:View
controllerName="sap.ui.layout.sample.SimpleFormToolbar.Page"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormToolbar"
binding="{/Suppliers(12345)}"
editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="3"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="4"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="1"
columnsM="1"
singleContainerFullSize="false"
ariaLabelledBy="Title1" >
<f:toolbar>
<Toolbar id="TB1">
<Title id="Title1" text="Address" level="H4" titleStyle="H4"/>
<ToolbarSpacer />
<Button icon="sap-icon://settings"/>
<Button icon="sap-icon://drop-down-list" />
</Toolbar>
</f:toolbar>
<f:content>
<Toolbar ariaLabelledBy="Title2">
<Title id="Title2" text="Office" level="H5" titleStyle="H5"/>
<ToolbarSpacer />
<Button icon="sap-icon://settings"/>
</Toolbar>
<Label text="Name" />
<Input value="{SupplierName}" />
<Label text="Street/No." />
<Input value="{Street}">
</Input>
<Input value="{HouseNumber}">
<layoutData>
<l:GridData span="XL2 L1 M3 S4" />
</layoutData>
</Input>
<Label text="ZIP Code/City" />
<Input value="{ZIPCode}">
<layoutData>
<l:GridData span="XL2 L1 M3 S4" />
</layoutData>
</Input>
<Input value="{City}" />
<Label text="Country" />
<Select id="country" selectedKey="{Country}">
<items>
<core:Item text="England" key="England"/>
<core:Item text="Germany" key="Germany"/>
<core:Item text="USA" key="USA"/>
</items>
</Select>
<Toolbar ariaLabelledBy="Title3">
<Title id="Title3" text="Online" level="H5" titleStyle="H5"/>
<ToolbarSpacer />
<Button icon="sap-icon://settings"/>
</Toolbar>
<Label text="Web" />
<Input value="{Url}" type="Url" />
<Label text="Twitter" />
<Input value="{Twitter}" />
</f:content>
</f:SimpleForm>
</VBox>
</mvc:View>
//Page.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/ui/model/odata/v4/ODataModel'
], function(jQuery, Controller, JSONModel, ODataModel) {
"use strict";
var PageController = Controller.extend("sap.ui.layout.sample.SimpleFormToolbar.Page", {
onInit: function (oEvent) {
console.log("hello");
jQuery.get({
url: "/SupplierService/SupplierService.svc/Suppliers(12345)",
success: function(data) {
console.log( "Recieved data: " + data);
},
error: function(error) {
// your error logic
console.log("Error while requesting odata: " + error);
}
});
}
});
return PageController;
});
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen – with toolbar</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.layout.sample.SimpleFormToolbar": "./",
"sap.ui.demo.mock": "mockdata"
}'
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-preload=""
data-sap-ui-frameOptions="trusted"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport">
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component
data-name="sap.ui.layout.sample.SimpleFormToolbar"
data-height="100%"
data-id="container"
data-settings='{"id" : "sap.ui.layout.sample.SimpleFormToolbar"}'
style="height: 100%">
</div>
</body>
</html>
I have added jquery call just to see if the odata is working or not.
Command used for CORS issue: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
I am actually pointing to odata service in the same project. The same is deployed on Sap Cloud: https://supplierappp1014576trial.hanatrial.ondemand.com/SupplierApp/SupplierService.svc/
Thanks for your time.
EDIT:
Added the solution as an answer below.
The error:
"must not change a property before it has been read" is understood to be CORS issue.
Accepting Cross origin requests on server side can be done by configuring web.xml. Note that this should be re-evaluated for production use.
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
The error:
"$batch failed - Error: Network error" is resolved by changing groupId to $direct. This means we are sending individual network calls to odata service.
"models": {
"": {
"dataSource": "supplierOData",
"settings" : {
"synchronizationMode" : "None",
"groupId": "$direct"
}
}
},
This took away those errors and I see the data is rendered into form fields.
Thanks for your attention.

Filter in Controller with Property of an Expanded Entity

In a master-detail view, I have a list of work centers as master part, and a planning calendar as detail part.
<mvc:View controllerName="sap.ui.demo.wt.controller.Overview"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.m.semantic"
xmlns:unified="sap.ui.unified"
xmlns:core="sap.ui.core" displayBlock="true"
>
<Page title="{i18n>overviewPageTitle}">
<SplitContainer>
<masterPages>
<semantic:MasterPage title="{i18n>overviewMasterTitle}">
<List items="{data>/WorkCenterSet}">
<ObjectListItem
title="{data>WorkCntr}"
type="Active"
press="onWorkCtrPressed"
/>
</List>
</semantic:MasterPage>
</masterPages>
<detailPages>
<semantic:DetailPage title="{i18n>overviewDetailTitle}">
<VBox>
<PlanningCalendar id="PC"
startDate="{/StartDate}"
rows="{
path : 'data>/EmployeeSet',
parameters : {
expand : 'OrderOperation, EmployeeWorkCenter'
}
}"
>
<rows>
<PlanningCalendarRow
title="{data>UserFullname}"
appointments="{
templateShareable : true,
path : 'data>OrderOperation'
}"
>
<appointments>
<unified:CalendarAppointment
startDate="{data>EarlSchedStartdate}"
endDate="{data>EarlSchedFindate}"
title="{data>Description}"
/>
</appointments>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>
</semantic:DetailPage>
</detailPages>
</SplitContainer>
</Page>
</mvc:View>
I want to filter the planning calendar according to the work center an employee belongs to.
Here is the controller :
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/odata/v2/ODataModel",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function(Controller,JSONModel,ODataModel,Filter,FilterOperator) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.Overview", {
onInit: function(){
this.getView().setModel(new JSONModel({
"StartDate" : new Date("2016-06-12T08:00:00Z")
}));
},
onWorkCtrPressed: function(oEvent) {
var oContext = oEvent.getSource().getBindingContext("data");
var sWorkCntr = oContext.getPath().split("'")[1]; //get the work center's name
//What I tried first
//var aFilter = [];
//aFilter.push(new Filter("WorkCntr",FilterOperator.StartsWith,sWorkCntr))
//this.getView().byId("PC").getBinding("rows").filter(aFilter);
sap.m.MessageToast.show("Selected Work Center : " + sWorkCntr);
}
});
});
What I tried first doesn't work because of the query look for the property "WorkCntr" in the entity set "EmployeeSet". But this property exists only in the entity set "EmployeeWorkCenterSet" that I have expanded in the view. The problem is: I don't even know the query I need to use... Could you help ?
PS: My OData service is in version 2. Queries like
EmployeeSet?$expand=EmployeeWorkCenter($filter={any filter})
do not work.

FireFox Extension XulSchool - Adding Events and Commands - on load function

I'm trying to edit the helloworld from this tutorial:
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions
So, I need to execute a function when page loads, this part of the tutorial explains how to do that:
https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Adding_Events_and_Commands
I edited the browserOverlay.js file, I writed the init function and that listener at the end of the code:
/**
* XULSchoolChrome namespace.
*/
if ("undefined" == typeof(XULSchoolChrome)) {
var XULSchoolChrome = {};
};
/**
* Controls the browser overlay for the Hello World extension.
*/
XULSchoolChrome.BrowserOverlay = {
init : function(event) {
window.alert('aaaaeeee');
},
/**
* Says 'Hello' to the user.
*/
sayHello : function(aEvent) {
let stringBundle = document.getElementById("xulschoolhello-string-bundle");
let message = stringBundle.getString("xulschoolhello.greeting.label");
window.alert(message);
}
};
window.addEventListener("load", function() {
//window.removeEventListener("load", onFirefoxLoadEvent, false); // remove listener, no longer needed
XULSchoolChrome.BrowserOverlay.init();
}, false);
and I edited the broserOverlay.xul, I writed the onload propertie at overlay tag:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css"
href="chrome://xulschoolhello/skin/browserOverlay.css" ?>
<!DOCTYPE overlay SYSTEM
"chrome://xulschoolhello/locale/browserOverlay.dtd">
<overlay id="xulschoolhello-browser-overlay"
onload="XulSchoolChrome.BrowserOverlay.init();"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://xulschoolhello/content/browserOverlay.js" />
<stringbundleset id="stringbundleset">
<stringbundle id="xulschoolhello-string-bundle"
src="chrome://xulschoolhello/locale/browserOverlay.properties" />
</stringbundleset>
<menubar id="main-menubar">
<menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
<menupopup>
<menuitem id="xulschoolhello-hello-menu-item"
label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloItem.accesskey;"
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
</menupopup>
</menu>
</menubar>
<vbox id="appmenuSecondaryPane">
<menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloMenu.accesskey;"
insertafter="appmenu_addons">
<menupopup>
<menuitem id="xulschoolhello-hello-menu-item-2"
label="&xulschoolhello.hello.label;"
accesskey="&xulschoolhello.helloItem.accesskey;"
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
</menupopup>
</menu>
</vbox>
</overlay>
It does not alert on page loads.... why?

Resources