Skip to Content

In the Cloud Portal on SAP Cloud Platform, there is an option to display the user profile/avatar on the top left hand corner. This can be enabled both in freestyle as well as Fiori Launchpad based sites. In order to display the user profile picture, SAP Cloud Platform needs to be configured with your SAP Jam tenant as the pictures get displayed from SAP Jam. If you would like to know more about this configuration, I would refer you to the blog “SAP JAM Collaboration – Set up in Productive Environment” by Phil Cooley

For the last few weeks, this feature has been turned off in the Cloud Portal due to GDPR regulations. As a result, there is a blank icon which gets displayed everytime you visit the portal site. In this blog, I will show you how to configure the Cloud Portal to display your own profile picture.  If you are working on an on-premise Fiori Launchpad, please refer to “Custom User Image in Fiori 2.0” blog by Krishna Kishor Kammaje.

In order to display the user profile picture, you have to extend the Fiori Launchpad using shellplugins.  This has been covered in openSAP course “Building Portal Sites on SAP Cloud Platform” Week 2 Unit 6. For those who are new to this concept, I will give a brief overview on the steps to follow in this blog.

Create a shell plugin App using SAP WebIDE FullStack

Use SAP WebIDE FullStack service for this task and enable the feature “SAP Fiori Launchpad Extensibility”

After reloading the WebIDE service, create a new application using the template “SAP Fiori Launchpad Plugin”

In the project that gets created, you would need to use the APIs to extend the the Fiori Launchpad. Here you can add buttons to header or add additional things to your footer.

In the below source code, notice that I am passing an image to the a function which converts it to a base64 encoded string. Thanks to Ido Shemesh for the hint.

toDataURL: function (url, callback) {
			var xhr = new XMLHttpRequest();
			xhr.onload = function () {
				var reader = new FileReader();
				reader.onloadend = function () {
					callback(reader.result);
				}
				reader.readAsDataURL(xhr.response);
			};
			xhr.open('GET', url);
			xhr.responseType = 'blob';
			xhr.send();
		},


			this.toDataURL('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVIi9oZ_RFDQRWWEDPFtiu6WScXkWlMC_oU7DRa2bBhmtIeMWm', function (
				dataUrl) {
				var meAreaHeaderButton = sap.ui.getCore().byId("meAreaHeaderButton");
				meAreaHeaderButton.setIcon(dataUrl);
				sap.ushell.Container.getService("UserInfo").getUser().setImage(dataUrl);
			})

Create a Shell Plugin app in the Portal site

The last steps is to embedd the Shell plugin app within a portal site as an app. In the below Fiori Launchpad site, I have created an app type “Shell Plugin” and referenced to the project I created above.

Once you publish your site, you should be able to see the user profile picture on your Fiori Launchpad.

You should also see it in “Me Area” of your Fiori Launchpad (as shown below)

If you are trying to configure the same and have issues with displaying the user profile picture, please post a question here.

 

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Phil Cooley

    Nice Murali Shanmugham, did not realise the GDPR changes impacted on the profile/avatar image. Dang! Who are we to log in to our FLP or Freestyle site and see our own image! A number of privacy issues there for sure. 🙂

    Thanks Murali for providing this information for the Cloud Portal, definitely requirements out there for this. Do you know if this is likely to change in the future so that the image can come from the Jam tenant image?

    (0) 
      1. Phil Cooley

        Most of the customers I’m dealing with don’t have SAP Jam which means ordinarily they would miss out on the image however there are some that have requested an image from a repository of employees where the photo ID is kept which sort of makes sense to me. Definitely need other ways to retrieve an image other than from SAP Jam just to showcase the functionality a little more.

        Hope this helps Aviad Rivlin

        (1) 

Leave a Reply