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.
We need the following steps in our application
In the view containing the table:
Add a button to the table for starting personalization.
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.
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.
<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"> ...
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(); }; ...
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; ... 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(); };
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. }; };