Post on 04-Sep-2014
transcript
SAP NetWeaver
How-To Guide
How to customize your Ajax
Framework page with SAP
NetWeaver Portal 7.30
Applicable Releases:
SAP NetWeaver 7.30 SP03 and above
Version 1.0
May 2011
© Copyright 2011 SAP AG. All 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 changed without prior notice.
Some software products marketed by SAP AG and its
distributors contain proprietary software components of
other software vendors.
Microsoft, Windows, Outlook, and PowerPoint are
registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, OS/2, Parallel
Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390,
OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP,
Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix,
i5/OS, POWER, POWER5, OpenPower and PowerPC are
trademarks or registered trademarks of IBM Corporation.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader
are either trademarks or registered trademarks of Adobe
Systems Incorporated in the United States and/or other
countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered
trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame,
WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or
registered trademarks of W3C®, World Wide Web
Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems,
Inc., used under license for technology invented and
implemented by Netscape.
MaxDB is a trademark of MySQL AB, Sweden.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP
NetWeaver, and other SAP products and services
mentioned herein as well as their respective 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 are the
trademarks of their respective companies. Data contained
in this document serves informational purposes only.
National product specifications may vary.
These materials are subject to change without notice.
These materials are provided by SAP AG and its affiliated
companies ("SAP Group") for informational purposes only,
without representation or warranty of any kind, and SAP
Group shall not be liable for errors or omissions with
respect to the materials. The only warranties for SAP
Group products and services are those that are set forth in
the express warranty statements accompanying such
products and services, if any. Nothing herein should be
construed as constituting an additional warranty.
These materials are provided “as is” without a warranty of
any kind, either express or implied, including but not
limited to, the implied warranties of merchantability,
fitness for a particular purpose, or non-infringement.
SAP shall not be liable for damages of any kind including
without limitation direct, special, indirect, or consequential
damages that may result from the use of these materials.
SAP does not warrant the accuracy or completeness of the
information, text, graphics, links or other items contained
within these materials. SAP has no control over the
information that you may access through the use of hot
links contained in these materials and does not endorse
your use of third party web pages nor provide any warranty
whatsoever relating to third party web pages.
SAP NetWeaver “How-to” Guides are intended to simplify
the product implementation. While specific product
features and procedures typically are explained in a
practical business context, it is not implied that those
features and procedures are the only approach in solving a
specific business problem using SAP NetWeaver. Should
you wish to receive additional information, clarification or
support, please refer to SAP Consulting.
Any software coding and/or code lines / strings (“Code”)
included in this documentation are only examples and are
not intended to be used in a productive system
environment. The Code is only intended better explain and
visualize the syntax and phrasing rules of certain coding.
SAP does not warrant the correctness and completeness of
the Code given herein, and SAP shall not be liable for
errors or damages caused by the usage of the Code, except
if such damages were caused by SAP intentionally or
grossly negligent.
Disclaimer
Some components of this product are based on Java™. Any
code change in these components may cause unpredictable
and severe malfunctions and is therefore expressively
prohibited, as is any decompilation of these components.
Any Java™ Source Code delivered with this product is only
to be used by SAP’s Support Services and may not be
modified or altered in any way.
Document History
Document Version Description
1.0 First version
Typographic Conventions
Type Style Description
Example Text Words or characters quoted
from the screen. These
include field names, screen
titles, pushbuttons labels,
menu names, menu paths,
and menu options.
Cross-references to other
documentation
Example text Emphasized words or
phrases in body text, graphic
titles, and table titles
Example text File and directory names and
their paths, messages,
names of variables and
parameters, source text, and
names of installation,
upgrade and database tools.
Example text User entry texts. These are
words or characters that you
enter in the system exactly as
they appear in the
documentation.
<Example
text>
Variable user entry. Angle
brackets indicate that you
replace these words and
characters with appropriate
entries to make entries in the
system.
EXAMPLE TEXT Keys on the keyboard, for
example, F2 or ENTER.
Icons
Icon Description
Caution
Note or Important
Example
Recommendation or Tip
Table of Contents
1. Business Scenario .......................................................................................................... 1
2. Background Information ................................................................................................. 1
3. Prerequisites.................................................................................................................... 1
4. Step-by-Step Procedure .................................................................................................. 2
4.1 Themes and Framework Pages ................................................................................ 2
4.1.1 Ajax Framework Page - Main Elements ........................................................ 4
4.2 Preparations for Creating a Customized Portal Desktop ............................................ 5
4.3 Configure the Framework Page................................................................................. 7
4.3.1 Masthead ..................................................................................................... 7
4.3.2 Masthead Menus .......................................................................................... 8
4.3.3 Top-Level Navigation (TLN) .......................................................................... 9
4.3.4 Personalization ............................................................................................. 9
4.3.5 Page Tool Bar ............................................................................................ 10
4.3.6 Splash Screen ............................................................................................ 11
4.3.7 Browser Title .............................................................................................. 12
4.4 Customizing the Theme .......................................................................................... 12
4.4.1 Customize the Masthead ............................................................................ 12
4.5 Customize the TLN ................................................................................................. 14
4.5.1 TLN with 2 Levels ....................................................................................... 14
4.5.2 TLN with One Level .................................................................................... 17
4.5.3 Fixed Tab ................................................................................................... 18
4.5.4 Additional Settings ...................................................................................... 20
4.5.5 Overflow Area ............................................................................................. 21
4.6 Customize the Detailed Navigation (DTN) ............................................................... 23
4.6.1 Collapse/Expand the Navigation Panel ....................................................... 25
4.6.2 Navigation Zoom ........................................................................................ 26
4.6.3 Contextual Navigation Panel ....................................................................... 26
4.6.4 Scroll Bar .................................................................................................... 27
4.7 Customize Dynamic Navigation............................................................................... 28
4.7.1 Dynamic Navigation Icon ............................................................................ 29
4.7.2 Embedded Dynamic Navigation .................................................................. 30
4.8 Customize the Breadcrumb ..................................................................................... 31
4.9 Customize the Layout ............................................................................................. 31
4.9.1 Window Border ........................................................................................... 31
4.10 Customize the Dialog Box ....................................................................................... 32
4.11 Customize the Hyperlinks ....................................................................................... 34
4.12 Customize the Signature Theme Buttons ................................................................ 35
4.13 Customize the Context Menus – Hierarchical .......................................................... 36
4.14 Customize Portal Search ........................................................................................ 37
4.14.1 Input Field and Icons .................................................................................. 37
4.14.2 Suggestion Results Menu ........................................................................... 38
4.14.3 Suggestions Menu – No Suggestions.......................................................... 38
4.15 Customize the Context Menu .................................................................................. 39
4.16 Customize the Splash Screen ................................................................................. 40
5. Appendix ........................................................................................................................ 41
5.1 Appendix A – AFP Class Report ............................................................................. 41
Customize your Ajax Framework Page
June 2011 1
1. Business Scenario
The SAP NetWeaver Portal provides an out-of-the-box desktop including a framework page and
themes that determine the overall look and branding of the portal.
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 to utilize the main principals
provided by SAP and customize the portal desktop according to your own brand and user experience
guidelines. This is especially useful if you would prefer to avoid the need to code a new UI on your
own, and instead modify and configure the out-of the box desktop.
Note
The assumption of this guide is that the out-of-the-box desktop is somewhat similar to your desired design. If not, you should consider implementing the UI using the Ajax
Framework client-side APIs.
2. Background Information
The Ajax Framework Page is the default framework page for all 7.30 SAP NetWeaver Portal
installations. If you are upgrading from a previous version, the Classic Framework Page remains the
default framework page. The Ajax Framework Page provides enhanced user experience, functionality,
and a new Ajax-based development infrastructure. The underlying AJAX technology means that most
of the page’s functionality is based on the client side, allowing for a significant improvement in the
usability of the portal. The Ajax interface uses a new look and feel, and provides an improved user
interaction experience.
The Ajax Framework Page is implemented using JavaScript and uses asynchronous data transfer
between the server and the client, as well as enhanced client-side caching, specifically, the navigation
hierarchy is cached on the client side. This reduces server load and moves activities to the client side
so that there is no need to update the entire page with every server request, thereby achieving a
flicker-free experience. The Ajax Framework Page is fully customizable, allowing for simple branding
capabilities and advanced personalization options.
3. Prerequisites
SAP NetWeaver 7.30 SP03 and above
Users and Permissions:
User with System and Content Administration permissions
End user (for testing the theme while in process)
Relevant SAP Notes: 1498875
Customize your Ajax Framework Page
June 2011 2
4. Step-by-Step Procedure
In this section we will review all the steps for setting up a customized desktop and branding it
according to the user experience design.
4.1 Themes and Framework Pages
The overall user experience in the portal is determined by two portal objects: the framework page and
the theme.
The theme determines the design of each element by providing a set of images and CSS files.
The framework page determines the structure of the portal by providing navigation iViews.
The Ajax Portal Desktop is provided with the following themes:
SAP Tradeshow
SAP Tradeshow is the primary choice for sales and presentation situations. It offers strong light-dark contrast by using darker border and background colors that stand out against the light body background. It uses strong shades of blue that display well on all beamers and LCD screens.
SAP High Contrast
Customize your Ajax Framework Page
June 2011 3
SAP High Contrast
SAP High Contrast supports the accessibility functions of SAP NetWeaver Portal. It was designed for visually impaired users to offer maximum contrast between text and background.
SAP High Contrast Black
This theme is an inversion of the SAP High Contrast theme but also uses a number of bright colors for
controls such as borders and text.
Customized themes are always based on one of the out-of-the box themes.
Changes to UI elements are performed using the Theme editor located in the portal administration
environment under Content Administration Portal Display Portal Themes Theme Editor.
The Ajax Portal Desktop is provided out-of-the box with a single framework page.
You can configure the framework page using the Framework Page Configuration tool located in
Content Administration Portal Display Framework Page Configuration
Customize your Ajax Framework Page
June 2011 4
You can also edit the page in the Portal Content Studio, located in Content Administration Portal
Content Management
Note
Performing changes using the Framework Page Configuration tool is much faster and easier, but not all modifications can be performed there. The Portal Content Studio should be used only if the change is not available in the Framework Page Configuration
tool.
4.1.1 Ajax Framework Page - Main Elements
# Element
1 Masthead
2 Masthead – Menu Bar
3 Top-level Navigation (TLN) – First Level
4 Top-level Navigation (TLN) - Second Level
5 Content area
6 Navigation Panel
Customize your Ajax Framework Page
June 2011 5
4.2 Preparations for Creating a Customized Portal
Desktop ...
Optional: Right-to-Left Languages
To create a theme that also supports right-to-left languages do the following:
1. Open SAP NetWeaver Administrator – http://<Server>:<port>/nwa
2. Go to Configuration Infrastructure Application Modules.
3. In the Module List section select com.sap.portal.themes.designservice.
4. In the Web Module Details section, select the design service.
5. In the Portal Service Details section, select the
com.sapportals.portal.design.textDirection property.
6. Change the value to: LTR,RTL and save your changes.
7. Click More Actions and select View Corresponding to Application.
8. Click Restart to restart the application.
Create a Theme
...
1. Login to the portal as a Content Administrator with at least read/write permissions for the PCD
folder pcd:portal_content/themes.
2. Go toContent Administration Portal Display Portal Themes Theme Editor.
3. Select the out-of-the-box theme on which to base your theme. In most cases SAP Tradeshow is
the optimal selection.
4. From the Elements dropdown list select Ajax Framework Page and click Open.
5. Click Save As.
6. Enter a name and ID for the new theme and click Save.
Create a Framework Page
We recommend that you base your framework page on the provided Ajax Framework Page. ...
1. Go to Content Administration Portal Content Management.
2. In the Portal Catalog, go to Portal Content Portal Users Standard Portal Users Ajax
Framework Content.
3. In the context menu of the Ajax Framework Page select Copy.
4. In the context menu of the folder in which you want to create your framework page, select Paste
Create a Copy.
5. Recommendation: Change the name, ID, and prefix of the new framework page by selecting
Change ID from the context menu.
Customize your Ajax Framework Page
June 2011 6
Create a New Portal Desktop
...
1. Go to System Administration System Configuration Portal Display Desktops & Display
Rules.
2. Right-click the folder in which you want to create the new desktop and choose New Portal
Desktop.
3. Provide a name for the desktop click Next.
4. Add the framework page that you created to the desktop. Right-click the framework page and
select Add Framework Page to Portal Desktop. Click Next .
5. Add the new theme to the desktop. Right-click the theme and select Add Theme to Portal
Desktop.
Note
You can find your themes in the Portal Catalog under Portal Content/themes.
Update the Rule Collection
A portal alias is the part of the URL after the section that specifies the portal J2EE application (irj),
which by default is http://<server>:<port>/irj.
Note
Standard portal aliases are defined in the portal's J2EE deployment descriptor
(web.xml) in the com.sap.portal.runtime.dispatcher.ear, which is located
under the EP-Basis SCA. If a user specifies an undefined alias, it is ignored.
Important
Changes you make to the web.xml will be overwritten after upgrading your portal to a
new release or support package stack ...
1. Locate the com.sap.portal.runtime.dispatcher.war file in
\\<server>\sap\<SID\J00\j2ee\cluster\apps\sap.com\irj\servlet_jsp\irj
2. In the war file extract the web.xml file.
3. In web.xml for the irj J2EE application, add an initial parameter (<init-param> element) for
the gateway servlet.
4. Set the <param-name> element to the new portal alias.
5. Set the <param-value> element to a string of key-value pairs, separated by commas (,). All
values are either 0 (false) or 1 (true).
The following shows the XML added to create a new alias called "custom":
<param-name>portal/custom </param-name>
<param-value>
anonymous=0,proxy=0,low_bandwidth=1,include_in_url=1,include_appli
cation _name_in_url=1
</param-value>
</init-param>
6. Save the XML in com.sap.portal.runtime.dispatcher.war
7. Locate the com.sap.portal.runtime.dispatcher.ear file. This file is part of the
com.sap.portal.runtime.dispatcher.sda file located in the EP-Basis SCA.
8. Make a copy of the .ear file.
9. Insert the .war file into com.sap.portal.runtime.dispatcher.ear, overwriting the existing .war file.
10. Deploy the modified .ear file on the server.
11. Restart the portal.
Customize your Ajax Framework Page
June 2011 7
12. In the portal administration environment, go to System administration System Configuration
Portal Display Desktop & Display Rules.
13. In the Portal Catalog, go to Portal Content Portal Administrators Super Administrators
Master Rule Collection. Right-click the Master Rule Collection and choose Open Rule
Collection.
14. Add an IF expression: URL Alias = "portal/custom and choose Apply.
15. Choose the Then line of the IF expression and then locate the custom desktop that you created
in the Portal Catalog. Right-click the desktop and choose Add Portal Desktop to Expression.
Make sure that the IF statement is selected.
16. Save your changes and close the Rule Collection editor.
17. Open a new browser session and go to http://<host>:<port>/irj/portal/custom.
18. To verify that your desktop is loaded, view the source of the Web page.
On line 3 you should find: …href="/com.sap.portal.design.portaldesigndata/themes/portal/<your
theme>/glbl/glbl_ie6.css
Download Theme Parts
Portal themes are made up of images and CSS files.
The images used by the out-of-the-box themes can serve as a good starting point for your customized
images. In the tables in the Customizing the Theme section below, the path for the relevant image is
provided. You can modify this image and replace it using the Theme editor. .
1. Navigate to Content Administration Portal Display Portal Themes Theme Editor.
2. In Related Links in the Navigation Panel, select Download Theme Type.
3. Locate your theme and choose Download.
4. Choose Save to save the theme locally.
AFP images can be found under AFP Images
4.3 Configure the Framework Page ...
Before going ahead with customization you should make a number of decisions regarding the
framework page elements and the structure that you would like to have.
The framework page can be configured using the Framework Page Configuration tool located at Content Administration Portal Display Framework Page Configuration. You can also edit the framework page in the Portal Content Studio, under Content Administration Portal Content
Management.
4.3.1 Masthead
You can select which elements to display or hide in the masthead.
# Name of Element in Framework Page
Configuration
Section Default
Value
Property ID
1 Show Logo Image in Masthead Masthead True com.sap.portal.navigation.afp.showLogo
Customize your Ajax Framework Page
June 2011 8
4.3.2 Masthead Menus
You can select which elements to display or hide in the masthead menus.
2 Show Link in Masthead: Collaborate Masthead False com.sap.portal.navigation.afp.showCollaborateLink
3 Enable Quick Launch Masthead True com.sap.portal.navigation.afp.enableQuickLaunch
4 Show Link in Masthead: New Session Masthead False com.sap.portal.navigation.afp.showNewWindowLink
5 Show Link in Masthead: Log On / Log Off Masthead True com.sap.portal.navigation.afp.showLogInLogOffLink
# Name of Element in Framework Page
Configuration
Section Default
Value
Property ID/Name
1 Show 'Back' and 'Forward' Options Menu Bar True com.sap.portal.navigation.afp.showBackForward
2 Show Menu: History Menu Bar True com.sap.portal.navigation.afp.showHistory
3 Show Menu: Favorites Menu Bar True com.sap.portal.navigation.afp.showFavorites
4 Show Menu: Personalize Menu Bar True com.sap.portal.navigation.afp.showPersonalize
5 Show Menu: View Menu Bar True com.sap.portal.navigation.afp.showView
6 Show Help Option Menu True com.sap.portal.navigation.afp.showHelp
7 Show Menu Entry: Online Help Menu Bar True com.sap.portal.navigation.afp.showOnlineHelpLink
8 URL of Help Link Menu Bar http://hel
p.sap.co
m/content/docume
ntation/netweaver
/
HelpUrl
8 Show Menu: Help Menu Bar True com.sap.portal.navigation.afp.showHelp
9 Show User Name in Masthead Menu True com.sap.portal.navigation.afp.showLoggedAsMessage
10 Show Menu Bar in Masthead Menu True com.sap.portal.navigation.afp.showMenuBarContainer
11 Show Menu Entry: Full Screen Menu Bar True com.sap.portal.navigation.afp.showFullScreen
Customize your Ajax Framework Page
June 2011 9
4.3.3 Top-Level Navigation (TLN)
You can configure whether to display the TLN with or without images and define the number of TLN
levels.
If you do not want to use the TLN at all (0 levels):
1. Open the framework page that you created and either remove the TLN iView, or hide it.
2. In the Detailed Navigation iView, set the Start at Level property to 0.
# Name of Element in Framework Page
Configuration
Section Default
Value
Property ID
1 Display Mode Top Level
Navigation
Default com.sap.portal.navigation.afp.displayMode
2 Number of Levels in Top- level
navigation
Top Level
Navigation
2 com.sap.portal.navigation.levels
4.3.4 Personalization
You can select which elements to display or hide in the Personalization menu.
# Name of Element in Framework
Page Configuration
Section Default Value Property ID
1 Show Menu Entry: Personalize Page Personalization True com.sap.portal.navigation.afp.showPersonalizePage
2 Show Menu Entry: Personalize Portal Personalization True com.sap.portal.navigation.afp.showPersonalizePortal
You can enable or disable the ability for users to drag TLN tabs to change their order.
You can determine whether the first few TLN entries are fixed and cannot be moved when dragging is
enabled. Fixed tabs have a different image.
Customize your Ajax Framework Page
June 2011 10
# Name of Element in Framework
Page Configuration
Section Default Value Property ID
1 Number of Fixed Entries Personalization 0 com.sap.portal.navigation.afp.numberOfFixedTabs
2 Enable Dragging of Tabs Personalization True com.sap.portal.navigation.afp.dragableTabs
4.3.5 Page Tool Bar
You can select which elements to display or hide in the Page Tool Bar.
# Name of Element in
Framework Page Configuration
Section Default
Value
Property ID
1 Show Breadcrumb Tool Bar True com.sap.portal.navigation.showBreadcrumb
2 Show ‘Full Screen' Button Tool Bar True com.sap.portal.navigation.showFullScreen
Customize your Ajax Framework Page
June 2011 11
4.3.6 Splash Screen
You can define whether to display a splash screen, and if displayed, which elements to display.
# Name of Element in Framework
Page Configuration
Section Default
Value
Property ID
1 Show Splash Screen Splash Screen True com.sap.portal.navigation.showSplashScreen
2 Show Copyright Text Splash Screen True com.sap.portal.navigation.showCopyrightText
3 Show Loading Image Splash Screen True com.sap.portal.navigation.showLoadImg
Customize your Ajax Framework Page
June 2011 12
4.3.7 Browser Title
You can select which node name to present in the title of the browser and the suffix to add.
# Name of Element in Framework
Page Configuration
Section Default Value Property ID
1 Text Mode for Page Title Bar Title Launch node com.sap.portal.navigation.afp.titleMode
2 Suffix for Browser Caption Title SAP NetWeaver
Portal com.sap.portal.navigation.DesktopTitle
4.4 Customizing the Theme
The following section contains a list of the images for each element in a theme, together with a
description of the image’s building blocks.
This shows the changes that can be made to a theme, and the attributes that you use to achieve the
change. In case the change is imitated, the info is added.
4.4.1 Customize the Masthead ...
1. Change the height and width of the image to the values of the new image by changing the
following parameters:
Height of Logo
Width of Logo
2. Change the height of the logo bar (Height of Logo Bar) to the sum off the image height plus a
few pixels for both top and bottom padding.
3. The SAP logo image has internal transparent spacing. If the new image does not have this kind
of spacing, add about 8 pixels (4 pixels for bottom padding and 4 pixels for top padding) for
spacing. If your image has transparent spacing, change the height of the logo bar to the height
of your image plus a few more pixels (about 4 pixels should be enough).
4. If you have already uploaded an image, but want to choose the option of a plain color, in the
Repetition of Background Image of * property, add the parameter background-image:
url(). For example, repeat-x ; background-image: url())
Customize your Ajax Framework Page
June 2011 13
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Logo
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Logo Image 52x29 Masthead\SAPlogo.png
2 URL to Background Image of Logo Bar Image 1x13 Masthead\BgTop10X.gif
3 Background Color of Logo Bar Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Menu Bar
# Name in Theme Editor Type Size Path Under Images Folder
4 URL to Background Image of Menu Bar Image 1x23 Masthead\BgGenericBarX.gif
5 Background Color of Menu Bar Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Hyperlink Container
# Name in Theme Editor Type Size Path Under Images Folder
6 URL to Background Image of Hyperlink Container
Image 1x13 Masthead\BgTop10XHyperLink.gif
7 Background Color of Hyperlink Container Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Hyperlink Separator
# Name in Theme Editor Type Size Path Under Images Folder
8 URL to Hyperlink Separator Image Image 1x1 Masthead\LogoutDividerY.gif
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Portal Search
Container
# Name in Theme Editor Type Details
9 Font of Field Label for Portal Search Text Size between 1px and 12px
Bold is supported. When bolded, max font size is 12px
Font family is supported
10 Color of Field Label of Portal Search Color
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Welcome Message
# Name in Theme Editor Type Details
11 Font Size Text Size between 9px and 16px
12 Font Family Text
13 Font Weight Text When bolded, max font size is 16px
14 Font Color Color
Customize your Ajax Framework Page
June 2011 14
4.5 Customize the TLN
4.5.1 TLN with 2 Levels
4.5.1.1 First Level with Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework PageTop-level navigation Selected Tab
of First Level (Only if 2nd Level is Configured)
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Down State of Top Left Image of First Level Tab Image 9x66 tln\TabDownForSubtabs00.gif
2 URL to Down State of Top Center Image of First Level
Tab
Image 1x66 tln\TabDownForSubtabs10X.gif
3 URL to Top Right Image of Down State of First Level
Tab
Image 9x66 tln\TabDownForSubtabs20.gif
4 Image of Down State of Bottom Left Image of First Level
Tab
Image 9x1 tln\TabDownForSubtabs01Y.gif
5 URL to Down State of Bottom Center Image of First Level Tab
Image 1x1 tln\TabDownForSubtabs11XY.gif
6 URL to Down State of Bottom Right Image of First Level
Tab
Image 9x1 tln\TabDownForSubtabs21Y.gif
7 Background Color on Down State Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First and
Second Levels
# Name in Theme Editor Type Size Path Under Images Folder
8 URL to Background Image of Drag and Drop Element Image 1x66 tln\BgTabArea00X.gif
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Size Path Under Images Folder
9 URL to Image of Hover State of First Level Tab Image 1x66 tln\TabHoverX.gif
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Regular Icon
# Name in Theme Editor Type Size Path Under Images Folder
10 URL to Image of Regular Icon Image 71x48 tln\WorkcenterStandard.png
11 URL to Image of Hover State of Work Center Icon Image 71x48 tln\WorkcenterHover.png
12 URL to Image of Down State of Regular Icon Image 71x48 tln\WorkcenterDown.png
Customize your Ajax Framework Page
June 2011 15
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Details
13 Font Text Font size between 8px and 16px
Font family is supported
Font weight is supported; when bold, max font size
is 15px
Italics supported
14 Font Size of Tab on Hover State Text Size between 8px and 16px
15 Font Size of Tab on Down State Text Size between 8px and 16px
16 Font Family of Tab on Hover State Text
17 Font Family of Tab on Down State Text
18 Text Decoration of Tab Text Supported in regular mode only
19 Font Weight of Tab on Hover State Text When bold, max font size is 15px
20 Font Weight of Tab on Down State Text
21 Text Color Color
22 Text Color of Tab on Hover State Color
23 Text Color of Tab on Down State Color
4.5.1.2 TLN First Level without Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Selected Tab
of First Level (Only if 2nd Level is Configured)
# Name in Theme Editor Type Size Path Under Images Folder
1 Down State of Top Left Background Image of Small Tab Image 9x42 tln\TabDownForSubtabs00_STab.gif
2 Down State of Top Middle Background Image of Small
Tab
Image 1x42 tln\TabDownForSubtabs10X_STab.gif
3 Down State of Top Right Background Image of Small
Tab
Image 9x42 tln\TabDownForSubtabs20_STab.gif
4 Down State of Middle Left Background Image of Small
Tab
Image 9x1 tln\TabDownForSubtabs01Y_STab.gif
5 Down State of Middle Background Image of Small Tab Image 1x1 tln\TabDownForSubtabs11XY_STab.gi
f
6 Down State of Middle Right Background Image of Small Tab
Image 9x1 tln\TabDownForSubtabs21Y_STab.gif
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework PageTop-level navigation First and
Second Levels
# Name in Theme Editor Type Size Path Under Images Folder
7 URL to Background Image of Drag and Drop Element Image 1x66 tln\BgTabArea00X.gif
Customize your Ajax Framework Page
June 2011 16
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Size Path Under Images Folder
8 Background Image of First Level Small Tabs on Hover State
Image 1x42 tln\TabHoverX_STab.gif
9 Background Color of Hover State of First Level Tab Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Details
10 Font Text Font family is supported
Italics supported
11 Font Family of Tab on Hover State Text
12 Font Family of Tab on Down State Text
13 Text Decoration of Tab Text
14 Text Decoration of Hover State of Tab Text
15 Text Decoration of Tab on Down State Text
16 Text Color Color
17 Text Color of Tab on Hover State Color
18 Text Color of Tab on Down State Color
4.5.1.3 Second Level of TLN
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Second
Level
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Background Image of Second Level on Hover and Down State
Image 1x22 tln\SubtabHoverDownX.gif
2 URL to Background Image Image 1x22 tln\BgSubTabAreaX.gif
3 Background Color of Tab on Down State Color N/A
4 Background Color of Tab on Hover State Color N/A
5 Background Color Color N/A
Customize your Ajax Framework Page
June 2011 17
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Details
6 Font Size of Tab Text Between 9px and 11px
7 Font Size of Tab on Hover State Text Between 9px and 11px
8 Font Size of Tab on Down State Text Between 9px and 11px
9 Font Family of Tab Text
10 Font Family of Tab on Hover State Text
11 Font Family of Tab on Down State Text
12 Text Decoration of Tab Text
13 Text Decoration of Tab on Hover State Text
14 Text Decoration of Tab on Down State Text
15 Font Weight of Tab Text Max font size when bold: 11px
16 Font Weight of Tab on Hover State Text Max font size when bold: 11px
17 Font Weight of Tab on Down State Text Max font size when bold: 11px
18 Font Color of Tab Color
19 Font Color of Tab on Hover State Color
20 Font Color of Tab on Down State Color
4.5.2 TLN with One Level
4.5.2.1 First Level of TLN without Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Size Path Under Images Folder
1 Down State of Top Left Background Image of Tab Image 7x66 tln\TabDown00_STab.gif
2 Down State of Top Middle Background Image of Tab Image 1x66 tln\TabDown10X_STab.gif
3 Down State of Top Right Background Image of Tab Image 7x66 tln\TabDown20_STab.gif
4 Background Color on Down State Color N/A N/A
5 Background Color of Hover State of First Level Tab Color N/A N/A
Customize your Ajax Framework Page
June 2011 18
4.5.2.2 First Level of TLN with Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Down State of Left Image of First Level Tab Image 7x66 tln\TabDown00.gif
2 URL to Down State of Center Image of First Level Tab Image 1x66 tln\TabDown10X.gif
3 Right Image of Down State of First Level Tab Image 7x66 tln\TabDown20.gif
4 Background Color of Hover State of First Level Tab Color N/A N/A
5 Background Color on Down State Color N/A N/A
4.5.3 Fixed Tab
4.5.3.1 Fixed Tab for Two-Level TLN with Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Home Icon
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Image of Down State of Home Icon Image 71x48 tln\HouseDown.png
2 URL to Image of Home Icon Image 71x48 tln\HouseStandard.png
3 URL to Image of Hover State of Home Icon Image 71x48 tln\HouseHover.png
Customize your Ajax Framework Page
June 2011 19
4.5.3.2 Fixed Tab for Two-Level TLN without Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Selected
Tab of First Level (Only if 2nd Level is configured)
# Name in Theme Editor Type Size Path Under Images Folder
1 Down State of Top Left Background Image of Home Tab Image 9x41 tln\HomeDownForSubtabs00_STab.gif
2 Down State of Top Middle Background Image of Home
Tab
Image 1x41 tln\HomeDownForSubtabs10X_STab.
gif
3 Down State of Top Right Background Image of Home Tab Image 13x41 tln\HomeDownForSubtabs20_STab.gif
4 Down State of Middle Left Background Image of Home
Tab
Image 9x1 tln\HomeDownForSubtabs01Y_STab.
gif
5 Down State of Middle Background Image of Home Tab Image 1x1 tln\HomeDownForSubtabs11XY_STab
.gif
6 Down State of Middle Right Background Image of Home
Tab
Image 13x1 tln\HomeDownForSubtabs21Y_STab.
gif
7 Down State of Bottom Left Background Image of Home
Tab
Image 9x1 tln\HomeDownForSubtabs02_STab.gif
8 Down State of Bottom Middle Background Image of Home
Tab
Image 1x1 tln\HomeDownForSubtabs12X_STab.
gif
9 Down State of Bottom Right Background Image of Home
Tab
Image 13x1 tln\HomeDownForSubtabs22_STab.gif
10 Background Color on Down State Color N/A N/A
4.5.3.3 Fixed Tab for One-Level TLN without Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Home Icon
# Name in Theme Editor Type Size Path Under Images Folder
1 Image of Home Tab on Down State Image 61x40 tln\HouseSelected.png
2 Default Image of Home Tab Image 61x40 tln\HouseStandardHover.png
Customize your Ajax Framework Page
June 2011 20
4.5.4 Additional Settings
4.5.4.1 TLN Drag and Drop Grasp Image
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation First Level
Drag and Drop Elements
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Background Image of Grasp Image 11x11 tln\IconDragTLN.gif
4.5.4.2 TLN Separators
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top- level navigation Separators
First Level Separators
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Top Image of Large Separator Image 2x64 tln\TabLargeDivider00Y.gif
2 URL to Separator Image Image 1x64 tln\TabDivider.gif
3 URL to Bottom Image of Large Separator Image 2x64 tln\TabLargeDivider01.gif
Location in Theme Category : Theme Editor Outer Frame of Ajax Framework Page Top- level navigation
Separators Second Level Separators
# Name in Theme Editor Type Size Path Under Images Folder
4 URL to Image of Separator Image 1x18 tln\GenericDivider.png
4.5.4.3 TLN Borders
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Top-level navigation Selected
Tab of First Level (Only if 2nd Level is configured)
# Name in Theme Editor Type Details
1 Border Style of First Level Tab Color Color change is supported
Customize your Ajax Framework Page
June 2011 21
4.5.5 Overflow Area
4.5.5.1 TLN with Images
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework PageTop-level navigationScrolling Area
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Image of Standard Back Button Image 26x20 tln\TabscrollerLeftStandard.png
2 URL to Image of Hover State of Back Button Image 26x20 tln\TabscrollerLeftHover.png
3 URL to Image of Down State of Back Button Image 26x20 tln\TabscrollerLeftDown.png
4 URL to Image of Inactive Back Button Image 26x20 tln\TabscrollerLeftDisabled.png
5 URL to Image of Standard Forward Button Image 26x20 tln\TabscrollerRightStandard.png
6 URL to Image of Hover State of Forward Button Image 26x20 tln\TabscrollerRightHover.png
7 URL to Image of Down State of Forward Button Image 26x20 tln\TabscrollerRightDown.png
8 URL to Image of Inactive Forward Button Image 26x20 tln\TabscrollerRightDisabled.png
9 URL to Image of Standard Overflow Button Image 26x20 tln\TabjumperStandard.png
10 URL to Image of Hover State of Overflow Button Image 26x20 tln\TabjumperHover.png
11 URL to Image of Down State of Overflow Button Image 26x20 tln\TabjumperDown.png
12 URL to Image of Inactive Overflow Button Image 26x20 tln\TabjumperDisabled.png
13 URL to Image of Open Scroll Area Image 35x63 tln\TabscrollerOpen.png
14 URL to Image of Closed Scroll Area Image 18x63 tln\TabscrollerClosed.png
Customize your Ajax Framework Page
June 2011 22
4.5.5.2 TLN without Images
Location in Theme Category: Theme EditorOuter Frame of Ajax Framework PageTop-level navigation Scrolling Area
# Name in Theme Editor Type Size Path Under Images Folder
1 Background Image of Back Button Image 15x42 tln\SmallTScrollLeftStandard.gif
2 Background Image of Back Button on Hover State Image 15x42 tln\SmallTScrollLeftHover.gif
3 Background Image of Back Button on Down State Image 15x42 tln\SmallTScrollLeftDown.gif
4 Background Image of Back Button on Inactive State Image 15x42 tln\SmallTScrollLeftDisabled.gif
5 Background Image of Forward Button Image 16x42 tln\SmallTScrollRightStandard.gif
6 Background Image of Forward Button on Hover
State
Image 16x42 tln\SmallTScrollRightHover.gif
7 Background Image of Forward Button on Down
State
Image 16x42 tln\SmallTScrollRightDown.gif
8 Background Image of Forward Button on Inactive
State
Image 16x42 tln\SmallTScrollRightDisabled.gif
9 Background Image of Overflow Button Image 16x42 tln\SmallTScrollerStandard.gif
10 Background Image of Overflow Button on Hover
State
Image 16x42 tln\SmallTScrollerHover.gif
11 Background Image of Overflow Button on Down
State
Image 16x42 tln\SmallTScrollerDown.gif
12 Background Image of Overflow Button on Inactive
State
Image 16x42 tln\SmallTScrollerDisabled.gif
13 Background Image of Left Overflow Divider Image 10x42 tln\SmallTOverflowDividerLeft.gif
14 Background Image of Overflow Divider Image 1x42 tln\SmallTOverflowDivider.gif
...
Customize your Ajax Framework Page
June 2011 23
4.6 Customize the Detailed Navigation (DTN) ...
Location in Theme Category: Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Layout Left Panel
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Top Left Image of Navigation
Panel Image 19x29 layout\Navi00.png
2
URL to Top Center Image of Navigation Panel
Image 1x29 layout\Navi10X.png
3 URL to Top Right Image of Navigation
Panel Image 21x29 layout\Navi20.png
4 URL to Left Center Image of Navigation
Panel Image 19x1 layout\Navi01Y.png
5 URL to Center Image of Navigation Panel Image 1x1 layout\Navi11XY.png
6 URL to Right Center Image of Navigation
Panel Image 1x127 layout\Navi21Y.png
7 URL to Bottom Left Image of Navigation Panel
Image 19x127 layout\Navi02.png
8 URL to Bottom Center Image of
Navigation Panel Image 1x127 layout\Navi12X.png
9 URL to Bottom Right Image of Navigation
Panel Image 21x127 layout\Navi22.png
Location in Theme Category: Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Detailed Navigation Tree
# Name in Theme Editor Type Details
10 Font Sizes Text Limitation is <= 14px
11 Font Size on Hover State Text Limitation is <= 14px
12 Font Size on Down State Text Limitation is <= 14px
Customize your Ajax Framework Page
June 2011 24
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Detailed Navigation Divider
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Left Image of Divider Image 9x1 DTN\NavigationListDivider00.gif
2 URL to Center Image of Divider Image 1x1 DTN\NavigationListDivider10X.gif
3 URL to Right Image of Divider Image 9x1 DTN\NavigationListDivider20.gif
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Collections
# Name in Theme Editor Type Size Path Under Images Folder
4 Color of Collection Title Text N/A N/A
5 Font Size of Collection Title Text N/A N/A
6 Font Weight of Collection Title Text N/A N/A
7 Font Color of Collection Link Text N/A N/A
8 Font Size of Collection Link Text N/A N/A
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Icons
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Icon of 'Close' Arrow Background 14x14 DTN\TreeNodeCollapsed.gif
2 URL to Icon of Open Arrow Background 14x14 DTN\TreeNodeExpanded.gif
Customize your Ajax Framework Page
June 2011 25
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Detailed Navigation Tree
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Background Image of Down State of
Item
Background 19x1 DTN\NaviDownState00Y.gif
2 URL to Background Image of Hover State of
Item
Background 19x1 DTN\ NaviHoverState00Y.gif
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Common Parameters
# Name in Theme Editor Type Size Path Under Images Folder
3 URL to Background Image of Content in
Item on Down State
Background 1x1 DTN\NaviDownState10XY.gif
4 URL to Background Image of Content in
Item on Hover State
Background 1x1 DTN\NaviHoverState10XY.gif
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Icons
# Name in Theme Editor Type Size Path Under Images Folder
5 URL to Image of Bullet Icon Background 14x14 DTN\Tree_Leave.gif
4.6.1 Collapse/Expand the Navigation Panel
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Layout Left Panel
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Collapsed State Image of Navigation Panel Image 25x41 Layout\NaviCollapsed.png
Customize your Ajax Framework Page
June 2011 26
4.6.2 Navigation Zoom
Location in Theme Category: Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Icons
# Name in Theme Editor Type Size Path Under Images Folder
1 URL of 'Collapse' Arrow Icon for Navigation Zoom Node Image 14x14 DTN/TreeNodeCollapsedZoom.gif
2 URL of 'Expand' Arrow Icon for Navigation Zoom Node Image 14x14 DTN\TreeNodeExpandedZoom.gif
4.6.3 Contextual Navigation Panel
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Detailed Navigation Contextual
Navigation Panel
# Name in Theme Editor Type Path Under Images Folder
1 Bottom Border of Item Color
2 Bottom Border of Background Image of Down State of
Item
Color
3 Bottom Border of Background Image of Hover State of
Item
Color
4 Font of Item Text Font weight is supported
Font size is supported
Font type is supported
5 Font of Item on Hover State Text Font weight is supported
Font size is supported
Font type is supported
Customize your Ajax Framework Page
June 2011 27
4.6.4 Scroll Bar
Location in Theme Category: Theme Editor Ajax Framework Page Elements Scrollbar
# Name in Theme Editor Type Size Path Under Images Folder
1 Background Color Color N/A N/A
2 Border Style Color N/A N/A
3 URL to Image of Up Arrow Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonUpStd.gif
4 URL to Image of Down State of Up Arrow Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonUpDown.gif
5 URL to Image of Hover State of Up Arrow Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonUpHover.gif
6 URL to Image of Down Arrow Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonDownStd.gif
7 URL to Image of Down State of Down
Arrow
Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonDownDown.gif
8 URL to Image of Hover State of Down Arrow
Image 14x17 PopupWindow\Scroll Bar\NaviScrollButtonDownHover.gif
9 URL to Background Image of Scroll Bar
Slider
Image 14x1 PopupWindow\Scroll Bar\NaviScrollBoxStandardY.gif
10 URL to Background Image of Down State
of Scroll Bar Slider
Image 14x1 PopupWindow\Scroll Bar\NaviScrollBoxDownY.gif
11 URL to Background Image of Hover State
of Scroll Bar Slider
Image 14x1 PopupWindow\Scroll Bar\NaviScrollBoxHoverY.gif
12 URL to Image of Scroll Bar Grip Image 6x8 PopupWindow\Scroll Bar\NaviScrollBoxGrip.gif
Customize your Ajax Framework Page
June 2011 28
4.7 Customize Dynamic Navigation ...
Dynamic navigation can be displayed in-place, running inside the DTN (as done in the Classic
Framework Page) or floating. You set this using the Display Mode for Dynamic Navigation iViews
property in the Dynamic Navigation iView located inside the Ajax Framework Page
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Detailed navigation Dynamic
Navigation Floating Frame
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Image of ‘Close’ Button Image 16x16 DynamicNavigation\IviewCloseButSta
ndard.png
2 URL to Image of Hover State of ‘Close’ Button Image 16x16 DynamicNavigation\IviewCloseButHov
er.png
3 URL to Image of Down State of ‘Close’ Button Image 16x16 DynamicNavigation\IviewCloseButDown.png
4 Background Color of ‘Close’ Button Background N/A N/A
5 Border Color of ‘Close’ Button Container Border N/A N/A
6 URL to Top Left Image Image 11x5 DynamicNavigation\IViewTagFrame00
.png
7 URL to Top Center Image Image 1x5 DynamicNavigation\IViewTagFrame03
X.png
8 URL to Top Right Image Image 12x5 DynamicNavigation\IViewTagFrame04.png
9 URL to Left Center Image Image 11x1 DynamicNavigation\IViewTagFrame10
Y.png
10 URL to Right Center Image Image 12x1 DynamicNavigation\IViewTagFrame14
Y.png
11 URL to Bottom Left Image Image 11x14 DynamicNavigation\IViewTagFrame20
.png
12 URL to Bottom Center Image Image 1x14 DynamicNavigation\IViewTagFrame23
X.png
13 URL to Bottom Right Image Image 12x14 DynamicNavigation\IViewTagFrame24
.png
Customize your Ajax Framework Page
June 2011 29
4.7.1 Dynamic Navigation Icon
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Detailed navigation Dynamic
Navigation Icons
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Image of Dynamic Navigation Icon Image 16x10 DynamicNavigation\IviewNavIcon.png
Location in Theme Category: Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed Navigation Detailed Navigation Icons
# Name in Theme Editor Type Details
1 Color of Text Color
1 Font Text Limitation is <= 14px
Customize your Ajax Framework Page
June 2011 30
4.7.2 Embedded Dynamic Navigation
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Detailed navigation Dynamic
Navigation Floating Frame
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Top Left Image Image 6x2 DynamicNavigation\EmbeddedBox00.
gif
2 URL to Top Center Image Image 1x2 DynamicNavigation\EmbeddedBox10.gif
3 URL to Top Right Image Image 5x2 DynamicNavigation\EmbeddedBox20.
gif
4 URL to Middle Left Image Image 6x1 DynamicNavigation\EmbeddedBox01.
gif
5 URL to Middle Right Image Image 5x1 DynamicNavigation\EmbeddedBox21.
gif
6 URL to Bottom Left Image Image 6x2 DynamicNavigation\EmbeddedBox02.
gif
7 URL to Bottom Center Image Image 1x2 DynamicNavigation\EmbeddedBox12.
gif
8 URL to Bottom Right Image Image 5x2 DynamicNavigation\EmbeddedBox22.gif
The arrow change for this element is done along with all other equivalent elements in the DTN
Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed
Navigation Detailed Navigation Tree
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Icon of 'Close' Arrow Image 14x14 DTN\TreeNodeCollapsed.gif
2 URL to Icon of Open Arrow Image 14x14 DTN\TreeNodeExpanded.gif
Customize your Ajax Framework Page
June 2011 31
4.8 Customize the Breadcrumb ...
Location in Theme Category: Theme Editor Ajax Framework Page Elements Breadcrumb
# Name in Theme Editor Type Details
1 Font of Breadcrumb Links Text
Max font size is 15px
Italics supported
Font family is supported
Font weight is supported
2 Font Color of Inactive Entry Text
3 Font Color of Inactive Entry on Hover Text
4 Font Color of Active Entry Text
4.9 Customize the Layout ...
4.9.1 Window Border
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Layout Border
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Top Left Corner Image of Outer image 10x10 Layout\BlueFrame00.gif
2 URL to Left Vertical Image of Outer Frame image 5x1 Layout\BlueFrame01Y.gif
3 URL to Bottom Left Corner Image of Outer Frame image 10x10 Layout\BlueFrame02.gif
4 URL to Top Horizontal Image of Outer Frame image 1x5 Layout\BlueFrame10X.gif
5 URL to Bottom Horizontal Image of Outer Frame image 1x5 Layout\BlueFrame12X.gif
6 URL to Top Right Image of Outer Frame image 10x10 Layout\BlueFrame20.gif
7 URL to Right Vertical Image of Outer image 5x1 Layout\BlueFrame21Y.gif
8 URL to Bottom Right Image of Outer Frame image 10x10 Layout\BlueFrame22.gif
9 Background Color Color N/A N/A
Customize your Ajax Framework Page
June 2011 32
4.10 Customize the Dialog Box ...
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Top Center Image of Title Area Image 1x18 PopupWindow\PopupWindow10X.png
2 URL to Top Center Image of Content Area Image 1x18 PopupWindow\PopupWindow12X.png
3 URL to Center Image of Content Area Image 1x1 PopupWindow\PopupWindow13XY.png
4 URL to Bottom Center Image of Content
Area
Image 1x1 PopupWindow\PopupWindow13XY.png
Customize your Ajax Framework Page
June 2011 33
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box
# Name in Theme Editor Type Details
23 Font Size of Content Area Text
24 Font Family of Text of Content
Area
Text
25 Font Color of Content Area Text
26 Font Size of Title Text 8px – 15px
27 Font Family of Title Text
28 Font Weight of Title Text Max font size when bold: 15
29 Text Color of Title Text
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons
# Name in Theme Editor Type Size Path Under Images Folder
5 URL to Image of 'Close' Button Image 18x18 PopupWindow\PopupWinCloseStd.png
6 URL to Image of Hover State of Close
Button
Image 18x18 PopupWindow\PopupWinCloseHover.png
7 URL to Image of Down State of 'Close' Button
Image 18x18 PopupWindow\PopupWinCloseDown.png
8 URL to Lower Image of Horizontal
Divider
Image 1x15 PopupWindow\PopupWindowDividerX_down.png
9 URL to Horizontal Divider Image Image 34x15 PopupWindow\PopupWindowWave.png
10 URL to Upper Image of Horizontal Divider
Image 1x15 PopupWindow\PopupWindowDividerX_up.png
11 URL to Left Image: Regular State Image 8x18 PopupWindow\std\button_emph_reg.gif
12 URL to Left Image: Down State Image 8x18 PopupWindow\down\button_emph_down.gif
13 URL to Left Image: Hover State Image 8x18 PopupWindow\hover\button_emph_hover.gif
14 URL to Left Image: Regular State Image 3x18 PopupWindow\std\button_reg_0.gif
15 URL to Left Image: Down State Image 3x18 PopupWindow\down\button_down_0.gif
16 URL to Left Image: Hover State Image 3x18 PopupWindow\hover\button_hover_0.gif
17 URL to Center Image: Regular State
Image 1x18 PopupWindow\std\\button_reg_1.gif
18 URL to Center Image: Down State Image 1x18 PopupWindow\down\button_down_1.gif
19 URL to Center Image: Hover State Image 1x18 PopupWindow\hover\button_hover_1.gif
20 URL to Right Image: Regular State Image 3x18 PopupWindow\std\\button_reg_2.gif
21 URL to Right Image: Down State Image 3x18 PopupWindow\down\button_down_2.gif
22 URL to Right Image: Hover State Image 3x18 PopupWindow\hover\button_hover_2.gif
Customize your Ajax Framework Page
June 2011 34
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Regular State
# Name in Theme Editor Type Details
30 Font Family Text
31 Font Color Text
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Hover State
# Name in Theme Editor Type Details
30 Font Family Text
31 Font Color Text
Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Down State
# Name in Theme Editor Type Details
30 Font Family Text
31 Font Color Text
4.11 Customize the Hyperlinks
Location in Theme Category: Theme Editor Ajax Framework Page Elements Links and Text Buttons Links
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Background Image on Hover State Image 1x15 masthead\Search\SearchButton\Hover\HyperLinkButton
Hover00X.gif
2 URL to Background Image on Down State Image 1x15 masthead\Search\SearchButton\Down\HyperLinkButton
Down00X.gif 3 Border Color N/A N/A
Customize your Ajax Framework Page
June 2011 35
Location in Theme Category: Theme Editor Ajax Framework Page Elements Links and Text Buttons Links
# Name in Theme Editor Type Details
8 Font Text Size between 10px and 12px
Bold is supported. When bold, max font size is 15px
Italics supported
Font family is supported
9 Font Color Color
Font Color on Hover State
Color of Inactive Hyperlink
4.12 Customize the Signature Theme Buttons
Location in Theme Category : Theme Editor Ajax Framework Page Elements Links and Text Buttons Text Buttons
# Name in Theme Editor Type Details
7 Font Text Size between 10px and 15px
Bold is supported When bold, max font size is 15px
Italics supported
Font family is supported
8 Font Color Text
Location in Theme Category: Theme Editor Ajax Framework Page Elements Menu Bar
# Name in Theme Editor Type Size Path Under Images Folder
4 URL to Image of Back Icon Image 6x9 NovaMenuBar\MenuBarItem\ArrowBack.png
5 URL to Image of Inactive Back Icon Image 6x9 NovaMenuBar\MenuBarItem\ArrowBackDisabled.png
6 URL to Image of Forward Icon Image 6x9 NovaMenuBar\MenuBarItem\ArrowForward.png
7 URL to Image of Inactive Forward Icon Image 6x9 NovaMenuBar\MenuBarItem\ArrowForwardDisabled.png
Location in Theme Category: Theme Editor Ajax Framework Page Elements Links and Text Buttons Text Buttons
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Background Image Image 1x15 masthead\TextButtonStd00X.gif
2 URL to Background Image on Hover State Image 1x15 masthead\Search\SearchButton\Hover\TextButtonHover
00X.gif
3 URL to Background Image on Down State Image 1x15 masthead\Search\SearchButton\Down\TextButtonDown
00X.gif
4 Border Color N/A N/A
5 URL to Arrow Image Image 6x9 masthead\ActionButtonArrow.png
6 URL to Image of Inactive Arrow Image 6x9 masthead\ActionButtonArrowDisabled.png
Customize your Ajax Framework Page
June 2011 36
4.13 Customize the Context Menus – Hierarchical
Location in Theme Category: Theme Editor Ajax Framework Page Elements Context Menu
# Name in Theme Editor Type Details
1 Color of Background Edges of the Context Menu Color
2 Background Color of Context Menu Item Color
3 Background Edges Color of the Context Menu When
Hovered
Color
4 Background Color of Inactive Menu Item on Down
State
Color
5 Background Color of Seperator Color
6 Bottom Border of Container of Up Arrow Color
7 Top Border of Container of Down Arrow Color
8 Background Color of Container of Up Arrow Color
9 Background Color of Container of Down Arrow Color
10 Font of Context Menu Item Text
11 Font of Context Menu Item on Down State Text
12 Font of Disabled Entry - Down State Text
13 Color of Text of Context Menu Item Color
14 Color of Text of Context Menu Item on Down State Color
15 Color of Disabled Entry Color
Customize your Ajax Framework Page
June 2011 37
4.14 Customize Portal Search
4.14.1 Input Field and Icons
Location in Theme Category: Theme Editor Ajax Framework Page Elements Links and Text Buttons Text Buttons
# Name in Theme Editor Type Size Path Under Images Folder
1 URL to Arrow Image Image 9x6 masthead\ActionButtonArrow.png
2 URL to Image of Inactive Arrow Image 9x6 masthead\ActionButtonArrowDisabled.png
Location in Theme Category: Theme Editor Ajax Framework Page Elements Input Field and Dropdown List Input Field
# Name in Theme Editor Type Size Path Under Images Folder
3 Search Image Image 14x14 masthead\ShellSearch.png
4 Inactive Search Image Image 14x14 masthead\ShellSearchDisabled.png)
5 Border of Field Label for Portal Search Color N/A N/A
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Masthead Portal Search
Container
# Name in Theme Editor Type Details
1 Font of Field Label for Portal Search Text Font size- between 10px and 12px
Italics supported
Font family is supported
Weight is supported, when bold, max font size is 12px
2 Color of Field Label of Portal Search Color
3 Color of Portal Search Field Text Color
4 Background Color of Portal Search Text Box Color
Customize your Ajax Framework Page
June 2011 38
4.14.2 Suggestion Results Menu
4.14.3 Suggestions Menu – No Suggestions
Location in Theme Category: Theme Editor Ajax Framework Page Elements Context Menu
# Name in Theme Editor Type Details
1 Color of Background Edges of the Context Menu Color
2 Background Color of Context Menu Item Color
3 Background Edges Color of the Context Menu When Hovered Color
4 Background Color of Highlighted Text Color
5 Bottom Border of Horizontal Line Color
6 Font Color of Category Divider Color
All other text objects are the same as in section 4.13 (Hierarchical
menu)
Text
Location in Theme Category: Theme Editor Ajax Framework Page Elements Context Menu
# Name in Theme Editor Type Details
1 Font of Context Menu Item Text Font size not limited
Italics supported
Font family is supported
Weight is supported. When bold, max font size not limited
2 Font Color of 'No Suggestions' Divider Color
3 Font of Context Menu Item Text Font size not limited
Italics supported
Font family
Weight is supported. When bold, max font size not limited
4 Font of Context Menu Item on Down State Text Font size not limited
Italics supported
Font is supported
Weight is supported. When bold, max font size not limited
5 Color of Text of Context Menu Item Color
6 Color of Text of Context Menu Item on Down
State
Color
Customize your Ajax Framework Page
June 2011 39
4.15 Customize the Context Menu
Location in Theme Category: Theme Editor Ajax Framework Page Elements Context Menu
# Name in Theme Editor Type Details
1 Color of Background Edges of the Context Menu Color
2 Background Color of Context Menu Item Color
3 Background Edges Color of the Context Menu When Hovered Color
All other text objects are the same as in section 4.13 (Hierarchical
menu)
Text
Customize your Ajax Framework Page
June 2011 40
4.16 Customize the Splash Screen ...
Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Layout Splash Screen
# Name in Theme Editor Type Size Path Under Images Folder
1 Color of Background of Splash Screen Color N/A N/A
2 URL to Splash Screen Image Image 517x360 layout\SplashScreen.png
2 Padding of Splash Screen Image Position properties N/A N/A
2 Width of Splash Screen Image Position properties N/A N/A
2 Height of Splash Screen Image Position properties N/A N/A
3 URL to Animation Image for Loading Image 445x9 layout\ScreenLoadingAniLarge.gif
Note: The screen loading animation
width must be less than the size of the
splash screen width.
3 Height of Animation Image for Loading Position properties N/A N/A
3 Width of Animation Image for Loading Position properties N/A N/A
3 Left Position of Animation Image for Loading Position properties N/A N/A
3 Top Position of Animation Image for Loading Position properties N/A N/A
4 Font Color Text N/A N/A
4 Font Family Text N/A N/A
4 Font Weight Text N/A N/A
4 Top Position of Text Position properties N/A N/A
4 Left Position of Text Position properties N/A N/A
Customize your Ajax Framework Page
June 2011 41
5. Appendix
5.1 Appendix A – AFP Class Report
The AFP class report helps you identify the attributes that need to be changed in the Theme editor to
achieve the desired changes in the Ajax Framework Page themes.
1. Generate the report
a. In the portal administration environment, navigate to Content Administration Portal
Display Portal Themes Theme Editor.
b. In Related Links, select AFP Class Report.
c. In the dialog box that opens, click Generate.
d. Save the file on your local machine.
2. Modify the file
a. Open the file with a CSV viewer.
b. Adjust the size of the columns and activate the filter.
3. Find the attribute
a. Open the portal using the desktop that you want to modify.
b. Open the browser development tool.
c. Select an element using the browser development tool.
For example:
d. Identify the CSS class for this element.
e. Open the CSV file and search for the class (for example – shellSearchImage).
In this example, the attribute name is Search Image which is located under Ajax
Framework Page Elements Input Field and Dropdown List Input Field.
f. You can change the image before applying the change in the Theme editor by replacing
the source with a local file. For example:
…AlphaImageLoader(src=C:\Users\K0123456\Pictures\ShellSearch_new.
png….
Customize your Ajax Framework Page
June 2011 42
In this example we used the same image but the color was changed to red:
www.sdn.sap.com/irj/sdn/howtoguides