Variant Management implementation using Shell Personalization service

[Former Member]

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

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