Changing the Work Center Icon and Color Swatch for a custom PDI

For a long time it was not possible to change the standard „puzzle“ icon of a custom PDI in SAP Business ByDesign. However now it is possible to choose from a big variety of icons. In addition to that you can now change the color swatch of a Work Center as well.

Overview

In this blog, I will show you how you get from this

to this

I am going to demonstrate it with an example of the custom Work Center “Travel Management”.

Adding the Icon

Open the Work Center Floorplan (WCF) in the Cloud Application Studio with the UI Designer.

Select the “OberonCenterStructure” Folder Symbole in the top left corner.

In the properties panel you can now select the “Work Center Attributes”

Click on the “Add” button and change the Name of the new created element to “Icon”

Now you can choose an icon. You find a list of all available UI5 icons in the Icon Explorer (Icon Explorer)

There you can search via Tags or simply scroll through all icons.

If you found the Icon, you want to use, click on it and copy the text of the first row.

In our case we are going to use the “Travel-itinerary” Icon and therefore copy the text “sap-icon://travel-itinerary”. This text you put into the Value field.

After you filled in the value and pressed “OK” the icon of the Work Center is changed. After saving and activating the WCF you will see the changes in the system.

Changing the Color Swatch

To change the color swatch of the Work Center you need to add a new element to the Work Center attributes and put into the name field “BusinessArea”.

You can then choose from 9 different colors. Those are the standard colors of the different application areas. Here is a list with all the different colors available including examples of Work Center.

Examples for the available colors you can see in the pictures down here. You obviously should use the color, which fits best to purpose of your solution.

For demonstration purposes, I am going to use the “Gold” Color. To get the color put the Application Area name into the value field as shown and press “OK”. In my case, I am going to put “FIN” into the value field.

After saving and activating the WCF the changes are completed.

Additional Info

To See Changes you need to logout and login again into the system.

Keep in mind that the Work Center Icons and color swatches are cached in the browser. Therefore, you need to clear the cache of the browser to see the changes. (SAP will fix this issue in the next release)

Currently it is not possible to choose other colors than from the standard “Business Area”. However this I planned on the roadmap.