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 – a new Way to create and publish Web Pages in the Portal (Part I)
- Web Page Composer – the XML Editor Framework (Part II)
- Web Page Composer – how easy it is to create and publish a web page (Part III)
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).
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.
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.
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:
- In the SAP NetWeaver Developer Studio you define the layout design in an jsp-file
- In the Portal Content Studio you configure all parts that are relevant for the page rendering
- 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:
- Define the adjustment and size of the different containers of the page layout in a jsp.file
- All container areas (like top, left, middle and right in the example) have to be introduced in a corresponding portalapp.xml file
Figure 4: Example for a page layout
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:
- Create a layout template based on your PAR file
- Check what container iViews are missing and create them, try to reuse as many existing container iViews as possible
- 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:
- Create a layout template and reference it with the layout template you have configured in the Portal Content Studio
- Assign the layout template to the layout group
- Define for each new container iView and for the page a Resource Type
- 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.
- 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.)
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.