Skip to Content

Customize Icons for the Homepage Framework

    Although there is excellent material around and even step-by-step guides for configuring and customizing the Homepage Framework (*see the document “XSS Homepage Framework for Employee Self-Service” by Sibylle Borhauerm-Product Manager, SAP AG), I have found nothing available that provides information about customizing the actual icons/images that are used within the framework. Therefore, I took the DIY (do-it-yourself) approach and decided to put together a document of my own to hopefully help others. The following is an explanation about how to customize and/or add new icons for the Homepage Framework. This is based on my experience with ECC5.0, but a similar approach should work for ECC6.0.

    The Homepage Framework is a new feature as of ECC5.0 (“mySAP ERP 2004” for those that want to be thoroughly confused….haha). It is basically a means to build very informative, aesthetically consistent web pages solely through configuration in the IMG (no web coding needed!). It allows you to organize information in a more user-friendly manner. For example, prior to this, ESS services were typically listed as links on a menu on the left of the browser window (like the detailed navigation area of the portal). The user would click the fairly non-descript link and be taken to a web application that contained even less helpful information or description and was more “techy” in appearance. This was not very friendly or intuitive to end users who may not have much familiarity with computers at all. Often times, I would have to build static web pages for clients that would serve to provide help information to the user about what the actual ESS links would do and so forth and to serve as a “jumping off point”. With the Homepage Framework, you can configure (again…no coding!) a “jumping off” page that summarizes all the areas you offer in ESS (called the Area Group page in the Homepage Framework), and then configure more detailed information pages for each area as well (called Area pages in the Homepage Framework).

ESS Area Group Page
ESS Area Page for Benefits and Pay

Where is my Framework?
    With any “framework”, as the name implies, there is a fairly rigid layout. This insures consistency amongst the pages. For the Homepage Framework, each “area” is assigned an icon. The icon should visually convey the idea of the “area”. For example, for an area for “Working Time”, you might use a “clock” icon. The icons assigned to each Area appear on the Area Group page as well as the respective Area page. By default, there are only a small number of “out of the box” icons that are provided. I took the time to document the default images and their corresponding “resource” name in a spreadsheet. An image of this appears below:

Default Icons

The big question (and one I see asked over and over) is “where does all this stuff live?”. This is one of the misconceptions and/or hurdles to overcome in understanding the newer ESS/MSS SAP offerings. With ECC5.0 and higher, most people incorrectly assume that by installing/deploying the ESS/MSS business package(s) that they suddenly have all of ESS/MSS available to them. Wrong. It’s an easy mistake to make because “that’s how it’s always been before”. The actual deployment of the overall solutions for ECC and onward requires two pieces. You still deploy the business package, but the business package only covers the portal objects. All you are doing is loading in the out-of-the-box iViews, worksets, pages ,roles, etc. Now what will your iViews “talk” too? The second part is the actual ESS/MSS/XSS services, ie. the applications that “do stuff”. At the moment, these are Java Webdynpros and are part of the “Java XSS Components” installation. These components can be installed on any WAS/NWAS, but typically they are deployed on the same server as the Enterprise Portal…just more Java web applications running on the Java engine (again, they could be deployed to an entirely separate WAS/NWAS but we won’t get into that). Part of the Java components installation is the Homepage Framework WebDynpro and the accompanying icon images as resource files. The images are not in the Business Package, and they are not not in the backend SAP system. Both are common misconceptions.

Make it your own!
    So now that we know what we are working with and where everything is, how do we change it? First, let me offer this advice. I would not modify and existing icon (replace “clock.gif” with a different image named “clock.gif”. I always create my own custom images. In that way, if all else fails, we still have the SAP delivered content. “Better safe, than sorry!” as my grandfather, an explosives specialist, used to always say. With my word of warning offered, onward we go now. Let’s do this through an example. Say for instance, we want to change the icon used for “Working Time” in ESS. The default icon and Area page might appear as:

Working Time Area Page

If we look in configuration, we find that the icon used is actually assigned to two resources:


Since we are changing the ESS one, it’s configuration appears as:

Default Configuration of Resource

Now, let’s say we have our own image:


First, we can change configuration of the resource to now use (“look for”) our custom image:

Customized Configuration of Resource

Now, we must actually put the image in the location where the Homepage Framework can find it. As I said before and want to make clear once more, the images are not in the Business Package. They are deployed as part of the Java XSS components. Therefore, we must place our custom image out in the same physical directory that the other resources were deployed to during the installation of the XSS Java components. Using our example, let’s look at the “clock” image. I could go into detail telling you where and how this is found, but I prefer to show you the simple way. In your browser, navigate to the “Working Time” Area page as shown above. If you right-click on the default icon and then select “Save Picture As…” from the context menu, a window will pop-up showing you the name of the image file as “calendar_clock.gif “ (we also know the file name from the configuration of the resource shown above). Now that you know the actual name, you can simple do a “View Source” on the page and then search for the occurrence of “calendar_clock.gif “. Doing this, we see that it is deployed and linked to the path as follows:


Therefore, we simply need to move/copy our own “myCompany_clock.gif” into the path:


This may require additional help if you do not know where (what server) the Java components were installed on or you do not have direct access to those directories. With the file copied over and our configuration changes to the backend resource to use our custom image, our “Working Time” Area page now displays using our custom icon:

Cusotmized Working Time Area Page

    These are a few things to be aware of if you have problems seeing your custom changes (these apply to any changes to the Homepage Framework configuration):

  • Make sure you have copied your configuration to the correct client that is in use. Typically, you will configure in one client and then test in another. You can use transaction SCC1 to copy client-to-client transports, if you have access to that function. The Homepage Framework config is client-dependent.
  • If you do not see changes in the portal immediately, it is typically due to the cache not being refreshed. You can do this via the System Administration – >Support area of the portal for the PCD content. You can also set a parament to clear the buffer directly on the iView for the Area and Area Group iViews but this is not suggested for performance reasons.

Wrap Up
    As you might gather through this blog and others I have done on the Homepage Framework as well as forum posts, I have had quite a lot of opportunity to work, experiment, play, tear open, and configure the Homepage Framework. It does have it’s limitations, but as with any tool, it’s great for particular jobs. I have found it useful in building many additional self-service scenarios (ie, Team Lead Self-Service, self-service for visitors/guests to use on kiosks, etc). I hope this blog motivates you to give it a try, and now with the step-by-step configuration guide already available and this blog filling in the blanks for the images, you should really be able to customize just about all aspects needed.

You must be Logged on to comment or reply to a post.
    • Thanks! I am working on another blog full of great buzzwords that will convey very little useful information….oh wait…that’s been done a number of times here already. *grin*
  • Nice approach, but there is another solution, where you dont need access to the server folders.
    You just need to create a new server for your own resources, which points for instance to the CMS of the Portal. There you just need to upload the new image.
    • Markus, thanks for the reply. I am aware of that approach but didn’t want to complicate matters by going through the process of configuring a server and so forth. Also, as in our case, some folks don’t have additional web servers/space to utilize, so this way gets them going more directly. Personally, I have tried the approach of configuring a server for my resources and directing HF to look there, but it never seemed to “find” them. It wanted to look at the default resource path for the XSS webdynpro. Not sure if I was setting the wrong info or if it would require changing the webdynpros to “look” somewhere else. Anyways, I found this “quick and dirty” way to handle it, and it worked. Thanks for adding an additional way to solve this for folks as well. That was why I asked for other solutions at the end! Thanks again.
  • Isn’t there a risk with putting files at the o/s level under /usr/sap/incredibly_long_and_convoluted_path?

    For example, will the files be there after adding another server node or, worse still, doing a dialog instance installation?


    • The files you place “out there” are simply being put where the XSS components were already installed….not much control over that at this point. When you set up your XSS system object in the portal, you are telling the portal on what server the XSS WebDynpros “live”. The XSS components are just Java apps running over the engine. So where and how many of those servers is not so much the issue as is making sure the components are installed first and then deploying your own “resources” wherever “those places” are. 
      • And in the event that you are in a situation with several servers for the XSS components, a better route might be the other discussed…ie. house your resources on some central location, configure that server/resources in backend HF config, and access the resources from there. But as I said, I have not gotten that way to work cleanly, and it requires additional HF config for a server. In the event that you do not have access to another web server to access your resources, a third method could be to pick a server (in your multi-server example) situation that you deployed the resources too and set that up as a server in HF config so that you point to that specific/known location. However, that could lead to performance issues since you would be doing a lot of jumping from server to server to build your pages.
      • Hi Christopher

        Maybe my point wasn’t clear. Let’s say you install XSS on top of a Web AS Java with a single server node. The files will then live under /usr/sap/SID/JCnn/j2ee/cluster/server0… If you then use the Java config tool to make another server node, then there will be a folder /usr/sap/SID/JCnn/j2ee/cluster/server1. The files you manually copied under /server0 won’t be there under /server1, so you need to copy them manually..


        • First off, I am not completely sure of that “root” path (I search on the last few “folder” names), but I don’t see how the XSS components could run on the new server node until/unless you install them there as well. I agree…if you had 2-20 more nodes, copying your resources there could be tedious to say the least. In that case, I would say do as my third option (or the second)….set up the path via server node0 as a “server” in HF config and then the resources would still be referenced from there even if running the XSS apps on server1. That’s pretty much what the other person commented as well (forget the name now that I am replying…doh!) Make sense? In my case for our production portal environment, we are running 3 physical servers with 2 virtual servers on each, so copying our resources all around does not take too much time.
  • Hi Christopher

    I have put together a wiki page here that describes a simple method for locating graphic files on the portal server. It might be a usfeful way to locate any graphics you wish to include in the framework.


  • Hi,

    I’ve stored the new images in a KM folder so they are maintainable via the KM component in the Portal. No need to dig around in directories at the server level!

    Just point the ESS config in R/3 at the appropriate KM diectory e.g. /irj/servlet/prt/portal/prtroot/


    • David, you are right on. We discussed this in the comments below. I merely wanted to show a “quick and dirty” way …especially for folks that do not install KM or so not want to use it…but also without the need of additional Homepage Framework config (ie. server) I use the method you discuss here to store my icons as well as “additional information” web pages and images. However, I did not want to get off down that path in this blog as a lot of that discussion will hinge also on how a customer wants to implement KM, what level of permissions, etc. We can’t assume that everyone will just use the “Documents>Public Documents” path and then create a “images” folder right there…they might construct their directories differently. However, since others have mentioned it, I might update this blog to walk through a basic example of doing it that way.
    • David,

      How get the path in where I upload the image?

      For example You writted the following path but How get this path?



  • Hi there,

    This is a great blog.
    I was unable to locate the icon images files. (*.gif)

    is it in any par file.

    I need to replace the existing icons like “benefit and payments” icon image with my personal icon images.

    Thanks much.

  • Dear Christopher,

    I went through the blog.It is really very helpful. In this you have mentioned about a document “XSS Homepage Framework for Employee Self-Service” by Sibylle Borhauerm-Product Manager, SAP AG
    The document is step-by-step guide for configuring and customizing the Homepage Framework

    I tried to find this document but failed to find it.
    May you help in telling the location or if possible may you share the same.

    My email id is –

    Warm regards