How to add Date Range filter in Column header of ui table(sap.ui.table)

[former_member789335]

Hi,

I have a requirement to filter Date Range in Column headers of the UI Table . I have used defaultFilterOperator property "BT" in the XML View. As Between operator accepts 2 values i.e., Upper and Lower Limit, How to pass the values in the filter. Do I need to pass any separator to differentiate the values?

<table:Column width="13rem" sortProperty="eDate" filterProperty="eDate" defaultFilterOperator="BT"><br><Label text="{i18n>eDateformat}"/><br><table:template><br><Text text="{eDate}"></Text><br></table:template><br></table:Column><br>

Any help is much appreciated.

Thanks,

Manasa

[rahulkumar_sankla]

Hi,

May be you can create your own custom menu and call a popup or p13ndialog to enter the date range.

I did this kind of development quite some time back. Create a p13nDialof frangment

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<P13nDialog id="p13nDialog" showReset="true" showResetEnabled="true" ok="onOK" cancel="onCancel" reset="onReset" class="sapUiSizeCompact">
		<panels>
			<P13nFilterPanel title="Filter" visible="true" addFilterItem="onEventFilterItem" removeFilterItem="onEventFilterItem"
				updateFilterItem="onEventFilterItem" containerQuery="true" items="{ path: 'Columns>/Column' }" filterItems="{ path: 'Filters>/FilterItems' }">
				<P13nItem columnKey="{Columns>fieldName}" text="{Columns>text}" type="{Columns>type}"/>
				<filterItems>
					<P13nFilterItem columnKey="{Filters>columnKey}" operation="{Filters>operation}"
						value1="{parts: [{path: 'Filters>type'},{path: 'Filters>value1'}], formatter: '.formatter.filterFormatDate'}"
						value2="{parts: [{path: 'Filters>type'}, {path: 'Filters>value2'}], formatter: '.formatter.filterFormatDate'}"/>
					<P13nFilterItem columnKey="{Filters>columnKey}" operation="{Filters>operation}" value1="{path: 'Filters>value1'}"
						value2="{path: 'Filters>value2'}"/>
				</filterItems>
			</P13nFilterPanel>
		</panels>
	</P13nDialog>
</core:FragmentDefinition><br>

then add custom menu to the column like below:

		_AddCustomMenuItems: function () {
			this.getView().byId("tableOrders").getColumns().forEach(function (oColumn) {
				if (oColumn.data().type === "Date" || oColumn.data().type === "DateTime") {
					// || oColumn.data().fieldName === "FreightOrderNumber" || oColumn.data().fieldName === "PONumber") {

					oColumn.setFilterOperator(sap.ui.model.FilterOperator.EQ);
					oColumn.setFilterProperty(oColumn.data().fieldName);
					var oCustomMenu = new sap.ui.unified.Menu();

					oCustomMenu.addItem(new sap.ui.unified.MenuItem({
						text: "Sort Ascending",
						icon: "sap-icon://sort-ascending",
						select: function (oControlEvent) {
							var oSorter = new sap.ui.model.Sorter(oColumn.data().fieldName, false);

							this._oOrdresTable.getBinding("rows").sort(oSorter);

							for (var i = 0; i < this._oOrdresTable.getColumns().length; i++) {
								this._oOrdresTable.getColumns()[i].setSorted(false);
							}

							oColumn.setSorted(true);
							oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);
						}.bind(this)
					}));
					oCustomMenu.addItem(new sap.ui.unified.MenuItem({
						text: "Sort Descending",
						icon: "sap-icon://sort-descending",
						select: function (oControlEvent) {
							var oSorter = new sap.ui.model.Sorter(oColumn.data().fieldName, true);
							this._oOrdresTable.getBinding("rows").sort(oSorter);
							for (var i = 0; i < this._oOrdresTable.getColumns().length; i++) {
								this._oOrdresTable.getColumns()[i].setSorted(false);
							}
							oColumn.setSorted(true);
							oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);
						}.bind(this)
					}));

					oCustomMenu.addItem(new sap.ui.unified.MenuItem({
						text: "Filter",
						icon: "sap-icon://filter",
						select: function (oControlEvent) {

							var aColumnCollection = {
								"Column": []
							};
							var aFiltersCollection = {
								"FilterItems": []
							};

							var oPersonalizationDialog = sap.ui.xmlfragment("yournamespace.fragments.p13nDialogFilter", this);
							var sType = !oControlEvent.getSource().getParent().getParent().data().type ? "" : oControlEvent.getSource().getParent().getParent()
								.data().type;

							aColumnCollection.Column.push({
								"fieldName": oControlEvent.getSource().getParent().getParent().data().fieldName,
								"text": oControlEvent.getSource().getParent().getParent().getLabel().getText(),
								"type": sType === "Date" || sType === "DateTime" ? "date" : "text"
							});

							var oModelColumns = new sap.ui.model.json.JSONModel(aColumnCollection);
							oPersonalizationDialog.setModel(oModelColumns, "Columns");

							aFiltersCollection.FilterItems = this.oMultiFilter[oControlEvent.getSource().getParent().getParent().data().fieldName];

							var oModelFilters = new sap.ui.model.json.JSONModel(aFiltersCollection);
							oPersonalizationDialog.setModel(oModelFilters, "Filters");

							// var oP13nFilterPanel = oPersonalizationDialog.getPanels()[0];

							this.getView().addDependent(oPersonalizationDialog);
							oPersonalizationDialog.open();
						}.bind(this)
					}));
					// set custom menus
					oColumn.setMenu(oCustomMenu); } 

                                  }

         }<br>

this is how it will look like

There is a fallback function attached to the button "OK". shown as below:

		onOK: function (oEvent) {
			var aFilter = [];
			var bFilter = false;
			var sColumnKey = oEvent.getSource().getAggregation("panels")[0].getAggregation("items")[0].getColumnKey();
			this.oMultiFilter[sColumnKey].forEach(function (oElement) {
				oElement.state = "O";
			});


			for (var sArrayElement in this.oMultiFilter) {
				this.oMultiFilter[sArrayElement].forEach(function (element) {
					aFilter.push(new sap.ui.model.Filter(sArrayElement, element.operation, element.value1, element.value2));
				});
			}
			// apply filter to the table
			this.getView().byId("tableOrders").getBinding("rows").filter(aFilter);
			this.getView().byId("tableOrders").getModel().refresh(true);


			var oCurrentColumn = this.getView().byId("tableOrders").getColumns().filter(function (oColumn) {
				return oColumn.data().fieldName === sColumnKey;
			});


			// if (aFilter.length > 0) {
			// 	bFilter = true;
			// }
			if (this.oMultiFilter[sColumnKey].length > 0) {
				bFilter = true;
			} else {
				bFilter = false;
			}


			// set current column as filtered
			oCurrentColumn[0].setFiltered(bFilter);
			oEvent.getSource().close();
			oEvent.getSource().destroy();
		},
 

The code I provided you is a sample code, you can take it as an example.