EP 7.3 Ajax Framework Page

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


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


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


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


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.


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.


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


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


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


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.


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.


June 2011 10


Page Configuration


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


June 2011 11

4.3.6 Splash Screen

You can define whether to display a splash screen, and if displayed, which elements to display.


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


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.


Page Configuration


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())


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


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


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


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


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


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)


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


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


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


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


June 2011 15



13 Font Text Font size between 8px and 16px


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)


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


7 URL to Background Image of Drag and Drop Element Image 1x66 tln\BgTabArea00X.gif


June 2011 16



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



10 Font Text Font family is supported

Italics supported



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


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


June 2011 17



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



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



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




June 2011 18

4.5.2.2 First Level of TLN with Images



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.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


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


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)


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


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


1 Image of Home Tab on Down State Image 61x40 tln\HouseSelected.png

2 Default Image of Home Tab Image 61x40 tln\HouseStandardHover.png


June 2011 20

4.5.4 Additional Settings

4.5.4.1 TLN Drag and Drop Grasp Image


Drag and Drop Elements


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


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


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)


1 Border Style of First Level Tab Color Color change is supported


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


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


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


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

...


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


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


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


Location in Theme Category: Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed

Navigation Detailed Navigation Tree


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


June 2011 24

Location in Theme Category : Theme Editor Detailed Navigation Outer Frame of Ajax Framework Page Detailed

Navigation Detailed Navigation Divider


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


Navigation Collections


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


Navigation Icons


1 URL to Icon of 'Close' Arrow Background 14x14 DTN\TreeNodeCollapsed.gif

2 URL to Icon of Open Arrow Background 14x14 DTN\TreeNodeExpanded.gif


June 2011 25




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


Navigation Common Parameters


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


Navigation Icons


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


1 URL to Collapsed State Image of Navigation Panel Image 25x41 Layout\NaviCollapsed.png


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


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


June 2011 27

4.6.4 Scroll Bar

Location in Theme Category: Theme Editor Ajax Framework Page Elements Scrollbar


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


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


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


June 2011 29

4.7.1 Dynamic Navigation Icon


Navigation Icons


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


1 Color of Text Color

1 Font Text Limitation is <= 14px


June 2011 30

4.7.2 Embedded Dynamic Navigation


Navigation Floating Frame


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




1 URL to Icon of 'Close' Arrow Image 14x14 DTN\TreeNodeCollapsed.gif

2 URL to Icon of Open Arrow Image 14x14 DTN\TreeNodeExpanded.gif


June 2011 31

4.8 Customize the Breadcrumb ...

Location in Theme Category: Theme Editor Ajax Framework Page Elements Breadcrumb


1 Font of Breadcrumb Links Text

Max font size is 15px

Italics 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


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


June 2011 32

4.10 Customize the Dialog Box ...

Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box


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


June 2011 33

Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box


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


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


June 2011 34

Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Regular State


30 Font Family Text

31 Font Color Text

Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Hover State


30 Font Family Text

31 Font Color Text

Location in Theme Category: Theme Editor Ajax Framework Page Elements Dialog Box Buttons Down State


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


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


June 2011 35

Location in Theme Category: Theme Editor Ajax Framework Page Elements Links and Text Buttons Links


8 Font Text Size between 10px and 12px

Bold is supported. When bold, max font size is 15px

Italics 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


7 Font Text Size between 10px and 15px

Bold is supported When bold, max font size is 15px

Italics supported


8 Font Color Text

Location in Theme Category: Theme Editor Ajax Framework Page Elements Menu Bar


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


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


June 2011 36

4.13 Customize the Context Menus – Hierarchical

Location in Theme Category: Theme Editor Ajax Framework Page Elements Context Menu


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


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


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


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


1 Font of Field Label for Portal Search Text Font size- between 10px and 12px

Italics 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


June 2011 38

4.14.2 Suggestion Results Menu

4.14.3 Suggestions Menu – No Suggestions





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



1 Font of Context Menu Item Text Font size not limited

Italics 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


4 Font of Context Menu Item on Down State Text Font size not limited

Italics supported

Font is supported


5 Color of Text of Context Menu Item Color

6 Color of Text of Context Menu Item on Down

State

Color


June 2011 39

4.15 Customize the Context Menu





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


June 2011 40

4.16 Customize the Splash Screen ...

Location in Theme Category: Theme Editor Outer Frame of Ajax Framework Page Layout Splash Screen


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


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….


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

EP 7.3 Ajax Framework Page

Documents

Transcript of EP 7.3 Ajax Framework Page