integrating web dynpro applications into sap enterprise portal · ©sap ag 2002, title of...

Integrating Web DynproApplications into SAP Enterprise Portal

Dr.-Ing. Oliver StiefboldProduct Management, SAP AG

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

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


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

Web Dynpro 4 Java

Portal Page


Web Dynpro Theme Editor – Custom Corporate Branding

SAP Design

Service.KEYcom.sap.portal.design.portaldesigndata

Custom Design Custom Design

Web Dynpro Theme Editor is available at SDNWeb Dynpro Theme Editor is available at SDN


Agenda



Work Protect Mode

Portal Eventing

Navigation

OBN




WorkProtect Mode

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.

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.

12


Agenda



Work Protect Mode

Portal Eventing

Navigation

OBN

Portal Personalization

Summary and Outlook


Web Dynpro and Portal Eventing

1

2

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

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

Sam Wilson

HELLO ! Sam Wilson


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

• No predefined user dialog• No defined application flow• Variing page composition• Reuse of iViews

„Let the administrator decide“

strong coupling

• Defined user dialog• Strong linear application flow control• Web Dynpro based page composition• No reuse of components

„Dont let the admin decide“


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; }


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.


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.


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.


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


Agenda



Work Protect Mode

Portal Eventing

Navigation

OBN




Portal Navigation for Web Dynpro ecosystem

Main window


Navigation Connector

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

A navigation connector can be merged on top level

All functionality is available

Navigation and structure can be created dynamically

Example available in PDK

PCD

Custom Navigation Connector Example


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“



Relative Navigation

EPCM.doRelativeNavigate(basenodename, levelsup, pathnameslist, mode, winfeatures, winname, history, addParams, targetTitle, context)

basenodename = current presented URLlevelsup = Number of levels to ascend in the treepathnameslist = 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>


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)


Agenda



Work Protect Mode

Portal Eventing

Navigation

Object Based Navigation




Object Based Navigation – Maintaining Content


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



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 systembusinessObjName ID of the navigation target „businness object“objValue optional – pass a parameteroperation optional specific operation of a BO


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


Agenda



Work Protect Mode

Portal Eventing

Navigation

OBN




Easy Integration of Web Dynpro Applications

Netweaver 04 -

No automatic Integration of Web Dynpro Applications (see Wizard)

No tight integration into Portal personalization

Netweaver 04 -

No automatic Integration of Web Dynpro Applications (see Wizard)

No tight integration into Portal personalization


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>


Agenda



Work Protect Mode

Portal Eventing

Navigation

OBN




Download PDK and Sneak Preview on SDN


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


Portal Development

Portal Development Kit 6.0.x - Example


Get Support on SDN for Web Dynpro Integration

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


Q&A

Questions?

integrating web dynpro applications into sap enterprise portal · ©sap ag 2002, title of...

Documents