Skip to Content

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);
			}
		}
	});
})();
To report this post you need to login first.

13 Comments

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

  1. Henrik Bruentrup

    Hi Krishna,

    thank you for this nice tutorial!

    However, I cannot get the big profile icon in the MeArea to show the designated image. All other placeholders (one in header & two in settings) are being replaced correctly. Any idea why just the big one is not working?

    I did not change any of your code other than posted below.

    .done(function(oRenderer) {
    
    	var imageSource = "http://XXX:ZZZ/sap/bc/ui5_ui5/sap/zuserimage/profileImage.jpg";
    
    	//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
    	sap.ushell.Container.getService("UserInfo").getUser().setImage(imageSource);
    
    });

    Best regards,

    Henrik

    (0) 
      1. Parth Budhiraja

        Hi Krishna,

         

        I am using full URL (same for both Me area and small icon) , that too , an absolute URL from Google. I am experiencing same issue as that of Henrik. I have seen no call is getting failed in my case.

        @Henrik : By any chance, are you able to resolve the error?

        Best Regards

        Parth Budhiraja

        (0) 
  2. Joeri Verbeke

    Hi Krishna,

    i only don’t understand where you have to create this plugin? is it also in launchpad (designer) or is it in the hana cloud platform? or eclipse and upload it?

    thanks.
     

    (2) 
    1. Emmanuel Dacosta

      Hello

      I have created a Z catalog in which I have set the target mapping as explained in the link of the step 2.

      I have created the role with the catalog and I have assigned my user. But the Globe does not appear in the launchpad.

      Could you help ?

      Could you be more explicit about the creation of the plugin ? which IDE ? how and where do you deploy the plugins ?

      Regards

      Emmanuel

       

       

       

       

      (0) 
  3. Arpit Oberoi

    Hello Kishore,

     

    First of all thanks for this brilliant post. However like few others I am struggling to make sense about UI plugin file. I was able to add globe as per standard documentation and was able to make it work but for that I assume file UIPluginSampleAddHeaderItems in following location already exists /sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/UIPluginSampleAddHeaderItems/Component.js

     

    And following code is inside this file:

     

    (function () {
        "use strict";
    
        /*global jQuery, sap */
        jQuery.sap.declare("sap.ushell.demo.UIPluginSampleAddHeaderItems.Component");
        jQuery.sap.require("sap.ui.core.Component");
    
        var sComponentName = "sap.ushell.demo.UIPluginSampleAddHeaderItems";
    
        // new Component
        sap.ui.core.Component.extend("sap.ushell.demo.UIPluginSampleAddHeaderItems.Component", {
    
            metadata : {
                version: "@version@",
                library: "sap.ushell.demo.UIPluginSampleAddHeaderItems"
            },
    
            /**
             * Returns the shell renderer instance in a reliable way,
             * i.e. independent from the initialization time of the plug-in.
             * This means that the current renderer is returned immediately, if it
             * is already created (plug-in is loaded after renderer creation) or it
             * listens to the &quot;rendererCreated&quot; event (plug-in is loaded
             * before the renderer is created).
             *
             *  @returns {object}
             *      a jQuery promise, resolved with the renderer instance, or
             *      rejected with an error message.
             */
            _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 oPluginParameters = that.getComponentData().config, // obtain plugin parameters
                        sRendererExtMethod;
    
                    if (oPluginParameters.position === "end") {
                        sRendererExtMethod = "addHeaderEndItem";
                    } else if (oPluginParameters.position === "begin") {
                        sRendererExtMethod = "addHeaderItem";
                    } else {
                        jQuery.sap.log.error("Invalid 'position' parameter, must be one of <begin, end>", undefined, sComponentName);
                        return;
                    }
    
                    if (typeof oRenderer[sRendererExtMethod] === "function") {
                        oRenderer[sRendererExtMethod](
                            "sap.ushell.ui.shell.ShellHeadItem", {
                                tooltip: oPluginParameters.tooltip || "",
                                icon: sap.ui.core.IconPool.getIconURI(oPluginParameters.icon || "question-mark"),
                                press: function () {
                                    sap.m.MessageToast.show(oPluginParameters.message || "Default Toast Message");
                                }
                            },
                            true,
                            false);
                    } else {
                        jQuery.sap.log.error("Extension method '" + sRendererExtMethod + "' not supported by shell renderer", undefined, sComponentName);
                        return;
                    }
                });
            },
    
            exit: function () {
                if (this._oShellContainer && this._onRendererCreated) {
                    this._oShellContainer.detachRendererCreatedEvent(this._onRendererCreated);
                }
            }
        });
    })();
    
    
    And according the UI plugin code you provided, does this need to create a new UI plugin file or do I have to modify above code to align as per your code?
    
    Really appreciate if you could provide some input?
    
    Best Regards,
    Arpit
    (0) 

Leave a Reply