Using sap.ui.comp.variants.VariantManagement class to adapt your views with data

Overview

Step 1 : Adding control in View page.

Firstly, you should add Variant Management control in XML view as shown below.

Step 2 : Coding of functions of variant control in js.

After coding it in view, we can start using functions of Variant Management control in javascript file.

Firstly you should save layout with key*standard*. So when the page is opened, standard layout will be shown on variant management control first. If you pay attention, default key named ‘standard’ is saved once. The data is saved as empty in this example for standard layout.

oCC1: null,
		initSearchVariant: function () {
			var thiz = this;
			var oVM = this.getView().byId("searchFilterVMId");
			var itemName = oVM.data("itemName"); // get item name
			oVM.setModel(new sap.ui.model.json.JSONModel()); // set model
			this.fixVariant(oVM); // fix variant 
			var data = {
				SelectedModuleMain: "",
				SelectedSubModuleMain: ""
			};
			this.setFilterVariant(itemName, "*standard*", null, data, false, function (oCC) { // create item
				thiz.oCC1 = oCC;
				thiz.setVariantList(oCC, oVM); // set variant list
			});
		},
		setFilterVariant: function (itemName, key, text, data, bDefault, callback, fnError) {
			sap.ushell.Container.getService("Personalization").getContainer("com.test").done(function (oCC) {
				if (!oCC.containsItem(itemName)) {
					oCC.setItemValue(itemName, {
						items: []
					});
				}
				var ovar = oCC.getItemValue(itemName);
				if (!ovar.hasOwnProperty("defaultKey")) {
					ovar["defaultKey"] = "*standard*";
				}
				if (bDefault) {
					ovar["defaultKey"] = key;
				}
				if (key != "*standard*") {
					ovar.items.push({
						key: key,
						text: text
					});
				} // if not standard then push into items
				if (data) {
					ovar[key] = JSON.parse(JSON.stringify(data));
				} // if data is available then add data
				oCC.setItemValue(itemName, ovar);
				oCC.save().done(function () {
					if (callback) {
						callback(oCC);
					}
				}).fail(function (err) {
					if (fnError) {
						fnError();
					}
				});
			});
		},
		/* get variant name by key */
		getVariantName: function (oVM, selKey) {
			var aItems = oVM.getVariantItems();
			var selItem = "";
			aItems.forEach(function (item) {
				if (selKey == item.getKey()) {
					selItem = item.getText();
				}
			});
			return selItem;
		},
		/* get variant item by key */
		getVariantByKey: function (oVM, selKey) {
			var aItems = oVM.getVariantItems();
			var selItem = "";
			aItems.forEach(function (item) {
				if (selKey == item.getKey()) {
					selItem = item;
				}
			});
			return selItem;
		},
		fixVariant: function (oVM) {
			oVM.setModel(new sap.ui.model.json.JSONModel()); // set model
			oVM.addVariantItem(new sap.ui.comp.variants.VariantItem({ // set default
				key: "default",
				text: "default"
			}));
			oVM.removeVariantItem(this.getVariantByKey(oVM, "default")); // remove default
		},

		/* set variant list from backend */
		setVariantList: function (oCC, oVM) {
			var itemName = oVM.data("itemName");
			var ovar = oCC.getItemValue(itemName);
			if (ovar.hasOwnProperty("items")) {
				oVM.getModel().setData(ovar.items);
			}
			// set inital default key
			oVM.setInitialSelectionKey(ovar.defaultKey);
			oVM.setDefaultVariantKey(ovar.defaultKey);
			//	this.getOwnerComponent().getModel("filterM").setData(ovar[ovar.defaultKey] === undefined ? "*standard*" : ovar[ovar.defaultKey]);
			this._globalModel.setProperty("/SelectedModuleMain", ovar[ovar.defaultKey]["SelectedModuleMain"]);
			this._globalModel.setProperty("/SelectedSubModuleMain", ovar[ovar.defaultKey]["SelectedSubModuleMain"]);
			//	this.createToken();
		},
		setManageVM: function (oEvent, oCC, itemName, callback) {
			var ovar = oCC.getItemValue(itemName);
			// Rename
			var renameKeys = oEvent.getParameters().renamed;
			if (renameKeys.length > 0) {
				ovar.items.forEach(function (item) {
					renameKeys.forEach(function (reitem) {
						if (reitem.key === item.key) {
							item.text = reitem.name;
							ovar[item.key].text = reitem.name;
						}
					});
				});
			}
			// Delete
			var deletedKeys = oEvent.getParameters().deleted;
			if (deletedKeys.length > 0) {
				for (var i = ovar.items.length - 1; i >= 0; i--) {
					for (var j = 0; j < deletedKeys.length; j++) {
						if (ovar.items[i] && (ovar.items[i].key === deletedKeys[j])) {
							ovar.items.splice(i, 1);
							delete ovar[deletedKeys[j]];
						}
					}
				}
			}
			ovar["defaultKey"] = oEvent.getParameters().def; // Default
			oCC.setItemValue(itemName, ovar);
			oCC.save().done(function () {
				if (callback) {
					callback(oCC);
				}
			}); // save all
		},

		clearValues: function () {
			this._globalModel.setProperty("/SelectedModuleMain", "");
			this._globalModel.setProperty("/SelectedSubModuleMain", "");
		},
		/* on select variant */
		onSelectVariant: function (oEvent) {
			this.clearValues(); // clear previous value
			var oCC = this.oCC1;
			var itemName = oEvent.getSource().data("itemName");
			var ovar = oCC.getItemValue(itemName);
			var selKey = oEvent.getParameters().key;
			var data = ovar[selKey];
			this._globalModel.setProperty("/SelectedModuleMain", data.SelectedModuleMain);
			this._globalModel.setProperty("/SelectedSubModuleMain", data.SelectedSubModuleMain);
			//this.getOwnerComponent().getModel("filterM").setData(ovar[selKey]);
			//this.createToken();
		},
		onSaveVariant: function (oEvent) {
			var thiz = this;
			var itemName = oEvent.getSource().data("itemName");
			var key = oEvent.getParameters().key;
			var bDefault = oEvent.getParameters().def;
			var varName = this.getVariantName(oEvent.getSource(), key);
			//var data = this.getOwnerComponent().getModel("filterM").getData();
			var data = {
				SelectedModuleMain: this._globalModel.getProperty("/SelectedModuleMain"),
				SelectedSubModuleMain: this._globalModel.getProperty("/SelectedSubModuleMain")
			};
			this.setFilterVariant(itemName, key, varName, data, bDefault, function (oCC) { // create item
				thiz.oCC1 = oCC;
			});
		},
		onManageVM: function (oEvent) {
			var oCC = this.oCC1;
			var itemName = oEvent.getSource().data("itemName");
			this.setManageVM(oEvent, oCC, itemName);
		},

		//******************************************end of variant *************************************

Secondly, users want to save data which they entered in the screen.For example, I entered some values in the page and saved this data with new name by pressing OK.

The important thing in here is that I updated the json data with new values entered by user before saving.

And, when you press manage button on popup after pressing Variant control, all layout is displayed and when you select a layout, ‘onSelectVariant‘ function is run and read data that had been saved before. Finally data is set for related controls in page.

Conclusion

In this article, I have tried to explain how to save data and how to read by using variant management control.  I think this code is useful for saving data and reading later. I mean, in this code part you can save and read data with format you wanted just only changing JSON data sections. Last thing, it is up to you how you will use data, and where you will put them.

Finally, you can adapt your screens using ‘save’, ‘delete’, ‘save as default’ functions as shown above code part.

References

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.variants.VariantManagement

https://blogs.sap.com/2018/08/23/fiori-variant-management-set-a-variant-as-default-to-all-users/

Süleyman Doğu