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.

20 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) 
    1. Tobias Herbst

      Hi Henrik,

      the problem is located in the following coding line:

      var biggerImage = imageSource + “&UA=0&size=HR96x96”;

      Don’t use the parameters “&UA=0&size=HR96x96” and it works fine.

      Fiori Launchpad matches automatically the correct size for the image.

      Best regards,

      Tobias

      (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) 
  4. SAP Seeker

    Hello Krishna,

    We are trying to show the User’s full name next to the image icon on the top left. Is there an option to do that ? What you showed in your blog next to the user image is again a picture ?

    Thanks.

    (0) 
  5. SAP Seeker

    Hello Krishna,

    We followed your code but still the icon image is not getting displayed. We are trying to source from an external url, whereas relative URL is working fine. Any other ways to source icon image ?

    Thanks.

    (0) 
  6. Dejan Dinic

    Hello Krishna

    Thanks for the tutorial!

    I followed your code, also with the image from Office365, but I get an “401 unauthorized” error. Do you know how to solve this?

    Thanks.

    (0) 
  7. Frank Krause

    Hi  Krishna,

    nice tutorial but I’m asking myself why do I have to spent so much efforts on that. The Image URL should be part of the basic services…

    (0) 
  8. Ndricim Cobo

    Hi Krishna,

    I’ve followed your guide and now am able to see the user image for the small icon on the top left corner.  But i don’t see the image in the “Me area”.

    After doing some inspecting with chrome devtools I tried to modify some jquery code in the after function so as you may see in the second image i can change the icon but not always works. Below the code i modified:

    			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();
    					
    					var imageSource = "/sap/public/bc/ui2/logon/custom_images/Mario_Nintendo.png"
    					var imageSourceBIG = "/sap/public/bc/ui2/logon/custom_images/mbig.png"
    					
    					//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(imageSourceBIG);
    				});
    		},
    
    		exit: function() {
    			if (this._oShellContainer && this._onRendererCreated) {
    				this._oShellContainer.detachRendererCreatedEvent(this._onRendererCreated);
    			}
    		},
    		
    		after: function(){
    			var imageSourceBIG = "/sap/public/bc/ui2/logon/custom_images/mbig.png"
    			$(".sapUshellMeAreaUserImage").html( "<img style='max-width: 100%; height:auto;' src=" + imageSourceBIG + ">" );
    		}
    		

    Do you have any suggestion?

    Thanks in advance.

    (0) 
  9. Meghal Shah

    Hi Experts ,

    I have developed the same functionality. Image is not appearing after navigation(i.e. once i click on any tile , Image is not appearing . I have to refresh the page then its showing. )

     

    Regards ,

    Meghal Shah

    (0) 

Leave a Reply