Direct Mode: Table Personalization

Table personalization is available for the table control of UI5 Mobile. This example uses framework functionality that allows you to develop table personalization easily.

A personalizable table has a button for starting personalization. Personalization of tables means switching on and off the visibility of columns and changing the order of the columns.

In the view.xml, there is a button for starting personalization. No click handler needs to be assigned to this button. When the view is initialized, the personalization data is read (in the ABAP shell from the front-end server; in the sandbox shell from the browser local storage) and automatically applied to the table control.

When a user clicks the button, a dialog box is displayed where the user can switch the visibility of columns on and off, and change the order of the columns using arrow keys. When the user clicks OK, the personalization data is stored on the front-end server (or in the browser local storage if the sandbox is used).

Implementation Steps

We need the following steps in our application:

In the view containing the table:
- Add a button for starting personalization.
Application initialization:
- Create the table personalizer.

Add a Button for Starting Personalization

We recommend you add a button for starting 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"/>
    </Toolbar>
  </headerToolbar>
  <columns>
    <Column width="100px">
    ...

Create the Table Personalizer

Note that the table personalizer is a different object than the (personalization) personalizer.

Sample Code

oComponent = sap.ui.core.Component.getOwnerComponentFor(this.getView());
oPersonalizationService = sap.ushell.Container.getService("Personalization");
oPersId = {
  container : "AppPersSample2",
  item : "mobiletable"
};
// Get the table control and the button control
oMobileTable = this.getView().byId("SampleTableMobile");
oStartPersButton = this.getView().byId("personalize");
// Get a Personalizer
oScope = {
  keyCategory : oPersonalizationService.constants.keyCategory.FIXED_KEY,
  writeFrequency : oPersonalizationService.constants.writeFrequency.LOW,
  clientStorageAllowed : true
};
oPersonalizer = oPersonalizationService.getPersonalizer(oPersId, oScope, oComponent);
// Create a table personalization controller
oTablePersoController = newsap.m.TablePersoController({
  table : oMobileTable,
  persoService : oPersonalizer
});
// Use the personalization data to configure the table accordingly
oTablePersoController.activate();
// Attach the personalization button in the table to the personalization popup
oStartPersButton.attachPress(function() {
  oTablePersoController.openDialog();
};
...