Skip to Content
0
Aug 02, 2018 at 10:34 AM

Custom User Image in SCP Portal Fiori 2.0

999 Views

Hi Expert,

I've followed below link to populate user image in the portal.

https://blogs.sap.com/2016/12/02/custom-user-image-in-fiori-2.0/#comment-402737

However, I've faced an issue whereby the image is able to load within a few seconds then it's disappear after the launchpad finished load.

Below is my full code of component.js

sap.ui.define([
	"sap/ui/core/Component",
	"sap/m/Button",
	"sap/m/Bar",
	"sap/m/MessageToast"
], function (Component, Button, Bar, MessageToast) {


	var sComponentName = "nv.flp.plugin1";


	return Component.extend("nv.flp.plugin1.Component", {


		metadata: {
			"manifest": "json"
		},


		_getRenderer: function () {
			var that = this,
				oDeferred = new jQuery.Deferred(),
				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;
			var 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 sRootPath = jQuery.sap.getModulePath(sComponentName);
					var imageSource = sRootPath + "/img/icon1.png";
					var smallImage = imageSource + "?size=SMALL";
					//Below is for the small icon on top left
					$("#meAreaHeaderButton").html("<img style='max-width: 100%; height:auto;' src=" + smallImage + ">");


					//Below is for the Me area
					var biggerImage = imageSource + "?size=BIG";
					$(".sapUshellMeAreaUserImage").html("<img style='max-width: 100%; height:auto; position:absolute; left: -0px; top: -0px;' src=" +
						biggerImage + ">");
				});
		},


		exit: function () {
			if (this._oShellContainer && this._onRendererCreated) {
				this._oShellContainer.detachRendererCreatedEvent(this._onRendererCreated);
			}
		},


		after: function () {
			var sRootPath = jQuery.sap.getModulePath(sComponentName);
			var imageSource = sRootPath + "/img/icon1.png";
			$(".sapUshellMeAreaUserImage").html("<img style='max-width: 100%; height:auto;' src=" + imageSource + ">");
		}


	});
});

Anyone have faced this issue?

Thanks.

Regards,

Ben