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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Mohammed Farooq Koppal

    Thank you for providing such a interesting topic…. and i have some doubts in the above code and usage of codes…

    1. “oSelectedFilterData” function is note found in the code.
    2. where to call this function “getAllVariants”,

    is it possible to do all the operation without sap,ushell.container???

    (0) 
    1. Anjani Parameswari Post author

      Hi,

      1. oSelectedFilterData is the filter object(JSON object with filter data) that I am trying to save as a variant .  Sorry for not mentioning it.
      2. getAllVariants can be called when you need the list of variants. It fetches the list of variants and then you can bind to your control.

        Personalization container is shell service, If you do not have shell container, it will save the varaints in cache and they will be cleared when you clear the cache. So not preferable or useful when you do not have a shell .

      (0) 
      1. Mohammed Farooq Koppal

        Thank you… is it possible to do the same operation without using shell?? like changing the metadata and saving the same in variant?? or some other idea??

        As i’m using gateway to execute my program.. it throws error on this line

        showing that “UITable.controller.js:418 Uncaught TypeError: Cannot read property ‘Container’ of undefined”

        (0) 
  2. Thomas Knobloch

    Hi Anjani,

    thanks for sharing the information. But how can I determine the filter values from the filter bar?

    How can I fill oSelectedFilterData????

    Would be nice if you could also share this information.

    Thanks and regards, Thomas

    (0) 

Leave a Reply