SAPUI5 Variant key on Save strange behaviour - sapui5

Question

I am trying to implement a Variant management in SAPUI5 using Personalization service of sap.ushell.Container. I have written functions to Save, Manage(delete, rename) and select Variants from the drop down. However i see strange behavior when i select a variant in the method mentioned below.
onSelectVariant: function (oEvent) {
var sSelectedVariantKey = oEvent.getParameter('key');
Assume i have existing variants 'A1', 'A2' and 'A3'.
When i SaveAs a new variant with new values (lets call it 'X1'), the new variant is created. Then i select another already existing variant from dropdown( A1 or A2 or A3), i see the corresponding values. Now i again select the newly created variant X1 but i don't see the new values.
When i debug the above mentioned method, i see that for all the existing variants, the oEvent.getParameter('key') returns the variant indexs like 0,1,2,3 etc. but for the newly created variant X1, it returns the value 'sv1579082806311' and hence it doens't find it in variantset
oPersonalizationVariantSet.getVariant(sVariantKey)
and then it doesn't show the new values.
If i run the program again, i see that previously created variant X1 now shows correct values as the method oEvent.getParameter('key') returns the index and not 'sv....'. but if i now create a new variant X2, the same issue happens with X2.
I am running the App on cloud WebIDE and not on the FIORI launchpad.
Can someone help me what may be going wrong while saving the variant ?
Thanks
Br
Nilesh Puranik

Answer 1

I had the exact same issue recently. I assume that this is a bug in the VariantManagement control. You could create an Issue in the openui5 github project.

Answer 2

I also had this problem and came to the conclusion its a bug in VM control. It gives a new and long key to a newly saved variant. In the oEvent parameter "key" of your onSelect function you will see this new key.
I soved the issue by adding a new property to my JSON object I bound for variants.
In Variant Save event:
tableModel.oData.tabVariants.push({key: VariantParam.key,
text: VariantParam.name,
newKey:this.oVariant.getVariantKey()})
Then in variant select event:
var selectedKey = oEvent.getParameter("key");
var variant = this.woTableSet.getVariant(selectedKey);
if(!variant){
//In this case its a newly created variant with an internal key
//This is a workaround for the key confusion in variants
selectedKey = tableModel.oData.tabVariants.find(t => t.key ===
selectedKey).newKey;
variant = this.woTableSet.getVariant(selectedKey)
if(!variant){return} //then I give up
}

Answer 3

You need replace the auto generated key by variant key:
const autoGeneratedKey = oEvent.getParameters().key;
this.oContainer.save().done(function (cb) {
const oVM = that.getView().byId("vm");
oVM.replaceKey(autoGeneratedKey, that.oVariant.getVariantKey());
oVM.setInitialSelectionKey(that.oVariant.getVariantKey());
});