A variant is a set of personalization settings that users can save with a name. They can later restore these settings by selecting the variant name, for example from a dropdown list.
This example is based on the example Container Mode: Table and Query Personalization. In addition, users can select personalization variants that they have previously saved.
In this example we deal with only one variant set. The following figure shows the interactions regarding personalization.
The personalized values for the query and the table are only persisted when the user explicitly saves them as variants. The user can select a variant to be applied. The application can start with a default personalization, or it can start with the personalization variant the user last selected. The latter alternative is shown in the activity diagram.
We need the following steps in our application:
In the view containing the table:
Add a button for starting personalization (see the previous example for details)
Add a button, a popup, and a dropdown list for the variant handling (not described here)
Application initialization:
Create the transient personalizer and attach it to the table personalization controller (see the previous example for details).
Get the container and read the personalization data for the current variant.
Get the names and keys for all variants in order to populate a selection control (dropdown list).
Execute the query and set the query value in the UI element.
Apply the table personalization.
React on the user's variant selection action:
Read the variant data and apply it.
Set the selected variant as current variant.
React on user's variant save action:
Get the current personalization values and save them to the variant of the name supplied.
The factory method getContainer is asynchronous as it loads the personalization data from the storage. In the respective done method all subsequent initialization steps have to be done.
var that = this; ... oPersonalizationService = sap.ushell.Container.getService("Personalization"); oComponent = sap.ui.core.Component.getOwnerComponentFor(this.getView()); ... oScope = { keyCategory : oPersonalizationService.constants.keyCategory.FIXED_KEY, writeFrequency: oPersonalizationService.constants.writeFrequency.LOW, clientStorageAllowed : true, validity : Infinity }; oPersonalizationService.getContainer("sap.ushell.samples.persSample2", oScope, oComponent) .fail(function() { jQuery.sap.log.error(“Loading personalization data failed.”) }) .done(function(oContainer) { that.oContainer = oContainer; that.oVariantSetAdapter = new sap.ushell.services.Personalization.VariantSetAdapter(that.oContainer); that.oVariantSet = that.oVariantSetAdapter.getVariantSet("orderTable"); // select control that.oVariantList = that.oVariantSet.getVariantNamesAndKeys(); // Pseudocode: Assign the entries of oVariantList to the selected control // get variant data that.sVariantKey = that.oVariantSet.getCurrentVariantKey(); applyVariant(that.sVariantKey); }; ... function applyVariant(sVariantKey) { var oVariant = {}; oVariant = that.oVariantSet.getVariant(sVariantKey); // query params this.oQueryParam = this.oVariant.getItemValue("queryParam"); // Pseudocode: set the query param in the UI element // Pseudocode: read the table content considering oQueryParam // table this.oPersonalizer.setValue(oVariant.getItemValue("table")); // use the personalization data to configure the table accordingly this.oTablePersoController.activate(); } ...
... applyVariant(sSelectedVariantKey); this.oVariantSet.setCurrentVariantKey(sSelectedVariantKey); this.oContainer.save() // save the whole container! .fail(function() { jQuery.sap.log.error(“Saving personalization data failed.”) }) .done(function() { // Tell the user that the personalization data was saved }; ...
... bDone = false; oVariant = undefined; do{ // Pseudocode: Popup for variant name switch(sVariantNamePopupInput) { case"cancel": bDone = true; break; case"save": break; } if(!bDone) { sVariantKey = this.oVariantSet.getVariantKeyByName(sVariantNameInput); if(sVariantKey) { // variant with this name exists // Pseudocode: Popup to ask the user if he/she wants to overwrite the existing variant switch(sVariantOverwritePopupInput) { case"cancel": // user has to enter a new name break; case"overwrite": this.oVariant = this.oVariantSet.getVariant(sVariantKey); break; } } else{ this.oVariant = this.oVariantSet.addVariant(sEnteredVariantName); } if(this.oVariant) { // Do save this.oVariant.setItemValue("queryParam", this.oQueryParam); this.oVariant.setItemValue("table", this.oPersonalizer.getValue()); this.oVariantset.setCurrentVariant(this.oVariant.getVariantKey()); this.oContainer.save() // save the whole container! .fail(function() { jQuery.sap.log.error(“Saving personalization data failed.”) }) .done(function() { // Tell the user that the personalization data was saved }; bDone = true; } } } while(!bDone); ...