Show TOC

Container Mode: Table and Query Personalization with VariantsLocate this document in the navigation structure

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.

Implementation Steps

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.

Get the Container, Read and Apply the Personalization Data for the Current Variant

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.

Sample Code 
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();
}
...
React on the User's Variant Selection Action
Sample Code 
...
  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
    };
...
React on the User's Variant Save Action
Sample Code 
...
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);
...
Related Information