Changing the portal look and feel - SAP Q&A...Section 508 (mainly for US), “Web Content...
Transcript of Changing the portal look and feel - SAP Q&A...Section 508 (mainly for US), “Web Content...
Changing the portal look and feelOverview and Best Practices
SAP ConsultingSAP NetWeaver Product Management
SAP AG2008
© SAP 2007 / Page 2
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 / Page 3
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 / Page 4
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 / Page 5
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 / Page 6
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 / Page 7
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 / Page 8
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 / Page 9
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 / Page 10
Portal Desktop Elements: Theme and Framework Page(incl. Layout, Header & Navigation iViews, Content Area)
© SAP 2007 / Page 11
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 / Page 12
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 / Page 13
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 / Page 14
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 / Page 15
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 / Page 16
Detailed Comparison of Portal Frameworks
https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration
© SAP 2007 / Page 17
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 / Page 18
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 / Page 19
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 / Page 20
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 / Page 21
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 / Page 22
Customization only
Customization only
Addon-iViews
Smaller modifications
Custom developed replacements
Completely rewritten framework
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 / Page 23
Customization only
Framework Page / Desktop InnerpageChange visibility and order of the contained iViewsChange appearance of iViews (show/hide tray)
© SAP 2007 / Page 24
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 / Page 25
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 / Page 26
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 / Page 27
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 / Page 28
Example: Custom Theme
© SAP 2007 / Page 29
Addon-iViews
Customization only
Addon-iViews
Smaller modifications
Custom developed replacements
Completely rewritten framework
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 / Page 30
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 / Page 31
Example: “Footer iView in Framework Page”(cont.)
1. Create a component (in the NWDS)…
© SAP 2007 / Page 32
Example: “Footer iView in Framework Page”(cont.)
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 / Page 33
Example: “Footer iView in Framework Page”(cont.)
(continued from previous slide)
© SAP 2007 / Page 34
Example: “Footer iView in Framework Page”(cont.)
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 / Page 35
Example: “Footer iView in Framework Page”(cont.)
Result
The footer fitsinto theFrameworkPage withoutcausing ascrollbar toappear.
just right
© SAP 2007 / Page 36
Smaller modifications
Customization only
Addon-iViews
Smaller modifications
Custom developed replacements
Completely rewritten framework
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 / Page 37
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 / Page 38
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 / Page 39
Example: “Additional Link in the MastheadiView” (cont.)
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 / Page 40
Example: “Additional Link in the MastheadiView” (cont.)
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 / Page 41
Example: “Additional Link in the MastheadiView” (cont.)
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 / Page 42
Custom developed replacements
Customization only
Addon-iViews
Smaller modifications
Custom developed replacements
Completely rewritten framework
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 / Page 43
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/)
© SAP 2007 / Page 44
Example: “Pull-down Menu for the TLN iView”(cont.)
1. Create a component (in the NWDS)…
© SAP 2007 / Page 45
Example: “Pull-down Menu for the TLN iView”(cont.)
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 / Page 46
Example: “Pull-down Menu for the TLN iView”(cont.)
3. Create a CSS file with at least the following selectors:
(add some styling for the look & feel as well)
© SAP 2007 / Page 47
Example: “Pull-down Menu for the TLN iView”(cont.)
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 / Page 48
Example: “Pull-down Menu for the TLN iView”(cont.)
Result
© SAP 2007 / Page 49
Completely rewritten framework
Customization only
Addon-iViews
Smaller modifications
Custom developed replacements
Completely rewritten framework
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 / Page 50
Completely rewritten framework
© SAP 2007 / Page 51
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 / Page 52
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 / Page 53
Thank you!
© SAP 2007 / Page 54
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.