Skip to Content
Technical Articles
Author's profile photo Ido Shemesh

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! 🙂

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      This is a cool feature ?

       

      Author's profile photo Eric Enders
      Eric Enders

      SAP Cloud Platform is our FES.  How do we activate this service?  Variant Management works for us only when the application is run in SAP Web IDE.  Once we deploy and run the app from FLP on SAP Cloud Platform, it does not display the variants.

      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Hi Eric, Did you use the source code for the github repository:

      https://github.com/SAP/cloud-portal-tutorial-samples/tree/master/Blogs/favoritesplugin

      Author's profile photo Consuelo Romano
      Consuelo Romano

      Hi Ido, I'm trying to implement this feature in my portal site but it's not working. I followed all the steps and used the exact code from the github repository but it says that there's a plugin misconfiguration

      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      Hi Consuelo,

       

      Can you share a screenshot of the error ?

      Also, what Cloud Platform environment are you using?

      Regards, Ido

      Author's profile photo Consuelo Romano
      Consuelo Romano

      Sure, this is a capture of the error I get. Also I’m using NEO as the environment. I don’t understand why it’s not working

      Author's profile photo Ido Shemesh
      Ido Shemesh
      Blog Post Author

      I just tried the whole flow on a separate trial account and it works fine. Can you add a screenshot of the \favoritesplugin project as it appears in your Web IDE ?

      Author's profile photo Sachin Kulkarni
      Sachin Kulkarni

      Hi shemesh,

      Can we add personalization in portal v2 and we are using xml view?

       

       

      Thanks