Currently Being Moderated
    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.



Filter Blog

By author:
By date:
By tag: