반응형
onFilterBarSearch : function (oEvent) {
var oFilterbarModelData = this.getView().getModel("filterbar").getData();
var sDefaultDate = oFilterbarModelData.sDefaultDate;
var sCategoryKey = oFilterbarModelData.categoryKey;
var sStatusKey = oFilterbarModelData.statusKey;
if( sStatusKey === 1 ) {
sStatusKey = "Available";
}else if( sStatusKey === 2 ) {
sStatusKey = "Unavailable";
var aFilter = [];
var aFilterbarFilter = [];
if(sDefaultDate) {
aFilterbarFilter.push(new Filter("DateOfSale", FilterOperator.EQ, sDefaultDate));
}
if(sCategoryKey) {
aFilterbarFilter.push(new Filter("Category", FilterOperator.EQ, sCategoryKey));
}
if(sStatusKey) {
aFilterbarFilter.push(new Filter("Status", FilterOperator.EQ, sStatusKey));
}
aFilter = new Filter({
filters : aFilterbarFilter,
and : true
});
var oList = this.byId("productMTable");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"mTableExam/model/models",
"sap/ui/model/json/JSONModel"
], function(UIComponent, Device, models, JSONModel) {
"use strict";
return UIComponent.extend("mTableExam.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function() {
this.setModel(new JSONModel({
nameValue: "None",
idValue: "None",
afterSaveEdit : true
}), "state");
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
this.setModel(new JSONModel({}),"detail");
this.getRouter().initialize();
}
});
});App.view.xml
<mvc:View
controllerName="mTableExam.controller.App"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App id="app">
</App>
</mvc:View>App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("mTableExam.controller.App", {
onInit : function () {
}
});
});ProductList.view.xml
<mvc:View
controllerName="mTableExam.controller.ProductList"
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns:filterbar="sap.ui.comp.filterbar"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Page title="M Table">
<content>
<filterbar:FilterBar
showFilterConfiguration="false"
useToolbar="true"
search=".onFilterBarSearch"
filterContainerWidth="21rem">
<filterbar:filterGroupItems>
<filterbar:FilterGroupItem label="Delivery Date" groupName="default" name="A" visibleInFilterBar="true">
<filterbar:control>
<DatePicker value="{filterbar>/sDefaultDate}"
valueFormat="{filterbar>/valueFormat}"
displayFormat="{filterbar>/displayFormat}"/>
</filterbar:control>
</filterbar:FilterGroupItem>
<filterbar:FilterGroupItem label="Category" groupName="default" name="B" visibleInFilterBar="true">
<filterbar:control>
<Select selectedKey="{filterbar>/categoryKey}">
<items>
<core:Item key="" text="" />
<core:Item key="Laptops" text="Laptops" />
<core:Item key="Accessories" text="Accessories" />
<core:Item key="Flat Screen Moniters" text="Flat Screen Moniters" />
<core:Item key="Printers" text="Printers" />
</items>
</Select>
</filterbar:control>
</filterbar:FilterGroupItem>
<filterbar:FilterGroupItem label="Status" groupName="default" name="C" visibleInFilterBar="true">
<filterbar:control>
<RadioButtonGroup columns="3" selectedIndex="{filterbar>/statusKey}">
<RadioButton text="All" />
<RadioButton text="Available" />
<RadioButton text="Unavailable" />
</RadioButtonGroup>
</filterbar:control>
</filterbar:FilterGroupItem>
</filterbar:filterGroupItems>
</filterbar:FilterBar>
<!--mode="{/mode}"-->
<Table
id="productMTable"
mode="{products>/tableMode}"
selectionChange=".onSelectionChange"
delete=".onRowDelete"
growing="true"
growingThreshold="10"
items="{products>/ProductCollection}"
sticky="ColumnHeaders">
<headerToolbar>
<OverflowToolbar>
<content>
<Title text="M Product List" />
<ToolbarSpacer />
<!--<CheckBox text="Delete Mode" select=".onDeleteMode" />-->
<Label text="Delete Mode" />
<Switch state="false" change=".onChangeSwitch" />
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="12rem"
minScreenWidth="Phone">
<Text text="Product Name" />
</Column>
<Column width="9rem"
minScreenWidth="Tablet">
<Text text="Product Id" />
</Column>
<Column width="5rem"
minScreenWidth="Phone">
<Text text="Quantity" />
</Column>
<Column width="9rem"
minScreenWidth="Tablet">
<Text text="Status" />
</Column>
<Column width="9rem"
minScreenWidth="Desktop">
<Text text="Price" />
</Column>
<Column width="10rem"
minScreenWidth="Desktop">
<Text text="Supplier" />
</Column>
<Column width="10rem"
minScreenWidth="Desktop">
<Text text="Category" />
</Column>
<Column width="10rem"
minScreenWidth="Tablet">
<Text text="Delivery Date" />
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press=".ongoDetail">
<cells>
<Text text="{products>Name}" />
<Text text="{products>ProductId}" />
<Text text="{products>Quantity}" />
<Text text="{products>Status}" />
<Text text="{
parts: [{path:'products>Price'}, {path:'products>CurrencyCode'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
currencyCode: true
}
}" />
<Text text="{products>SupplierName}" />
<Text text="{products>Category}" />
<Text text="{products>DateOfSale}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</mvc:View>ProductList.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"sap/m/MessageBox",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/ui/core/UIComponent"
], function(Controller, JSONModel, MessageToast, MessageBox, Filter, FilterOperator, UIComponent) {
"use strict";
return Controller.extend("mTableExam.controller.ProductList", {
onInit : function () {
var that = this;
var oData2 = {
mode : "None"
};
var oModel2 = new JSONModel(oData2);
this.getView().setModel(oModel2);
$.ajax({
url: "./json/products.json",
type: "get",
success: function (oResult) {
var oModel = new JSONModel(oResult);
that.getView().setModel(oModel, "products");
}
});
var oFilter = {
sDefaultDate : "",
displayFormat : "yyyy-MM-dd",
valueFormat : "yyyy-MM-dd",
categoryKey : "Printers",
statusKey: 0
};
var oProductModel = new JSONModel(oFilter);
this.getView().setModel(oProductModel, "filterbar");
},
onSelectionChange : function (oEvent) {
var sPath = oEvent.getParameter("listItem").getBindingContextPath();
MessageToast.show(sPath);
},
onRowDelete : function (oEvent) {
var sPath = oEvent.getParameter("listItem").getBindingContextPath();
var that = this;
// MessageToast.show(sPath);
//두개의 인자를 파라미터로 받음("컨펌메세지", actions)
//YES를 누르면 sAction에 YES가 들어감
MessageBox.confirm("삭제하시겠습니까?", {
// actions: [MessageBox.Action.YES, MessageBox.Action.NO],
//액션 값을 안 넣으면 OK가 디폴트
onClose: function (sAction) {
if( sAction === "OK" ) {
// Delete
// MessageBox.success("Delete Success");
// MessageBox.success(sPath);
//sPath.substring(startindex, endindex) endindex는 안써도 됨
var sSelectedIndex = sPath.substring(sPath.lastIndexOf("/")+1);
var oProductModel = that.getView().getModel("products");
// var aData = that.getView().getModel("products").getData();
// aData.ProductCollection.splice(sSelectedIndex,1);
// that.getView().getModel("products").setData(aData);
// that.getView().getModel("products").refresh();
var oData = oProductModel.getData();
oData.ProductCollection.splice(sSelectedIndex, 1);
// oProductModel.setData(oData);
oProductModel.refresh();
}
}
});
},
onDeleteMode : function (oEvent) {
var bSelected = oEvent.getParameter("selected");
var sMode = bSelected ? "Delete" : "None";
this.getView().byId("productMTable").setMode(sMode);
},
//.getSource() : 모듈객체 가져옴
onChangeSwitch : function (oEvent) {
// var bSelected = oEvent.getParameter("state");
var bSelected = oEvent.getSource().getState();
var sMode = bSelected ? "Delete" : "None";
// ① Id로 접근
// this.getView().byId("productMTable").setMode(sMode);
// ② oData 만들어서 사용
// var oModel2 = this.getView().getModel();
// oModel2.setProperty("/mode", sMode);
// ③ 원래 있던 모델(products) 사용
this.getView().getModel("products").setProperty("/tableMode", sMode);
},
onFilterBarSearch :function () {
var oFilterbarModelData = this.getView().getModel("filterbar").getData();
var sDefaultDate = oFilterbarModelData.sDefaultDate;
var sCategoryKey = oFilterbarModelData.categoryKey;
var sStatusKey = oFilterbarModelData.statusKey;
if( sStatusKey === 1 ) {
sStatusKey = "Available";
}else if( sStatusKey === 2 ) {
sStatusKey = "Unavailable";
}
var aFilter = [];
//빈배열이 들어가면 필터 적용 안됨
var aFilterbarFilter=[];
if(sDefaultDate){
aFilterbarFilter.push(new Filter("DateOfSale",FilterOperator.EQ, sDefaultDate));
}
if(sCategoryKey){
aFilterbarFilter.push(new Filter("Category",FilterOperator.EQ, sCategoryKey));
}
if(sStatusKey){
aFilterbarFilter.push(new Filter("Status",FilterOperator.EQ, sStatusKey));
}
aFilter = new Filter({
filters: aFilterbarFilter,
and : true
});
var oList = this.byId("productMTable");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
},
ongoDetail : function (oEvent) {
// var oTable = this.byId("productMTable");
var oProductModel = this.getView().getModel("products");
var sPath = oEvent.getSource().getBindingContextPath();
var oSelectedData = oProductModel.getProperty(sPath);
this.getView().getModel("detail").setData(oSelectedData);
UIComponent.getRouterFor(this).navTo("detail");
// var oView = this.getView();
// var oModel = oView.getModel("products");
// var sSelectedPath = oEvent.getSource().getBindingContext().getpath();
// var oSelectedData = oModel.getProperty(sSelectedPath);
// this.getView().getModel("detail").setData(oSelectedData);
// //getSelectedIndices : 선택한 체크박스의 값을 가져옴
// // var aSelectedIndices = oTable.getSelectedItem();
// UIComponent.getRouterFor(this).navTo("detail");
}
// MessageToast.show(sDefaultDate + " " + sCategoryKey + " " + sStatusKey);
});
});ProductDetail.view.xml
<mvc:View
controllerName="mTableExam.controller.ProductDetail"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns:m="sap.m"
xmlns="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<m:Page
title="Product Detail"
showNavButton="true"
navButtonPress=".onNavBack">
<m:content>
<Form>
<layout>
<ResponsiveGridLayout
labelSpanXL="2"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
columnsXL="2"
columnsL="2"
columnsM="2" />
</layout>
<formContainers>
<FormContainer>
<formElements>
<FormElement>
<label><m:Label text="Product Name" /></label>
<fields><m:Input required="true" value="{detail>/Name}" valueState="{state>nameValue}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Product Id" /></label>
<fields><m:Input required="true" value="{detail>/ProductId}" valueState="{state>/idValue}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Quantity" /></label>
<fields><m:Input value="{detail>/Quantity}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Status" /></label>
<fields><m:Input value="{detail>/Status}" /></fields>
</FormElement>
</formElements>
</FormContainer>
<FormContainer>
<formElements>
<FormElement>
<label><m:Label text="Price" /></label>
<fields><m:Input value="{detail>/Price}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Supplier" /></label>
<fields><m:Input value="{detail>/SupplierName}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Category" /></label>
<fields><m:Input value="{detail>/Status}" /></fields>
</FormElement>
<FormElement>
<label><m:Label text="Delivery Date" /></label>
<fields><m:Input value="{detail>/DateOfSale}" /></fields>
</FormElement>
</formElements>
</FormContainer>
</formContainers>
</Form>
</m:content>
<m:footer>
<m:OverflowToolbar>
<m:ToolbarSpacer />
<m:Button text="Save" type="Emphasized" press=".onSave" />
</m:OverflowToolbar>
</m:footer>
</m:Page>
</mvc:View>ProductDetail.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"sap/ui/core/Fragment",
"sap/ui/core/UIComponent",
"sap/ui/core/routing/History"
], function (Controller, JSONModel, MessageToast, Fragment, UIComponent, History) {
"use strict";
return Controller.extend("mTableExam.controller.ProductDetail", {
onSave : function () {
var oView = this.getView();
var oModel = oView.getModel("detail");
var oStateModel = oView.getModel("state");
var oDatailData = oModel.getData();
var bSaveCheck = true;
//필수값만 체크
if( !oDatailData.Name ) {
oStateModel.setProperty("/nameValue", "Error");
bSaveCheck = false;
}else {
oStateModel.setProperty("/nameValue", "None");
}
if( !oDatailData.ProductId ) {
oStateModel.setProperty("/idValue", "Error");
bSaveCheck = false;
}else {
oStateModel.setProperty("/idValue", "None");
}
if( bSaveCheck ) {
MessageToast.show("Save Success");
oStateModel.setProperty("/afterSaveEdit", false);
}
},
onNavBack : function () {
// UIComponent.getRouterFor(this).navTo("overview");
var oStateModel = this.getView().getModel("state");
var oStateModelData = oStateModel.getData();
oStateModelData.nameValue = "None";
oStateModelData.idValue = "None";
oStateModelData.afterSaveEdit = true;
oStateModel.refresh();
var oHistory = History.getInstance();
var sPrevious = oHistory.getPreviousHash();
if( sPrevious !== undefined ) {
window.history.go(-1);
} else {
// var oRouter = UIComponent.getRouterFor(this);
// oRouter.navTo("list");
UIComponent.getRouterFor(this).navTo("productlist");
}
}
});
});products.json
{
"ProductCollection": [
{
"ProductId": "HT-1000",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 15",
"DateOfSale": "2020-03-26",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "USA",
"Price": 956,
"Width": 30,
"Depth": 18,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1001",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.5,
"WeightUnit": "KG",
"Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 17",
"DateOfSale": "2020-04-17",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg",
"Status": "Available",
"Quantity": 20,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1249,
"Width": 29,
"Depth": 17,
"Height": 3.1,
"DimUnit": "cm"
},
{
"ProductId": "HT-1002",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 18",
"DateOfSale": "2020-01-07",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1570,
"Width": 28,
"Depth": 19,
"Height": 2.5,
"DimUnit": "cm"
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Smartcards",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 19",
"DateOfSale": "2020-04-09",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1003.jpg",
"Status": "Available",
"Quantity": 15,
"UoM": "PC",
"CurrencyCode": "USA",
"Price": 1650,
"Width": 32,
"Depth": 21,
"Height": 4,
"DimUnit": "cm"
},
{
"ProductId": "HT-1007",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.2,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Storage Encryption",
"Name": "ITelO Vault",
"DateOfSale": "2020-05-17",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1007.jpg",
"Status": "Available",
"Quantity": 15,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 299,
"Width": 32,
"Depth": 22,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1010",
"Category": "Accessories",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.3,
"WeightUnit": "KG",
"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Name": "Notebook Professional 15",
"DateOfSale": "2020-02-22",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1010.jpg",
"Status": "Unavailable",
"Quantity": 16,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 1999,
"Width": 33,
"Depth": 20,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1011",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.1,
"WeightUnit": "KG",
"Description": "Notebook Professional 17 with 2,80 GHz quad core, 17\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Name": "Notebook Professional 17",
"DateOfSale": "2020-01-02",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1011.jpg",
"Status": "Unavailable",
"Quantity": 17,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 2299,
"Width": 33,
"Depth": 23,
"Height": 2,
"DimUnit": "cm"
},
{
"ProductId": "HT-1020",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.16,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Network Communications",
"Name": "ITelO Vault Net",
"DateOfSale": "2020-05-08",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1020.jpg",
"Status": "Unavailable",
"Quantity": 14,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 459,
"Width": 10,
"Depth": 1.8,
"Height": 17,
"DimUnit": "cm"
},
{
"ProductId": "HT-1021",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.18,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Secure Stellite Link",
"Name": "ITelO Vault SAT",
"DateOfSale": "2020-06-30",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1021.jpg",
"Status": "Unavailable",
"Quantity": 50,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 149,
"Width": 11,
"Depth": 1.7,
"Height": 18,
"DimUnit": "cm"
},
{
"ProductId": "HT-1022",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.2,
"WeightUnit": "KG",
"Description": "32 GB Digital Assistant with high-resolution color screen",
"Name": "Comfort Easy",
"DateOfSale": "2020-03-02",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1022.jpg",
"Status": "Unavailable",
"Quantity": 30,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1679,
"Width": 84,
"Depth": 1.5,
"Height": 14,
"DimUnit": "cm"
},
{
"ProductId": "HT-1023",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.8,
"WeightUnit": "KG",
"Description": "64 GB Digital Assistant with high-resolution color screen and synthesized voice output",
"Name": "Comfort Senior",
"DateOfSale": "2020-02-25",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1023.jpg",
"Status": "Available",
"Quantity": 24,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 512,
"Width": 80,
"Depth": 1.6,
"Height": 13,
"DimUnit": "cm"
},
{
"ProductId": "HT-1030",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1920 x 1080 @ 85Hz, Dot Pitch: 0.27mm",
"Name": "Ergo Screen E-I",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1030.jpg",
"Status": "Available",
"Quantity": 14,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 230,
"Width": 37,
"Depth": 12,
"Height": 36,
"DimUnit": "cm"
},
{
"ProductId": "HT-1031",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1920 x 1200 @ 85Hz, Dot Pitch: 0.26mm",
"Name": "Ergo Screen E-II",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1031.jpg",
"Status": "Available",
"Quantity": 24,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 285,
"Width": 40.8,
"Depth": 19,
"Height": 43,
"DimUnit": "cm"
},
{
"ProductId": "HT-1032",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2560 x 1440 @ 85Hz, Dot Pitch: 0.25mm",
"Name": "Ergo Screen E-III",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1032.jpg",
"Status": "Available",
"Quantity": 50,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 345,
"Width": 40.8,
"Depth": 19,
"Height": 43,
"DimUnit": "cm"
},
{
"ProductId": "HT-1035",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 14,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1600 x 1200 @ 85Hz, Dot Pitch: 0.24mm",
"Name": "Flat Basic",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1035.jpg",
"Status": "Available",
"Quantity": 23,
"UoM": "PC",
"CurrencyCode": "USA",
"Price": 399,
"Width": 39,
"Depth": 20,
"Height": 41,
"DimUnit": "cm"
},
{
"ProductId": "HT-1036",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 15,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2048 x 1080 @ 85Hz, Dot Pitch: 0.26mm",
"Name": "Flat Future",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1036.jpg",
"Status": "Available",
"Quantity": 22,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 430,
"Width": 45,
"Depth": 26,
"Height": 46,
"DimUnit": "cm"
},
{
"ProductId": "HT-1037",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 17,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2016 x 1512 @ 85Hz, Dot Pitch: 0.24mm",
"Name": "Flat XL",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1037.jpg",
"Status": "Available",
"Quantity": 23,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 1230,
"Width": 54.5,
"Depth": 22.1,
"Height": 39.1,
"DimUnit": "cm"
},
{
"ProductId": "HT-1040",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 32,
"WeightUnit": "KG",
"Description": "Print 2400 dpi image quality color documents at speeds of up to 32 ppm (color) or 36 ppm (monochrome), letter/A4. Powerful 500 MHz processor, 512MB of memory",
"Name": "Laser Professional Eco",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1040.jpg",
"Status": "Available",
"Quantity": 21,
"UoM": "PC",
"CurrencyCode": "USA",
"Price": 830,
"Width": 51,
"Depth": 46,
"Height": 30,
"DimUnit": "cm"
},
{
"ProductId": "HT-1041",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 23,
"WeightUnit": "KG",
"Description": "Up to 22 ppm color or 24 ppm monochrome A4/letter, powerful 500 MHz processor and 128MB of memory",
"Name": "Laser Basic",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1041.jpg",
"Status": "Available",
"Quantity": 8,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 490,
"Width": 48,
"Depth": 42,
"Height": 26,
"DimUnit": "cm"
},
{
"ProductId": "HT-1042",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 17,
"WeightUnit": "KG",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with Available first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"Name": "Laser Allround",
"ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1042.jpg",
"Status": "Available",
"Quantity": 9,
"UoM": "PC",
"CurrencyCode": "KRW",
"Price": 349,
"Width": 53,
"Depth": 50,
"Height": 65,
"DimUnit": "cm"
}],
"Filters": [
{
"type": "Category",
"values": [
{
"text": "Accessories",
"data": 34
},
{
"text": "Desktop Computers",
"data": 7
},
{
"text": "Flat Screens",
"data": 2
},
{
"text": "Keyboards",
"data": 4
},
{
"text": "Laptops",
"data": 11
},
{
"text": "Printers",
"data": 9
},
{
"text": "Smartphones and Tablets",
"data": 9
},
{
"text": "Mice",
"data": 7
},
{
"text": "Computer System Accessories",
"data": 8
},
{
"text": "Graphics Card",
"data": 4
},
{
"text": "Scanners",
"data": 4
},
{
"text": "Speakers",
"data": 3
},
{
"text": "Software",
"data": 8
},
{
"text": "Telekommunikation",
"data": 3
},
{
"text": "Servers",
"data": 3
},
{
"text": "Flat Screen TVs",
"data": 3
}
]
},
{
"type": "SupplierName",
"values": [
{
"text": "Titanium",
"data": 21
},
{
"text": "Technocom",
"data": 22
},
{
"text": "Red Point Stores",
"data": 7
},
{
"text": "Very Best Screens",
"data": 14
},
{
"text": "Smartcards",
"data": 2
},
{
"text": "Alpha Printers",
"data": 5
},
{
"text": "Printer for All",
"data": 8
},
{
"text": "Oxynum",
"data": 8
},
{
"text": "Fasttech",
"data": 15
},
{
"text": "Ultrasonic United",
"data": 15
},
{
"text": "Speaker Experts",
"data": 3
},
{
"text": "Brainsoft",
"data": 3
}
]
}
]
}manifest.json
{
"_version": "1.7.0",
"sap.app": {
"id": "mTableExam",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "mTableExam.view.App",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ushell": {},
"sap.collaboration": {},
"sap.ui.comp": {},
"sap.uxap": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "mTableExam.i18n.i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing" : {
"config" : {
"routerClass" : "sap.m.routing.Router",
"viewType" : "XML",
"viewPath" : "mTableExam.view",
"controlId" : "app",
"controlAggregation" : "pages",
"async" : true
},
"routes" : [
{
"pattern" : "",
"name" : "productlist",
"target" : "productlist"
},
{
"pattern" : "detail",
"name" : "detail",
"target" : "detail"
}
],
"targets" : {
"productlist" : {
"viewId" : "productlist",
"viewName" : "Productlist"
},
"detail" : {
"viewId" : "detail",
"viewName" : "ProductDetail"
}
}
}
}
}필터바서치부분 설명이 부족해서 따로 봤다.
onFilterBarSearch : function (oEvent) {
var oFilterbarModelData = this.getView().getModel("filterbar").getData();
var sDefaultDate = oFilterbarModelData.sDefaultDate;
var sCategoryKey = oFilterbarModelData.categoryKey;
var sStatusKey = oFilterbarModelData.statusKey;
if( sStatusKey === 1 ) {
sStatusKey = "Available";
}else if( sStatusKey === 2 ) {
sStatusKey = "Unavailable";
var aFilter = [];
var aFilterbarFilter = [];
if(sDefaultDate) {
aFilterbarFilter.push(new Filter("DateOfSale", FilterOperator.EQ, sDefaultDate));
}
if(sCategoryKey) {
aFilterbarFilter.push(new Filter("Category", FilterOperator.EQ, sCategoryKey));
}
if(sStatusKey) {
aFilterbarFilter.push(new Filter("Status", FilterOperator.EQ, sStatusKey));
}
aFilter = new Filter({
filters : aFilterbarFilter,
and : true
});
var oList = this.byId("productMTable");
var oBinding = oList.getBinding("items");
oBinding.filter(aFilter);
}
class sap.ui.model.Filter
Control Sample:N/A
Extends:sap.ui.base.Object
Module: sap/ui/model/Filter
Visibility: public
Available since: N/A
Application Component: CA-UI5-COR
Example: Using an object with a path, an operator and one or two values
sap.ui.define(['sap/ui/model/Filter', 'sap/ui/model/FilterOperator'], function(Filter, FilterOperator) {
new Filter({
path: "Price",
operator: FilterOperator.BT,
value1: 11.0,
value2: 23.0
});
});Example: Combining a list of filters either with AND or OR
new Filter({
filters: [
...
new Filter({
path: 'Quantity',
operator: FilterOperator.LT,
value1: 20
}),
new Filter({
path: 'Price',
operator: FilterOperator.GT,
value1: 14.0
})
...
],
and: true|false
})Example: The filter operators Any and All map to the OData V4 lambda operators any and all. They take a variable and another filter as parameter and evaluate it on either a collection property or a collection of entities.
// find Orders where all of the 'Items' in the order have a 'Quantity' > 100
// (assumes that Filter and FilterOperator have been declared as dependencies, see previous examples)
new Filter({
path: 'Items',
operator: FilterOperator.All,
variable: 'item',
condition: new Filter({
path: 'item/Quantity',
operator: FilterOperator.GT,
value1: 100.0
})
});Example: Legacy signature: Same as above, but using individual constructor arguments. Not supported for filter operators Any and All.
new sap.ui.model.Filter(sPath, sOperator, vValue1, vValue2);
OR
new sap.ui.model.Filter(sPath, fnTest);
OR
new sap.ui.model.Filter(aFilters, bAnd);new sap.ui.model.Filter(vFilterInfo, vOperator?, vValue1?, vValue2?)
반응형
