Enterprise Resource Planning Blogs by Members
Gain new perspectives and knowledge about enterprise resource planning in blog posts from community members. Share your own comments and ERP insights today!
cancel
Showing results for 
Search instead for 
Did you mean: 
ChrisSolomon
Active Contributor
    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.

Background
    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:
  • EMPLOYEE_WORKTIME_PIC
  • MSS_HCM_AREA_ATTENDANCE_PIC
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:


myCompany_clock.gif


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:

    ../../../resources/sap.com/pcui_gp~xssutils/Components/com.sap.xss.ser.xssmenu.vc.areagroup.VcXssMenuAreaGroup/calendar_clock.gif

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

    ../../../resources/sap.com/pcui_gp~xssutils/Components/com.sap.xss.ser.xssmenu.vc.areagroup.VcXssMenuAreaGroup/

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


Gotchas!
    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.
16 Comments
Labels in this area