Today, I’m excited to dive into the Personalization Engine and its role in enhancing personalization settings in SAPUI5 Freestyle apps—especially when Smart Controls aren’t an option. The sap.m.p13n.Engine library provides a powerful way to achieve the same level of flexibility and user experience as a Smart Table with built-in personalization.

While there are several blogs covering its implementation, many tend to overlook critical details that can cause unexpected issues in certain scenarios. That’s exactly where this blog comes in—to bridge those gaps and help you fully harness the potential of this control.

Let’s get started! 

Importance of Maintaining IDs in the Personalization Engine

First and foremost, it’s essential to assign unique IDs to all relevant controls—from the view or fragment to the table where personalization is applied, including the personalization control itself.

This is crucial because the Personalization Engine is part of SAPUI5 Flexibility Services, which relies on these IDs to persist user-specific changes. Without proper IDs, you may run into unexpected issues related to personalization storage and retrieval like below

In my case, I needed a personalization settings button in my view. To ensure everything functioned correctly, I:

• Defined the view ID in the manifest.json

• Assigned an ID to the personalization control within the view

<vm:VariantManagement id="p13nVm" for="TableId"/>

• Set an ID for the associated table

<Table id="TableId" visible="true" growing="true" growingThreshold="20" 
   mode="SingleSelectLeft" sticky="ColumnHeaders,HeaderToolbar" 
   selectionChange="onSelectionChange" 
   popinLayout="Block" inset="false" items="{ path:'oModel>/oData' }" 
   updateStarted="onUpdateStarted" updateFinished="onUpdateFinished" 
   autoPopinMode="true" fixedLayout="Strict">

For a deeper understanding of why IDs matter in the Personalization Engine, check out these helpful resources:

• SAP UI5 SDK – Stable IDs 
• SAP UI5 SDK – Flexibility 

Including Dependent Libraries for the Personalization Engine

To ensure the Personalization Engine functions correctly, you must include the necessary dependencies in your manifest.json and/or XML file.

Specifically, make sure to add the following library:

• sap.ui.fl – SAPUI5 Flexibility Library

Here’s an example of how to include the required namespaces in an XML view:

<core:FragmentDefinition xmlns:mvc="sap.ui.core.mvc" displayBlock="true" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core" 
    xmlns:p13n="sap.m.p13n" 
    xmlns:plugins="sap.m.plugins"
    xmlns:vm="sap.ui.fl.variants" 
    xmlns:sap.ui.fl="sap.ui.fl">

Here’s an example of how to include the required libraries in an manifest.json file:

Changing the Selection Mode in the Personalization Dialog

By default, the Personalization Engine Dialog in SAPUI5 sets the selection panel mode to “ClearAll”. This means that users can only deselect all columns at once. Once fully deselected, the selection is disabled, and users must manually reselect each column one by one.

  

To improve the user experience, you can modify this behavior and enable a “SelectAll” mode, allowing users to select and deselect all columns with a single action.

How to Change the Selection Mode ?

To update the selection mode from “ClearAll” to “SelectAll”, modify the open dialog event in your personalization settings. Here’s how you can do it:

openPersoDialog: function(aPanels, oContext) {
    var oTable = oContext.getView().byId("TableId");    
    Engine.getInstance().show(oTable, ["Columns", 
            "Sorter","Groups"]).then(function(oPopup) {
        var oContent = oPopup.getContent();
        for (var i in oContent) {
            if (oContent[i].getCurrentViewKey() === "Columns") {
            
          oContent[i].getCurrentViewContent().setMultiSelectMode("SelectAll");
            }
        }
    });
}

How This Works

In my personalization dialog, I have three panels:

• Column Selection
• Sorting
• Grouping

To modify the selection behavior, I retrieve the panel where CurrentViewKey is “Columns” and update the multiSelectMode property to “SelectAll”. This ensures that users can now select or deselect all columns in one click, improving usability.

Hope this helps enhance your understanding of the Personalization Engine!