Skip to Content

Customize the Homepage Framework with Custom HTML Content

    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 could not find exact details or examples on how to add in HTML content to your Homepage Framework Area pages even though all IMG configuration documentation says it is possible. Through trial-and-error, I figured it out on my own. Once I could link in a basic HTML page, the sky was the limit! You can link in any HTML resource, so that gives you the ability to put in images, Flash animations, wizz-bang-whatevers, and of course, nicely formatted HTML text. You will be some graphic/web designer’s new best friend! This document walks your through adding in HTML content into an Area page which is a nice way to present the user with additional, helpful information in an organized, eye-appealing manner. You could provide general help information, policy and procedures or even more links that might change far more often than configuration changes make reasonable. 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 does the extra content go?
    Although we can bring in custom HTML content into the Area page(s), we have little control over where it is displayed. The exact structure appears as follows:

Area Page Layout

As you can see on the right-side as highlighted in the colored outline, that section is for “additional information”. Through configuration, we have two options:

  1. Display long text directly entered into configuration of the Area page (default).
  2. Enter a resource for the HTML page to display.

For either choice, the content will display only on the right half of the page. That’s the part we are stuck with.(hey, it’s a framework! haha). Using long text is a nice quick way to fill in some content, however, it has many downsides. First, it’s nothing fancy. You can not include any HTML coding. It is just plain text. Second, line breaks are ignored (unless a note is applied). Third, the language is not translatable. It is simply the text as entered straight into configuration. Lastly, every time the text needs to change, it must be done in configuration (versus an external HTML page that can be managed/maintained separately). For all of these reasons and more, I like the idea of bringing in custom content.

How do we get our content there?
    Assuming you can find your way to the IMG (t-code SPRO) and furthermore, find the Homepage Framework configuration section (the screenshot above lists the path), the steps to add your own custom HTML page to an Area page would be roughly as follows:

//(1) Define a “resource” for HTML page.
In this part of configuration, you simply give your resource a name/key, brief description and enter the URL location of the resource. (*the HTML page you reference must be located on an accessible web server)

Resource Configuration

*note: as an alternative, you could define the server portion as a “server” in HF configuration and then reference the server in the resource’s configuration (see the field for “server” in the configuration above? that would be the server’s name/key that you defined). This is especially useful if you create several custom HTML pages all on the same server and then later need to move the server location. By defining the “server” config, you would only need to change it’s new location in that one configuration setting.

//(2) Attach HTML resource to Area page.
The next step is to configure your Area page to reference the HTML resource for additional content and not the long text entry. The configuration before the change might appear as:

Area Page Configuration Before Changes

You would then make the following changes:

  • Clear the field “Area Description Heading”. (not sure if this is required, but it seems to work and looks better)
  • Clear the field “Area Description (long text)”.
  • Enter your resource key name from step#1 into the field “Area Description Long Text (External)”.
  • Enter a pixel value for the height of the HTML page to display in the “Height of External Description Frame in Pixels” field. This should not be empty or nothing will display. For the most part, this simply sets the height of the IFrame “container” used to display the HTML page.
  • Save your changes. (duh.)
  • image
    Area Page Configuration After Changes

    //(3) Test and adjust as needed.
    Getting the height sizing right is tricky. Make sure your portal cache is refreshed and go test your changes! If all works well, you should get something like this (hope yours looks much nicer!):

    Area Page with Custom HTML Content

        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 custom content, you should really be able to customize just about all aspects needed.

You must be Logged on to comment or reply to a post.
  • Hi Christopher,

    I found this blog very useful to configure homepage framework for MSS/ESS. I would like to know this can be extended to all other custom self services scenarios.


    • YES! That’s why I like the Homepage Framework (even in spite of the issues I have with it). It is soooo easy to built a self-service…or just “easy to use” set of pages with it. A lot can be reproduced now with the newer “site map” iView, but I think the HF still has some great strengths. Once you get the structure down (and build yourself some useful tools like I have…ie. Excel step-by-steps, etc.), then you can whip out new HF config in no time. I built a pretty nice HF config for guests visiting the building/corporate campus…they pulled it up in any public kiosck….it provided just nice information about the facility and other such useful “visitor” info.
  • Hi Christopher,

    Excellent blog. I have a little different requiremet. Instead of calling an external URL I need get the content populated in additional info area from an HTML file.  I started a new thread for that but for your convenience I am repeating the same here . Appeciate if you can help me.

    I am trying to insert a htm file in the ‘additional information’ area of area page ‘Travel and Expenses’ in the ESS. We are on ECC 5.00, NW 4.0 and SP 19.

    This is the config I have carried out in the ESS homepage frame work area.

    1. Defined a sever with a name ‘FileServer’ and gave protocol ‘file’ , Name & port ‘ dwdf039’ and directory path ‘hcm-nad-dev’.

    I have followed tutorial document for this purpose.

    2. Defined a resource ‘TravelInfo’, I have given the server name I have created. gave the file name travel.htm which I have created and kept on the desk top.

    I didnt know how to send this file to the server location.

    3. I have assigned this ‘resource’ to area page ‘EMPLOYEE_TRAVEL’ after removing the existing area description ( Long Text )

    When I test in the portal as expected I got an exception that the page can not be displayed.

    My questions are.

    When i create a server in the step 1, where this gets created and how do I save the htm file in that server location. I think if I do this correctly I will get the html file executed and I get the expected result. Sorry if my qns appear simple, I am kind of new to this area.


  • In your examples I see that you are customizing seeded objected (Area pages in particular).  It has been drilled into us that customizing seeded entries in SAP will lead to problems (such as patches stepping on your mods). 

    Is it a best practice to customize seeded area pages, group pages, etc?  Have you seen any problems caused by patches.

    • John….I think the screenshot #2 was confusing. I didn’t mean to say I was using THAT specific Area/Area page…it was just to show the sections/areas in the config screen where the changes I was making would go.

      Personally, I *always* make “Z” versions for my Homepage Config…laregly because I often have several different homepage framework versions to build because there are different employee types (salary/hourly/temp/etc), different countries, etc and each will offer different services in their ESS/MSS/xSS.

      However, in this area…Homepage Framework…SAP actually *does* allow you to change the “standard delivered” settings. This might work well for folks doing quick proto-typing or small scale projects. In config, for just about all the steps in the HF config, there are two entries…ADD…and CHANGE….the second is used when you want to actually change the standard delivered settings from SAP….it even talks to it in the config documentation. My gripe there though is that you really lose that snapshot of what was delivered out-of-the-box when you make changes to it (yes, I know, you can look at client 000, but that’s a pain!haha).

      So anyways, John, didn’t mean to confuse you there (or anyone else).

  • Hi Christopher!

    First of all: thanks for that great blog. It helps a lot!!
    But I have two further questions – maybe you can help?! I would appreciate it a lot.

    1) Is there a similar way to integrate HTML docs for area GROUP pages? If yes, how?

    2) I’d like to integrate a “self-made” html side (which I quickly created in word and saved as html). How and where do I have to store that document (in the portal?) to be able to “call” it in the seperate created resource for the HTML doc??

    Many thanks and best regards, Jasmin

    • @Jasmin
        First ,sorry for the late reply….my spam filter “ate” the email…doh! But anyways…

      1) Not the same way, but yes. Remember the AREA GROUP is really a summary of all AREAs, so no real need for a custom HTML in there. However, I have built my Overview page to include the AREA GROUP (overview) iView as well as other iViews to web pages (or BSP or whatever). For example, on my current project, above the summary/Area Group, I have an iView that displays a scrolling ticker across the top that the client can have messages to employees…like “Open Enrollment begins Oct.1 through Nov.1….Check your benefits today!!!” or similar messages. Then under the Area Group iView, I have yet another iView that displays a BSP in which I retrieve the user’s HR Admin and display a message “For further help, please contact your HR representative (NAME) at (NUMBER).”. So it really is up to you…..use the Framework as a guide,but think outside the box as well. =)

      2) That’s exactly how I do it…although we do not implement full-fledged KM, you can still store documents there (such as web pages used for “additional info” in self-services). Look in the folder “Documents” and then in “Public Documents”. Create your own folder structure there….like “HR->ESS”…and then upload your web pages into that location. Once uploaded you can even edit online…which is SWEET!….to find the link to your document, just look at the properties of your document… the little triangle next to the name…select “Details”…then in the pop-up, select “Settings->Properties”….on the tabs, select “Access Links” at the end of the tabs and the bottom parameter will show you the URL to the document (replace the “hostname” portion with your own portal path). What I do is configure a “server” in the Homepage Framework for my KM portal path up to the point the “Public Documents” folder. Then within each “resource” for my additional info pages, I simply reference that server, provide my additional path information, and then give the HTML file name. It might sound tricky, but it is VERY simple once you do one through.

      Have fun with it and good luck!

  • Hi Chris,

    Have you setup the additional info link on the comp planning iView?  I’m having a heck of a time with it.  It’s configured in the homepage framework services and resources area.  I’m missing something simple.  My scenario is a little different because the link is in the iView not on an area page.

  • This blog was extremely useful. We are in the midst of deploying HPF for ESS.  I set up html pages for each area (for the right-hand side of each page) and gave the html pages to our users to maintain.  Now we use just the URL in the configuration and anytime the users want something different (for open enrollment or “just because”), they can update it themselves.  The one additional puzzle I am now trying to solve is languages.  I have 26 countries.  We typically deploy 12 languages.  Can one country have several different versions of this “Additional information.”  That is – if I want China to have a choice of chinese or english – can I somehow have more than one url available (one english; one china) that is used when the employee chooses their language?
    • Same approach. Point it to a URL. THAT page should/can handle the translation as needed. Keep in mind, that “page” can be ANYTHING a URL can point to. You can point to a ASP or JSP page that then dynamically builds the page. You can point it to some fancy AJAX-driven page. Whatever. Soooo that being said….you can let that “thing” handle translation/languages as needed. Typically, it is picked up by the browser language setting and then handeled as needed. That area on the framework is just it’s own little frame area (window), so feel free to have whatever you want going on in there.