Variant management:
The standard fiori variant management control allows the user to save the variant, open the existing variant(read variant) ,update the existing variant and delete the variant. It also allows to set the default variant.
This post targets at the implementation of variant management using the shell personalization service.
We used variant management control in combination with filter bar.
To start with personalization service of shell, we need to create the personalization container and variant set specific to our application. We can also create a different variant set for the default variant. Personalization variant set contains variants of personalization data.
View:
View with Filter bar and variant management control is as below. Filter items to the filter bar are added dynamically in the controller
Fetching the variants:
"MyVariantContainer" is the name of the personalization container I used and "MyApplicationVariants" is the name of the personalization variant set.
In the callback function, set the model to variant management control.
Now the existing variants that are present in the variant set will be shown in variant management control.
Generally the save button in the variant management control is disabled. We enabled it by adding
oVariantMgmtControl.oVariantSave.onAfterRendering = function(){this.setEnabled(true);};
Saving the variants:
"onSaveAsVariant" event will be fired on click of "Save" or "Save As".
In the mParameters of event , you see a parameter "overwrite" set to "true" when you click on "Save" i.e. it saves the filters to the selected variant. It is set to false, when you are creating a new variant by clicking on "Save As".
Gather the filter data in the filter bar and now save the variant to the variant set.
Managing the variant:
Managing the variants includes updating the name of existing variant or deleting the variant or changing the default variant.
"onManageVariant" event will be fired when you click on "OK " in manage popup.
The event parameters gives the array of deleted variants, array of updated variants, and the default variant.
To set the default variant, you can use a different variants set , I used a property to in the filter to differentiate normal and default variant.
Select Variant:
On clicking on any variant in the variant list, "onSelectVariant" will be fired. Get the variant key and fetch the data in the variant.
**
Enjoy Learning!!!
Thanks..
The standard fiori variant management control allows the user to save the variant, open the existing variant(read variant) ,update the existing variant and delete the variant. It also allows to set the default variant.
This post targets at the implementation of variant management using the shell personalization service.
We used variant management control in combination with filter bar.
To start with personalization service of shell, we need to create the personalization container and variant set specific to our application. We can also create a different variant set for the default variant. Personalization variant set contains variants of personalization data.
View:
View with Filter bar and variant management control is as below. Filter items to the filter bar are added dynamically in the controller
<variant:VariantManagement variantItems="{/Variants}" standardItemText="{/DefaultVariant}" select="onSelectVariant"
save="onSaveAsVariant" enabled="true" manage="onManageVariant" showExecuteOnSelection="false" showShare="false" id="variantManagement">
<variant:variantItems>
<variant:VariantItem text="{VariantName}" key="{VariantKey}" selectionKey= "{VariantKey}"/>
</variant:variantItems>
</variant:VariantManagement>
<fb:FilterBar reset="onReset" search="OnPressOfApplyInFilterBar" showRestoreButton="false" showClearButton="true" filterBarExpanded="false"
id="filterBar" clear="filterBarClearBtnPress" />Fetching the variants:
getAllVariants: function(fnCallBack) {
var oPersonalizationVariantSet= {},
aExistingVariants =[],
aVariantKeysAndNames =[];
//get the personalization service of shell
this._oPersonalizationService = sap.ushell.Container.getService('Personalization');
this._oPersonalizationContainer = this._oPersonalizationService.getPersonalizationContainer("MyVariantContainer");
this._oPersonalizationContainer.fail(function() {
// call back function in case of fail
fnCallBack(aExistingVariants);
});
this._oPersonalizationContainer.done(function(oPersonalizationContainer) {
// check if the current variant set exists, If not, add the new variant set to the container
if (!(oPersonalizationContainer.containsVariantSet('MyApplicationVariants'))) {
oPersonalizationContainer.addVariantSet('MyApplicationVariants');
}
// get the variant set
oPersonalizationVariantSet = oPersonalizationContainer.getVariantSet('MyApplicationVariants');
aVariantKeysAndNames = oPersonalizationVariantSet.getVariantNamesAndKeys();
for(var key in aVariantKeysAndNames){
if (aVariantKeysAndNames.hasOwnProperty(key)) {
var oVariantItemObject = {};
oVariantItemObject.VariantKey = aVariantKeysAndNames[key];
oVariantItemObject.VariantName = key;
aExistingVariants.push(oVariantItemObject);
}
}
fnCallBack(aExistingVariants);
}.bind(this));
}"MyVariantContainer" is the name of the personalization container I used and "MyApplicationVariants" is the name of the personalization variant set.
In the callback function, set the model to variant management control.
var oVariantMgmtControl = this.getView().byId("variantManagement"),
// create a new model
oVariantModel = new sap.ui.model.json.JSONModel();
//get Variants from personalization set and set the model of variants list to variant managment control
this.getAllVariants(function(aVariants){
oVariantModel.oData.Variants = aVariants;
oVariantMgmtControl.setModel(oVariantModel);
//enable save button
oVariantMgmtControl.oVariantSave.onAfterRendering = function(){this.setEnabled(true);};
}.bind(this));Now the existing variants that are present in the variant set will be shown in variant management control.
Generally the save button in the variant management control is disabled. We enabled it by adding
oVariantMgmtControl.oVariantSave.onAfterRendering = function(){this.setEnabled(true);};
Saving the variants:
"onSaveAsVariant" event will be fired on click of "Save" or "Save As".
In the mParameters of event , you see a parameter "overwrite" set to "true" when you click on "Save" i.e. it saves the filters to the selected variant. It is set to false, when you are creating a new variant by clicking on "Save As".
Gather the filter data in the filter bar and now save the variant to the variant set.
onSaveAsVariant: function(oEvent) {
//oSelectedFilterData is the json object with the data seleced in the filter bar
this.saveVariant(oEvent.mParameters.name, oSelectedFilterData, function() {
//Do the required actions
}.bind(this));
}
/**
* This method is to save the variant
* @param {String} sVariantName- Variant name
* @param {Object} oFilterData- Filter data object-> consolidated filters in JSON
* @param {Function} fnCallBack- the call back function with the array of variants
*/
saveVariant: function(sVariantName, oFilterData, fnCallBack) {
// save variants in personalization container
this._oPersonalizationContainer.fail(function() {
// call back function in case of fail
fnCallBack(false);
});
this._oPersonalizationContainer.done(function(oPersonalizationContainer) {
var oPersonalizationVariantSet ={},
oVariant = {},
sVariantKey = "";
// check if the current variant set exists, If not, add the new variant set to the container
if (!(oPersonalizationContainer.containsVariantSet("MyApplicationVariants"))) {
oPersonalizationContainer.addVariantSet('MyApplicationVariants');
}
// get the variant set
oPersonalizationVariantSet = oPersonalizationContainer.getVariantSet('MyApplicationVariants');
//get if the variant exists or add new variant
sVariantKey = oPersonalizationVariantSet.getVariantKeyByName(sVariantName);
if (sVariantKey) {
oVariant = oPersonalizationVariantSet.getVariant(sVariantKey);
} else {
oVariant = oPersonalizationVariantSet.addVariant(sVariantName);
}
if (oFilterData) {
oVariant.setItemValue('Filter', JSON.stringify(oFilterData));
}
oPersonalizationContainer.save().fail(function() {
//call callback fn with false
fnCallBack(false);
}).done(function() {
//call call back with true
fnCallBack(true);
}.bind(this));
}.bind(this));
},Managing the variant:
Managing the variants includes updating the name of existing variant or deleting the variant or changing the default variant.
"onManageVariant" event will be fired when you click on "OK " in manage popup.
The event parameters gives the array of deleted variants, array of updated variants, and the default variant.
onManageVariant: function(oEvent) {
var aDeletedVariants = oEvent.mParameters.deleted,
aRenamedVariants = oEvent.mParameters.renamed,
sNewDefaultVariantKey = oEvent.mParameters.def;
if (aDeletedVariants.length>0) {
this.deleteVariants(aDeletedVariants, function(bDeleted) {
// delete success if bDeleted is true
});
}
if(aRenamedVariants.length>0) {
// get the variants from variant set and rename them in the personalization variant set and then save it.
}
}
deleteVariants: function(aVariantKeys, fnCallback) {
var oPersonalizationVariantSet ={};
this._oPersonalizationContainer.fail(function() {
//handle failure case
});
this._oPersonalizationContainer.done(function(oPersonalizationContainer) {
if (!(oPersonalizationContainer.containsVariantSet("MyApplicationVariants"))) {
oPersonalizationContainer.addVariantSet("MyApplicationVariants");
}
oPersonalizationVariantSet = oPersonalizationContainer.getVariantSet("MyApplicationVariants");
for (var iCount=0; iCount<aVariantKeys.length; iCount++) {
if (aVariantKeys[iCount]) {
oPersonalizationVariantSet.delVariant(aVariantKeys[iCount]);
}
}
oPersonalizationContainer.save().fail(function() {
//handle failure case
fnCallback(false);
}).done(function() {
fnCallback(true);
}.bind(this));
}.bind(this));
}To set the default variant, you can use a different variants set , I used a property to in the filter to differentiate normal and default variant.
Select Variant:
On clicking on any variant in the variant list, "onSelectVariant" will be fired. Get the variant key and fetch the data in the variant.
onSelectVariant: function(oEvent) {
var sSelectedVariantKey = oEvent.mParameters.key;
if (sSelectedVariantKey) {
this.getVariantFromKey(sSelectedVariantKey, function(oSelectedVariant){
//logic with the data in variant --oSelectedVariant
}.bind(this));
}
}
getVariantFromKey: function(sVariantKey, fnCallback) {
this._oPersonalizationContainer.fail(function() {
// call back function in case of fail
if (fnCallback) {
fnCallback('');
}
});
this._oPersonalizationContainer.done(function(oPersonalizationContainer) {
var oPersonalizationVariantSet ={};
// check if the current variant set exists, If not, add the new variant set to the container
if (!(oPersonalizationContainer.containsVariantSet(Materials.Constants.VARIANT_SET_KEY))) {
oPersonalizationContainer.addVariantSet(Materials.Constants.VARIANT_SET_KEY);
}
// get the variant set
oPersonalizationVariantSet = oPersonalizationContainer.getVariantSet(Materials.Constants.VARIANT_SET_KEY);
fnCallback(oPersonalizationVariantSet.getVariant(sVariantKey));
});
}**
Enjoy Learning!!!
Thanks..
- SAP Managed Tags:
33 Comments
