changing the portal look and feel (pdf)

Changing the portal look and feelOverview and Best Practices

SAP ConsultingSAP NetWeaver Product Management

SAP AG2008

© SAP 2007 /

1. Changing the Portal Look and Feel1.1. Motivation and Benefits1.2. Examples

2. Fundamentals2.1. Portal Desktop and it’s Elements2.2 Themes and Style Sheets2.3 Portal Framework Pages

3. Changing the Portal Look and Feel – Step by Step4. Summary

Agenda

© SAP 2007 /

Why Customize the Portal Look & Feel?Style Guides

Usually released from the Corporate Communications departmentAre most of the time a binding requirement (“pixel perfect”)Rule of thumb: The bigger the company and the more exposed the portal the moreimportant is the compliance of the portal’s look & feel with the style guide.

© SAP 2007 /

Why Customize the Portal Look & Feel?Usability and Performance

Especially when exposing the portal into the Internet, the portal‘s look & feelhas to abide by the laws of the Internet, i.e. it needs to have a web-likebehavior, be fast-loading, intuitive, accessible, etc.

© SAP 2007 /

Why Customize the Portal Look & Feel?Accessibility

Usability and – for some customers of higher importance – accessibility are keyfactors for the success of the portal (project).

Institutions and organizations in the public sector (government, military, hospitals,etc.), formerly state-owned companies, and companies with a strong labor or tradeunion are very sensitive to usability and accessibility requirements like stated inSection 508 (mainly for US), “Web Content Accessibility Guidelines 1.0” (WebAccessibility Initiative of the W3C), or Barrierefreie Informationstechnik Verordnung– BITV” (Germany).“Accessibility” covers many aspects:

Different types and grades of impairment (blind, spastic, deaf, …)Different techniques to accomplish accessibilityA website/portal can be 0 – 100% accessible according to the guidelines.

© SAP 2007 /




Agenda

© SAP 2007 /

Terms: “Framework” vs. “Content”

This presentation covers mainly the customizing of the look & feel of the portalframework, not the content.

The portal framework comprises all elements that are necessary for navigation andfor displaying certain information and/or functionality that are available on eachpage the user can navigate to. E.g. top level and detail navigation, header withlogin/logout link, search field, footer with copyright, imprint, etc.

FrameworkFramework

ContentContent

iView trays, though visually partof the content, are consideredparts of the framework.

The content finally comes fromthose iViews or pages that youassign to the navigation hierarchywithin roles and worksets.

© SAP 2007 /

Relevant Portal Content Objects

Display RulesDisplay Rules

DesktopsDesktops

ThemesThemes

Framework PagesFramework Pages

LayoutsLayouts

Set of conditions defined by a portal administrator determining whichportal is assigned to portal users at runtime.Allows organizations to allocate portal desktops with varying designs,branding, or layouts to different departments, sub-companies, orplatform-specific scenarios.

Define the structural layout and design of the portal workspacedisplayed on the screen.Collection of framework pages and portal themes

Define the visual appearance of the control elements, font size, colors,and contrast of the user interface elements of a portal desktop.Do not define the layout, structure, or contents of a portal desktop.

A portal page object containing user interface units, which togetherdefine the layout and structure of a portal desktop.A framework page contains the core iViews and pages that are requiredby a user to operate and navigate the portal.

Structures page content by providing a number of so called containerswhich hold the iViews you add to a page.Each layout has a specific arrangement of containers.If custom developed, each container can provide a specific tray design.

© SAP 2007 /

Logon Procedure -Resolution of Portal Display Rules

User X

logs onor anonymouslyenters portal

IF (condition)usergrouproleconnection bandwidthportal URL aliasbrowser typebrowser version

THEN (desktop)

© SAP 2007 /

Portal Desktop Elements: Theme and Framework Page(incl. Layout, Header & Navigation iViews, Content Area)

© SAP 2007 /

Theme Editor in Detail

The theme editor of the portal is used to adjust the formatting of Web applicationswithin the Unified Rendering Framework.

Choose from various elements, e.g.from portal and KM admin tools, BI, ITS,Web Dynpro

• Change the color scheme• Change the font type and size• Include your own images

© SAP 2007 /

Changing Look and Feel of the Logon Page

The portal comes with a standard logon screenYou can modify the sources - Java Server Pages (JSPs) - of the logon componentThe branding image can be exchanged more easily (ume.logon.branding_image)

© SAP 2007 /

Framework Concepts

Default (Standard) ConceptTwo-frame, nested frameworkNavigation links are rendered as“Javascript-links” using an onclick-attribute that triggers an navigationevent via EPCM.

Light ConceptSingle-frame, flat frameworkNavigation links are rendered as simpleanchors with an href-attribute.

<a href="#" onclick="EPCM.doNavigate(…)"> <a href="/irj/portal?NavigationTarget=…">

two frames single frame

© SAP 2007 /

Portal Framework Pages – Usage Guide Lines(1/2)

Default Framework Page (Standard)Should be used for integrating advanced content such as SAP applicationsand out of the box business packages to registered users.Mostly B2B and B2E scenarios.

Light Framework PageCan be used to provide anonymous user community access to staticinformation.Mostly B2C scenarios, where network performance is of great importance.Enables the usage of standard browser functionality.

Other, Custom-Built Framework PagesCan be built specifically by the customer by using the portal APIs.Such „intermediate“ frameworks can balance performance and functionality.

are

part

of t

he p

orta

l ini

tial c

onte

nt

© SAP 2007 /

Portal Framework Pages – Usage Guide Lines(2/2)

SAP Functionality(business packages, KM, Accessibility etc.)

Client Perform

ance

Default

High ClientPerformance Light

Custom

Web-Like Functionality

Server Load (Sizing)

More ServerCPU Needed

Less ServerCPU Needed

Default

Light

Custom

© SAP 2007 /

Detailed Comparison of Portal Frameworks

https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration

https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration

© SAP 2007 /

Possibilities to create your own FrameworkPage (1/2)

100% DefaultFramework

Page

100% LightFramework

Page

LightFrameworkPage withEventing

“more functionality”“less performance”

E.g. switch onclient-eventing

(EPCF-level = 1),but keep flatpage (single

frame concept)

© SAP 2007 /

Possibilities to create your own FrameworkPage (2/2)

DefaultFramework

Page withoutEventing

“more performance”“less functionality”

E.g. switch offclient eventing

(EPCF-level = 0),but keep the fullnavigation (twoframe concept)

100% DefaultFramework

Page

100% LightFramework

Page

© SAP 2007 /

Tools for Customization

Within the Portal:Portal Content Studio

Content AdministrationDesktop & Display RulesPortal Content Translation

Theme Editor(PCD Inspector)

Only if and when Portal ContentStudio insufficient

External Tools:NetWeaver Developer StudioAdobe® Photoshop® or alikeText editors

Released APIs:JSP tag libraries for

NavigationFrameworkLayout

Java APIsNavigationDesktop ServiceAlias ServiceLook & Feel ServiceUser Management (UME)Knowledge Managementetc.

© SAP 2007 /




Agenda

© SAP 2007 /

5 Ways to Adapt the Look & Feel / Levels ofCustomization

There are more or less 5 different levels of how the portal look & feel can be adapted.The levels vary in the degree of “Standardness” and “Design Flexibility”.The higher the level the higher the TCO might be.

Customization only

Addon-iViews

Smaller modifications

Custom developed replacements

Completely rewritten framework

© SAP 2007 /

Customization only

Customization only

Addon-iViews




Order, visibility, and appearance ofiViews in Framework and DesktopInner Page

Masthead iView

Toolarea iView

Top Level Navigation iView

Page Toolbar iView

Detail Navigation iView

Related Links iView

Content Area iView

Portal Favorites iView

Custom Theme

© SAP 2007 /

Customization only

Framework Page / Desktop InnerpageChange visibility and order of the contained iViewsChange appearance of iViews (show/hide tray)

© SAP 2007 /

Customization only

MastheadShow/hide links: Help, Log On / Log Off, New Session, PersonalizeURL of Help LinkShow/hide Language Personalization for Anonymous Users

ToolareaEnable: Collaboration Launch Pad, KM Search, KM Search Advanced, Real-TimeCollaborationKM (Advanced) Search ParametersComponent URLs for Collaboration Launch Pad, Search and Real-Time Collaboration

Top Level NavigationHoveringFiltering Entry PointsDefining the Sort Sequence of Navigation NodesNumber of Display Levels: [0, 1, 2] adapt also corresponding attributes in Detail Navigationand Content Area iViews

© SAP 2007 /

Customization only

Page ToolbarShow Back/Forward LinksShow BreadcrumbShow History List

Detail NavigationConfiguring Navigation ZoomClicking Folder Name Launches First NodeDisplay Parent of Hidden NodeEnable Context Menu in Detailed NavigationEnable Text Wrapping in Detailed NavigationHighlight Entire Row of Selected Navigation NodeOpen Folder when LaunchedShow 'Add to Portal Favorites' Option in Context MenuShow 'Help' Option in Context MenuStart at Level: [1,2,3] see Top Level Navigation

© SAP 2007 /

Customization only

Related LinksEnable Text Wrapping

Content AreaNumber of Display Levels in TLN: [0,1,2] see Top Level Navigation

Portal FavoritesLayout SetLayout Set for Root CollectionLayout Set ModePath to Initially Displayed FolderPath to Root Folder for Navigation

Collaboration Detailed NavigationSame as Detailed NavigationUsed in Light Mode no: in Default FW Page, yes: in Light FW Page

© SAP 2007 /

Customization only

Custom ThemeUse the Theme Editor to create and customize a new theme.You can use the semicolon-hack to add certain, missing CSS attributes to elements and thusenhance the theme a little bit. (no official support!)

© SAP 2007 /

Example: Custom Theme

© SAP 2007 /

Addon-iViews

Customization only

Addon-iViews




Purpose: For „simpler“ adaptationsthat cannot be handled by thecustomization of the frameworkiViews and the theme, e.g. the widthand borders of the design bar on theleft hand side of the TLN.

Idea: Develop a component thatenhances certain aspects of theframework. This component isadded as a merely functional iViewto the Framework Page or DesktopInnerpage.

Benefit: not yet a real modification,just an “enhancement”

Pitfall: Relies on the stability of theHTML/CSS/Javascript output lessupgrade safe.

© SAP 2007 /

Example: “Footer iView in Framework Page”

ProblemWhen adding a footeriView underneath theDesktop Innerpage, ascrollbar appears in theFramework Page andthe footer is hiddeninitially.This is due to thefullpage-heightadjustment of theDesktop Innerpage.SolutionAdd a bit of Javascriptto the footer iViewwhich overwrites thestandard function thatadjusts the iFrame‘sheight such that thefooter still fits into thewindow.

the Footer iView

…causesscrollbarto appear

iFrame too high…

© SAP 2007 /

Example: “Footer iView in Framework Page”(cont.)

1. Create a component (in the NWDS)…

© SAP 2007 /


2. …and a JSP file with the footer’s HTML output:

3. Add the following Javascript to the output:

(continued on next slide)

© SAP 2007 /


(continued from previous slide)

© SAP 2007 /


4. In the portal, go to the Portal Content Studio ( Content Administration Portal Content)and create a new folder (say “ITelO”) that‘ll contain your new footer and framework page.

5. Copy the “Default Framework Page” from “Portal Content/Portal Users/Standard PortalUsers” and paste it to your new folder; rename the page to “ITelO Framework Page” (if youwill).

6. Edit the new framework page:Add the “ITelO Footer” to the page.Go to the layout view and reassure yourself that the footer iView is placed at the bottom.Save.

7. Navigate to “Desktops & Display Rules” ( System Administration Portal Display) andcreate a new desktop, adding both the framework page and a theme.

8. Add the desktop to your display rules (“Portal Content/Portal Administrators/SuperAdministrator/Master Rule Collection” or some other, subordinate rule collection).

© SAP 2007 /


Result

The footer fitsinto theFrameworkPage withoutcausing ascrollbar toappear.

just right

© SAP 2007 /


Customization only

Addon-iViews




Purpose: For „ simpler“ adaptationsthat cannot be handled by thecustomization of the frameworkiViews and the theme, nor by addon-iViews, e.g. an additional link in theheader or rounded tabs in the TLN.

Idea: Download and modify acomponent, e.g. the Masthead iViewor the Framework Layout. Thiscomponent then replaces theoriginal one within the FrameworkPage or Desktop Innerpage.

Benefit: only smaller modifications“here and there”, most frameworkiViews/layouts come in form of aneasily editable JSP file.

Pitfall: Modification! Relies on thestability of the standard frameworkfunctionalities less upgrade safe.

© SAP 2007 /

Example: “Additional Link in the MastheadiView”

ProblemA contact link should be added to the header next to the help link, but neither the iViewsettings of the Masthead iView nor the Theme Editor provide ways to add custom links. Anaddon-iView is not feasible as well because of the ‘non-trivial’ HTML of the header whichdoesn’t allow for changes to the DOM via Javascript.This is the only change that is needed for the ITelO Framework Page.

SolutionSince this is only a minor change, it is okay to modify one standard component, the MastheadiView.

+ “Contact”

© SAP 2007 /

Example: “Additional Link in the MastheadiView” (cont.)

1. Download the original com.sap.portal.navigation.masthead.par.bak(System Administration Support Desk Portal Runtime Browse Deployment ROOT/WEB-INF/deployment/pcd)

1 3

4

5

2

© SAP 2007 /


2. Either import the PAR into the NWDS (new namespace/prefix!, e.g.“com.itelo.portal.masthead”) or unzip it to your file system.

3. Open the file PORTAL-INF/jsp/HeaderiView.jsp and insert your code:

© SAP 2007 /


4. Save and either deploy the archive with the NWDS or create a new ZIP file (e.g.“com.itelo.portal.masthead.zip”) adding all previously unzipped files and folders, thenrename the ending to “.par” and upload the archive manually(“/irj/go/portal/prtroot/PortalAnywhere”).

5. In the portal, go to the Portal Content Studio ( Content Administration Portal Content)and create a new folder (say “ITelO”) that‘ll contain your new header and framework page.

6. Create a new iView from the recently uploaded portal archive, say “ITelO Masthead”.7. Copy the “Default Framework Page” from “Portal Content/Portal Users/Standard Portal

Users” and paste it to our new folder, and rename the page to “ITelO Framework Page”.8. Edit the new framework page:

Add the “ITelO Masthead” iView to the page.Remove or at least hide the original “Masthead iView”.Go to the layout view and put your new iView to the top.Save.

© SAP 2007 /


9. Navigate to “Desktops & Display Rules” ( System Administration Portal Display) andcreate a new desktop, adding both the framework page and a theme.

10.Add the desktop to the display rules (“Portal Content/Portal Administrators/SuperAdministrator/Master Rule Collection” or some other, subordinate rule collection).

Result

© SAP 2007 /


Customization only

Addon-iViews




Purpose: For „more complicated“adaptations that cannot be handledby the customization of theframework iViews and the theme,e.g. navigation with pull-downmenus instead of TLN and DTN, orcustom layouts with custom trays .

Idea: Develop the necessarycomponents from scratch, using e.g.JSP tag libraries or APIs, andreplace the correspondingcomponents of the framework.

Benefit: no real modification, rathercustom development.

Pitfall: Because of possibledependencies of the frameworkfunctionalities both good knowledgeand a test strategy for upgrades isneeded.

© SAP 2007 /

Example: “Pull-down Menu for the TLN iView”

ProblemThe standard Top Level Navigation iView can render up to two levels of navigation, but in ahorizontal, tab-structured manner only.There is a feature/attribute called “Hover” which causes the 2nd level of an inactive 1st-leveltab to show, but this is nothing compared to a real pull-down menu.

SolutionWrite a new component that makes use of the JSP tag library for navigation, plus a simple,“carb-free” pull-down solution called “Suckerfish DropDowns”.*

*(see e.g. the following article: http://www.htmldog.com/articles/suckerfish/dropdowns/)

http://www.htmldog.com/articles/suckerfish/dropdowns/)

© SAP 2007 /


2. …and a JSP file with the menu’s HTML output:

(the opening and closing empty scriptlets are there to keep the footprint of the rendered HTML low)

© SAP 2007 /


3. Create a CSS file with at least the following selectors:

(add some styling for the look & feel as well)

© SAP 2007 /


4. Create a Javascript file with the following output:

(we need this JS function since for MS IE < 7.0 the :hover pseudo class is only applicable to anchor tags)

© SAP 2007 /


Customization only

Addon-iViews




Purpose: For „more complicated“adaptations that cannot be handledby the customization of theframework iViews and the theme,e.g. navigation with pull-downmenus instead of TLN and DTN, orcustom layouts with custom trays .

Idea: Develop the necessarycomponents from scratch, using e.g.JSP tag libraries or APIs, andreplace the correspondingcomponents of the framework.

Benefit: no real modification, rathercustom development.

Pitfall: Because of possibledependencies of the frameworkfunctionalities both good knowledgeand a test strategy for upgrades isneeded.

© SAP 2007 /

Summary

There are several ways to adapt the look & feel of the portal.A number of tools assist you in branding the portal.The branding possibilities range from “customization only” to “completelyrewritten framework”There are mainly two different concepts of how to set up a portalframework.A custom developed portal framework can range from “100% Standard” to“100% Light”, differing mainly in the provision of typical portal functionalityand performance/resource heaviness.

© SAP 2007 /

Copyright 2007 SAP AGAll rights reserved

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changedwithout prior notice.Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, Duet, Business ByDesign, ByDesign, PartnerEdge and other SAP products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned andassociated logos displayed are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

The information in this document is proprietary to SAP. This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This documentcontains only intended strategies, developments, and functionalities of the SAP® product and is not intended to be binding upon SAP to any particular course of business, product strategy,and/or development. SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, orother items contained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties ofmerchantability, fitness for a particular purpose, or non-infringement.

SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitationshall not apply in cases of intent or gross negligence.The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in thesematerials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages

Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durchSAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte können Softwarekomponenten umfassen, die Eigentum anderer Softwarehersteller sind.SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, Duet, Business ByDesign, ByDesign, PartnerEdge und andere in diesem Dokument erwähnte SAP-Produkte und Servicessowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Ländern weltweit. Alle anderen in diesem Dokument erwähntenNamen von Produkten und Services sowie die damit verbundenen Firmenlogos sind Marken der jeweiligen Unternehmen. Die Angaben im Text sind unverbindlich und dienen lediglich zuInformationszwecken. Produkte können länderspezifische Unterschiede aufweisen.

Die in diesem Dokument enthaltenen Informationen sind Eigentum von SAP. Dieses Dokument ist eine Vorabversion und unterliegt nicht Ihrer Lizenzvereinbarung oder einer anderenVereinbarung mit SAP. Dieses Dokument enthält nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP®-Produkts und ist für SAP nicht bindend, einen bestimmtenGeschäftsweg, eine Produktstrategie bzw. -entwicklung einzuschlagen. SAP übernimmt keine Verantwortung für Fehler oder Auslassungen in diesen Materialien. SAP garantiert nicht dieRichtigkeit oder Vollständigkeit der Informationen, Texte, Grafiken, Links oder anderer in diesen Materialien enthaltenen Elemente. Diese Publikation wird ohne jegliche Gewähr, wederausdrücklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschließlich, hinsichtlich der Gewährleistung der Marktgängigkeit und der Eignung für einen bestimmten Zwecksowie für die Gewährleistung der Nichtverletzung geltenden Rechts.

SAP übernimmt keine Haftung für Schäden jeglicher Art, einschließlich und ohne Einschränkung für direkte, spezielle, indirekte oder Folgeschäden im Zusammenhang mit der Verwendungdieser Unterlagen. Diese Einschränkung gilt nicht bei Vorsatz oder grober Fahrlässigkeit.Die gesetzliche Haftung bei Personenschäden oder die Produkthaftung bleibt unberührt. Die Informationen, auf die Sie möglicherweise über die in diesem Material enthaltenen Hotlinkszugreifen, unterliegen nicht dem Einfluss von SAP, und SAP unterstützt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewährleistungen oder Zusagen überInternetseiten Dritter ab.

Alle Rechte vorbehalten.

changing the portal look and feel (pdf)

Documents