Container Mode: Table and Query Personalization

In this example we use the same table personalization as in the direct mode example above, and we add a query value for controlling the entries displayed in the table.

In addition to a button for starting the table personalization, the UI for this example needs a UI element for specifying the query value, for example an input field and a Save button to save the personalization data for the table and for the query value. The purpose of this example is to show a simple example before moving on to the fullyfledged scenario that also includes variants.

Table personalization requires a personalizer to handle the table personalization data. Since the personalizer built for the direct mode saves implicitly, it is not suitable for the container mode. For this reason there is a transient personalizer that does not save to the front-end server.

Implementation Steps

We need the following steps in our application

In the view containing the table:
- Add a button to the table for starting personalization.
- Add a Save button.
Application initialization:
- Create the transient personalizer and attach it to the table personalization controller.
- Get the container and load its data.
- Execute the application data query and set the query result in the UI element.
- Read the table personalization.
React on the Save button:
- Get the personalization values and save them.

Add a Button for Starting Personalization

We recommend to add a button for starting the personalization to the header Toolbar of the table. In views, static IDs have to be used for tables and columns.

Sample Code

<Table id="SampleTableMobile"headerText="Table header"
  showSeparators="Inner"items="{ path : '/rows' }">
  <headerToolbar>
    <Toolbar>
      <Label text="Test Table for Personalization"></Label>
      <ToolbarSpacer></ToolbarSpacer>
      <Button id="personalize" icon="sap-icon://table-view"/>
      <Button id="save" icon="sap-icon://save"/>
    </Toolbar>
  </headerToolbar>
  <columns>
    <Column width="100px">
    ...

Create the Transient Personalizer and Attach it to the Table Personalization Controller

Sample Code

oPersonalizationService = sap.ushell.Container.getService("Personalization");
oComponent = sap.ui.core.Component.getOwnerComponentFor(this.getView());
...
// Get the table control and the button control
oMobileTable = this.getView().byId("SampleTableMobile");
oStartPersButton = this.getView().byId("personalize");
oSaveButton = this.getView().byId("save");
// Get the transient personalizer
this.oPersonalizer = oPersonalizationService.getTransientPersonalizer(); // no params here
// Create a table personalization controller
this.oTablePersoController = newsap.m.TablePersoController({
  table : oMobileTable,
  persoService : this.oPersonalizer
});
// Attach the personalization button in the table to the personalization popup
oStartPersButton.attachPress(function() {
  this.oTablePersoController.openDialog();
};
// Attach the save button to the save method
oSaveButton.attachPress(function(){
  this.oSavePersonalization();
};
...

Get the Container, Read and Use the Personalization Data

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;
...
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.oQueryParam = oContainer.getItemValue("queryParam");
    // Pseudocode: set the query param in the UI element
    // Pseudocode: read the table content considering oQueryParam
    that.oPersonalizer.setValue(oContainer.getItemValue("table"));
    // Use the personalization data to configure the table accordingly
    that.oTablePersoController.activate();
  };

Get the Personalization Values and Save Them

Sample Code

this.oSavePersonalization = function(){
  // Pseudocode: get the query parameter value from the UI into this.oQueryParam
  this.oContainer.setItemValue("queryParam", this.oQueryParam);
  this.oContainer.setItemValue("table", this.oPersonalizer.getValue());
  this.oContainer.save()
    .fail(function() {
      jQuery.sap.log.error(“Saving personalization data failed.”)
    })
    .done(function() {
      // Before the next save is triggered the last one has to be finished.
      // Could be done by disabling the save button during the  save.
    };
};