Integrating Web Dynpro

Applications into SAP

Enterprise Portal
Dr.-Ing. Oliver Stiefbold
Product Management, SAP AG
 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 2

 Unified Rendering and Branding

SAP application controls are unified and use portal design service
Web Dynpro in Portal thus offers a unified end user experience

Portal

Portal Page

Web Dynpro 4 Java

© SAP AG 2002, Title of Presentation, Speaker Name 3

 Web Dynpro Theme Editor – Custom Corporate Branding

Web
Web Dynpro
Dynpro Theme
Theme Editor
Editor is
is
SAP Design available
available at
at SDN
SDN

Service.KEY
com.sap.portal.de
sign.portaldesign
data

Custom Design Custom Design

© SAP AG 2002, Title of Presentation, Speaker Name 4

 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 5

 WorkProtect Mode

2
1

Web Dynpro applications can use WorkProtect mode to prevent

unsaved data in the Web Dynpro application from being lost if the
user navigates to another portal page.
© SAP AG 2002, Title of Presentation, Speaker Name 6
 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Portal Personalization

Summary and Outlook

© SAP AG 2002, Title of Presentation, Speaker Name 7

 Web Dynpro and Portal Eventing

1
Sam Wilson

HELLO ! Sam Wilson

2
Portal eventing can be used to communicate between Web
Dynpro and non Web Dynpro portal content

© SAP AG 2002, Title of Presentation, Speaker Name 8

 Web Dynpro Portal Eventing

Several Web Dynpro applications running on one portal page

can communicate using portal eventing.

If Web Dynpro Portal eventing is needed, depends on the use

case and application design.

loosely coupling strong coupling

• No predefined user dialog • Defined user dialog

• No defined application flow • Strong linear application flow control
• Variing page composition • Web Dynpro based page composition
• Reuse of iViews • No reuse of components

„Let the administrator decide“ „Dont let the admin decide“

© SAP AG 2002, Title of Presentation, Speaker Name 9

 EPCF – Portal Client Framework

Enterprise Portal Client Framework provides a JavaScript function

for event handling in Pages and iViews:

EPCM.subscribeEvent('namespace', 'eventName',
eventHandlingFunctionName);

'namespace' - an text string that uniquely identifies your domain. The

recommended namespace format is 'urn:eventURN'.

'eventName' - an text string that uniquely identifies your event name.

EventName and namespace together define a unique event type
identifier.

eventHandlingFunctionName - the name of a JavaScript function in your

HTML code, without the function signature. The named function will be
called upon event receival:
function eventHandlingFunctionName( evt ) { doSth; }

© SAP AG 2002, Title of Presentation, Speaker Name 10

 EPCF – Raise an Event

To raise an EPCF event the application calls:

EPCM.raiseEvent('namespace', 'eventName', 'eventData');

The arguments of the function are:

'namespace' - a text string that uniquely identifies your domain. The

recommended namespace format is 'urn:eventURN'.

'eventName' - a text string that uniquely identifies your event name.

EventName and namespace together define a unique event type
identifier.

eventData - a JavaScript object identifier. This object is passed on to

the event handling method. 'eventData' can be a string or any other
JavaScript object type.

© SAP AG 2002, Title of Presentation, Speaker Name 11

 Web Dynpro – Subcribe a Portal Event

You can reuse a Web Dynpro action for several portal events.

WDPortalEventing.subscribe(
“urn:myurn.test.portal”,
“TestEvent”,
wdThis.wdGetTestEventAction() );

You may define the following parameters for your Web Dynpro action:

Namespace: name space of the received portal event.

Name: This parameter contains the name of the received portal event.

dataObject: the transported parameter of the portal event.

© SAP AG 2002, Title of Presentation, Speaker Name 12

 Web Dynpro – Unsubscribe a Portal Event

Unsubscribing for a portal event is very similar to subscribing:

WDPortalEventing.unsubscribe(
“urn:myurn.test.portal”,
“TestEvent”,
wdThis.wdGetTestEventAction() );

Note: Be sure that you unsubscribe every single Web Dynpro view, as the
subscription and unsubscription is valid only for the current view.

© SAP AG 2002, Title of Presentation, Speaker Name 13

 Web Dynpro – Raise a Portal Event

The following example demonstrates how to raise a portal event:

WDPortalEventing.fire (
“urn:myurn.test.portal”,
“TestEvent”,
“AParameter”);

You can fire a portal event at any place in your Web Dynpro application.

The event is transported with the next response to the client.

You can also raise more than one portal event in one request-response
cycle. Typically, you will fire a portal event in a Web Dynpro action event
handler (for example, pressing a button).

© SAP AG 2002, Title of Presentation, Speaker Name 14

 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 15

 Portal Navigation for Web Dynpro ecosystem

Main window

© SAP AG 2002, Title of Presentation, Speaker Name 16

 Navigation Connector

A custom navigation connector

may enhance the portal standard PCD
navigation connector Portal
Content Directory PCD

A navigation connector can be

merged on top level

All functionality is available

Custom Navigation
Navigation and structure can be Connector Example
created dynamically

Example available in PDK

© SAP AG 2002, Title of Presentation, Speaker Name 17

 EPCM - Navigation Client Functionality

Enterprise Portal offers a JavaScript function for Navigation

EPCM.doNavigate = function( target, mode, winfeatures, winname,

history, targetTitle, context , postBody)
Target: ROLES://dir1/dir2/role1/page1

Mode: 0/1/2 – new /same window, with/wo portal header

Context: ROLES://dir1/dir2/role1/page2

Winfeatures: Example: "width=400,height=500".

Winname: „this window has my name ☺“

History: a breadcrumb control to help users find back

Postbody: If you dont like „GET“

© SAP AG 2002, Title of Presentation, Speaker Name 18

 EPCM - Navigation Client Functionality

Relative Navigation

EPCM.doRelativeNavigate(basenodename, levelsup, pathnameslist,

mode, winfeatures, winname, history, addParams, targetTitle, context)
basenodename = current presented URL
levelsup = Number of levels to ascend in the tree
pathnameslist = list of all atomic names of children from the point
reached by going number of levels up the tree

Rendered link EXAMPLE:

<A HREF="myLink2" onclick="return EPCM.doRelativeNavigate

('ROLES://portal_content/Roles/MyRole/Level1/Level2/Level3', 1,
'{PortalEventing}',0)"> This is a link using doRelativeNavigate</A>

© SAP AG 2002, Title of Presentation, Speaker Name 19

 Summary and Review of Navigation API

The Navigation API allows application to navigate not only in

between a known application, but between the complete Portal
content.

Navigation targets are iViews, Pages, Worksets, Roles

Navigation Targets are a Portal Content Directory URL

Dynamic Navigation windows offer an additonal dynamic

navigation context for application designers

Related Targets offer also an additonal navigation context.

Object Based Navigation decouples Navigation Link and

Navigation Target (next chapter)

© SAP AG 2002, Title of Presentation, Speaker Name 20

 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

Object Based Navigation

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 21

 Object Based Navigation – Maintaining Content

© SAP AG 2002, Title of Presentation, Speaker Name 22

 Object Based Navigation – Maintaining Content

The objective of OBN is to determine the Application flow at

runtime, based on:

Customizing of
the Portal
User Decisions
User Roles

© SAP AG 2002, Title of Presentation, Speaker Name 23

 EPCM - Navigation Client Functionality

Object Based Navigation JavaScript API

EPCM.doObjBasedNavigate = function( systemAlias, businessObjName,

objValue, operation ){
EPCM.raiseEvent('urn:com.sapportals:navigation','ObjBasedNavigate',
{ systemAlias: systemAlias,
businessObjName: businessObjName,
objValue: objValue,
operation: operation} );
}

systemAlias Portal system

businessObjName ID of the navigation target „businness object“
objValue optional – pass a parameter
operation optional specific operation of a BO

© SAP AG 2002, Title of Presentation, Speaker Name 24

 Use Navigation Java API for OBN

// Cast the navigation service object to IClientNavigationGenerator

IClientNavigationGenerator navGenerator;

navGenerator = (IClientNavigationGenerator) PortalRuntime

.getRuntimeResources().getService("com.sap.portal.navigation.service.navigation");

// use navGenerator to generate the link

String objectNavigateClientCall = navGenerator.createObjectNavigateClientCall(

systemAlias,businessObjectId,parameter,opId);

//Bind to a link object

link.setOnClientClick(objectNavigateClientCall);

© SAP AG 2002, Title of Presentation, Speaker Name 25

 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 26

 Easy Integration of Web Dynpro Applications

Netweaver 04 -
No automatic Integration of Web Dynpro Applications (see Wizard)
No tight integration into Portal personalization

© SAP AG 2002, Title of Presentation, Speaker Name 27

 WD Portal Personalization with next Pagebuilder

<component-profile>
<property name="systemalias" value="PDKDummySystem">
<property name="personalization" value="dialog"/>
<property name="inheritance" value="non-final"/>
</property>
<property name="businessobjectid" value="PDKDummyObjectID">
<property name="personalization" value="dialog"/>
<property name="inheritance" value="non-final"/>
</property>
</component-profile>
© SAP AG 2002, Title of Presentation, Speaker Name 28
 Agenda

Integrating Web Dynpro into SAP Enterprise Portal:

Unified Rendering – Portal Themes

Work Protect Mode

Portal Eventing

Navigation

OBN

Outlook: Web Dynpro Portal Personalization

Portal Development Kit and Netweaver Developer Cockpit

© SAP AG 2002, Title of Presentation, Speaker Name 29

 Download PDK and Sneak Preview on SDN

© SAP AG 2002, Title of Presentation, Speaker Name 30

 What is Portal Development Kit ?

What it is:

• a collection of Netweaver Developer samples for released

Netweaver Java APIs

• a set of additional tools to ease developers life

• supports the SAP Java Developer Community with the

Netweaver 04 Sneak Preview Edition

And it will be:

• a business package with ready to run Netweaver Developer and

Business Administrator scenarios

© SAP AG 2002, Title of Presentation, Speaker Name 31

 Portal Development Kit 6.0.x - Example

Portal Development

© SAP AG 2002, Title of Presentation, Speaker Name 32

 Get Support on SDN for Web Dynpro Integration

https://www.sdn.sap.com/sdn/developerareas/webdynpro.sdn?
page=webdynpro_EP_integration.htm

© SAP AG 2002, Title of Presentation, Speaker Name 33

 Questions?

Q&A

© SAP AG 2002, Title of Presentation, Speaker Name 34