how to build mdm app using mdm components

57
SAP NetWeaver How-To Guide How To Build Web Applications Using MDM Web Dynpro Components Applicable Releases: SAP NetWeaver Master Data Management 7.1 Topic Area: Enterprise Information Management Capability: Master Data Management Version 2.10 July 2010

Upload: ajayg7711

Post on 03-Mar-2015

151 views

Category:

Documents


10 download

TRANSCRIPT

Page 1: How to Build MDM App Using MDM Components

SAP NetWeaver

How-To Guide

How To Build Web Applications

Using MDM Web Dynpro Components

Applicable Releases:

SAP NetWeaver Master Data Management 7.1

Topic Area:

Enterprise Information Management

Capability:

Master Data Management

Version 2.10

July 2010

Page 2: How to Build MDM App Using MDM Components

© Copyright 2010 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.

Page 3: How to Build MDM App Using MDM Components

Document History

Document Version Description

2.10

Terminology updated to reflect changes in the user interface of the

MDM Web Dynpro Configuration Manager

2.00 The How To Consume MDM Web Dynpro Components v1.0 guide has

been split into the following two guides:

How To Build Web Applications Using MDM Web Dynpro

Components

Explains how MDM Web Dynpro components are consumed by other custom Web Dynpro components to create a Web Dynpro application with the flexibility to run as a stand-alone application or in a portal environment. This is the guide you are currently reading

(as of v2.0).

How To Integrate MDM and BPM

The guide focuses on how to integrate MDM and Business Process Management (BPM) using MDM Web Dynpro Components and Web Services and is available on SAP Developer Network (SDN) at http://www.sdn.sap.com/irj/sdn/howtoguides.

1.00 First official release of this guide: How To Consume MDM Web Dynpro

Components

Page 4: How to Build MDM App Using MDM Components

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

Page 5: How to Build MDM App Using MDM Components

Table of Contents

1. Business Scenario .......................................................................................................... 1

2. Prerequisites.................................................................................................................... 2

3. Building a Stand-Alone Web Dynpro Application .......................................................... 4

4. Controlling Field Visibility and Required Properties ................................................... 17

5. Limiting Lookup Field Values ....................................................................................... 22

6. Setting Field Default Values in an Item Details Component ........................................ 27

7. Adding Custom Buttons to an Item Details Component .............................................. 32

8. Integrating MDM Change Tracker and MDM WD Components .................................... 37

9. Other Examples ............................................................................................................. 43

9.1 Splitting WD Components into Portal iViews ........................................................... 43

Page 6: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 1

1. Business Scenario

SAP NetWeaver Master Data Management (MDM) – Web Dynpro Components

MDM Web Dynpro components are consumed (as used components), by custom developed Web

Dynpro wrapper applications and can be used for customizing or applying different types of business

logic to suit a variety of business scenarios such as Business Process Management (BPM).

For more information on how MDM Web Dynpro components can be consumed in a BPM process,

see How To Integrate Master Data Management (MDM) and Business Process Management (BPM)

available on SAP Developer Network (SDN) at

http://www.sdn.sap.com/irj/sdn/howtoguides.

MDM Web Dynpro components are also consumed by other custom Web Dynpro components to

create a Web Dynpro application which can run as a stand-alone application or in a portal

environment. In this guide we describe how to build a generic stand-alone Web Dynpro application.

For more information, see Building a Stand-Alone Web Dynpro Application on page 4.

However, you can also extend or modify the generic behavior of Web Dynpro components at runtime

using User Exits (sometimes called hook methods). User Exits allow you to add your own functionality

to SAP’s standard business applications without having to modify the original applications. There are

several different types of User Exits, each of which acts as a hook to which you can attach (or hang)

your own code.

For more information on User Exits, see http://service.sap.com/installmdm71 MDM Web

Dynpro Components Guide MDM Web Dynpro Components User Exits.

The following are some examples of how you can apply User Exits for customizing MDM Web Dynpro

components at runtime to behave according to a particular use case scenario:

You can control the properties of a component (for example, whether a field is visible, required,

or read-only).

For more information, see Controlling Field Visibility and Required Properties on page 17.

You can limit the list of lookup values in a dropdown list for a specific field to show only those

values that are relevant for a particular scenario.

For more information, see Limiting Lookup Field Values on page 22.

You can set default values for specific fields in an Item Details component so that a user does

not have to keep re-entering identical values.

For more information, see Setting Field Default Values in an Item Details Component on page 27.

You can add a customized tool bar with buttons to the user interface of an Item Details

component. For each custom button you can also add label translations.

For more information, see Adding Custom Buttons to an Item Details Component on page 32.

There are other configuration options that you can implement such as spliting a Web Dynpro

application into its components, so that each component takes on the appearance of an individual

portal iView.

For more information, see Splitting WD Components into Portal iViews on page 43.

Page 7: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 2

2. Prerequisites ...

You need prior knowledge of Web Dynpro (Java). For more information, see SAP Help Portal at

help.sap.com.

Before you can develop a Web Dynpro application, the following must be in place:

The SAP NetWeaver Composition Environment (CE) 7.11 SP04 (or higher) and SAP

NetWeaver Application Sharing (AS) Java is installed and running.

SAP NetWeaver Developer Studio (NWDS) is installed and running and is the same

version as the SAP NetWeaver AS Java you are running.

You are using SAP NetWeaver MDM 7.1 SP04 or higher.

The MDM repository is mounted and loaded.

MDM JAVA API 7.1.is deployed.

For more information, see http://service.sap.com/installmdm71 MDM Java

and .NET API Developer Guide Obtaining the Java API Libraries and Reference and

Deploying the Java API and MDM Connector Using JSPM.

MDM JAVA WD FRAMEWORK 7.1 7.11 is deployed.

For more information, see http://service.sap.com/installmdm71 MDM Web

Dynpro Components Guide Deploying the MDM Web Dynpro Components

Framework.

You have run the MDM Web Dynpro Configuration Manager application and configured

your components.

For more information, see http://service.sap.com/installmdm71 MDM Web

Dynpro Components Guide Configuring a Project in the MDM WD Configuration

Manager.

You have imported the MDM Web Dynpro and MDM Java API software components (SC) to

your workspace as follows:

a. In the SAP NetWeaver Developer Studio (NWDS), choose the Development

Infrastructure perspective as follows:

Window Open Perspective Other Development Infrastructure.

b. Import the MDM_JAVA_API softare component to your LocalDevelopment development

track as follows:

i. In the context menu of the LocalDevelopment track, choose Import SC….The

Import Software Component screen opens.

ii. Browse for the MDMJ710<SP-Number>_P<Patch-Number>.sca file.

Page 8: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 3

c. Import the MDM_JAVA_WD_FRAMEWORK software component to your development track

exactly as you did in step b above for the API. You import the MDMJAVAWDFRW<SP-

Number>_P<Patch-Number>.sca file.

Two new software components appear in the LocalDevelopment track – MDM_JAVA_API

and MDM_JAVA_WD_FRAMEWORK.

d. Add a new dependency to the MyComponents SC, for the MDM_JAVA_API and

MDM_JAVA_WD FRAMEWORK software components.

You have created a Destination to establish a connection to the MDM repository.

For more information, see http://service.sap.com/installmdm71 MDM Web

Dynpro Components Guide Creating a Destination for the MDM Repository.

Page 9: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 4

3. Building a Stand-Alone Web Dynpro

Application

Important

Ensure that you have carried out all the prerequisite steps. For more information, see

Prerequisites on page 2.

Create a new development component (DC) project

Info

You have already imported the Web Dynpro software component (SC) to your workspace. You are now going to create a new Development Component (DC) Project.

...

1. In the SAP NetWeaver Developer Studio (NWDS), choose the Web Dynpro perspective as

follows:

File New Web Dynpro Development Component.

2. Choose the software component (SC) where you want the development component (DC) project

to be created (that is, in the LocalDevelopment track select the MyComponents software

component).

Info

Local Development is the name of a local development track, within which there is a software component called MyComponents.

3. Name your Web Dynpro DC project test/masterdc.

Set the dependencies

Info

DCs can depend on one another and use each other. To enable a DC to use the functionality of another DC, you have to publish their functions in a set of public interfaces called public parts and a dependency to the public part of the DC must be

declared. When you declare dependencies, you should select only those public parts that

your component actually uses.

Page 10: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 5

4. Choose the Development Infrastructure perspective.

5. In the context menu of the test/masterdc DC, choose Show In Component Properties.

6. In the Dependencies tab, add dependencies to the Public Parts of the relevant UI components

as well as the core ear DC:

For example:

tc/mdm/wdcomps/core/ear (mandatory)

tc/mdm/wdcomps/itemdetails/wd (optional depending on scenario)

tc/mdm/wdcomps/resultset/wd (optional depending on scenario)

tc/mdm/wdcomps/search/main/wd (optional depending on scenario)

Page 11: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 6

7. Some of the events and interface methods exposed by User Exits use the MDM Java API. To

access these events/methods, add a dependency to the MDM Java API (to the api public part

of the com.sap.mdm.tech.mdm4j DC).

8. Choose Next to configure the dependencies.

Note

Uncheck the Build Time checkbox of any DC that has a (red X) next to it. The red X means that its public parts are for internal use only. The name of the DC is also grayed

out.

Page 12: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 7

Create a new Web Dynpro component

9. From the Web Dynpro perspective, expand the test/masterdc Web Dynpro DC project.

10. In the context menu of the Components node, create a new Web Dynpro component called

MasterComp.

Page 13: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 8

Info

The Component Data Modeler is a graphical Web Dynpro design time tool which is integrated into the Web Dynpro Perspective of the SAP NetWeaver Developer Studio. It

is used to graphically define the main application units such as views and controllers.

11. In the context menu of the MasterComp Web Dynpro component, open the Component Data

Modeler.

Info

Web Dynpro components can use the data and functionality found within other Web Dynpro components. To achieve this, a usage declaration must be made to establish a parent-child relationship between the two components.

12. To be able to use an external component define component usage as follows:

a. Choose Component Usage from the Palette area on the right hand side of the screen.

b. Drag and drop it onto the work area. A New Web Dynpro Component Usage popup

window opens.

13. Choose Browse to select the required component. Repeat this step for as many components as

you need for your scenario.

In our example, three MDM WD components are referenced: Item Details, Result Set, and Search components.

Page 14: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 9

14. Create data links between the components you are using and the Component Controller of the

MasterComp WD component.

Define the Window

Info

A Window enables the Web Dynpro component to be seen in a Web browser.

15. Choose Components Name of WD Component, (MasterComp) Windows to open the

main MasterCompWindow window.

Page 15: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 10

16. Delete the default view.

Info

You are now going to define the Viewset for the layout of your Web Dynpro application.

17. In the Viewsets area of the Palette, choose, GridLayout.

Page 16: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 11

18. In the context menu of GridLayout, embed the interface views in the ViewSet cells as follows:

Embed View Embed Interface View of a Component Instance.

19. Select the relevant interface view.

20. Choose Finish and save the changes.

Initialize the components

Info

Each controller has its own set of standard hook methods. These methods are called automatically when you initialize the Web Dynpro components. It is within these methods

that you may implement your own code.

Page 17: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 12

21. In the Component Controller of the MasterComp WD Component, initialize the components as

follows:

Define a variable _repositoryBean of type RepositoryBean in the begin others area

//@@begin others

RepositoryBean _repositoryBean = null;

//@@end

22. Enter the relevant code in the wdDoInit method:

Note

When using the setConfiguration method, you need to supply the configuration

project name and the component name as defined in the MDM Web Dynpro

Configuration Manager (see screen capture below):

Page 18: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 13

Page 19: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 14

Log off

23. When closing the application, add the following code to the component’s wdDoExit() method:

Note

The logoff() method destroys the MDM sessions created by the application.

24. Save your changes.

25. Create an application for your Web Dynpro DC as follows: ...

a. Open the Web Dynpro perspective.

b. In the context menu of the Applications node, choose Create Application.

c. Enter a name, for example, MasterApp.

Important

d. Check the Authentication checkbox.

For more information regarding authentication, see

http://service.sap.com/installmdm71 MDM Web Dynpro Components

Guide Defining a Trusted Connection.

Page 20: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 15

26. Choose Next to select a reference to an existing WD component.

27. Choose Next and select the Master Component as the Web Dynpro component.

28. Build, deploy, and run the new test/masterdc Web Dynpro DC.

Page 21: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 16

Result

The runtime behavior is as follows:

Search Component

Result Set Component

Item Details Component

Page 22: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 17

4. Controlling Field Visibility and Required

Properties

At runtime, you can control properties of a field on the user interface of an Item Details component by

configuring the Raise Event property in the MDM Web Dynpro Configuration Manager. Examples of

field properties that you can control are:

Visible

Read-Only

Required

In this example, we show you how to configure field visibility when the property of one field (Vendor

Region), is dependent on another field's values (Country). When Country is USA, Vendor Region is

visible and required, and when Country is Japan, Vendor Region is not applicable.

Procedure

Important

Ensure that you have carried out all the prerequisite steps.

For more information, see Prerequisites on page 2.

Configure the Item Details component

...

1. Using the MDM Web Dynpro Configuration Manager, configure an Item Details WD component.

For more information, see http://service.sap.com/installmdm71 MDM Web Dynpro

Components Guide Configuring an Item Details Web Dynpro Component.

Note

In the Item Details wizard, enter the following values:

In step 2, add the following three fields: Vendor, Country, and Vendor region.

In step 3, set the Raise Event property to True (only for the Country field).

Set the Raise Value- to True (on ly for the

Page 23: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 18

Configure the Event Handler

2. After adding the Item Details component as a used component, add a new method to the

Component Controller of the custom WD wrapper application.

3. Choose Event handler as the Method Type.

4. Update the following method properties:

Property Value

Name handleValueChange (any name)

Event Source The name of the Item Details

component that you created in step 1

Subscribed Event ValueChanged

Page 24: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 19

Result:

Page 25: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 20

Implement the sample code in the wrapper application

5. Enter the following sample code for the handleValueChange method. (Any custom logic can

be executed in the Event handler method).

In our example:

USA is selected from the Country field dropdown list.

Enter the following values for the Vendor region field properties:

Visible = true

Required = true

Japan is selected from the Country field dropdown list.

Enter the following value for the Vendor region field property:

Visible = false (Vendor region field will not appear).

Page 26: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 21

Result

The runtime behavior is as follows:

When Country = USA, the Vendor region is visible and set to required * (red asterix).

However, when Country = Japan, the Vendor region cannot be seen on the user interface of the Item

Details component.

Page 27: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 22

5. Limiting Lookup Field Values ...

You can limit the list of lookup field values in a dropdown list for a specific field by configuring the

Raise Event property in the MDM Web Dynpro Configuration Manager.

This example shows you how to limit the values in a dropdown list of a Region field to show only those

values that are relevant for a specific country (for example USA).

Prerequisites

Ensure that you have carried out all the prerequisite steps.

For more information, see Prerequisites on page 2.

In addition to the above prerequisites, ensure that:

A Vendor record has been created

There are two lookup tables: MDM_REGIONS and MDM_COUNTRIES, which are

interdependent

The Country field in the MDM_REGIONS table is a lookup to the MDM_COUNTRIES

table

Procedure

Configure the Item Details WD component

...

1. Using the MDM Web Dynpro Configuration Manager, configure an Item Details WD component.

For more information, see http://service.sap.com/installmdm71 MDM Web Dynpro

Components Guide Configuring an Item Details Web Dynpro Component.

Page 28: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 23

Note

In the steps of the Item Details wizard, enter the following values:

In step 2, add the Country and Vendor region fields.

In step 3, set the Raise Event property to True (only for the Countries field). This

raises an event for the Country field value change.

Configure the Event Handler

2. After adding the Item Details component as a used component, add a new method to the

Component Controller of the custom WD wrapper.

3. Choose Event handler as the Method Type.

4. Update the following method properties:

Property Value

Name valueChangedhandler (can be any name)

Event Source Select the name of the Item Details component that

you created in step 1 above.

Subscribed Event ValueChanged

Page 29: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 24

Implement the sample code in the wrapper application

5. Enter the following sample code for the valueChangedhandler method. Any custom logic can

be executed in the event handler method.

Example 1 – using a string to limit field values:

Page 30: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 25

Result

The runtime behavior is as follows:

When you select Country = USA, the Vendor region dropdown list is limited to display only USA

relevant regions:

When you select Country = Canada, the Vendor region dropdown list is limited to display only

Canadian regions:

Page 31: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 26

Example 2 – using an MDM value to limit field values by record Ids:

You can also limit the lookup field values to be specific values (MDM internal Ids). For example, when

country = USA, limit the Vendor region dropdown list to include regions with internal Ids 1 and 17.

Page 32: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 27

6. Setting Field Default Values in an Item

Details Component ...

This example shows you how to define and set default values for fields in an Item Details component.

This option is used when values are consistent and saves the user from having to keep re-entering the

same values. If a value does change, the default values can be overridden.

How is this implemented?

A subset of fields in the Item Details component is populated with preconfigured default values. When

the user chooses the Create button on the UI of the Item Details component, a CreateRecord event

is used as the trigger for a hook method and code is executed (a sample code is provided below).

In this example, default values are set for the following four fields:

Subject – lookup field to Subjects table

Country – lookup field to MDM_COUNTRIES table

Vendor region – lookup field to MDM_REGIONS table

URL – a standard text field

Procedure

Important

Ensure that you have carried out all the prerequisite steps.

For more information, see Prerequisites on page 2.

Configure the Item Details component

...

1. In the MDM Web Dynpro Configuration Manager, configure an Item Details WD component.

For more information, see http://service.sap.com/installmdm71 MDM Web Dynpro

Components Guide Configuring an Item Details Web Dynpro Component.

Note

In step 2 of the Item Details wizard, select the following fields:

Subject

Country

Vendor region

URL

Page 33: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 28

Field Details

Field Name Field Code Lookup Table

Lookup

Value

Lookup

Value ID

Subject MDM_MDM_SUBJECT Subjects Brushes 24

Country COUNTRY MDM_COUNTRIES USA 11

Vendor region

VendorRegion MDM_REGIONS New York

28

URL MDM_MDM_URL N/A N/A N/A

Page 34: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 29

The following screen captures show the MDM Data Manager view of the three lookup tables

and for each, the selected lookup value and its internal ID.

These are the values that have been selected as the default values for the three lookup fields:

Page 35: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 30

Configure the Event Handler

2. After adding the Item Details component as a used component, add a new method to the

Component Controller of the custom WD wrapper.

3. Choose Event handler as the Method Type.

4. Update the following method properties:

Property Value

Name createRecordHandler (any name)

Event Source Select the name of the Item Details

component you created in step 1 above.

Subscribed Event CreateRecord

Result showing the new Event Handler method:

Page 36: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 31

Implement the sample code in the wrapper application

5. Enter the following sample code for the createRecordHandler method. (Any custom logic

can be executed in the Event handler method).

The sample code below shows the settings of the following default values:

The first is a multi value lookup field, where a multivalue lookup ID is specified.

The second, a URL text field, where a text only value is specified.

The third and fourth fields (lookup fields), where the lookup value record ID is specified.

Page 37: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 32

Result

The runtime behavior is as follows:

In Create mode, the four chosen fields are pre-populated with the default settings.

7. Adding Custom Buttons to an Item Details

Component

You would typically use this configuration for controlling a BPM process but it can also be used in a

stand­alone custom application. Using the MDM Web Dynpro Configuration Manager, you can add a

customized tool bar with buttons, give each button a label (multilingual), and insert a unique Status

Text (for example, Reject or Approve). These buttons are visible in a separate row on the UI of the

Item Details component (above the standard buttons).

Procedure

Important

Ensure that you have carried out all prerequisite steps.

For more information, see Prerequisites on page 2.

Configure the Item Details component

...

1. Using the MDM Web Dynpro Configuration Manager, add the Approve and Reject custom

buttons in step 5 of the Item Details wizard. For each custom button, you can add label

translations.

Page 38: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 33

Example showing the Reject button:

Configure the Event Handler

2. After adding the Item Details component as a used component, add a new method to the

Component Controller of the custom WD wrapper.

Page 39: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 34

3. Choose Event handler as the Method Type.

4. Update the following method properties:

Property Value

Name completeTaskHandler (any name)

Event Source Select the the Item Details component you

created in step 1 above

Subscribed Event completeTaskEvent

Page 40: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 35

5. In the Data Modeler view, select the data link and choose Edit.

6. Map the context by creating and mapping the BPMStatus context attribute of the Item Details

component.

Note

At runtime when you choose any of the custom buttons on the UI of the Item Details

component, the BPMStatus is filled with the values of the Status Text buttons (for

example, Approve or Reject), and the Complete event is fired.

Page 41: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 36

Implement the sample code in the wrapper application

7. Enter the following sample code for the completeTaskHandler method (any custom logic can

be executed in the Event handler method). In our example, the Approve button was chosen. A

message, Approve button was pressed is printed by the wrapper application. The same

applies for the Reject button.

Result

The following is the runtime behavior when the Approve button is chosen:

The response of the wrapper application to the completeTaskHandler method is:

Page 42: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 37

8. Integrating MDM Change Tracker and MDM

WD Components

The Change Tracker is a Web Dynpro application that provides a user interface for displaying and

viewing changes stored in the MDM Change History database.

This example demonstrates how you can define a custom Web Dynpro wrapper application that uses

both Result Set and Change Tracker Web Dynpro components. A selectRecord event is fired from

the Result Set WD component which passes the record’s internal ID to the Web Dynpro Change

Tracker application. However, to list the selected record’s change history, the Change Tracker

application expects to receive the record’s permanent ID. Therefore you need to implement a sample

code that will convert the internal ID of the selected record to its permanent ID.

Prerequisites ...

You have configured a Change Tracker application.

For more information, see http://service.sap.com/installmdm71 MDM Change

Tracker Application Guide What is the Configuration Process?.

You have carried out all prerequisite steps.

Important

The name of the Change Tracker Web Dynpro software component that you import to

your workspace is MDM_WEB_UI.

For more information, see Prerequisites on page 2.

Procedure ...

1. Using the MDM Web Dynpro Configuration Manager, configure an MDM Project and a Result

Set WD component.

Note

The names of the configured Project and the Result Set WD component will be used in

the wdDoInit() method of your wrapper application.

Page 43: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 38

2. Create your custom wrapper WD application using the MDM WD Result Set component and the

Change Tracker as used components.

Reference the steps in the following procedure as a guideline: Building a Stand-Alone Web Dynpro Application on page 4. We have highlighted some of the changes that you will have to make for this example:

When setting the Dependencies include references to the Result Set WD component, the

Change Tracker application, and to the MDM Java API.

Page 44: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 39

When you have defined the Components Usage for this application, you should see the

following result:

To initialize the components, add the following code in the '//@@begin others' area

of the Component Controller:

private RepositoryBean _repositoryBean;

private UserSessionContext _userSessionContext;

Add the following sample code to initialize the custom application in the wdDoInit()

method:

_repositoryBean = new RepositoryBean();

try

{

wdThis.wdGetResultSetInterface().setRepositoryBean(_repositoryBean);

wdThis.wdGetResultSetInterface().setConfiguration("Proj01","rs01");

_userSessionContext =

_repositoryBean.getUserSessionContext();

}

catch (ConfigurationException e)

{

wdComponentAPI.getMessageManager().reportException(e.getLocalizedMessa

ge()

Note

When using the setConfiguration method, enter the configuration’s Project name

and Result Set component name as defined in the MDM Web Dynpro Configuration

Manager.

When creating an application for your Web Dynpro DC Project, choose your wrapper WD

component.

Page 45: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 40

3. Add an Event Handler as follows:

a. After adding the Result Set WD component as a used component, add a new method to

the Component Controller of the custom WD wrapper application.

b. Choose Event handler as the Method Type.

Page 46: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 41

c. Update the following method properties:

Value Description

Name recordSelectionHandler

Event Source Select the name of the Result Set component that you configured

in step 1 above.

Subscribed Event recordSelectionEvent

The result is the following newly added Event handler method with a parameter which is the permanent record ID value.

Page 47: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 42

d. Implement the following sample code in the wrapper application‘s Component Controller.

try

{

String tableCode =

wdThis.wdGetResultSetInterface().getTableCode();

RepositorySchemaEx schema =

MetadataManager.getInstance().

getRepositorySchema(_userSessionContext);

TableId tableId = schema.getTableId(tableCode);

GetPermanentIdFromRecordIdCommand command =

new

GetPermanentIdFromRecordIdCommand(_userSessionContext);

command.setRecordIds(new RecordId[]{new

RecordId(id)});

command.setTableId(tableId);

command.execute();

int[] permIds = command.getPermanentIds();

if(permIds != null && permIds.length > 0)

{

int permId = permIds[0];

wdThis.wdGetChangeTrackerInterface().setPermanentId(permId);

wdThis.wdGetChangeTrackerInterface().selectLookupTable("" +

tableId.getIdValue());

}

}

catch (SessionException e)

{

wdComponentAPI.getMessageManager().reportException(e.getLocalized

Message());

}

catch (ConnectionException e)

{

wdComponentAPI.getMessageManager().reportException(e.getLocalized

Message());

}

catch (CommandException e)

{

Page 48: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 43

wdComponentAPI.getMessageManager().reportException(e.getLocalized

Message()); }

At runtime

4. After you have built and deployed your wrapper application, add the following as a suffix to the

URL link that is generated: jdbcAlias=<JDBC_Alias> where JDBC_Alias is the value you

have configured as the JDBC alias property name.

For example

http://<Host>:<Port>/webdynpro/dispatcher/<WD_application>?jdbcAlias=<

JDBC_Alias>

For more information about configuring the JDBC alias property name, see

http://service.sap.com/installmdm71 MDM Change Tracker Application Guide

Creating a Data Source for a JDBC Connector.

5. Select the record in the Result Set WD component. The Change Tracker application displays

the change history of the selected record.

9. Other Examples

9.1 Splitting WD Components into Portal iViews

Background

In this example, we show you how to split a Web Dynpro application into its components, so that each

component takes on the appearance of an a individual portal iView.

Process

There are three main steps: ...

1. Configure the components.

Page 49: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 44

2. Add your custom wrapper WD application using the components as used components.

3. Add the iViewSplitting property in the application properties and embed the application

views in the ViewContainerUIElements.

Info

The ViewContainerUIElement offers you options when positioning views in the browser window. You can embed this UI element in the layout of an existing view and position it by selecting suitable container layouts (for example, GridLayout).

Procedure

Configure the components

...

1. Using the MDM Web Dynpro Configuration Manager, configure the following components:

Item Details (name it SplitItemDetails)

Result Set (name it SplitResultSet)

Search (name it SplitSearch)

Add your custom wrapper WD application using the components as used

components

2. Implement the procedure for creating a stand-alone application (some of the steps may not be

valid for this example).

For more information, see Building a Stand-Alone Web Dynpro Application on page 4.

3. In the Component Controller of the wrapper application, initialize the MDM repository bean for

the three used MDM components (using the project name and component name as keys for the

configurations).

Page 50: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 45

Code example:

Add the iViewSplitting property

4. Choose New to edit the wrapper application’s properties.

Page 51: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 46

5. Select Predefined as the Type of property.

6. Choose Browse to select a predefined application property.

7. Select the iViewSplitting property.

Page 52: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 47

8. Set the Value property to true.

The result is as follows:

Page 53: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 48

Embed the application Views in the ViewContainerUIElements

9. Add three ViewContainerUIElements as placeholders for containing the three views of the

WD components.

10. Repeat the above step three times.

The result is as follows:

11. Under the Windows node, open the SplitToiViewsWindow.

Page 54: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 49

12. Drag and drop the Interface View from the Palette and associate the interface view of the three

components with the corresponding View element you created in the previous step.

13. Save the changes.

14. Build and deploy the new WD application.

15. Log on to Portal as Administrator and from the Top Level Navigation, locate your WD application

in the Portal Content role.

16. Copy the Web Dynpro application.

Page 55: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 50

17. Select the target folder and Paste as PCD Object.

Result

The new object includes the properties of a Web Dynpro portal page consisting of three Web Dynpro

iViews – one for each for the three MDM Web Dynpro components:

Portal Page showing Page Content and Layout View

Page 56: How to Build MDM App Using MDM Components

How To Build Web Applications Using MDM Web Dynpro Components

July 2010 51

Portal Page showing the three iViews at runtime

Page 57: How to Build MDM App Using MDM Components

www.sdn.sap.com/irj/sdn/howtoguides