What makes you revisit a Web site or a company portal? What are the driving factors? How does your Web site guide the customer to form a decision about your brand or a company? Answers to these questions are not always the same. Now more than ever, organizations care a lot about their brand and returning customer base. If you’re a niche market company and your product creates a new market, then design or customizations probably won’t matter as much. In this case, there is nobody else these customers can turn to.

Whenever there is competition — especially competition offering a product with the same feature set as yours — design becomes important and a means of differentiation. You can either differentiate yourself on a product — introduce some new feature or service that your competitor lacks — or differentiate yourself on design.

SAP NetWeaver Portal provides many design and customization opportunities to its developers. Almost every major component is customizable and can be edited out of the box. However, every portal component has a different way of achieving the required customization. For example, SAP NetWeaver Portal provides an editor for customizing the theme, whereas components such as the logon page, masthead, and top-level navigation require code modification. You can also create customizations without even touching the code. I compare each of these approaches so you can determine which approach best suits your requirements.

Before I begin to define customization categories and ways to create the different types of customization, I expect users to be conversant with terms such as Portal Content Directory (PCD), Portal Archive (PAR), and the standard deployment process.

Common Customizations

The most common portal customizations fall into these categories:

• Portal logon page
• Portal theme
• Top-level navigation (TLN)
• Portal page layout

• Masthead

Portal Logon Page Customization

You can customize the logon page two ways. One is to just replace the standard branding image with no changes to the PAR file. The other is comprehensive and calls for a code change. SAP knows that company branding means a lot to companies, so it provides an option to change the branding image from Visual Administrator (SAP NetWeaver 7.0) or from SAP NetWeaver Portal Administrator (SAP NetWeaver 2004).

Log on to Visual Administrator at usr/sap/SID/JCxx/J2EE/admin/go.bat. Select the user management engine (UME) service provider in the Global Configuration tab on the left side of the screen (Figure 1). This service lists a parameter for changing the branding image.

Figure 1

Branding image parameters in UME Service from Visual Administrator

To access SAP NetWeaver Portal Administrator, follow menu path System Administration > System Configuration > UME Configuration > Direct Editing. Change the image by altering the following parameter to include the JPEG file for your logo:

ume.logon.branding_image=/<custom directory>/logon/images/branding-image.jpg

Apart from changing the branding image, modifying a PAR file is the most comprehensive way of customization. For example, if you don’t like the standard logon page layout, you can change the layout to full width by changing the HTML code. Similarly, you can change user input parameters or add a custom parameter. You can change anything and everything on a logon page with this approach. Here are the steps to modify a logon page.

Step 1. Download the logon PAR file by following menu path System Administration > Support > Portal Runtime and deploy it on your portal. It could be the same portal from which you downloaded the PAR file or it could be on a different system altogether. Regardless of where you are deploying this file, make sure you deploy it with a custom name.

Step 2. Download the authschemes.xml file from offlineconfigeditor, which you can locate at usr/sap/SID/JCxx/J2EE/configtool/offlinecfgeditor.bat (Figure 2). The authschemes.xml file controls the authentication schemes used for logon. Replace the name of the standard logon PAR file with the name of your PAR file.

Figure 2

Offline configuration tool and authschemes location

Step 3. Upload the authschemes.xml file as a file entry with a different name (e.g.,  authschemes_test.xml).

Step 4. In the offlineconfigeditor, locate the standard security property com.sap.portal.security.api and switch to edit mode by clicking the edit icon at the top left corner. Locate the authschemes.xml file entry and add name of your authschemes file in the custom field (Figure 3). Click the Apply custom button.

Figure 3

Property sheet for the UME core service

Step 5. Restart the server from the SAP Management Console (SAP MMC). Right-click and select All Tasks > Stop, right-click again, and select All Tasks > Start (Figure 4). The logon page should now reflect your customization.

Figure 4

Restart the server from SAP MMC

Portal Theme Customization

Traditional theme customization is a tedious job. You can customize everything from the breadcrumb to the button style. SAP NetWeaver Portal provides an editor for theme customizations.

You should always copy a standard theme with a custom name and then make changes. Never make changes to a standard theme. Before you start creating your own theme, note the following points:

• Themes take a long time to save. Make sure you clear your cache to reduce the time required for saving.
• Select your color combination before you start customizing your theme. If you only follow the trial-and-error approach, it takes ages to design a good theme.
• You cannot modify a component beyond a certain limit. For example, you can add a background image to TLN, but you cannot change the styling from square to round.
• Having a wireframe schematic and color standards is important. If you do not have a wireframe schematic, you should at least make color standardization in advance of editing the theme.

After you create your theme, it’s possible that changes you made are not visible when you run a test. Make sure that you have added your theme to the default desktop. You can find out more about this process in the “Portal Themes” section in SAP Help.

In June 2010, SAP released the Eclipse Theme Editor for SAP NetWeaver 7.0 (Figure 5). Available as a free download, the Eclipse Theme Editor provides rapid theme development. Using a typical theme editor, it can take weeks to design a theme. With this new tool, designing a new theme takes just a few days.

Figure 5

Eclipse Theme Editor

To use the Eclipse Theme Editor, you much have the latest version of Java 5, which you can download from https://java.sun.com/javase/downloads/index_jdk5.jsp. You also must have the latest version of Eclipse 3.2 or 3.3, which you can download from www.eclipse.org/downloads. To create a new theme with the Eclipse Theme Editor, follow these three steps:

Step 1. Import the standard theme into the theme editor by selecting the Import option from the file menu.

Step 2. Edit the theme parameters as needed. For example, Figure 5 shows the parameter configuration for a sequence container. You can change font size, font family, layout, and color properties to match your corporate branding.

Step 3. Export the new or edited theme as a zip file. Then import the zip file into SAP NetWeaver Portal or export it to a Web Dynpro.

Accessibility

It is important to consider accessibility before you start the design and finalize color schemes. Almost every country has made it compulsory for organizations to design user interfaces that are compliant and usable for persons with disabilities. Section 508 of the (US) Rehabilitation Act of 1973 (which was amended in 1998) details the compliance policies for accessibility. You can read more about accessibility at the following locations:

• Web Accessibility Initiative: www.w3.org/WAI/Policy/
• Section 508: www.section508.gov/index.cfm?fuseAction=Laws

• Designing color schemes for visually challenged users: www.sapdesignguild.org/editions/edition4/print_high_contrast.asp

TLN Customization

Unlike themes, TLN requires PAR modification. You can download the com.sap.portal.navigation.toplevel file from the system ROOT/WEB-INF/deployment folder. For any structural changes in the top navigation, you have to make changes in this file. Themes only apply color schemes to structures generated by this file.

TLN uses the navigation tag library to fetch top-level, child-level, and sub-child-level nodes of the navigation in the code. After you fetch the nodes, you can easily modify the way navigation is displayed using JSP or an HTML code.

For example, the hover effect (when you hover over a term and text appears) is not standard functionality in SAP NetWeaver Portal. Using the JavaScript and navigation tag library, you can create the hover effect so that when you hover your mouse over the parent node, all the child nodes are displayed. This saves time because by default to navigate to the last child node, you need to first click the top node, then the sub-child node, and then the last child node. Using the JavaScript basically renders all nodes on simple mouse hover. For a quick reference, you can use the code in Figure 6.

<script>
TLNHover = function(<pass the navigation div here>)
{
if (!document.all) return; // continue only for IE
var liEls = document.getElementById(navigationDiv).getElementsByTagName("<pass child node LI tag id here>");
for (var i=0; i<liEls.length; i++) {
liEls[i].onmouseover = function() {
this.className += " hover";
}
liEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" hover\b"), "");
}
}
}
</script>

In addition to using the navigation and framework tags, you can also design a rounded corner top menu by adding an image as a background in the TLN JSP file. Using rounded corner navigation increases the readability of the navigation. For example, you can add an image attribute in the <div> or <li> tag of a parent node.

You develop the rounded corners by combining three images — one for the left rounded corner, one for the middle rectangular section, and finally one for the right rounded corner. These three images together generate the required effect. Otherwise, if you are only interested in adding a background image to TLN, you can do so simply by adding an image URL in the Eclipse Theme Editor.

Layout Customization

Customize this component when the standard portal page layouts cannot fulfill your requirement. The PAR file for this component is com.sap.portal.layouts. It contains the following sub components:

• Framework page (Framework.jsp)
• Inner page (WAandNavPanel.jsp)
• Navigation area (dynNavArea.jsp)

Modifying the layout is one of the simplest components to customize. It requires just a modification of width and height and perhaps the addition of a row or a column. If you are not conversant in HTMLB or JavaScript, you can still modify this component with a minimal knowledge of HTML.

However, layout only affects the page’s superstructure. You can make changes to the content area also, but that involves more extensive modifications. For example, when a user is logged in, you want to display some demographics or company results. In this case, you have to make changes in content area PAR com.sap.portal.navigation.contentarea.

You can configure Internet Graphics Server (IGS) and then use business graphics in a Web Dynpro application to generate graphs, pie charts, or dynamic values. If you don’t want to use Web Dynpro, then you can use HTMLB controls to generate similar graphics.

Masthead Customization

The masthead is the topmost component you see after logging into the portal. It holds functional links such as Personalize and Logoff. The standard masthead contains a branding image area and a welcome area that you can change using the theme editor. If you want to change the layout or positions of these components, you have to make changes in masthead PAR com.sap.portal.navigation.masthead.

Roles control the functional links instead of PAR files. Eu_core is the role that controls a link’s visibility. If you want to permanently remove the links from the masthead, then only modify the PAR file.

Multi-Language Support

The functionality for masthead and logon components is divided into two parts. One is the typical JSP file that controls visual rendering. The other is the property file that is responsible for the texts displayed in this component. One major advantage of this is multi-language support. Say you want to display a welcome message in German on your portal home page. You can maintain an entry for the welcome message in a language-specific file (in this example, Properties_de) and use the resource bundle in the JSP file. This method avoids the need to design a separate JSP in English and German. It refers to the language bundle depending upon what property file is referenced

You can create even more customizations than I have described. For example, you can develop a footer displaying company copyright information and a sitemap. Also, you can use detail navigation to design a layout that contains two sidebars. The five sets of components that I have considered in this article are some the most commonly customized components — any customization project is incomplete without modifying these components.

Ameya Pimpalgaonkar

Ameya Pimpalgaonkar is a senior SAP architect. He specializes in SAP Netweaver Portal, SAP BPM, BRM, MDM, and SAP Mobile. His interests include UI and front-end technologies, SAPUI5, Responsive Design, and integration of modern technologies with SAP UI. He has also worked on HTML5, CSS3, and jQuery. Ameya is also a certified usability analyst from HFI, USA.

You may contact the author at ameya85@gmail.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.