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
- SAP Managed Tags:
1 Comment
