End User Personalization in Cloud Portal Sites

Moderator’s note:

Note that our public GitHub repository, providing code samples for Cloud Portal on the Neo environment, is not available anymore. If you have further questions, contact us under sapportal@sap.com.

With the SAP Cloud Portal service available on the SAP Cloud Platform, customers can create Portal sites to engage with their end users. With the Fiori Launchpad experience offered with the Portal, end user can personalize their launchpad home page in various ways – selecting their preferred applications, arranging tiles and groups, configuring user settings and more.

Customers can enhance the personalization capabilities and extend them beyond the Launchpad to the portal’s free-form pages through custom development. The SAPUI5 Fiori Shell provides a set of services (and APIs) which are available on every Cloud Portal site and page – FLP and Free-form. Those enable portal developers to customize and enhance the out of the box capabilities of their portal sites.

Personalization Service

Portal developers can use the Personalization Service to create personalizable experiences for their Portal end users. Follow the documentation for more information on the service and its APIs.

The service is intended for storing user specific application internal configuration data (and not business data!).  It can generally be utilized as a data store interface enabling persistence of data across sessions in a user-context. In other words, with the current user as a context, different storage spaces (containers) identifiable by their keys (container-keys) can be created in the context. The data is stored in dedicated tables on the Front-End server (FES) and through configuration, developers can determine the data’s validity period, whether it can be stored in the user’s browser or on the FES, caching and more.

My Favorites List

To demonstrate the use of the Personlization service and its capabilities , we created a new Cloud Portal sample – a My Favorites list Shell plugin. It allows Cloud Portal end users to bookmark their favorite site pages and apps in a dedicated user-specific favorites list.

Once added to the site, the shell plugin adds a new header item to the shell header. It allows end users to manage their site favorites

• Bookmark any portal page and app to their list of favorites
• Click on a favorite item to navigate to the associated page/app
• Rearrange the items (drag and drop)
• Remove items

Of course, the data is personalized and user-specific so each logged-in user has his own personalized list of favorites. You can login to the site with a different user to see that the list of favorite links is indeed user-specific.

Getting Started

Cloud Portal samples are available in our sample GitHub repository.

The source code for the My Favorites plugin is available here.

To get started with adding the My Favorites plugin to your portal site:

1. To download the repository, upload the favoritesplugin to your SAP Web IDE and deploy in to your SAP Cloud Platform account, follow the steps described here under Download and Installation
2. To create a new multi-page portal site, follow the steps described here. To create a content-rich portal site, with a Launchpad page, Fiori apps, and ABAP WD app – follow this 9-step portal mission.
3. To add the favoritesplugin as a Shell plugin to you portal site – follow the general steps described here. Note that the links describes adding a videodialog plugin while you should search for the favoritesplugin.

Note that you can use the sample code as-is or customize the plugin application and extend its capabilities.

Code Sample Notes

Some words about the code used to implement this plugin:

1. To obtain the Shell Personliazation service:

   	this.oPersonalization = sap.ushell.Container.getService("Personalization");​

2. To create and obtain a personlization container:

   	this.oPersonalization.getContainer("sap.ushell.PortalSiteFavorites", //Container ID
        
   		keyCategory: this.oConstants.keyCategory.FIXED_KEY,
   		clientStorageAllowed: false,  //Store data in Front-End-Server and not local storage
   		writeFrequency: this.oConstants.writeFrequency.HIGH,
   		validity: "infinity"
   	})
   	.done(function (oContainer) {
   		that.oPortalSiteFavoritesContainer = oContainer;
   		that.setFavoritesModel();
   	});​

3. To get a key-value pair in the personlaization container:

   var portalSiteFavoritesModelObj = this.oPortalSiteFavoritesContainer.getItemValue(PERSONALIZATION_FAVORITES_KEY);​

4. To set a key-value pair and finally save them to the persistency:

   this.oPortalSiteFavoritesContainer.setItemValue(PERSONALIZATION_FAVORITES_KEY, favoritesModel.getData());
   
   	this.oPortalSiteFavoritesContainer.save().fail(function () {
   		MessageToast.show("Saving personalization data failed.");
   	})
   	.done(function () {
   		this.setFavoritesModel();
   	}.bind(this));​

   Note that we persist the complete JSON model describing the list of favorite targets. For each target – its title and intent-navigation data.

5. To get the current Page/Application title and intent-navigation data

   var siteService = sap.ushell.Container.getService("SiteService");	
   var currentTarget = siteService.getCurrentAppTarget();
   var targetTitle = siteService.getAppOrMenuTitle();​

6. To navigate to a selected portal page or app:

   var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
   			oCrossAppNavigator.toExternal({
   				target: target
   			});​

Personalize away! 🙂