Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
frank_xie
Product and Topic Expert
Product and Topic Expert
740
In the previous blog, there are two ways to extend the user setting.

Normally, we need to persist the user option in the user setting. And the data should be based on user, it will record the user preference in the app.

The class in demoKit is useful: https://sapui5.hana.ondemand.com/sdk/#/api/sap.ushell.services.Personalization%23methods/Summary

The example code in previous blog post is enhanced to use to personalization service.

The brief step are:

  1. get personalization service.

  2. get container.

  3. use container method.


The difficulty is the service/container is returned as parameter in asynchronous.
var oRenderer = sap.ushell.Container.getRenderer("fiori2");
...
var oContainerService = sap.ushell.Container.getServiceAsync("Personalization");
//Call the getServiceAsync to get the Unified Shell's personalization service
oContainerService.then(function (oService) {
//The personalization service will be returned as parameter
oService.getContainer("ImportOption").done(function (oPContainer) {
//Use the personalization service to get container
//Check the method detail https://sapui5.hana.ondemand.com/sdk/#/api/sap.ushell.services.Personalization%23methods/getContaine...
//The container also will be returned as parameter
if (!oPContainer.containsItem("Option1")) {
oPContainer.setItemValue("Option1", false);
oPContainer.save();
}

var handlePress = function (e) {
var oDialog = new sap.m.Dialog({
content: [new sap.m.CheckBox({
text: "Option",
selected: oPContainer.getItemValue("Option1"),
select: function() {
oPContainer.setItemValue("Option1", !oPContainer.getItemValue("Option1"));
}
})],
endButton: new sap.m.Button({
text: "Confirm",
press: function (e) {
//Call save method to persist data
oPContainer.save();
e.getSource().getParent().close();
}.bind(this)
})
});
oDialog.open();
}

var button1 = new sap.m.Button({ text: "testmybutton", press: handlePress });
oRenderer.showActionButton([button1.getId()], false, ["home", "app"]);

Code optimization:

In the previous code, there are two asynchronous calls to get container. And the operation code like showActionButton need to be called in the then method. Since the method needs to wait for the result in personalization service.

We can separate the "Promise" objects and use $.when() to avoid the nested call.

The optimized code:
var oServicePromise = sap.ushell.Container.getServiceAsync("Personalization").then(function(oService){ return oService});
var oContainerPromise = oServicePromise.then(function(oService){ return oService.getContainer("ImportOption")});
$.when(oContainerPromise).then(function(oContainer){
if (!oContainer.containsItem("Option1")) {
oContainer.setItemValue("Option1", false);
oContainer.save();
}

var handlePress = function (e) {
var oDialog = new sap.m.Dialog({
content: [new sap.m.CheckBox({
text: "Option",
selected: oContainer.getItemValue("Option1"),
select: function() {
oContainer.setItemValue("Option1", !oContainer.getItemValue("Option1"));
}
})],
endButton: new sap.m.Button({
text: "Confirm",
press: function (e) {
//Call save method to persist data
oPContainer.save();
e.getSource().getParent().close();
}.bind(this)
})
});
oDialog.open();
}

var button1 = new sap.m.Button({ text: "testmybutton", press: handlePress });
oRenderer.showActionButton([button1.getId()], false, ["home", "app"]);
});

The key is about the principle "Return Value: This method can either return a Promise (if further another then() is called) or nothing." for then() method:

Why we use then() method in JavaScript ? - GeeksforGeeks