Variant Management implementation using Shell Personalization service

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:

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

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..