EDUCAÇÃO E TECNOLOGIA

Using sap.ui.comp.variants.VariantManagement class to manage your screens


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.

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 VariantManagement 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 js 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 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. Finally data is give to 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.

Finally, you can use add, 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