Custom User Image in Fiori 2.0

[kammaje_cis]

As we know Fiori gets its user image from JAM. It is common that not every customer have JAM integration, so most of the customers end up having a user icon there instead of having user's image.

If you are not yet on Fiori 2.0, here is a blog on how to get the user image. But if you are on Fiori 2.0, hack mentioned in the blog will no longer work as as SAP has changed the architecture of fetching the image. Also there is a 'Me' area which has another placeholder for a user image.

At ConvergentIS, we are early adopters of Fiori 2.0 and wanted to get this feature. This blog outlines how you can achieve getting user image for Fiori 2.0.

Here is the end result.



Step 1. Decide where you are going to get the image from and get the URL ready. You might get it from your ECC, or from any other external site. We got it from Office365 profile.

Step 2. Create a UI plugin for Fiori launchpad and assign this to all the users in your Org. Use this link as your guide.

That is it. You are all good.

Note: If you are sourcing the image from an external site, you might need user's info to calculate the right URL. Use the ushell API to get user info like user name, email etc.
We used the image from our sharepoint user profile and needed user's email to fetch the profile photo.

Here is the complete code of the UI plugin.

(function() {

	"use strict";



	/*global jQuery, sap */

	jQuery.sap.declare("cis.FLPugin.Component");

	jQuery.sap.require("sap.ui.core.Component");



	var sComponentName = "cis.FLPugin";



	// new Component

	sap.ui.core.Component.extend("cis.FLPugin.Component", {



		metadata: {

			version: "@version@",

			library: "sap.ushell.demo.UIPluginSampleAddHeaderItems"

		},



		_getRenderer: function() {

			var that = this,

				oDeferred = new jQuery.Deferred(),

				oShellContainer,

				oRenderer;



			that._oShellContainer = jQuery.sap.getObject("sap.ushell.Container");

			if (!that._oShellContainer) {

				oDeferred.reject(

					"Illegal state: shell container not available; this component must be executed in a unified shell runtime context.");

			} else {

				oRenderer = that._oShellContainer.getRenderer();

				if (oRenderer) {

					oDeferred.resolve(oRenderer);

				} else {

					// renderer not initialized yet, listen to rendererCreated event

					that._onRendererCreated = function(oEvent) {

						oRenderer = oEvent.getParameter("renderer");

						if (oRenderer) {

							oDeferred.resolve(oRenderer);

						} else {

							oDeferred.reject("Illegal state: shell renderer not available after recieving 'rendererLoaded' event.");

						}

					};

					that._oShellContainer.attachRendererCreatedEvent(that._onRendererCreated);

				}

			}

			return oDeferred.promise();

		},



		init: function() {

			var that = this,

				fgetService = sap.ushell && sap.ushell.Container && sap.ushell.Container.getService;

			this.oCrossAppNavigator = fgetService && fgetService("CrossApplicationNavigation");



			this._getRenderer().fail(function(sErrorMessage) {

					jQuery.sap.log.error(sErrorMessage, undefined, sComponentName);

				})

				.done(function(oRenderer) {

					var imageSource = "https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=" + sap.ushell.Container.getService("UserInfo").getUser().getEmail();

					//Below is for the small icon on top left

					$("#meAreaHeaderButton").html( "<img style='max-width: 100%; height:auto;' src=" + imageSource + ">" );

					

					//Below is for the Me area

					var biggerImage = imageSource + "&UA=0&size=HR96x96";

					sap.ushell.Container.getService("UserInfo").getUser().setImage(biggerImage);

				});

		},



		exit: function() {

			if (this._oShellContainer && this._onRendererCreated) {

				this._oShellContainer.detachRendererCreatedEvent(this._onRendererCreated);

			}

		}

	});

})();

 

Disclaimer: This is a hack and there is no guarantee that this hack would work seamlessly in further versions of Fiori Launchpad. SAP would not support such hacks.

However, the insane hacker in me would suggest another unsupported hack 😉 . Copy the Fiori Launchpad itself (copy the BSP /UI2/USHELL) to have your own Launhcpad and perform your changes there or keep it as a backup.