<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Filter Bar</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.36.6/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.ui.comp.sample.filterbar.example2": "./", "sap.ui.demo.mock": "mockdata"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Filter Bar",
enableScrolling : false,
content: [ new sap.ui.core.ComponentContainer({
height : "100%", name : "sap.ui.comp.sample.filterbar.example2"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
<mvc:View
height="100%"
controllerName="sap.ui.comp.sample.filterbar.example2.FilterBar"
xmlns:mvc="sap.ui.core.mvc"
xmlns:fb="sap.ui.comp.filterbar"
xmlns:customFilterbar="sap.ui.comp.sample.filterbar.example2.custom.filterbar"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<l:VerticalLayout width="100%">
<Label text="FilterBar"/>
<!-- <Button text="toggle SearchField" press="onToggleSearchField"/>
-->
<customFilterbar:FilterBar id="filterBar" reset="onReset" search="onSearch" clear="onClear" showRestoreButton="true" showClearButton="true" persistencyKey="XXX">
<!--
<fb:basicSearch><SearchField showSearchButton="false"/></fb:basicSearch>
-->
<customFilterbar:filterItems>
<fb:FilterItem name="A0" label="labelA">
<fb:control>
<Input type="Text" change="onChange"/>
</fb:control>
</fb:FilterItem>
<fb:FilterItem name="B0" label="labelB" labelTooltip="Tooltip Example" mandatory="true">
<fb:control>
<Input type="Text" change="onChange"/>
</fb:control>
</fb:FilterItem>
</customFilterbar:filterItems>
<customFilterbar:filterGroupItems>
<fb:FilterGroupItem groupName="G1" groupTitle="Group1" name="A1" label="labelA" labelTooltip="Tooltip GroupItem Example">
<fb:control>
<Input type="Text"/>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem groupName="G1" groupTitle="Group1" name="B1" label="labelB">
<fb:control>
<Input type="Text"/>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem groupName="G2" groupTitle="Group2" name="A2" label="labelA2" labelTooltip="Tooltip GroupItem Example">
<fb:control>
<Input type="Text"/>
</fb:control>
</fb:FilterGroupItem>
<fb:FilterGroupItem groupName="G2" groupTitle="Group2" name="B2" label="labelB2">
<fb:control>
<Input type="Text"/>
</fb:control>
</fb:FilterGroupItem>
</customFilterbar:filterGroupItems>
</customFilterbar:FilterBar>
</l:VerticalLayout>
</mvc:View>
sap.ui.controller("sap.ui.comp.sample.filterbar.example2.FilterBar", {
onInit: function() {
this.oFilterBar = null;
var sViewId = this.getView().getId();
this.oFilterBar = sap.ui.getCore().byId(sViewId + "--filterBar");
this.oFilterBar.registerFetchData(this.fFetchData.bind(this));
this.oFilterBar.registerApplyData(this.fApplyData.bind(this));
this.oFilterBar.registerGetFiltersWithValues(this.fGetFiltersWithValues);
this.fVariantStub();
this.onToggleSearchField();
this.oFilterBar.fireInitialise();
},
onAfterRendering: function() {
},
onToggleSearchField: function(oEvent) {
var oSearchField = this.oFilterBar.getBasicSearch();
if (!oSearchField) {
var oBasicSearch = new sap.m.SearchField({
showSearchButton: false
});
} else {
oSearchField = null;
}
this.oFilterBar.setBasicSearch(oBasicSearch);
},
onChange: function(oEvent) {
this.oFilterBar.fireFilterChange(oEvent);
},
onClear: function(oEvent) {
var oItems = this.oFilterBar.getAllFilterItems(true);
for (var i=0; i < oItems.length; i++) {
var oControl = this.oFilterBar.determineControlByFilterItem(oItems[i]);
if (oControl) {
oControl.setValue("");
}
}
},
onReset: function(oEvent) {
jQuery.sap.require("sap.m.MessageToast");
var sMessage = "onReset trigered";
sap.m.MessageToast.show(sMessage);
},
onSearch: function(oEvent) {
jQuery.sap.require("sap.m.MessageToast");
var sMessage = "onSearch trigered";
sap.m.MessageToast.show(sMessage);
},
fFetchData: function() {
var sGropuName;
var oJsonParam;
var oJsonData = [];
var oItems = this.getAllFilterItems(true);
for (var i=0; i < oItems.length; i++) {
oJsonParam = {};
sGroupName = null;
if (oItems[i].getGroupName) {
sGroupName = oItems[i].getGroupName();
oJsonParam.group_name = sGroupName;
}
oJsonParam.name = oItems[i].getName();
var oControl = this.determineControlByFilterItem(oItems[i]);
if (oControl) {
oJsonParam.value = oControl.getValue();
oJsonData.push(oJsonParam);
}
}
return oJsonData;
},
fApplyData : function(oJsonData) {
var sGroupName;
for (var i=0; i < oJsonData.length; i++) {
sGroupName = null;
if (oJsonData[i].group_name) {
sGroupName = oJsonData[i].group_name;
}
var oControl = this.determineControlByName(oJsonData[i].name, sGroupName);
if (oControl) {
oControl.setValue(oJsonData[i].value);
}
}
},
fGetFiltersWithValues : function() {
var i;
var oControl;
var aFilters = this.getFilterGroupItems();
var aFiltersWithValue = [];
for (i=0; i < aFilters.length; i++) {
oControl = this.determineControlByFilterItem(aFilters[i]);
if (oControl && oControl.getValue && oControl.getValue()) {
aFiltersWithValue.push(aFilters[i]);
}
}
return aFiltersWithValue;
},
fVariantStub: function() {
var oVM = this.oFilterBar._oVariantManagement;
oVM.initialise = function() {
this.fireEvent("initialise");
this._setStandardVariant();
this._setSelectedVariant();
};
var nKey = 0;
var mMap = {};
var sCurrentVariantKey = null;
oVM._oVariantSet = {
getVariant: function(sKey) {
return mMap[sKey];
},
addVariant: function(sName) {
var sKey = "" + nKey++;
var oVariant = {
key: sKey,
name: sName,
getItemValue: function(s) {
return this[s];
},
setItemValue: function(s, oObj) {
this[s] = oObj;
},
getVariantKey: function() {
return this.key;
}
};
mMap[sKey] = oVariant;
return oVariant;
},
setCurrentVariantKey: function(sKey) {
sCurrentVariantKey = sKey;
},
getCurrentVariantKey : function() {
return sCurrentVariantKey;
},
delVariant: function(sKey) {
if (mMap[sKey]) {
delete mMap[sKey];
}
}
}
}
});
jQuery.sap.declare("sap.ui.comp.sample.filterbar.example2.Component");
sap.ui.core.UIComponent.extend("sap.ui.comp.sample.filterbar.example2.Component", {
metadata: {
rootView: "sap.ui.comp.sample.filterbar.example2.FilterBar",
dependencies: {
libs: [ "sap.m", "sap.ui.comp" ]
},
config: {
sample: {
stretch: true,
files: [ "FilterBar.view.xml", "FilterBar.controller.js" ]
}
}
}
});
sap.ui.define([
"sap/ui/comp/filterbar/FilterBar",
"sap/ui/comp/smartvariants/PersonalizableInfo",
"sap/ui/comp/smartvariants/SmartVariantManagement"
], function (FilterBar, PersonalizableInfo, SmartVariantManagement) {
"use strict";
var CustomFilterBar = FilterBar.extend("sap.ui.comp.sample.filterbar.example2.custom.filterbar.FilterBar", {
renderer: function(oRm, oControl) {
FilterBar.getMetadata().getRenderer().render(oRm, oControl);
}
});
/**
* Initialise variant management control
* @private
*/
CustomFilterBar.prototype._initializeVariantManagement = function() {
if (this._oSmartVM && this.getPersistencyKey()) {
var oPersInfo = new PersonalizableInfo({
type: "filterBar",
keyName: "persistencyKey"
});
oPersInfo.setControl(this);
this._oSmartVM.addPersonalizableControl(oPersInfo);
FilterBar.prototype._initializeVariantManagement.apply(this, arguments);
} else {
this.fireInitialise();
}
};
/**
* Use SmartVariantManagement instead of SmartVariantManagementUi2
* Activate the public and apply automatically options
*
* @private
* @returns {sap.ui.comp.smartvariants.SmartVariantManagement} The variant management control
*/
CustomFilterBar.prototype._createVariantManagement = function() {
this._oSmartVM = new SmartVariantManagement({
showExecuteOnSelection: true,
showShare: true
});
return this._oSmartVM;
};
/**
* The original method accepts only SmartVariantManagementUi2
*
* @private
* @returns {boolean} Result
*/
// FilterBar.prototype._isTINAFScenario = function() {
// if (this._oVariantManagement) {
// if (!this._isUi2Mode() && !(this._oVariantManagement instanceof SmartVariantManagement)) {
// return true;
// }
// } else {
// /* eslint-disable no-lonely-if */
// // scenario: VH dialog: VM replaced with collective search control
// if (this._oCollectiveSearch && this.getAdvancedMode()) {
// return true;
// }
// /* eslint-enable no-lonely-if */
// }
// return false;
// };
return CustomFilterBar;
});