Skip to Content
0
Dec 18, 2020 at 10:22 AM

List selected data automatically from table for FilterBar

43 Views

In the Filterbar, there is no relationship between organization name and microservice id. But in our data, each organization name have several microservice ID.

like this:

organization 1 : microservice 1,microservice 2,microservice 3

organization 2 : microservice 4,microservice 5,microservice 6,microservice 7

So the list of Microservice id is long, I want to realize this function :

When I choose organization name 1, there only shows microservice id belongs to organization name 1. so that I can get the microservice ID that only belongs to organization name 1. and I will get some data in table.

otherwise, I maybe choose one microservice that didn't belong to organization name1, and then I will hardly to get data show in the table.

How can I realize this function?

My code:

			this.aKeys = ["organizationName", "microserviceId", "objectType"];
			this.oSelectOrganization = this.getSelect("slOrganizationName");
			this.oSelectServiceId = this.getSelect("slServiceId");
			this.oSelectObjectType = this.getSelect("slObjectType");
			this.oModel.setProperty("/Filter/text", "Filtered by None");
			this.addSnappedLabel();
		
		onListItemPress: function (oEvent) {
	var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(1),
	objectPath = oEvent.getSource().getBindingContextPath(),
	object = objectPath.split("/").slice(-1).pop();
	this.oRouter.navTo("DevelopmentObject", {layout: oNextUIState.layout, object: object});
		},
		
		onSearch: function (oEvent) {
			var oTableSearchState = [],
				//sQuery = oEvent.getParameter("query");
			sQuery = oEvent.getParameters().newValue;
			
			if (sQuery && sQuery.length > 0) {
				oTableSearchState = [new Filter("name", FilterOperator.Contains, sQuery)];
			}
			this.getView().byId("ToolsTable").getBinding("items").filter(oTableSearchState, "Application");
		},
		
		onSelectChange: function (oEvent) {
			var aCurrentFilterValues = [];
			aCurrentFilterValues.push(this.getSelectedItemText(this.oSelectOrganization));
			aCurrentFilterValues.push(this.getSelectedItemText(this.oSelectServiceId));
			aCurrentFilterValues.push(this.getSelectedItemText(this.oSelectObjectType));
			this.filterTable(aCurrentFilterValues);
		},
		
		filterTable: function(aCurrentFilterValues) {
			this.getTableItems().filter(this.getFilters(aCurrentFilterValues));
			this.updateFilterCriterias(this.getFilterCriteria(aCurrentFilterValues));
		},
		
		updateFilterCriterias: function(aFilterCriterias) {
			this.removeSnappedLabel(); /* because in case of label with an empty text, */
			this.addSnappedLabel(); /* a space for the snapped content will be allocated and can lead to title misalignment */
			this.oModel.setProperty("/Filter/text", this.getFormattedSummaryText(aFilterCriterias));
		},
		
		addSnappedLabel: function() {
			var oSnappedLabel = this.getSnappedLabel();
			oSnappedLabel.attachBrowserEvent("click", this.onToggleHeader, this);
			this.getPageTitle().addSnappedContent(oSnappedLabel);
		},


		removeSnappedLabel: function() {
			this.getPageTitle().destroySnappedContent();
		},


		getFilters: function(aCurrentFilterValues) {
			this.aFilters = [];


			this.aFilters = this.aKeys.map(function(sCriteria, i) {
				return new Filter(sCriteria, sap.ui.model.FilterOperator.Contains, aCurrentFilterValues[i]);
			});


			return this.aFilters;
		},
		getFilterCriteria: function(aCurrentFilterValues) {
			return this.aKeys.filter(function(el, i) {
				if (aCurrentFilterValues[i] !== "") {
					return el;
				}
			});
		},
		getFormattedSummaryText: function(aFilterCriterias) {
			if (aFilterCriterias.length > 0) {
				return "Filtered By (" + aFilterCriterias.length + "): " + aFilterCriterias.join(", ");
			} else {
				return "Filtered by None";
			}
		},


		getTable: function() {
			return this.getView().byId("ToolsTable");
		},
		
		getTableItems: function() {
			return this.getTable().getBinding("items");
		},
		
		getSelect: function(sId) {
			return this.getView().byId(sId);
		},
		
		getSelectedItemText: function(oSelect) {
			return oSelect.getSelectedItem() ? oSelect.getSelectedItem().getKey() : "";
		},

Attachments

filterbar.png (71.0 kB)