Skip to Content
0

SAPUI5 - sap.tnt.NavigationListItem custom icons

Jan 08, 2017 at 03:45 PM

228

avatar image

Hello Experts,

I am using sap.tnt.SideNavigation and I am trying to set my own icons to each of the items.

The icons are not displayed.

While searching for information on this problem, I saw that there was an open bug for this which was resolved on version 1.36.11.

I use version 1.40.11

Any ideas?

Regards.

10 |10000 characters needed characters left characters exceeded

Hi,

I had your same issue and after a shamingly long investigation I landed on this blog post: Enhance UI5 app with custom icon fonts.

The trouble is that NavigationsListItem's DO NOT accept "normal" pictures as icons, doesn't matter which URI you use. If you like to use a custom icon, THEN you need to create a custom icon FONT first.

Hope it helps,

Luca

0
* Please Login or Register to Answer, Follow or Comment.

5 Answers

VIPLOVE KHUSHALANI Jan 09, 2017 at 08:22 AM
0

Hi Effi

I am also using navigationList Item with custom icons in one of the project and its working correctly for me . Please check your code might be you have missed something

thanks

Viplove

Share
10 |10000 characters needed characters left characters exceeded
Effi Olivkovitch Jan 09, 2017 at 10:11 AM
0

Hi Viplove,

Thank you for your feedback.

My code (snippet) is:

...
oSideNavigation.getFixedItem().addItem(new sap.tnt.NavigationListItem({ tooltip: "{i18n>nav.Desktop.LogOff}", icon: "{img>/nav_desktop_logoff}", select: function(){ oController.doDesktopLogOff(); } }));

...

Regards.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Effi,

Can you remove "/" from the icon: "{img>/nav_desktop_logoff}"

replace icon: "{img>/nav_desktop_logoff}" with icon: "{img>nav_desktop_logoff}"

thanks

Viplove

0
Effi Olivkovitch Jan 09, 2017 at 01:40 PM
0

Hi Viplove,

Thanks for your suggestion. Unfortunately, it did not solve the problem.

I also tried: "img>nav_desktop_logoff" & "img>/nav_desktop_logoff" without success.

I know the image reference is correct becuase I am using it with menu button:

new sap.m.MenuButton({height:"50px", tooltip:"{i18n>nav.Desktop}", icon:"{img>/nav_desktop}"});
Share
10 |10000 characters needed characters left characters exceeded
Effi Olivkovitch Jan 11, 2017 at 12:19 PM
0

So...

After doing some more reading I realized that using "raw" .png images is not possible here.

I converted the .png images to .svc &-> font. I tried to load the image and I get a rectangle.

Now I am trying to see whether I can use color icons (defined with multiple paths).

Any thoughts will be appreciated.

Regards.

Share
10 |10000 characters needed characters left characters exceeded
Effi Olivkovitch Jan 12, 2017 at 01:07 PM
0

An update...

I was able finally to display my custom icons.

The thing is: The icons are displaying in the upper level NavigationListItem but not in the internal ones.

I will keep investigating.

Share
10 |10000 characters needed characters left characters exceeded