Skip to Content
Technical Articles

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

Overview

I will explain you in this article how to manage UI5 controls with variant management which you added to an application as shown below and, I’ll show you that what events of Variant Management are and, how to use them.
Before starting, please look into below link to get more information and to see functions and methods about the control.
Some users might want to save and read the values ​​of a page’s layout with variant management control to gain time.

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

1 Comment
You must be Logged on to comment or reply to a post.
  • Hi,
    Issue
    On the onSaveAsVariant function add code to modify the id since it places an invalid one onSaveAsVariant
    enter code here
        var cantidadArray = oEvent.getSource().getVariantItems().length;
            if (cantidadArray > 0) {
                var ddd = oEvent.getSource().getVariantItems()[0].getId().length;
                var cadenaid = oEvent.getSource().getVariantItems()[0].getId().substring(0, ddd - 1);
                var numeroanterior = oEvent.getSource().getVariantItems()[cantidadArray - 2].getId().substring(70, 71);
                var snun = Number.parseInt(numeroanterior) + 1;
                oEvent.getSource().getVariantItems()[cantidadArray - 1].sId = cadenaid + snun;
            }
    
    and then when saving the refresh is performed
        this.oContainer.save().done(function() {
                this.onGetPersonalizer();
            }.bind(this));
    
    onGetPersonalizer: function() {
    
            var msg = 'Variante Guardada con exito';
            MessageToast.show(msg);
    
            var oComponent = sap.ui.core.Component.getOwnerComponentFor(this.getView());
            this.oPersonalizationService = sap.ushell.Container.getService("Personalization");
            var oPersId = {
                container: "TablePersonalisation", //any
                item: "DemoTableUI" //any- I have used the table name 
            };
            // define scope 
            var oScope = {
                keyCategory: this.oPersonalizationService.constants.keyCategory.FIXED_KEY,
                writeFrequency: this.oPersonalizationService.constants.writeFrequency.LOW,
                clientStorageAllowed: true
            };
            // Get a Personalizer
            var oPersonalizer = this.oPersonalizationService.getPersonalizer(oPersId, oScope, oComponent);
            this.oPersonalizationService.getContainer("TablePersonalisation", oScope, oComponent)
                .fail(function() {})
                .done(function(oContainer) {
                    this.oContainer = oContainer;
                    this.oVariantSetAdapter = new sap.ushell.services.Personalization.VariantSetAdapter(this.oContainer);
                    // get variant set which is stored in backend
                    this.oVariantSet = this.oVariantSetAdapter.getVariantSet("DemoTableUISet");
                    if (!this.oVariantSet) { //if not in backend, then create one
                        this.oVariantSet = this.oVariantSetAdapter.addVariantSet("DemoTableUISet");
                    }
                    // array to store the existing variants
                    var Variants = [];
                    // now get the existing variants from the backend to show as list
                    for (var key in this.oVariantSet.getVariantNamesAndKeys()) {
                        if (this.oVariantSet.getVariantNamesAndKeys().hasOwnProperty(key)) {
                            var oVariantItemObject = {};
                            oVariantItemObject.VariantKey = this.oVariantSet.getVariantNamesAndKeys()[key];
                            oVariantItemObject.VariantName = key;
                            Variants.push(oVariantItemObject);
                        }
                    }
                    // create JSON model and attach to the variant management UI control
    
                    this.oVariantModel = new sap.ui.model.json.JSONModel();
    
                    this.oVariantModel.oData.variante = Variants;
                    this.getView().byId("idvariantManagement").setModel(this.oVariantModel, "variantes");
    
                    this.getView().byId("idvariantManagement").currentVariantSetModified(true);
    
                }.bind(this));
            debugger;
            this.oTablepersoService.refresh();
        },
    

    that’s how it works for “Save As”, what doesn’t work is saving, since it has the same behavior that Br Nilesh Puranik comments

    I had the exact same problem recently but for the “Save” button. I have the same problem, did you find any solution?

    Thanks

    Diego Güizzo