Skip to Content

The most important business requirements that lead to the customization of look and feel of Portal are 

  • Branding: Corporate Policy enforces Branding
  • Uniform look and feel: Make the Portal look and feel similar to all the legacy applications that are integrated to Portal
  • Accessibility

There are mainly 5 different categories of customization of SAP NetWeaver Portal.

 

Customization Options 

 

Let’s go through each of these ways of customizing the SAP NetWeaver Portal. Let’s quickly look at the highlights.

 

Customization Only

The following standard customizations are supported by SAP NetWeaver Portal

  • Framework Page / Desktop Innerpage
  • Masthead
  • Toolarea
  • Top Level NavigationPage Toolbar
  • Detail Navigation
  • Related Links / Drag & Relate Targets
  • Content Area
  • Portal Favorites
  • Collaboration Detailed Navigation
  • Custom Theme

Here is an example of how the SAP NetWeaver Portal could look with the help of above listed standard customizations. 

Custom Theme 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Add-on iViews

  • Purpose: For „simpler“ adaptations that cannot be handled by the customization of the framework iViews and the theme, e.g. the width and borders of the design bar on the left hand side of the TLN.
  • Idea: Develop a component that enhances certain aspects of the framework. This component is added as a merely functional iView to the Framework Page or Desktop Innerpage.
  • Benefit: not yet a real modification, just an “enhancement”
  • Pitfall: Relies on the stability of the HTML/CSS/Javascript output, hence less upgrade safe.

Problem Statement: There is a requirement to add a copyright message to the footer section. We will use an add-on iview to meet this requirement. A scrollbar appears due to the fullpage-height adjustment of the Desktop Innerpage.

Solution: Add a bit of Javascript to the footer iView which overwrites the standard function that adjusts the iFrame‘s height such that the footer still fits into the window.

 

 

Smaller Modifications

  • Purpose: For „ simpler“ adaptations that cannot be handled by the customization of the framework iViews and the theme, nor by addon-iViews, e.g. an additional link in the header or rounded tabs in the TLN.
  • Idea: Download and modify a component, e.g. the Masthead iView or the Framework Layout. This component then replaces the original one within the Framework Page or Desktop Innerpage.
  • Benefit: only smaller modifications “here and there”, most framework iViews/layouts come in form of an easily editable JSP file.
  • Pitfall: Modification! Relies on the stability of the standard framework functionalities, less upgrade safe. 

Problem Statement: A contact link should be added to the header next to the help link, but neither the iView settings of the Masthead iView nor the Theme Editor provide ways to add custom links. An addon-iView is not feasible as well because of the ‘non-trivial’ HTML of the header which doesn’t allow for changes to the DOM via Javascript.

Solution: We can download and modify the standard component masthead iview to add a link.

 

Add a link to masthead 

 

 

 

 

 

 

 

Custom Developed Replacements

  • Purpose: For „more complicated“ adaptations that cannot be handled by the customization of the framework iViews and the theme, e.g. navigation with pull-down menus instead of TLN and DTN, or custom layouts with custom trays .
  • Idea: Develop the necessary components from scratch, using e.g. JSP tag libraries or APIs, and replace the corresponding components of the framework.
  • Benefit: no real modification, rather custom development.
  • Pitfall: Because of possible dependencies of the framework functionalities both good knowledge and a test strategy for upgrades is needed.

The figure below shows a pull-down menu which has been created using custom development.

 Custom Development

 

 

 

 

 

 

 

 

 

 

 

Completely Rewritten Framework

  • Purpose: For „more complicated“ adaptations that cannot be handled by the customization of the framework iViews and the theme, e.g. navigation with pull-down menus instead of TLN and DTN, or custom layouts with custom trays .
  • Idea: Develop the necessary components from scratch, using e.g. JSP tag libraries or APIs, and replace the corresponding components of the framework.
  • Benefit: no real modification, rather custom development.
  • Pitfall: Because of possible dependencies of the framework functionalities both good knowledge and a test strategy for upgrades is needed.

The figure below shows an example of how the look and feel of SAP NetWeaver Portal could be changed with the use of completely rewritten frramework.

Completely rewritten framework 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

To learn more and watch the recorded session, please visit the link mentioned below:

 

http://www.sdn.sap.com/irj/scn/subscriptions/content?rid=/media/uuid/504036f5-7e63-2a10-dfbf-ab22348350e7

Or feel free to attend the Live Expert Session at Expert Lounge 2, SAP TechEd Bangalore ’09 on 18th November, 2009 at 2:30 PM.

Link for RSVP : http://events.linkedin.com/SAP-TechEd-09-Live-Expert-Session-Change/pub/159110

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Manu Paul
    An excellent observation on the branding possibilities of SAP EP and which can be a challenge in most of the EP implementations as most of the time the customers are not happy with the default look and feel. Keep up the good work.
    (0) 
  2. John Travolta
    As Manu Paul mentioned, most customers doesn’t like the standard SAP NW Portal look & feel or the little flexibility to change it and is heavy.     

    Something that usual is expected to be a designer doing, simply is not possible, and requires developer knowledge.

    It would be nice if SAP could provide “Look & Feel Packages (LFP)”, with a set of pages/iViews/components for different design approaches. For example, all the knowledge (Dropdown Menus, Search with filters, centred framework, performance) applied in SDN Portal could be used to create the first LFP.

    While this is not possible, I expect you can continue blogging and sharing, code, best pratices, requirements, not to do, and others.

    (0) 
    1. Sunil Nair Post author
      Hello,

      I understand and respect your concern. I will certainly try to discuss this point with the Development Team and see whether there are any plans of introducing Look & Feel Packages, as described here by you.
      Meanwhile, I must share that I have received an overwhelming response for this blog and a few developers who have been working on custom developed replacements and completely rewritten framework have got back to me with a brief summary of what they have done for a few customers. I have asked them to share it with other members on SDN, hopefully should happen soon.

      (0) 

Leave a Reply