Icons for the masses (NWBC edition)

Hi all,

I have been a huge fan of NWBC since version 4.0 and reckons still it’s potential is hugely underrated. However one thing that have always annoyed me was the lack of custom icon support. User research has shown that icon resemblance helps usabilty

Well that changes now!

Using the theme designer, you can know change the icons on the index page. For the service maps i will write another blog on how to do that.

Firstly we need to upload an image to the server.

So head on in to SE80 and select the mime repository.

I uploaded my image to the filepath “/sap/public/bc/WebIcons/ur/default/l/Workcenter/” as this is where all the other workcenter icons are sitting.

Secondly we need to identify the role and folder you want to change your icon for.

What is important in here is first of all the role name and secondly the node id.

Now we have all we need!

Go to transaction /ui5/theme_designer and create your own theme. I won’t go into detail with that, but read this blog how to do that.

What is important is that you select a theme that can be used by NWBC. I used blue_crystal.

Open up the index page in the preview.

Now click the CSS tab and add the following code

 [id*="Z_JMK_TEST"][id*="7"] > img { //[id="wc_id_1"] > img{  //Used for testing purposes.   background: url("https://learntips.b-cdn.net/sap/public/bc/WebIcons/ur/default/l/Workcenter/stormtrooper_wc1.png") no-repeat;   background-size: 50px 50px !important;   width: 0px;   height: 70px;   padding-left: 70px; } // This makes the text in the swimlane not interere with the icon .nwbc-WorkCenterTitle  {     padding-left: 100px; } // This makes the text in the swimlane not interere with the icon .nwbc-WorkCenterDescription {     padding-left: 100px; } 

So going throught the CSS. The id*= searches for the particular id that contains my role name and the node id.

Then we add a background image to the container and pushes the original image stored in the src attribute out of the view.

Secondly because i had some funny rendering problems, i pushed the text in the swimlanes a bit to the left.

The end result is:

Unfortunately i wasn’t able to get the “standard” icons and the custom icon completely aligned, no matter what i tried it didn’t seem to work. But maybe someone else, who is better at CSS can pick that up.

There you have it, your own custom icons in NWBC.

Check out my other blog on how to use the same approach for custom icons in the Fiori Launchpad.

Follow me on Twitter or Linkedin for updates and thoughts about SAP User Experience.