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).
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.
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.
<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"> ...
Note that the table personalizer is a different object than the (personalization) personalizer.
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(); }; ...