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.
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?
As always, great blog Murali Shanmugham, . Thanks!
Phil Cooley - I'm curious if you would actually like to consume the image from Jam, or typically the image is stored in different repositories?
Aviad
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
Yes, absolutely help! Thanks Phil.
The SAP Cloud Platform Identity Directory Service could be just the solution.
https://help.sap.com/viewer/f48e822d6d484fa5ade7dda78b64d9f5/Cloud/en-US/bfed483b5b45482d82fab546d051b36b.html
The service is SCIM based and finally delivers the UME capabilities of an SAP Enterprise Portal.
Phil Cooley Aviad Rivlin
Hi Murali,
Thanks for your blog.
I'm trying to add background image for FioriLaunchPad tile in Fiori 2.0. Please find below image which im trying to achieve
https://answers.sap.com/questions/608077/how-to-add-background-image-for-fiorilaunchpad-til.html
Regards,
Natarajan
Hello Murali Shanmugham, ,
Thanks for the Blog.
How can I resize the image in the me area? I mean to make it responsive the image is displayed too big.
Thanks
Best Regards
Ibrahim
Hi Shanmugam,
I tried to use the same code but it throws an error : ESLINT(SAP-NO-HARDCODED-URL).
Here I am attaching my code, Do I miss something?
Thanks and Regards
Ranjith Rupireddy