Displaying custom User Profile Picture in Cloud Portal

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.