Skip to Content

Web Page Composer – Web Page Layout (Part IV)

This is the fourth part of our blog series about Web Page Composer (WPC) focusing on the Web Page Layout. If you’re also interested in other, already published blogs of this series, please follow these links:

Web Page Composer is a new authoring tool for web pages and web content that can be used in the SAP NetWeaver Portal. It allows the creation of lightweight, single-frame portal pages with static and dynamic web content accessible in multiple formats. In addition, it offers great extensibility and integration capabilities.

The Web Page Composer is based on the standard functionality of the portal :

  • The Portal Runtime (PRT) and Portal Content Directory (PCD) are used for the page rendering.
  • The Knowledge Management (KM) platform used for storing and providing access to configuration, content structures and content.

For the creation of web pages different layout options are delivered by SAP. If these different web page layouts don´t meet your requirements you can create your own page layouts and integrate them into the portal.

In this blog you will get an overview about the necessary configuration steps you have to do to offer new page layouts for the web page creation.

Web Page Layout
In the last blog of our WPC series you have learned how the page creation process works. All configuration of the page is done within the Page Editor (Figure1).

image   image
Figure 1: The Page Editor and Layout Manager When you edit a page, the page editor opens in the default layout (Home Page) that can be changed if you select the button “Change Page Layout” (see Layout options in Figure 1) in the function bar. By choosing a specific page layout the author is getting a different amount of containers with various alignments. Each container does have rules that allow different type of web content (Resource Types like articles, teasers or Mimetypes like jpg. etc.) to be dropped in. The type of allowed web content is listed in brackets within the container.

The layout of a web page is determining how many containers are available and how they are presented. Depending on the layout you can have a two or three column design. Header and Footer areas may use the full width.

In the following two examples you can see that the page design can be changed by choosing a different page layout. The content (filled container) is reused by the two different page layouts but is rendered in separate columns.
image Figure 2: “One Column Page” page layout In Figure 2 you see how the “One column page” layout defines the design in the page editor (design time mode) and in the preview (runtime) mode. The banner and the “link list” are rendered in one column. All empty containers won´t be displayed.

image Figure 3: “Two Column Page” page layout In Figure 3 you see how “Two Column Page” layout changes the design of the “link list”. The container (with content)is reused but is due to the different layout displayed in the two column design.

Design and Configuration of a custom specific Web Page Layout
Let´s assume that the web page layouts are not sufficient for the requirements you have. In that case you can configure your own web page layout.
You have learned in the introduction that the Web Page Composer is using the Portal and the Knowledge Management Infrastructure. Therefore the configuration steps are done in the respective administration area.

If you want to create your own web page layout you have to do:

  1. In the SAP NetWeaver Developer Studio you define the layout design in an jsp-file
  2. In the Portal Content Studio you configure all parts that are relevant for the page rendering
  3. In the KM Configuration you define all area´s that are relevant for rendering the content and for the rules of content creation

Let´s take a deeper look into the process:

1. Configuration in the SAP NetWeaver Developer Studio:
For a new web page layout you have to create your own project in the SAP NetWeaver Developer studio.
These are the basic configuration steps to do:

  1. Define the adjustment and size of the different containers of the page layout in a jsp.file
  2. All container areas (like top, left, middle and right in the example) have to be introduced in a corresponding portalapp.xml file

image Figure 4: Example for a page layout
image Figure 5: Related jsp file to the page layout example After the completion of the necessary configuration steps you generate a PAR file that will be uploaded in the portal.

2. Configuration in the Portal Content Studio:
In the Portal Content studio you´ll need to configure the necessary portal content objects (layout templates, iViews and pages) that are used for the page rendering. All containers of a page (see Figure 1) comply with a single iView (container iView).

SAP is delivering some default container iViews. If possible you should reuse the container iViews as much as possible. If you reuse container iViews you can skip all necessary configuration steps for the containers in the KM configuration. Another advantage is that an editor that is switching from one page layout to another one can reuse the content in the page as the containers are identical (see examples from Figure 2 and Figure 3).

These are the steps done in the Portal Content studio:

  1. Create a layout template based on your PAR file
  2. Check what container iViews are missing and create them, try to reuse as many existing container iViews as possible
  3. Define a page and assign the created layout from step 2 and assign the container iViews to it

3. Configuration in the Content Management:
To complete the Web Page layout configuration there are some configuration steps to do in the Content Management configuration area in the Web Page Composer section:

  1. Create a layout template and reference it with the layout template you have configured in the Portal Content Studio
  2. Assign the layout template to the layout group
  3. Define for each new container iView and for the page a Resource Type
  4. Configure for each new container iView and for the page a Web Resource Type. These Web Resource Types will be referenced to the Resource Type created under step 3. The Web Resource Type for the page needs additionally a reference to the layout template from step 1.
  5. Define for each new container iView a container configuration (see Figure 6) where you decide what rules are applied regarding the usage of mimetype and Web Resource Types (like articles, teaser etc.)

image Figure 6: Example for a container definition in Content Management As final consolidation of the different configuration aspects in Knowledge Management and Portal you have to reference the container id´s of the KM container objects with the container iViews you have created in the Portal Content Studio.


  • Customers can create their own Web Page Layout
  • The Web Page Layout is based on Portal and Knowledge Management functionality
  • Switch from one web page layout to another
  • Container iViews can be reused

In the next part of this blog series about Web Page Composer we’ll focus on the site creation process.

You must be Logged on to comment or reply to a post.
  • Dates taken from previous blog:
    “Web Page composer will be available for SAP NetWeaver 2004s and subsequent releases (usage type EP). In Q2 2007 there’ll be a restricted shipment of WPC as separate add-on based on NW04s SPS12 until WPC will be generally available as of Q3 2007 (NW04s SPS13). During the restricted shipment of WPC (Q2 2007) only single-language scenarios can be implemented, but all of the standard portal languages are supported (see As of SP13 multi-language support on the level of content, pages and navigation is planned to be available.”
  • Hi,

    I am using this product now and trying to create the new Web Forms and Page Layouts.

    We need to use the Frames in Web Form XSL to Show the Content as Left Frame with Table of Content List and Right Frame with the Details of the Selected Table of Content.

    Is this Advisable to have Frames in the XSL and Is it possible to have some thing like Frames Scenario in the Web Forms Output?

    Thanks & Regards

  • I have created a Customized Page Layouts based on the SAP Online Documentation. Then, I created two Web Pages, which is using customized and default page layouts in WPC. After publishing site navigation, I copied the navigation.wpc path and pasted that to the corresponding folder of the role. When I click on the Role, the first web page is displayed correctly. But when I click on the WebPages(both), it is not displaying the content. What could be the problem? Please help in this regard.

    Venkatesh. K

  • I want to add Dynamic Navigation iviews to a WPC Page under the detailed navigation.  This is easy to do in a normal pcd page, why won’t it work with WPC.
    • Hello experts,

      Has anyone realized that any html/mime type placed in the container will be left aligned? As in Figure 3 above. I have a web page html and im trying to display it in the container, but it is always left aligned. I want the html to be centre aligned in the container.

      Does any one have any idea about this.