Table personalization(sap.m.Table) Variant Management issues

[rahulkumar_sankla]

Hi Everyone,

I followed below blog to implement Variant Management in sap.m.table using TablePersoController

https://blogs.sap.com/2018/07/23/persistent-table-personalization-in-sap-ui5fiori-apps-using-variant...

Issue is after saving a new variant using SaveAs option, we were unable to load the other variant which is already saved. It is showing the columns which is recently saved in the variant. After reloading the page everything works fine.

Not sure what is missing in the code.

Need your suggestions in solving the issue.

Thanks.

Regards,

Praveen

[rahulkumar_sankla]

can you share your code?

[praveenkumar_pichaikani]

Hi Rahul,

Below code snippet for variant selection and retrieving the columns stored

	onSelect: function (oEvent) {
			var selectedKey = oEvent.getParameters().key;
			for (var i = 0; i < oEvent.getSource().getVariantItems().length; i++) {
				if (oEvent.getSource().getVariantItems()[i].getProperty("key") === selectedKey) {
					var selectedVariant = oEvent.getSource().getVariantItems()[i].getProperty("text");
					break;
				}
			}
			this._setSelectedVariantToTable(selectedVariant);
		},


		_setSelectedVariantToTable: function (oSelectedVariant) {
			if (oSelectedVariant) {
				var sVariant = this.oVariantSet.getVariant(this.oVariantSet.getVariantKeyByName(oSelectedVariant));
				var aColumns = JSON.parse(sVariant.getItemValue("ColumnsVal"));


				// Hide all columns first
				this.getView().byId("idEmployeesTable").getColumns().forEach(function (oColumn) {
					oColumn.setVisible(false);
				});
				// re-arrange columns according to the saved variant


				aColumns.forEach(function (aColumn) {
					var aTableColumn = $.grep(this.getView().byId("idEmployeesTable").getColumns(), function (el, id) {
						return el.getProperty("name") === aColumn.fieldName;
					});
					if (aTableColumn.length > 0) {
						aTableColumn[0].setVisible(aColumn.Visible);
						this.getView().byId("idEmployeesTable").removeColumn(aTableColumn[0]);
						this.getView().byId("idEmployeesTable").insertColumn(aTableColumn[0], aColumn.index);
					}
				}.bind(this));
			}
			// null means the standard variant is selected or the variant which is not available, then show all columns
			else {
				this.getView().byId("idEmployeesTable").getColumns().forEach(function (oColumn) {
					oColumn.setVisible(true);
				});
			}
		}