CODEWITHSUNDEEP
sapui5portalsap-cloud-platform
05_pingpong
05_pingpong

Reputation: 77

How to add an image in shell header on a freestyle portal site?

I need to add an image on the header of a freestyle portal site which when clicked should open a new window with a specific URL. Currently tried adding the below code but it appears very small, just like a profile picture. But our requirement is to make it appear more like a logo and on the right side (as an header end item).

var oImageItem = new sap.ushell.ui.shell.ShellHeadItem("imageId", {
                    icon: "/images/image1.png",
                    tooltip: "Click here",
                    //height: "100%",
                    showSeparator: false,
                    href: "HarcodeURL",
                    target: "_blank"

                });
                oRendererExtensions.addHeaderEndItem(oImageItem);

Upvotes: 0

Views: 1829

Answers (2)

William
William

Reputation: 11

This link could be very interesting: How to place logo or icon at the Center of Unified Shell header?

You have to change "Center" to "Right" and "Icon" to "Image"

That would look like this:

var oShell = new sap.ui.unified.Shell("oShell", {
   header: [
     new sap.m.FlexBox({
       justifyContent: sap.m.FlexJustifyContent.Center,
       items: [
         new sap.ui.core.Icon({
           src: "sap-icon://home"
         })
       ]
     })
   ]
});

You also could change the "FlexBox" to a "VBox".

Upvotes: 1

William
William

Reputation: 11

This element doesn't exist. Use the "sap.m.Image" element. (SDK sap.m.Image)

Code with XML: <m:Image src="/images/image1.png" width="100px" press="openNewWindow">

Code with JS: 

var oImageItem = new sap.m.Image("imageId", {
                src: "/images/image1.png",
                tooltip: "Click here",
                width: "100px",
                press="openNewWindow"
            });

Press Event in Controller:

openNewWindow: function(){ window.open("https://www.hypej.com"); },

Upvotes: 0

Related Questions