I have the following list, but it is not reacting to any of the events that I'm using.
In the method onSelectionChange i have breakpoints and is updating the label, but it is for some reason not reaching this. The onSearch method is working fine.
I'm using the sapui5
<mvc:View
height="100%"
controllerName="Tasks.CompletedTasks.view.CompletedTasks"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<SearchField
liveChange="onSearch"
width="100%" />
<Label id="label" text="test">
</Label>
<List
id="idList"
items="{/results}"
select="onSelectionChange"
>
<items>
<StandardListItem
title="{TaskTitle}"
description="{InstanceID}"
icon="sap-icon://task"
iconDensityAware="false"
iconInset="false"
/>
</items>
</List>
Code:
jQuery.sap.require("jquery.sap.resources");
jQuery.sap.require("sap.ui.model.Filter");
jQuery.sap.require("sap.ui.model.FilterOperator");
jQuery.sap.require("Tasks.CompletedTasks.util.ModelBuilder");
sap.ui.controller("Tasks.CompletedTasks.view.CompletedTasks", {
/**
* 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 cscompletedtasks.CompletedTasks
*/
onInit: function() {
//this.getView().bindElement("/results");
},
onSelectionChange : function (oEvt) {
var oList = oEvt.getSource();
var oLabel = this.getView().byId("label");
oLabel.setText("event");
},
onSearch : function (oEvt) {
// add filter for search
var aFilters = [];
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("TaskTitle", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var list = this.getView().byId("idList");
var binding = list.getBinding("items");
binding.filter(aFilters, "Application");
}
});
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script id="sap-ui-bootstrap"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"Tasks.CompletedTasks" : "./" }'>
</script>
<script>
new sap.ui.core.ComponentContainer( {
name : "Tasks.CompletedTasks"
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
The select event work if you set the mode of selection on the list.
<List
id="idList"
items="{/results}"
select="onSelectionChange",
mode="" //Type of mode you required SingleSelect,MultiSelect, Delete default it is None.
>
<items>
<StandardListItem
title="{TaskTitle}"
description="{InstanceID}"
icon="sap-icon://task"
iconDensityAware="false"
iconInset="false"
/>
</items>
</List>
refer this link for more information
Please slot this at the top of the function handling the onSelectionChange event:
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['INFO']);
jQuery.sap.log.info("*** my onSelectionChange has triggered");
i.e.:
onSelectionChange : function (oEvt) {
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['INFO']);
jQuery.sap.log.info("*** my onSelectionChange has triggered");
var oList = oEvt.getSource();
Then check the console of your browser and filter to find the output of this message. (Just in case the event is triggering and your consequent code doesn't do anything. (if you have set the LogLevel elsewhere please ignore)
Related
The segmented button is as follows:
<SegmentedButton width="98%">
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
</SegmentedButton>
and Next button as:
<Button text="Next" press="onPressNext" enabled="true"></Button>
previous button as:
<Button text="Previous" press="onPressPrevious" enabled="true"></Button>
How to write the JS code so that when Next is pressed INDICATOR2 should be active and on second press INDICATOR3 should be active
And when on INDICATOR2 if Previous is pressed both INDICATOR2 and INDICATOR1(which is current one) should be active
I have no knowledge on JS at least to try , any help so that I would go through it and learn, TIA
You can grab the list of items from the SegmentedButton, get the next or previous item respecitively, and set it as the selected item.
(I added an id to the SegmentedButton in below example)
sap.ui.define("myController", [
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("myController", {
onPressNext: function() {
var sb = this.byId("segmentButton1");
var items = sb.getItems().map(function(itm) { return itm.getId() });
var idx = items.indexOf(sb.getSelectedItem()) + 1;
if(idx < items.length) {
sb.setSelectedItem(items[idx]);
}
},
onPressPrevious: function() {
var sb = this.byId("segmentButton1");
var items = sb.getItems().map(function(itm) { return itm.getId() });
var idx = items.indexOf(sb.getSelectedItem()) - 1;
if(idx > -1) {
sb.setSelectedItem(items[idx]);
}
}
});
});
sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
XMLView.create({
definition: $('#myView').html()
}).then(function(oView) {
oView.placeAt('content');
});
});
<html>
<head>
<meta charset="utf-8">
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m'></script>
<script id="myView" type="sapui5/xmlview">
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController">
<SegmentedButton width="98%" id="segmentButton1">
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before" />
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present" />
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after" />
</items>
</SegmentedButton>
<Button text="Previous" press="onPressPrevious" enabled="true" />
<Button text="Next" press="onPressNext" enabled="true" />
</mvc:View>
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
I think you create event like onclick and change OR add style class for example active attribute
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress active" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
and when you click next then you have to remove active class from INDICATOR1 and then append active class to next indicator
<items>
<SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
<SegmentedButtonItem text="INDICATOR2" class="progress active" id="present"/>
<SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>
Please write an onclick function for the next button something like below
function onNextClick(){
//Make the css of INDICATOR1 normal and INDICATOR2 || INDICATOR3 active
}
In my XML view, I have a Table, in that Table I have Input field at a particular column, and I have a function for liveChange event of that Input field. Code is like below:
<Table ...>
<columns> ... </columns>
<items>
<ColumnListItem>
<cells>
......
<Input type ="Number" value="{...}" liveChange="qtyChanged"/>
</cells>
</ColumnListItem>
</items>
</Table>
In qtyChanged(), I need to know the row number on which user is editing. How to achieve it?
You can achieve it using indexOfItem() of sap.m.Table
qtyChanged: function(oEvent){
var oRow = oEvent.getSource().getParent();//Get Row
var oTable = oRow.getParent();// Get Table
var iRowIndex = oTable.indexOfItem(oRow);//Get Row index
}
Note: If the response data is more then table row limit then scroll will appear, then the row index will not work properly.
you can get the binding context and then the path. you're also able to get the object itself like this (working example http://jsbin.com/hutuvo/edit?html,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
controllerName="sap.example.Controller"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%">
<Table id="idProductsTable" items="{ path: 'suppliers>/suppliers'}">
<columns>
<Column><Text text="Supplier" /></Column>
<Column><Text text="Quantity" /></Column>
</columns>
<items>
<ColumnListItem>
<cells><Text text="{suppliers>SupplierName}" /></cells>
<cells><Input type ="Number" value="{suppliers>Quantity}" liveChange="qtyChanged" /></cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"],
function(Controller, JSONModel) {
"use strict";
var oPageController = Controller.extend("sap.example.Controller", {
onInit: function() {
var oView = this.getView();
oView.setModel(new JSONModel({
suppliers: [
{
SupplierName: "Apple",
Product: "iPhone",
Quantity: 0
}, {
SupplierName: "Samsung",
Product: "Galaxy",
Quantity: 0
}
]
}), "suppliers");
},
qtyChanged: function(oEvent) {
var oContext = oEvent.getSource().getBindingContext("suppliers");
var oPath = oContext.getPath();
var index = parseInt(oPath.substring(oPath.lastIndexOf("/") + 1), 10);
console.log(index);
console.log(oContext.getObject());
}
});
return oPageController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I have to create a table (sap.m.Table) in SAPUI5 where rows can be deleted, reordered, and clicked on to open a dialog. So far I've figured out that I can set the Table to mode="delete" and ColumnListItem to type="Navigation" to achieve deleting rows and clicking on rows to open dialogs at the same time:
Is it possible to add the functions to reorder rows to this?
You can use a "editModeEnabled" variable in your view model to change the Table mode to "SingleSelectLeft" and show/hide some buttons. Then in "editMode", use some buttons to insert and remove the items of the table wherever you want
Here a snippet
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Page>
<Table id="myTable" mode="{= ${viewModel>/editModeEnabled} ? 'SingleSelectLeft' : 'SingleSelectMaster'}" items="{path:'json>/rows'}">
<headerToolbar>
<Toolbar>
<ToolbarSpacer></ToolbarSpacer>
<Button text="Edit" press="onEditPressed" visible="{= ${viewModel>/editModeEnabled} ? false : true}"></Button>
<Button icon="sap-icon://slim-arrow-down" press="onDownPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button icon="sap-icon://slim-arrow-up" press="onUpPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button text="Finish" press="onFinishEditPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Column1" />
</Column>
<Column>
<Text text="Column2" />
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="{json>col1}"></Text>
<Text text="{json>col2}"></Text>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var oViewModelData = {
editModeEnabled: false
};
var oViewModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(oViewModel, "viewModel")
},
onEditPressed: function() {
this.getView().getModel("viewModel").setProperty("/editModeEnabled", true);
},
onFinishEditPressed: function(){
this.getView().getModel("viewModel").setProperty("/editModeEnabled", false);
},
onUpPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex > 0){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex-1);
}
},
onDownPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex < this.getView().byId("myTable").getItems().length){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex+1);
}
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create a Model and assign it to the View
//Using a small JSON model
var myData = {
rows: [
{
col1: "Row1Col1",
col2: "Row1Col2",
},{
col1: "Row2Col1",
col2: "Row2Col2",
},{
col1: "Row3Col1",
col2: "Row3Col2",
}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel(myData);
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// Set the Models
myView.setModel(oJSONModel, 'json');
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Hi i have a searchfield with this code behind it:
onSearch : function (oEvent) {
if (oEvent.getParameters().refreshButtonPressed) {
// Search field's 'refresh' button has been pressed.
// This is visible if you select any master list item.
// In this case no new search is triggered, we only
// refresh the list binding.
this.onRefresh();
} else {
var andFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery && sQuery.length > 0) {
// add filters
var oTableSearchState = [];
oTableSearchState = [new Filter("Supplier", FilterOperator.Contains, sQuery), new Filter("BusArea", FilterOperator.Contains, sQuery), new Filter("CostCenter", FilterOperator.Contains, sQuery),
new Filter("FuncArea", FilterOperator.Contains, sQuery)];
andFilter.push(new Filter(oTableSearchState, false));
}
this._applySearch(andFilter);
}
},
And a filter button that should add aditional filters. Something like this:
onSetFilter : function(oEvent) {
var andFilter = [];
andFilter.push(new Filter("BusArea", FilterOperator.EQ, "5000"));
this._applySearch(andFilter);
},
But of course the "BusArea" part should be dependent on what filters are selected. It could be more than 1 filter. the _applySearch function looks like this:
_applySearch: function(andFilter) {
var oViewModel = this.getModel("worklistView");
this._oTable.getBinding("items").filter(andFilter, true);
// changes the noDataText of the list in case there are no filter results
if (andFilter.length !== 0) {
oViewModel.setProperty("/tableNoDataText",
this.getResourceBundle().getText("worklistNoDataWithSearchText"));
}
}
the problem is that when i add a filter via the filter button, the filters from the searchbar disappear and the other way arround. how can i change my code so that i can add the filters without removing the existing ones?
One solution is to get the Filters from the binding info and push back together with the new Filter using and.
this._oTable.getBindingInfo("items").filters.aFilters;
After our conversation on the chat, I have made this snippet using a global model.
https://jsbin.com/pewavuhonu/edit?html,output
The ComboBox and the Button simulates your Dialog.
The input simulates the SearchField
Both are binded against the global "filtersModel", and both call the _calculateFilters() function when submiting the info
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Panel headerText="Filters">
<VBox>
<HBox>
<Label text="Filter by Customer:" class="sapUiSmallMarginTop sapUiSmallMarginEnd"/>
<ComboBox id="comboBox" selectedKey="{filtersModel>/customerFilter}">
<items>
<core:Item key="VINET" text="VINET" />
<core:Item key="TOMSP" text="TOMSP" />
<core:Item key="HANAR" text="HANAR" />
<core:Item key="VICTE" text="VICTE" />
<core:Item key="SUPRD" text="SUPRD" />
</items>
</ComboBox>
<Button text="Apply this Filter" press="_calculateFilters"></Button>
</HBox>
</VBox>
<VBox>
<HBox>
<Input value="{filtersModel>/shipAddressFilter}" id="input" submit="_calculateFilters" width="500px" placeholder="Filter by ShipAddress: Write and enter for filtering"/>
</HBox>
</VBox>
</Panel>
<Panel>
<List id="list" items="{/Orders}">
<StandardListItem title="{CustomerID}" info="{ShipAddress}"/>
</List>
</Panel>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var oFiltersModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(oFiltersModel, "filtersModel");
},
_calculateFilters: function(){
var oSelect = this.getView().byId("comboBox"),
oListBinding = this.getView().byId("list").getBinding("items"),
oFiltersModel = sap.ui.getCore().getModel("filtersModel"),
oCustomerFilterValue = oFiltersModel.getProperty("/customerFilter"),
oShipAddressValue = oFiltersModel.getProperty("/shipAddressFilter"),
oFilters = [];
if(oCustomerFilterValue){
oFilters.push(new sap.ui.model.Filter("CustomerID", "EQ", oCustomerFilterValue));
}
if(oShipAddressValue){
oFilters.push(new sap.ui.model.Filter("ShipAddress", "Contains", oShipAddressValue));
}
oListBinding.filter(oFilters);
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create some dummy JSON data
var data = {
actionName: "Say Hello"
};
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create a Model and assign it to the View
var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
var oModel = new sap.ui.model.odata.ODataModel(uri, {
maxDataServiceVersion: "2.0"
});
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Using single model definition in manifest.json
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "....i18n.i18n"
}
},
"": {
"dataSource": "mainService"
}
}
i can bind to model from XML and it's work
<List items="{path: '/myOneSet'}"> ... </List>
<List items="{path: '/myTwoSet'}"> ... </List>
but i can not access to it from code
this.getView().getModel().getProperty('/myOneSet')
or
this.getView().getModel().getProperty('/myOneSet/>param')
not work. How it accessible?
If mainService is an OData service, then your model is an ODataModel. You can access data via methods described in the API, e.g.: read()
this.getView().getModel().read('/myOneSet', {
success: function(oData, response) {
// do sg. with oData
}
});
Most of its data access methods has a second parameter-object with a success function callback. This function will be called asynchronously with the data on the given path upon successful data retrieval from the datasource. Most of the ODataModel API methods works with callbacks. You can read more about callbacks here.
If you defined model in the manifest.json file then you can access it via Component. If you created your project via template then you have a BaseController.js file which is the ancestor of your other controllers and there is a function getComponentModel. So, I would suggest you to try this code in your controller:
this.getComponentModel().getProperty('/myOneSet')
Because of the property name that you try to access I assume you are using an ODataModel. Is that correct?
If that's true you have to consider a few things... ODataModel.getProperty() does not trigger requests. Instead it will return whats already available. If you want to trigger a request you should execute an ODataModel.read(). If you want to get the loaded data from the ODataModel then you should also know when the data has been loaded. This you can achieve by attaching a change event handler when you do the binding.
Instead of describing how to access the data of an ODataModel I wrote s little jsbin example for you (or see below). Just check the change event handler. There are multiple ways to access the data.
<!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">
<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>
<!-- filled via bindItems() in controller -->
</items>
</Table>
</mvc:View>
</script>
<!-- XML Fragment -->
<script id="myXMLFragment" type="ui5/fragment">
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<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>
</core:FragmentDefinition>
</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 () {
this.getView().setModel(
new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
json : true,
useBatch : false
})
);
var sPath = "/Customers('ALFKI')/Orders";
var oTable = this.byId("myTable");
var oTemplate = sap.ui.xmlfragment({
fragmentContent : jQuery("#myXMLFragment").html()
});
oTable.bindItems({
path : sPath,
template : oTemplate,
templateShareable : false,
sorter : null,
filters : null,
events : {
change : function (oEvent) {
var oModel, oListBnd, aContexts, i, oObj;
console.log("1. Example: ODataModel.getProperty() does not trigger a request (but here we have the data already)!");
oModel = this.getView().getModel();
console.dir( oModel.getProperty("/Orders(10643)")); //OK
console.dir( oModel.getProperty("/Orders") ); //Not OK
console.dir( oModel.getData("/") ); //DANGER: Could contain different entities!!!!!
console.log("2. Example: Accessing the Data via ListBinding");
oListBnd = oTable.getBinding("items"); // get the ListBinding
//oListBnd = oEvent.getSource(); // this works here inside the change handler
aContexts = oListBnd.getCurrentContexts(); // the the contexts
for(i=0; i<aContexts.length; i++){
oObj = aContexts[i].getObject(); // access the items/objects
console.dir( oObj );
}
}.bind(this)
}
});
}
});
});
//### 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>
Hi Just declare this is manifest
"models": {
"createMod": {
"preload": true,
"dataSource": "CreateService",
"settings": {
}
}
and Try to Access by Controller using.
var oModelCheck = that.getOwnerComponent().getModel("createMod");