SAPUI5 onSearch() Filter update - sapui5

Somehow my filter update through the function onSearch is not updating the view. The initial Filter in the XML View is working fine. Also when sIaNr is empty the aFilter = [] is working as I'm seeing all results. But when sIaNr is not empty this part is called and the filter is not working:
aFilter.push(new Filter("raufnr", FilterOperator.EQ, sIaNr))
this is my Code
ZCATS_TESTJ.json
{
"d": {
"results": [{
"status": "30",
"skostl": "0001",
"catshours": "2.50",
"ktext": "test1",
"counter": "000003484040",
"mandt": "101",
"pernr": "00015822",
"usrid": "xx123",
"workdate": "\/Date(1477267200000)\/",
"raufnr": "6000025"
}, {
"status": "30",
"skostl": "0001",
"catshours": "8.00",
"ktext": "test2",
"counter": "000002919281",
"mandt": "101",
"pernr": "1234",
"usrid": "xx123",
"workdate": "\/Date(1441065600000)\/",
"raufnr": "0815"
}, {
"status": "30",
"skostl": "0001",
"catshours": "8.00",
"ktext": "test1",
"counter": "000002919281",
"mandt": "101",
"pernr": "00015822",
"usrid": "xx123",
"workdate": "\/Date(1441065600000)\/",
"raufnr": "6000007"
}]
}
}
List.view
<mvc:View
controllerName="sap.ui.bookedTimes.wt.controller.List"
id="listview"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:fb="sap.ui.comp.filterbar"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Table id="exportTable" inset="false" growing="true" growingThreshold="700" visible="true"
items="{
path : 'view>/d/results',
filters : [
{ path : 'raufnr', operator : 'EQ', value1 : '6000007'}
]
}">
<headerToolbar>
<OverflowToolbar>
<ToolbarSpacer />
<Button icon="sap-icon://excel-attachment" press="onExport"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column>
<Text text="IA-Nummer" />
</Column>
<Column>
<Text text="Bezeichnung" />
</Column>
<Column>
<Text text="Datum" />
</Column>
<Column hAlign="End">
<Text text="Zeit" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{view>raufnr}" />
<Text id="tText" text="{view>ktext}" />
<Text text="{path: 'view>workdate', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'dd.MM.yyyy' } }" />
<Text text="{view>catshours}" />
</cells>
</ColumnListItem>
</items>
</Table>
List.controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/ui/core/util/MockServer',
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/model/FilterType"
// 'sap/ui/export/Spreadsheet'
], function(jQuery, Controller, JSONModel, Filter, FilterOperator, FilterType) {
"use strict";
return Controller.extend("sap.ui.bookedTimes.wt.controller.List", {
onInit : function () {
//Get Model
var jModel = this.getOwnerComponent().getModel("zCatsTestJ");
var that = this;
//after Model is loaded transform Date
jModel.attachRequestCompleted(function() {
//var oViewModel= new JSONModel(jModel);
for (var i = 0; i< jModel.oData.d.results.length; i++){
var sJsonDate = jModel.getProperty("/d/results/" + [i] + "/workdate");
//Json Date in Datumsformat umwandeln
var sNumber = sJsonDate.replace(/[^0-9]+/g,'');
var iNumber = sNumber * 1; //trick seventeen
var oDate = new Date(iNumber);
jModel.setProperty("/d/results/" + [i] + "/workdate", oDate);
}
//update the model with new Date format
that.getView().setModel(jModel, "view");
});
},
onSearch: function(oEvent) {
// build filter array
var aFilter = [];
var oParams = oEvent.getParameter("selectionSet");
var sIaNr = oParams[0].getValue();
var oList = this.getView().byId("exportTable");
var oBinding = oList.getBinding("items");
if (sIaNr) {
aFilter.push(new Filter("raufnr", FilterOperator.EQ, sIaNr));
}
//filter binding
oBinding.filter(aFilter, FilterType.Application);
}
});
});
any help would be greatly appreciated. Thanks

Delete 'sap/ui/core/util/MockServer' in the define part.

Related

Manipulating Icon properties based on row index (row number) of table and a property of Model Data

I have the table in XML view as:
<Table id="testtable" xmlns="sap.ui.table"
rows="{/testdata}"
alternateRowColors="true">
<columns>
<Column hAlign="Center" label="Col1">
<template>
<m:Text text="{dataX}" wrapping="false" />
</template>
</Column>
<Column hAlign="Center" label="Col2">
<template>
<m:Text text="{dataY}" wrapping="false" />
</template>
</Column>
<Column label="Col3">
<template>
<m:HBox>
<core:Icon src="sap-icon://show" color="{path: 'test', formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://edit" color="{path: 'test', formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://print" color="{path: 'test', formatter: '.setIconColour'}" />
</m:HBox>
</template>
</Column>
</columns>
</Table>
From the prev Q in SO , I could able to manipulate icon properties using formatter as :
controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel, XMLModel) {
"use strict";
return Controller.extend("MyController", {
onInit : function () {
var that = this;
let model = new JSONModel(this.getData());
this.getView().setModel(model);
},
setIconColour: function (value) {
if (value === 0) {
return "Default";
} else if (value === 1) {
return "#007bff";
} else if (value === 2) {
return "Positive";
} else if (value === 3) {
return "Negative";
}
},
getData: function(){
return {"testdata": [
{ "dataX": 1, "dataY": "testdata", "test": 0},
{ "dataX": 2, "dataY": "testdata", "test": 2},
{ "dataX": 3, "dataY": "testdata", "test": 3},
{ "dataX": 4, "dataY": "testdata", "test": 1}
]};
}
})
});
Here May I know how can I check multiple conditions for e.g.
1) Manipulating color properties based on test value and row number (index) (or) which index of array and its corresponding test value
from above I could think as passing multiple params to setIconColour (row/index no. and test) values If I'm not wrong ,
May I know how could I do this , Hope its clear :)
For a multivariable formatter use this syntax for the formatted control:
<core:Icon src="sap-icon://show" color="{ parts : [ 'test', 'dataX' ], formatter: '.setIconColour'}" />
The function needs to be adjusted to:
setIconColour: function (testValue, dataX) {
if (testValue === 0 && dataX === 1) {
return "Default";
} else if (testValue === 0 && dataX === 2) {
return "#ff0000";
} else if (testValue === 1) {
return "#007bff";
} else if (testValue === 2) {
return "Positive";
} else if (testValue === 3) {
return "Negative";
}
},

How to bind data from controller to Xml View table

I am having a table with columns as below:
<Table id="table2" visibleRowCount="5" rows="{
path: '/ProductCollection',
sorter: {path: 'serialId', descending: false}}">
<columns>
<Column width="50px">
<m:Text text="Employee ID" />
<template>
<m:Text text="{employeeId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName" />
<template>
<m:Text text="{employeeName}" wrapping="false" />
</template>
</Column>
</columns>
</Table>
And JSON Data is :
var oData = {
ProductCollection: [
{
employeeId: "1"
employeeName:"xyz"
},
{
employeeId: "1"
employeeName:"xyz"
},
{
employeeId: "1"
employeeName:"xyz"
}
]
};
And i have tried binding as :
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(ProductCollection);
this.getView().setModel(oModel);
I am getting the data but into model but unable to display values in table getting empty rows.I am facing problem in binding(xml view)any guiding links or a solution would be much helpful , TIA
<mvc:View controllerName="reg.cmdd.Consumer.controller.Home" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified"
xmlns:c="sap.ui.core" xmlns:m="sap.m" height="100%">
<m:Page showHeader="false" enableScrolling="false" class="sapUiContentPadding">
<m:content>
<Table id="table2" visibleRowCount="5" rows="{ path: '/ProductCollection', sorter: {path: 'serialId', descending: false}}">
<columns>
<Column width="50px">
<m:Text text="Employee ID"/>
<template>
<m:Text text="{employeeId}" wrapping="false"/>
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName"/>
<template>
<m:Text text="{employeeName}" wrapping="false"/>
</template>
</Column>
</columns>
</Table>
</m:content>
</m:Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("reg.cmdd.Consumer.controller.Home", {
onInit: function () {
var oData = {
ProductCollection: [{
employeeId: "1",
employeeName: "xyz"
}, {
employeeId: "1",
employeeName: "xyz"
}, {
employeeId: "1",
employeeName: "xyz"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
this.getView().setModel(oModel);
}
});
});
Your code is fine, the problem must be elsewhere
EDIT:
check this line:
oModel.setData(ProductCollection);
it should be
oModel.setData(oData);

SAPUI5 Fiori Smart Table and Other Controls in Same Page

I would like to know that, can I have a Smart Table (With Smart Filter Bar) along with other Fiori controls such as Planning Calendar, Grant Chart or Another Responsive Table within the same page.
Since Page which contains a Smart Table must contain the table's oData service in the page default model, can we have custom UI codes & models for other controls .
Sample Screen
I don't see why that could be a problem. I created a quick UI5 application with both a sap.ui.comp.smarttable.SmartTable and a sap.m.PlanningCalendar.
Btw, I started off with the first Smart Table sample.
Hope this helps.
View
<mvc:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:unified="sap.ui.unified"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="sap.ui.comp.sample.smarttable.SmartTable"
height="100%">
<App>
<pages>
<Page title="Title">
<content>
<VBox fitContainer="false">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="LineItemsSet" persistencyKey="SmartFilter_Explored"
basicSearchFieldName="Bukrs" enableBasicSearch="true">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="Bukrs">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="0001"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="Gjahr">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="2014"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="LineItemsSmartTable" entitySet="LineItemsSet" smartFilterId="smartFilterBar" tableType="Table"
useExportToExcel="true" beforeExport="onBeforeExport" useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
showRowCount="true" persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" app:useSmartField="true"
class="sapUiResponsiveContentPadding">
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
</VBox>
<PlanningCalendar id="PC1" rows="{path: '/people'}" appointmentsVisualization="Filled" groupAppointmentsMode="expanded"
appointmentsReducedHeight="true" appointmentSelect="onClickAssignment" showEmptyIntervalHeaders="false" viewChange="onStartDateChange"
startDateChange="onStartDateChange" rowSelectionChange="onResourceSelectedInCalendar" rowHeaderClick="onRowHeaderClick"
intervalSelect="onIntervalSelect" class="calendarMarginBottom">
<toolbarContent>
<Title text="Calendar" titleStyle="H4"/>
<ToolbarSpacer/>
</toolbarContent>
<rows>
<PlanningCalendarRow id="PCR1" icon="{pic}" title="{name}" text="{role}" key="{key}"
appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment id="MCA1" startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}" hover="onAppointmentHover"/>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</content>
</Page>
</pages>
</App>
Controller
sap.ui.controller("sap.ui.comp.sample.smarttable.SmartTable", {
onInit: function() {
this.fillSmartTable();
this.fillCalendar();
},
//
// CALENDAR
//
fillCalendar: function() {
// create model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2018", "6", "26", "08", "30"),
end: new Date("2018", "6", "26", "09", "30"),
title: "Meet John Miller",
type: "Type02",
tentative: false
},{
start: new Date("2018", "6", "26", "11", "30"),
end: new Date("2018", "6", "26", "13", "30"),
title: "New quarter",
type: "Type10",
tentative: false
}],
headers: [{
start: new Date("2018", "6", "26", "14", "30"),
end: new Date("2018", "6", "26", "16", "30"),
title: "Private",
type: "Type05"
}]
}]
});
this.byId("PC1").setModel(oModel);
},
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment"),
sSelected;
if (oAppointment) {
sSelected = oAppointment.getSelected() ? "selected" : "deselected";
sap.m.MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected + ". \n Selected appointments: " + this.byId("PC1").getSelectedAppointments()
.length);
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
sap.m.MessageBox.show(sValue);
}
},
handleSelectionFinish: function(oEvent) {
var aSelectedKeys = oEvent.getSource().getSelectedKeys();
this.byId("PC1").setBuiltInViews(aSelectedKeys);
},
//
// SMART TABLE
//
fillSmartTable: function() {
var oModel, oView;
jQuery.sap.require("sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
rootUri: "sapuicompsmarttable/"
});
this._oMockServer = oMockServer;
oMockServer.simulate("https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/metadata.xml",
"https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/");
oMockServer.start();
oModel = new sap.ui.model.odata.ODataModel("sapuicompsmarttable", true);
oModel.setCountSupported(false);
oView = this.getView();
oView.setModel(oModel);
},
onBeforeExport: function(oEvt) {
var mExcelSettings = oEvt.getParameter("exportSettings");
// GW export
if (mExcelSettings.url) {
return;
}
// For UI5 Client Export --> The settings contains sap.ui.export.SpreadSheet relevant settings that be used to modify the output of excel
// Disable Worker as Mockserver is used in explored --> Do not use this for real applications!
mExcelSettings.worker = false;
},
onExit: function() {
this._oMockServer.stop();
}
});

Data Not Visible in Second View

I am facing one issue with data not being visible in my project.
I have created two views: Input.view.xml and plant.view.xml. In my first view, I have a button as "Material Details" and on clicking that, it moves to second view. However, it is coming blank.
My JSON file is having all the data but it's not coming in second view.
Can you please suggest what is the issue and how to fix it?
"Input View" (First View)
<mvc:View
controllerName="stock.controller.main"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m">
<App id="app">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%"
height="100%">
<Label
text="Product"
labelFor="productInput" />
<Input id="productInput"
placeholder="Enter Material ..."
showSuggestion="true"
showTableSuggestionValueHelp="false"
suggestionRows="{/ProductCollection}"
suggestionItemSelected="onSelectItem">
<suggestionColumns>
<Column
hAlign="Begin"
popinDisplay="Inline"
demandPopin="true">
<Label text="Name"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<Label id="inputKey" text="{ProductId} {Name}"/>
</ColumnListItem>
</suggestionRows>
</Input>
<Button id="onDisplay"
text="{i18n>materialDetails}"
press="onDisplayPlant"
class="sapUiTinyMarginEnd" />
</l:VerticalLayout>
</App>
</mvc:View>
plant.view.xml (Second View)
<mvc:View
controllerName="stock.controller.plant"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
showNavButton="true"
navButtonPress="onNavBack"/>
<Table id="idProductsTable"
inset="false"
items="{
path: '/ProductCollection',
sorter: {
path: 'Name'
}
}">
<headerToolbar>
<Toolbar>
<Title text="Products" level="H2" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Supplier" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="End">
<Text text="Dimensions" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="Center">
<Text text="Weight" />
</Column>
<Column hAlign="End">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text text="{SupplierName}" />
<Text text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber
number="{WeightMeasure}"
unit="{WeightUnit}"
state="{
parts: [
{path: 'WeightMeasure'},
{path: 'WeightUnit'}
],
formatter: 'stock.Formatter.weightState'
}" />
<ObjectNumber
number="{
parts: [{
path: 'Price'
}, {
path: 'CurrencyCode'
}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
unit="{CurrencyCode}" />
</ColumnListItem>
</items>
</Table>
</MessagePage>
</mvc:View>
plant.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"jquery.sap.global",
"stock/Formatter",
"sap/ui/core/routing/History",
"sap/ui/model/json/JSONModel"
], function (Controller, jQuery, Formatter, History,JSONModel) {
"use strict";
var TableController = Controller.extend("stock.controller.plant", {
onInit: function () {
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onNavBack: function () {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("input", {}, true);
}
}
});
return TableController;
});
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel, XMLView) {
"use strict";
var Component = UIComponent.extend("stock.Component", {
metadata: {
manifest: "json",
getTable: function () {
return this._rootView.getContent()[0];
}
},
publicMethods: [
"getTable"
],
dependencies: {
libs: [
"sap.m",
"sap.ui.layout"
]
},
rootView: "stock.view.input",
config: {
sample: {
files: [
"view.input.view.xml",
"controller.main.controller.js",
"Formatter.js"
],
description : "In this example assisted input is provided with table-like suggestions where several columns can display more details."
}
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
Component.prototype.createContent = function () {
this._rootView = sap.ui.xmlview({ viewName : "stock.view.plant" });
return this._rootView;
};
return Component;
});

JSBin: How to create demo example's of sapui5?

I want share working live example of SAPUI5 on stackoverflow, but I don't know how to create the JSBin example or which things we have to add or is there any simple way to create demo example of JSBin.
Or, you can create a Stack Snippet which is runnable by clicking the blue 'Run Code Snippet' button:
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows : [
{ value : "sap-icon://syringe", col2 : "Value 2", col3 : "Value 3", ol4 : "Value 4" },
{ value : "sap-icon://account", col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
{ value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
{ value : "sap-icon://e-care", col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" }
]
});
this.getView().setModel(oModel);
}
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
/* extra CSS classes here */
<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-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
<Table items="{/rows}">
<columns>
<Column>
<Text text="Col1" />
</Column>
<Column>
<Text text="Col2" />
</Column>
<Column>
<Text text="Col3" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<core:Icon src="{value}" />
<Text text="{col2}" />
<Text text="{col3}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
You will need bootstrap script, View which will be in HTML tab only and its Controller under Javascript tab.
You can save this as your template after logging in and use it as starting point for your expamples.