Look & Feel, Framework Pages and Portal Navigation in Enterprise Portal 7.3
Tags:
The portal provides a lot of options to adapt the look and feel of the user interface including styles (e.g. font type or size, colors, etc.) and navigation to meet the needs of your company. The portal comes with a standard user interface that can be adapted to your corporate style guides.
On this page, you can find information and links on how this can be done, both from an administrator's and from a developer's point of view.
When talking about Look & Feel, there are three key tools that help you with adapting it:
- Theme Editor: Enables you to modify the formatting of web applications such as administration UIs or Web Dynpro based applications that run in the portal.
- Navigation iViews: Enables you to modify how the navigation links are displayed.
- Page Layouts: Enables you to create new ways for laying out iViews on a page.
To learn how this all fits together, please have a look at the Administration Guide for SAP NetWeaver 7.0 or SAP NetWeaver 7.3.
Read also this overview presentation on "Best Practices for Theming and Branding of SAP NetWeaver User Interfaces".
Look & Feel
Note:
The information in this document refers to features that are partly deprecated.
For a list of deprecated features and possible alternatives that you can use instead, see SAP note 2204286.
You can fully adapt the look and feel of the portal by means of different tools and concepts.
Overview
Please have a look at the presentation Overview - Changing the Portal Look and Feel that illustrates the various options of changing the look and feel of the portal. It contains a short introduction about the basic concepts and step-by-step descriptions (best practices).
Navigation iViews
You can develop your own navigation iViews that display the navigation hierarchy for each user, as well as other links, such as for logging off or personalizing the portal.
For general information on creating navigation iViews, please have a look at the Developer's Guide (Creating Navigation iViews). In this section of the Developer Guide, you can also learn how to use the tag library for navigation iViews
For general information on creating navigation iViews, please have a look at the Developer's Guide (Creating Navigation iViews). In this section of the Developer Guide, you can also learn how to use the tag library for navigation iViews
You can change the look and feel of your portal framework for example by...
- inserting and removing iViews from your Framework Page: deploy new navigation iViews and add them to your framework page. You can then configure and rearrange them on the page.
- creating new TLN/DTN: Use the Navigation tag library to create your own top-level and detailed navigation iViews.
- create a new Masthead or Page Title Bar: Use the Framework tag library to create a new masthead or page title bar. For more information, see Framework Tag Library.
Also, check out these How-To Guides:
Page Layouts
Page Layouts are shown to a Content Administrator when he creates pages for the Content Area. The layouts define the options to arrange iViews on a page. In the Administration Guide(Page Layouts), you can find information on the existing page layouts. You can also develop your own page layouts. For more information on creating custom page layouts, see Creating Custom Layouts.
Logon Screen
Logon Screen
Some changes to the logon screen are possible by customization. Please have a look at the documentation on Identity Management (Logon Screen Customization). You can also create your own logon screen. In the Developer Guide you can find a description on how to develop an iView for the logon screen.
Framework Pages
Ajax Framework Page (AFP) is globally available as part of SAP NW7.0 Enhancement Pack 2 and onwards and is fully compatible with SAP previous framework pages releases. It supports all SAP standards and platforms. AFP would be offered along with the default standard framework page and the customers are free to use it.
See also: Wiki Information on Ajax Framework Page.
How To Apply Custom Branding Using the AJAX Framework L-Shape APIs
: This guide provides an overview about fully customizing your own Ajax framework page using the L-Shape APIs of SAP NetWeaver Portal 7.3. The Ajax Framework Page (AFP) is provided with SAP NetWeaver Portal 7.3. Based on Ajax technology, this framework page provides improved performance, enhanced user experience and a wide set of client side-based APIs (also known as "L-Shape APIs") to consume and modify its content.How to Customize your Ajax Framework Page with SAP NetWeaver Portal 7.30: The aim of this guide is to assist you in achieving the desired user experience for your portal desktop using the Ajax Portal Desktop as a baseline. This guide will show you how customize the SAP NetWeaver Portal desktop according to your own brand and user experience guidelines.
Light Signature AFP Example Based on jQuery: This presentation introduces the Light Signature AJAX Framework page (AFP) example based on jQuery. This example imitates the look and feel of the Signature Design, but it's much easier to customize. Check this presentation to learn: Motivation for creating the Light Signature AFP example based on jQuery, Differences with official Signature Design, Source code sneak preview, Configuration steps to use Light Signature AFP example based on jQuery.
SAP NetWeaver Portal - Framework Page Comparison: The visual appearance of the portal (the portal desktop) is based on a framework page and the assigned theme. This framework page defines the overall layout and the elements (e.g. masthead or navigation iViews) that are shown in the so-called "L-shape". The Content Administrator can later on define what is displayed in the Content Area. Two framework pages are provided in the standard. It is also possible to develop an own framework page. This document is designed to help you with the decision on which framework page to use. It compares the two existing ones and the option to develop an fully custom-specific version.
Navigation
General
In the Portal Administrator's Guide, you can find out how to set up a navigation for the Portal. If you want to go a step further and develop your own Navigation iViews, please have a look into the Developer's Guide. It will show you information on:
- Navigation iView: iViews that display the available navigation links for the current user
- Navigation connectors: Java classes that generate the navigation links for the current user
- Navigation links: HTML links to content within the portal (wither in applications or in navigation iViews)
You might also want to know, how Navigation relates to Client-Side Eventing. Please have a look in the appropriate section of the Developer's Guide (Client-Side Eventing)
Javadocs
Check out the following Javadocs packages:
