Sie sind auf Seite 1von 98

Custom development of web dynpro ESS applications using Floor Plan Manager

Agenda Harald Reiter, PMP Project Manager,

SAP AG 2006, SAP TechEd 06 / SDN Day / 2

Session Abstract Create WD components Add source code to WD components Demo and screenshots

Session Abstract: What Create a custom ESS application with the following features
Follow SAP standard roadmap design/pattern
BizCard Overview screen Detailed screen to update information Review screen to check and save/delete information Confirmation screen with navigation links

Multiple subtypes
- BizCard shows different fields per subtype

Multiple countries with different fields Dependable drop downs

SAP AG 2006, SAP TechEd 06 / SDN Day / 4

DEMO
SAP AG 2006, SAP TechEd 06 / SDN Day / 5

Session Abstract: How Follow SAP standard development model for Personal Information services
Same approach for all services Same look and feel for all services

Use DC ess/per to implement common framework including FPM Use SAP delivered configuration tables for
Use Case and Time Constraint configuration Required fields configuration Infotype/Subtype/Country specific validation checks UI structure to UI class assignment

SAP AG 2006, SAP TechEd 06 / SDN Day / 6

Session Abstract Create WD components Add source code to WD components Demo and screenshots

Create WD components: Create DC


Create a project from an existing ESS application that supports subtypes e.g. ess/us/address Will be used as template for the custom ESS application

Create a new DC For this session we only create a local development component no check in to DTR! Switch to the web dynpro perspective where you will find the new project.

SAP AG 2006, SAP TechEd 06 / SDN Day / 8

Create WD components: Used DC requirements


Ensure that the following DCs are available in your Local Development directory: pcui_gp/xssfpm pcui_gp/xssutils ess/per Define dependency of our DC to FPM DC
Our DC->DC MetaData->DC Definition->Used DCs->context menu->Add used DC

Choose the following public parts:


Local Development->MyComponents->pcui_gp/xssfpm->DC MetaData->Public Parts->FloorplanManager

Select all checkboxes except Design Time

SAP AG 2006, SAP TechEd 06 / SDN Day / 9

To create a web dynpro application using FPM, you have to make the components and component interfaces of FPM visible to that application. Therefore, you have to have the following development components available in your Local Development directory in addition to your own project:
pcui_gp~xssfpm~sap.com (FPM web dynpro component) pcui_gp~xssutils~sap.com (FPM utilities)

Additionally, for ESS applications that are based on Personal Information services e.g. bank details, personal data, etc you need to add the development component ess/per as well. To convert your application into a self-service application using FPM, you have to set the properties of your application so that it starts the FPM, rather then one of its own components. Before you can create a reference to a component of the FPM, the development component of your application must declare the FPM development component as Used DCs. You have to add the following development components to the Used DCs list:
pcui_gp~xssfpm pcui_gp~xssutils ess/per
- Only if you develop an ESS application based on Personal Information services

Create WD components: Declaration of additional used DCs Define dependency of our DC to FPM Utils DC
Our DC->DC MetaData->DC Definition->Used DCs->context menu->Add used DC

Choose the following public parts:


Local Development->MyComponents->pcui_gp/xssutils->DC MetaData->Public Parts->FPMUtils

Select all checkboxes except Design Time

Define dependency of our DC to International Personal Information DC


Our DC->DC MetaData->DC Definition->Used DCs->context menu->Add used DC

Choose the following public parts:


Local Development->MyComponents->ess/per->DC MetaData>Public Parts->InternationalPersInfo

Select all checkboxes except Design Time

SAP AG 2006, SAP TechEd 06 / SDN Day / 10

10

Create WD components: Configuration Component


A DC that uses FPM has three different types of components:
Configuration Components Business Logic Components Visual Application Components A configuration component (CC), specifying the configuration of our application
CcAddress FcAddress VcAddressDetail VcAddressOverview VcAddressReview

Our DC needs the following Web Dynpro components:


The necessary business logic component (BLC) for backend access The necessary visual application components (VACs) for the visual parts of your application

In the web dynpro perspective expand the node for Web Dynpro and select Web Dynpro Components. Press the right mouse button and select Create Web Dynpro Component. Deactivate checkbox to embed new view as the configuration component does not have any views!
SAP AG 2006, SAP TechEd 06 / SDN Day / 11

Naming Conventions
Component Name:
- Use prefix Cc to identify the component as configuration component this is not mandatory but helps in keeping the components structured.

Component Package:
- Use suffix cc to package all configuration component objects of this application.

Window Name & Window Package:


- Use the default values.

We use different packages for every component. For the CC and the BLC, this is merely convenience. For the VACs, however, different packages must be used, because every VAC will have a window named IVACWindow and it is impossible to have a duplicate window name inside a single package. The BLC and CC are invisible components. Therefore, when creating the component, it is safe to deselect the Embed New View checkbox.

11

Create WD components: CC: Interface & Message pool Interface setup for FPM
A configuration component has to implement the interface IXssAppConf CcAddress->Component Interface->Implemented Interfaces->Add->Select IXssAppConf Please note that CCs dont contain any visual parts its save to delete any view/window!

Message pool setup for Roadmap titles


Double-click on message pool and select Add Message

SAP AG 2006, SAP TechEd 06 / SDN Day / 12

Message pool texts for Roadmap titles


For the Overview screen enter/select:
- Message Key: - Message Type: - Message Text: OverviewROP standard Overview

For the Detailed screen enter/select:


- Message Key: - Message Type: - Message Text: DetailROP standard Edit

For the Review screen enter/select:


- Message Key: - Message Type: - Message Text: ReviewROP standard Review and Save

For the Confirmation screen enter/select:


- Message Key: - Message Type: - Message Text: ConfirmationROP standard Completed

12

Create WD components: Business Logic Component


BLCs are invisible components that handle communication between the application and the backend system They use one or more web dynpro models and prepare the frontend data to be sent to the backend and the backend data to be displayed in a VAC In the web dynpro perspective expand the node for Web Dynpro and select Web Dynpro Components Press the right mouse button and select Create Web Dynpro Component Deactivate checkbox to embed new view as the business logic component does not have any views! All business logic components have to implement the interface IBLC Please note that BLCs dont contain any visual parts its save to delete any view/window!

SAP AG 2006, SAP TechEd 06 / SDN Day / 13

Message pool text for user messages


For the delete confirmation message enter/select:
- Message Key: - Message Type: - Message Text: DeleteConfirmation standard The following {0} data will be deleted

For the delete review message enter/select:


- Message Key: - Message Type: - Message Text: DeleteReview standard The following {0} data was deleted

For the edit review message enter/select:


- Message Key: - Message Type: - Message Text: EditReview standard Please check {0} below

For the edit confirmation message enter/select:


- Message Key: - Message Type: - Message Text: EditConfirmation standard The changes you have made to your {0} data have been saved.

13

Create WD components: Model & RFCs for IT operations


The BLC needs a model to call the RFCs. Before you can continue with the import of the model we need to make sure that an R/3 function group and RFCs within that function group are available for our application. In SAP backend copy function group: HRXSS_PER_P0006_US
This includes also all RFCs of that function group!

Create a new DDIC structure and table type to replace SAP standard components in copied RFCs
Only includes fields that you will need to manage performance!

SAP AG 2006, SAP TechEd 06 / SDN Day / 14

Custom DDIC structure

Custom DDIC table type

14

Create WD components: Model & RFCs for Matchcodes


Create RFCs to populate drop down fields
List of countries List of states for selected country List of priorities (Emergency Contact)

List of countries

List of states

List of priorities

SAP AG 2006, SAP TechEd 06 / SDN Day / 15

DDIC structure and table type for country list RFC

DDIC structure and table type for state list RFC

DDIC structure and table type for priority list RFC

15

Create WD components: Create Model & JCO Connections


When generating the adaptive RFC models for your application the system asks for Jco destinations which should be used by this model later as default systems
It is necessary to define these Jco destination before creating the models Address->Context Menu->Properties->Web Dynpro references->JCO references->Add
- SAP_R3_HumanResources - SAP_R3_HumanResources_MetaData

Create Model
In this demo all RFCs are placed in one model Address->Web Dynpro->Models->Context Menu->Create Model->Select Import Adaptive RFC Model

On the next screen enter the logon data for the SAP backend

SAP AG 2006, SAP TechEd 06 / SDN Day / 16

Model setup
Model Name: Model Package: Default logical system name for model instances: Default logical system name for RFC metadata: Logical Dictionary: (*) Function group name in SAP backend ZHR_ESS_P0006 (*) com.demo.hr.ess.address.model WD_MODELDATA_DEST WD_RFC_METADATA_DEST ZHR_ESS_P0006

16

Create WD components: Create Model cont.


Enter the function group name: ZHR_ESS_P0006 in the related field and push the Search button
Select all RFCs of this function group

Our DC should contain the following elements:

SAP AG 2006, SAP TechEd 06 / SDN Day / 17

17

Create WD components: Implementing the BLC


All necessary business logic and backend access should be placed in the BLC FcAddress
We need to define the usage of the model to FcAddress
- FcAddress->Used Models->Add ZHR_ESS_P0006

We need to create a reference to the BLC of the International PersInfo DC


- FcAddress->Used Web Dynpro Components->Add Used Component - Enter FcPersInfo - Press the BROWSE button and select FcPersInfo in the dialog window - Press OK button and then select manual in lifecycle drop down field.

We need to setup the component controller

SAP AG 2006, SAP TechEd 06 / SDN Day / 18

To setup the component controller perform the following steps:


Double-click on component controller in FcAddress Press the ADD button in the Properties tab to add a required controller Select FcPersInfo in the dialog window

18

Create WD components: BLC: CC: Create context nodes


To use the RFCs from FcAddress we need to create context nodes that allows us to fill the import parameters, execute the RFCs and to retrieve the export parameters Create the following context nodes in the component controller of FcAddress
DeleteInfotype EditInfotype F4_Values ModifyInfotype NewInfotype ReadInfotype SelectedInfotype

Additionally add the following context nodes to populate drop down fields
CountryMc StateMc PriorityMc UI Text
Important Set cardinality to 0..n Set selection to 1..1

Add the following value nodes to manage UI elements and text instructions

SAP AG 2006, SAP TechEd 06 / SDN Day / 19

Open the component controller by double-clicking on FcAddress->Component Controller Go to the Context tab Create a node by clicking
Context->Context Menu->New->Model Node Enter the name e.g. SelectedInfotype

19

Create WD components: BLC: CC: Create value nodes


Add the following value nodes to manage UI elements and text instructions
UI Text
Important Set cardinality and selection to 1..1

Add the following value attributes to value node UI


isEmergencyContactVisible(*) isAreaCodeVisible(*) isCountyEntryVisible(*) isRegionRequired(**) isZipRequired(**) RegionLabel (String) ZipLabel (String)
**Set type to com.sap.ide.webdynpro.uielementdefinitions.State *Set type to com.sap.ide.webdynpro.uielementdefinitions.Visibility

Add the following value attributes to value node Text


CreditCardHeader (String) CreditCardInstructions (String)

SAP AG 2006, SAP TechEd 06 / SDN Day / 20

For all is.Visible value attributes we need to set the type to


com.sap.ide.webdynpro.uielementdefinitions.Visibility

In the Properties of the value attribute we need to select the type selection button String is the default type! A dialog window appears where we need to select radio button for Dictionary Simple Type and then expand the Local Dictionary node and node com.sap.ide.webdynpro.uielementdefinitions

Scroll down till we find Visibility type and push OK button to select it For isRegionRequired and isZipRequired value attributes we perform the same steps and select State in the list of available types
20

Create WD components: BLC: CC: Bind context nodes


Bind the following context nodes to the corresponding nodes in the model
DeleteInfotype EditInfotype ModifyInfotype NewInfotype ReadInfotype CountryMc StateMc PriorityMc
Sub nodes are automatically created for each model input node with the same name. Web dynpro does not allow context nodes with the same name in the same context. Sub nodes should always be renamed to prevent conflicts!

Please note to rename generated sub nodes! Rename nodes to

Bind the following context node to export structure of the related model class
SelectedInfotype

Perform context mapping for the following context node


F4_Values
- Select related context node in FcPersInfo

SAP AG 2006, SAP TechEd 06 / SDN Day / 21

To setup model binding perform the following steps


Select the context node->Context Menu->Edit Model Binding Select corresponding node e.g. for EditInfotype node select Z_HRESS_Edit_P0006_Input Select Next button Expand EditInfotype folder and all sub folders Select all sub folders first and then the main folder which will also select any import parameters

Important properties for drop down field context nodes


CountryRecords & PriorityRecords
- cardinality - selection - singleton 0..n 1..1 false

StateRecords
- cardinality - selection - singleton 0..n 1..1 true

21

Create WD components: BLC: CC: Methods


Copy methods from SAP standard US Address service
Copy/Paste all methods to our own custom service Ignore warning message that source code could not be located! We will add source code later to the methods

Service specific methods


getCountries getStates - Country getPriorities - Employeenumber - Priority selectCountry - Country selectState - State selectPriority - Priority setDefaultCountry
- Country

setDefaultState
- State

setDefaultPriority
- Priority

setInstructions setUI
- Country

setUI_EMCVisible
- Subtype

SAP AG 2006, SAP TechEd 06 / SDN Day / 22

22

Create WD components: BLC: IC: Create context nodes


We need to expose the nodes containing the address data to the visual components (will be created later!) This is done by maintaining the interface controller of FcAddress Open the interface controller of FcAddress Add the controller FcAddress to the list of required controllers Create the following FPM context nodes
InfotypeList SelectedInfotype

Create also the following context nodes to populate drop down fields
CountryMc StateMc PriorityMc

Additionally create the following value nodes


UI Texts
SAP AG 2006, SAP TechEd 06 / SDN Day / 23

23

Create WD components: BLC: IC: Bind context nodes


Perform context mapping to the context nodes of the component controller of FcAddress from the interface controller
CountryMc
- Bind to CountryOutput node and select CountryRecords node in the context mapping dialog window

InfotypeList
- Bind to ReadRecords node of node ReadOutput and ReadInfotype and select all fields

PriorityMc
- Bind to PriorityOutput node and select PriorityRecords node in the context mapping dialog window

SelectedInfotype
- Bind to SelectedInfotype node and select all fields

StateMc
- Bind to StateOutput node and select StateRecords node in the context mapping dialog window

Texts
- Bind to Texts node and select all fields

UI
- Bind to UI node and select all fields

SAP AG 2006, SAP TechEd 06 / SDN Day / 24

24

Create WD components: BLC: IC: Methods


We need to expose the methods of the component controller to the visual components (source code will be added later!) This is done by setting up methods in the interface controller. The interface controller requires the same methods and parameters as the component controller except setInstructions and addValueHelp Copy the methods from the component controller to the interface controller - except setInstructions and addValueHelp
Please note that you copy also the source code if you add source code to the methods in the component controller and then copy those methods to the interface controller You will then need to replace the source code as the interface controller methods only call the component controller methods! This should not happen though if you follow this procedure as there is not code yet available in the component controller methods

SAP AG 2006, SAP TechEd 06 / SDN Day / 25

25

Create WD components: Visual Application Component


VACs are the building blocks of perspectives. They display data on the screen, handle user input, and trigger FPM events. We need to create three VACs
Overview screen Detailed screen Review screen

Using the Overview screen as an example perform the following steps


In the web dynpro perspective expand the node for Web Dynpro and select Web Dynpro Components Press the right mouse button and select Create Web Dynpro Component Deactivate checkbox to embed new view as we are going to add our own view later! Delete the created window component in each VAC because a default window (IVACWindow) will be added automatically when we add FPM interface IVAC

Perform the same steps for the other screens as well following the naming conventions!
SAP AG 2006, SAP TechEd 06 / SDN Day / 26

Naming conventions
Use prefix Vc in the component name to identify the component as visual application component this is not mandatory but helps in keeping the components structured.

Use suffix vc.overview, vc.detail, vc.review to package the visual application components for the corresponding view of this project.
It is mandatory to use different packages for each visual application component, because every VAC will have a window named IVACWindow and it is impossible to have a duplicate window name inside a single package.

26

Create WD components: Visual Application Component cont. We are done with the creation of web dynpro components after you created all VACs
Expand the Component Interface node of each VAC and select Implemented Interfaces->Context Menu->Add In the dialog window select IVAC and push OK button Push the FINISH button on the next dialog window to confirm the window name

All visual application components have to implement the interface IVAC

You will see the interface and window added to each VAC

SAP AG 2006, SAP TechEd 06 / SDN Day / 27

27

Create WD components: Visual Application Component cont. We need to create references to various BLCs to be able to trigger events and display/update data For VcAddressOverview only we need to create a reference to the BLC of the FPMUtils DC
VcAddressOverview>Used Web Dynpro Components->Add Used Component
- Enter FcEmployeeServices - Press the BROWSE button and select FcEmployeeServices in the dialog window

- Press OK button and then select manual in lifecycle drop down field.

For all three VACs we need to create a reference to the BLC of International PersInfo DC and of cause our own BLC - FcAddress
VcAddressxxx>Used Web Dynpro Components->Add Used Component
- Enter FcPersInfo - Press the BROWSE button and select FcPersInfo in the dialog window

Repeat the step to enter/add FcAddress

SAP AG 2006, SAP TechEd 06 / SDN Day / 28

28

Create WD components: VAC: CC: Overview


We are going to implement the navigation between the different perspectives, which is done in the component controller of each VAC Add the required controllers to the component controller of the VAC
FcAddress FcPersInfo FcEmployeeServices

Create model/value nodes and perform binding


Model nodes
CountryMc InfotypeList SelectedInfotype Subtypes Edit Context mapping->FcAddress->CountryMc->CountryRecords Edit Context mapping->FcAddress->InfotypeList->All fields Edit Context mapping->FcAddress->SelectedInfotype>All fields Edit Context mapping->FcPersInfo->Subtypes>All fields Edit Context mapping->FcPersInfo->Default_Begda Edit Context mapping->FcAddress->Text->All fields Edit Context mapping->FcAddress->UI>RegionLabel & ZipLabel

Model attribute
- Default_Begda

Value nodes
- Text - UI

SAP AG 2006, SAP TechEd 06 / SDN Day / 29

29

Create WD components: VAC: CC: Overview methods


Copy methods from SAP standard US Address service (VCPerAddressUSOverview)

Copy/Paste all methods to our own VAC Ignore warning message that source code could not be located! We will add source code later to the methods

SAP AG 2006, SAP TechEd 06 / SDN Day / 30

30

Create WD components: VAC: IC: Overview&Detail&Review


We need to expose the methods of the component controller to the view component that will be created later
This is done via the interface controller of the VAC

No context nodes are required but we do need to add the component controller of the VAC to the list of required controllers of the interface controller

This will automatically add methods of the component controller to the interface controller of the VAC We compare the methods of our VAC with the methods of the interface controller of SAP standard US Address service (VCPerAddressUSOverview)
Copy any missing methods
- isHidingPossible - isSelectionChangePossible

Perform the above mentioned steps for the other two VACs as well after you completed the component controller setup!

SAP AG 2006, SAP TechEd 06 / SDN Day / 31

31

Create WD components: VAC: Message Pool: Overview


We use the message editor to setup description for screen elements (Buttons, Headers, Labels, etc) Double-click on message pool in the VAC Use the Add Message button to add descriptions
Button texts
New Delete Edit Cancel

BizCard header
- EffectiveAsOf - EffectiveAsOfToday

Service name in success message


- ITName

BizCard field labels for mailing address


- BizCardField1 to BizCardField5

BizCard field labels for emergency contact


- BizCardField6 to BizCardField8

SAP AG 2006, SAP TechEd 06 / SDN Day / 32

Setup of messages in message edit


BizCard field labels are setup with
- Message type set to text - Message text type set to informationmessage

32

Create WD components: VAC: View: Overview


We need to create a view element for the BizCard and embed it into the FPM window component VcAddressOverview->Views->Context menu->Create View Enter BizCardsView as view name everything else is OK Embed view in FPM window component VcAddressOverview->Windows->IVACWindow->Context menu->Embed View
Select Embed existing view Select BizCardsView and push FINISH button

Next we are going to add the component controller of the VAC to the view controller
Double-click on BizCardsView and select Properties tab Select the correct VAC controller dont select the web dynpro component interface controller which has the same name!

SAP AG 2006, SAP TechEd 06 / SDN Day / 33

33

Create WD components: VAC: View: Overview: Context


To pass the data between BLCs and this VAC (and also to trigger events) we need to create context nodes and actions Create model/value nodes and perform binding
Model nodes
- InfotypeList - Subtypes Edit Context mapping->VcAddressOverview->InfotypeList->All fields Edit Context mapping-> VcAddressOverview->Subtypes->All fields

Model attribute
- Default_Begda Edit Context mapping-> VcAddressOverview->Default_Begda

Value nodes
- UI - Text Edit Context mapping-> VcAddressOverview->UI->All fields Edit Context mapping-> VcAddressOverview->Text->All fields

Create actions
Cancel
- No parameters

Delete Edit New

SAP AG 2006, SAP TechEd 06 / SDN Day / 34

To setup additional actions select the Actions tab in BizCardsView


Push the New button Setup delete action

Setup edit action

Setup new action

34

Create WD components: VAC: View: Overview: Layout


Select Layout tab in BizCardsView and make sure that you have the Outline and Properties view visible in NWDS Compare BizCardsView outline/properties of VcAddressOverview with BizCardsView outline/properties of VcPerAddressUSOverview
Change properties of RootUIElementContainer Delete DefaultTextView Copy rootContainer Add transparent container for instructions
- InstructionContainer - layout RowLayout - width 60%

Add text field for instruction header to instruction container


- DinersClubHeaderText - Bind text property to context node text and attribute CreditCardHeader

Add text field for instruction text to instruction container


- DinersClubInstructionText - Bind text property to context node text and attribute CreditCardInstructions

SAP AG 2006, SAP TechEd 06 / SDN Day / 35

Properties of RootUIElementContainer

Properties of InstructionContainer

Properties of DinersClubHeaderText and DinersClubInstructionText

35

Create WD components: VAC: CC: Detail


We are going to implement the navigation between the different perspectives, which is done in the component controller of each VAC Add the required controllers to the component controller of the VAC
FcAddress FcPersInfo

Create model/value nodes and perform binding


Model nodes
SelectedInfotype Subtypes CountryMc StateMc PriorityMc Edit Context mapping->FcAddress->SelectedInfotype->All fields Edit Context mapping->FcPersInfo->Subtypes->All fields Edit Context mapping->FcAddress->CountryMc->CountryRecords Edit Context mapping->FcAddress->StateMc->StateRecords Edit Context mapping->FcAddress->PriorityMc->PriorityRecords Edit Context mapping->FcPersInfo->Default_Begda Edit Context mapping->FcAddress->UI->All fields Edit Context mapping->FcPersInfo->All fields and sub folders

Model attribute
- Default_Begda

Value nodes
- UI - FutureDay

SAP AG 2006, SAP TechEd 06 / SDN Day / 36

36

Create WD components: VAC: CC: Detail methods


Copy methods from SAP standard US Address service (VCPerAddressUSDetail)
Copy/Paste all methods to our own VAC Ignore warning message that source code could not be located! We will add source code later to the methods

Add the following service specific methods and parameters


selectCountry
- Country

selectState
- State

selectPriority
- Priority

SAP AG 2006, SAP TechEd 06 / SDN Day / 37

37

Create WD components: VAC: View: Detail


We need to create a view element for the detailed screen and embed it into the FPM window component VcAddressDetail->Views->Context menu->Create View Enter DetailView as view name everything else is OK Embed view in FPM window component VcAddressDetail->Windows->IVACWindow->Context menu->Embed View
Select Embed existing view Select DetailView and push FINISH button

Next we are going to add the component controller of the VAC to the view controller
Double-click on DetailView and select Properties tab Select the correct VAC controller dont select the web dynpro component interface controller which has the same name!

SAP AG 2006, SAP TechEd 06 / SDN Day / 38

38

Create WD components: VAC: View: Detail: Context


To pass the data between BLCs and this VAC (and also to trigger events) we need to create context nodes Actions will be done later when we setup the drop down fields for Country, State and Priority! Create model/value nodes and perform binding
Model nodes
SelectedInfotype Subtypes CountryMc StateMc PriorityMc
Edit Context mapping->VcAddressDetail->SelectedInfotype->All fields Edit Context mapping-> VcAddressDetail->Subtypes->All fields Edit Context mapping-> VcAddressDetail->CountryMc->CountryRecords Edit Context mapping-> VcAddressDetail->StateMc->StateRecords Edit Context mapping-> VcAddressDetail->PriorityMc->PriorityRecords Edit Context mapping-> VcAddressDetail->Default_Begda Edit Context mapping-> VcAddressDetail->UI->All fields Edit Context mapping-> VcAddressDetail->FutureDay->All fields/ subfolders

Model attribute
- Default_Begda

Value nodes
- UI - FutureDay

SAP AG 2006, SAP TechEd 06 / SDN Day / 39

39

Create WD components: VAC: View: Detail: Layout


Select Layout tab in DetailView and make sure that you have the Outline and Properties view visible in NWDS Set layout attribute of RootUIElementContainer to GridLayout and width attribute to 100% Set the following properties for DefaultTextView element
design text paddingBottom header3 Select field Stext of context node Subtypes medium

Add a transparent container for Emergency Contact fields


EmergencyContactContainer
- Set visible property to field isEmergencyContactVisible of context node UI

Add a transparent container for Address fields


AddressContainer

Add a transparent container for validity start date


DateContainer
- layout - stretchedHorizontally MatrixLayout false
SAP AG 2006, SAP TechEd 06 / SDN Day / 40

40

Create WD components: VAC: View: Detail: Layout cont.


Add the following transparent containers to AddressContainer
AddressDataContainer and TelephoneContainer
- layout - stretchedHorizontally CountryLabel Country CareOfLabel CareOf AddressLabel Address Address2Label Address2 CityLabel MatrixLayout false City StateLabel State ZipLabel Zip CountyLabel County EmailLabel Email InputField Label DropDownByIndex Label InputField Label InputField Label InputField

Add the following elements to AddressDataContainer


Label DropDownByIndex Label InputField Label InputField Label InputField Label

Add the following elements to TelephoneContainer


TelephoneLabel AreaCode Telephone Label InputField InputField

SAP AG 2006, SAP TechEd 06 / SDN Day / 41

Specific label properties


text visible Width CountryLabel & TelephoneLabel 100px CountyLabel StateLabel ZipLabel use a descriptive text set to field RegionLabel of context node UI set to field ZipLabel of context node UI set to visible set to field isCountyEntryVisible of context node UI

Input field properties


- CareOf
length value tooltip 30 set to field Name2 of context node SelectedInfotype Care of

Zip
state value set to field isZipRequired of context code UI set to field Pstlz of context node SelectedInfotype

County
length value 20 set to field Ort02 of context node SelectedInfotype -

- Address
length value tooltip state 30 set to field Stras of context node SelectedInfotype Street and House number required

visible set to field isCountyEntryVisible of context node UI

Email
length value 35 set to field Zzemail_Id of context node SelectedInfotype

- Address2
length value tooltip 30 set to field Locat of context node SelectedInfotype Additional address information

AreaCode
tooltip value Area code set to field Areac of context node SelectedInfotype

- City
length value tooltip state 20 set to field Ort01 of context node SelectedInfotype City requied

visible set to field isAreaCodeVisible of context node UI

Telephone
length tooltip value 20 Telephone number set to field Telnr of context node SelectedInfotype

41

Create WD components: VAC: View: Detail: Layout cont.


Properties for drop down fields
Country
- texts set to field Landx of context node CountryMc->CountryRecords - state required - onselect Push new action button to setup CountrySelect action

State
- texts set to field State_Text of context node StateMc->StateRecords - state set to field isRegionRequired of context node UI - onselect Push new action button to setup StateSelect action

SAP AG 2006, SAP TechEd 06 / SDN Day / 42

42

Create WD components: VAC: View: Detail: Layout cont.


Add the following transparent container to EmergencyContactContainer
EMCDataContainer
- layout - stretchedHorizontally MatrixLayout false

Add the following elements to EMCDataContainer


ContactPriorityLabel ContactPriority ContactNameLabel ContactName RelationshipLabel Relationship LanguageLabel Language Label DropDownByIndex Label InputField Label InputField Label DropDownByKey

Properties for drop down fields


ContactPriority
- texts - state - onselect set to field Priority_Text of context node PriorityMc->PriorityRecords required Push new action button to setup PrioritySelect action set to field Zz_Cnt_Langu of context node SelectedInfotype required Push new action button to setup Dummy action

Language
- selectedKey - state - onselect

SAP AG 2006, SAP TechEd 06 / SDN Day / 43

Specific label properties


Width - ContactPriorityLabel 100px

Input field properties


- ContactName
- value - tooltip - state set to field Zz_Cnt_Name of context node SelectedInfotype Contact Name required set to field Zz_Cnt_Relat of context node SelectedInfotype Relationship required

- Relationship
- value - tooltip - state

43

Create WD components: VAC: View: Detail: Layout cont.


Add the following elements to DateContainer
Radio_asofdate Begda RadioButtonGroupByIndex InputField

Properties for Radio_asofdate

Properties for Begda

SAP AG 2006, SAP TechEd 06 / SDN Day / 44

44

Create WD components: VAC: CC: Review


We are going to implement the navigation between the different perspectives, which is done in the component controller of each VAC Add the required controllers to the component controller of the VAC
FcAddress FcPersInfo

Create model/value nodes and perform binding


Model nodes
- SelectedInfotype - Subtypes Edit Context mapping->FcAddress->SelectedInfotype->All fields Edit Context mapping->FcPersInfo->Subtypes->All fields Edit Context mapping->FcPersInfo->Default_Begda Edit Context mapping->FcAddress->UI->All fields Edit Context mapping->FcPersInfo->All fields and sub folders

Model attribute
- Default_Begda

Value nodes
- UI - FutureDay

SAP AG 2006, SAP TechEd 06 / SDN Day / 45

45

Create WD components: VAC: CC: Review methods


Copy methods from SAP standard US Address service (VCPerAddressUSReview)

Copy/Paste all methods to our own VAC Ignore warning message that source code could not be located! We will add source code later to the methods

SAP AG 2006, SAP TechEd 06 / SDN Day / 46

46

Create WD components: VAC: View: Review


We need to create a view element for the review screen and embed it into the FPM window component VcAddressReview->Views->Context menu->Create View Enter ReviewView as view name everything else is OK Embed view in FPM window component VcAddressReview->Windows->IVACWindow->Context menu->Embed View
Select Embed existing view Select ReviewView and push FINISH button

Next we are going to add the component controller of the VAC to the view controller
Double-click on ReviewView and select Properties tab Select the correct VAC controller dont select the web dynpro component interface controller which has the same name!

SAP AG 2006, SAP TechEd 06 / SDN Day / 47

47

Create WD components: VAC: View: Review: Context


To pass the data between BLCs and this VAC (and also to trigger events) we need to create context nodes Create model/value nodes and perform binding
Model nodes
- SelectedInfotype - Subtypes
Edit Context mapping->VcAddressReview->SelectedInfotype->All fields Edit Context mapping->VcAddressReview->Subtypes->All fields Edit Context mapping->VcAddressReview->UI->All fields Edit Context mapping->VcAddressReview->FutureDay->All fields/ subfolders

Value nodes
- UI - FutureDay

SAP AG 2006, SAP TechEd 06 / SDN Day / 48

48

Create WD components: VAC: View: Review: Layout


Select Layout tab in ReviewView and make sure that you have the Outline and Properties view visible in NWDS Set layout attribute of RootUIElementContainer to GridLayout and width attribute to 100% Set the following properties for DefaultTextView element
design text paddingBottom header3 Select field Stext of context node Subtypes medium

Add a transparent container for Emergency Contact fields


EmergencyContactContainer
- Set visible property to field isEmergencyContactVisible of context node UI

Add a transparent container for Address fields


AddressContainer

Add a transparent container for validity start date


DateContainer
- layout - stretchedHorizontally MatrixLayout false
SAP AG 2006, SAP TechEd 06 / SDN Day / 49

49

Create WD components: VAC: View: Review: Layout cont.


Add the following transparent containers to AddressContainer
AddressDataContainer and TelephoneContainer
- layout - stretchedHorizontally CountryLabel Country CareOfLabel CareOf AddressLabel Address Address2Label Address2 CityLabel Label TextView Label TextView Label TextView Label TextView Label MatrixLayout false City StateLabel State ZipLabel Zip CountyLabel County EmailLabel Email TextView Label TextView Label TextView Label TextView Label TextView

Add the following elements to AddressDataContainer

Add the following elements to TelephoneContainer


TelephoneLabel AreaCode Telephone Label TextView TextView

SAP AG 2006, SAP TechEd 06 / SDN Day / 50

Specific label properties


text visible Width CountryLabel & TelephoneLabel 100px CountyLabel StateLabel ZipLabel use a descriptive text set to field RegionLabel of context node UI set to field ZipLabel of context node UI set to visible set to field isCountyEntryVisible of context node UI

Text view field properties


- Country
text

set to field Land1_Text of context node SelectedInfotype Country

Zip
text set to field Pstlz of context node SelectedInfotype

tooltip

- CareOf
text

County
set to field Name2 of context node SelectedInfotype Care of text set to field Ort02 of context node SelectedInfotype visible set to field isCountyEntryVisible of context node UI

tooltip

- Address
text

Email
set to field Stras of context node SelectedInfotype Street and House number text set to field Zzemail_Id of context node SelectedInfotype

tooltip

AreaCode
tooltip text Area code set to field Areac of context node SelectedInfotype -

- Address2
text

set to field Locat of context node SelectedInfotype Additional address information

tooltip

Telephone
tooltip text Telephone number set to field Telnr of context node SelectedInfotype -

City
text

set to field Ort01 of context node SelectedInfotype City

tooltip

State
text

set to field Sate_Text of context node SelectedInfotype

50

Create WD components: Define web dynpro application


All applications using FPM have to start the FPM component itself and pass the relevant configuration controller as an application property FPM reads the configuration controller and creates the specified web dynpro components (BLC and VAC) Expand Web Dynpro Select Applications->Context Menu->Creat Application Push the Next button and select radio button to use existing component on the next screen

Select the following FPM components Double-click on the created application and then select the application properties tab Add the following application properties

SAP AG 2006, SAP TechEd 06 / SDN Day / 51

Define the application properties


Authentication
- Press the NEW button to open a dialog window. - Select the radio button for Pre defined. - Push the Browse button and select Authentication from the dialog window. - Select true from the drop down box.

sap.xss.configurationComponentDC
- Press the NEW button to open a dialog window. - Select the radio button for Self defined. - Enter the following information: Name: Value: sap.xss.configurationComponentDC demo.com/ess~address

sap.xss.configurationComponentName
- Press the NEW button to open a dialog window. - Select the radio button for Self defined. - Enter the following information: Name: Value: sap.xss.configurationComponentName com.demo.hr.ess.address.cc.CcAddress

51

Session Abstract Create WD components Add source code to WD components Demo and screenshots

52

Add source code to WD components: CcAddress: IC


Please note
Source code needs to be added in the coding area between //@@begin and //@@end.
- Your source code will be removed when rebuilding the project otherwise

Import statements
- Organize your imports to include the necessary import statements - Context menu->Source->Organize Imports - Ctrl-Shift-O

Method
loadConfiguration getCAPState
- return helper.getCAPState(perspective);

getNextPerspective
- return helper.getNextPerspective(currentPerspective, eventName);

getStartPerspective
- return helper.getStartPerspective();

getROPState
- return helper.getROPState(perspective);

Others section
- CcHelper helper;

SAP AG 2006, SAP TechEd 06 / SDN Day / 53

Source code for loadConfiguration //@@begin loadConfiguration() helper = new CcHelper( fpm, wdThis.wdGetAPI(), "demo.com/ess~address", "com.demo.hr.ess.address.vc.overview.VcAddressOverview", "com.demo.hr.ess.address.vc.detail.VcAddressDetail", "com.demo.hr.ess.address.vc.review.VcAddressReview"); //@@end

53

Add source code to WD components: FcAddress: CC


Method
wdDoExit addValueHelp
- wdThis.wdGetFcPersInfoInterface().getF4(); - F4TextHelper.SetF4Values(wdThis.wdGetAPI(), wdContext.nodeF4_Values());

cleanup
- clearSelection();

clearSelection deleteRecord getCountries getPriorities getStates modifyRecord newRecord onInit readRecord

selectCountry selectPriority selectRecord selectState setDefaultCountry seteDefaultPriority setDefaultState setInstructions setUI setUI_EMCVisible

SAP AG 2006, SAP TechEd 06 / SDN Day / 54

Source code for wdDoExit


//@@begin wdDoExit() fpm.registerContext(wdContext); try { fpm.exitCalled(); } catch (Exception e) { } //@@end

Source code for clearSelection


//@@begin clearSelection() wdThis.wdGetContext().nodeSelectedInfotype().invalidate(); wdContext.nodeSelectedInfotype().bind( (Zhcmt_Bsp_Pa_R0006) model.createModelObject( Zhcmt_Bsp_Pa_R0006.class)); //@@end

Source code for getCountries


//@@begin getCountries() try { fpm.getMessageManager().deleteAllMessages( wdThis.wdGetAPI().getComponent()); wdContext.nodeCountryMc().bind( (Z_Hress_P0006_Countrymc_Input) model.createModelObject( Z_Hress_P0006_Countrymc_Input.class)); wdContext.currentCountryMcElement().setI_Withemptyline(false); wdContext.currentCountryMcElement().modelObject().execute(); //An exception is triggered and application will be terminated. Only first //message in messages node will be displayed MessageHelper.raiseException( fpm, wdThis.wdGetAPI(), wdContext.nodeCountryMessages()); } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

54

Add source code to WD components: FcAddress: IC


Methods
cleanup
wdThis.wdGetFcAddressController().cleanup();

readRecord
wdThis.wdGetFcAddressController().readRecord();

clearSelection
wdThis.wdGetFcAddressController().clearSelection();

selectCountry
wdThis.wdGetFcAddressController().selectCountry(Country);

deleteRecord
wdThis.wdGetFcAddressController().deleteRecord(selection);

selectPriority
wdThis.wdGetFcAddressController().selectPriority(Priority);

getCountries
wdThis.wdGetFcAddressController().getCountries();

selectRecord
wdThis.wdGetFcAddressController().selectRecord(selection);

getPriorities
wdThis.wdGetFcAddressController().getPriorities(Employeenu mber, Priority);

selectState
wdThis.wdGetFcAddressController().selectState(State);

getStates
wdThis.wdGetFcAddressController().getStates(Country);

setDefaultCountry
wdThis.wdGetFcAddressController().setDefaultCountry(Count ry);

modifyRecord
wdThis.wdGetFcAddressController().modifyRecord();

setDefaultPriority
wdThis.wdGetFcAddressController().setDefaultPriority(Priority );

newRecord
wdThis.wdGetFcAddressController().newRecord(subtype);

setDefaultState
wdThis.wdGetFcAddressController().setDefaultState(State);

onCleanup
wdThis.wdGetFcAddressController().onCleanup();

setUI
wdThis.wdGetFcAddressController().setUI(Country);

onInit
wdThis.wdGetFcAddressController().onInit(fpm);

setUI_ECMVisible
wdThis.wdGetFcAddressController().setUI_EMCVisible(Subty pe);
SAP AG 2006, SAP TechEd 06 / SDN Day / 55

55

Add source code to WD components: BizCard Helper class


The BizCard generation on the overview screen is done by the OverviewHelper.java class of ess/per We want to display different fields for different subtypes in the BizCard on the overview screen To do that we need to copy the helper class to our own web dynpro project, rename it and then change it Create a web dynpro project for DC ess/per Select Navigator tab in web dynpro perspective Locate BizCard helper class in DC ess/per and copy it
OverviewHelper.java

Expand src folder of our own web dynpro project Create new folder in address folder
Helpers

Paste BizCard helper class into folder helpers in our web dynpro project Rename class from OverviewHelper.java to AddressOverviewHelper.java
Check properties of helper class and deactivate the read only flag

Double-click on address overview helper class and perform necessary code changes
Check source code here!

SAP AG 2006, SAP TechEd 06 / SDN Day / 56

Locate BizCard helper class in DC ess/per Open folder src->packages->com->sap->xss->per->helpers

Create new folder for helper class in folder address in our own web dynpro project Select folder address->Context Menu->New->Other->Simple>Folder->enter name: helpers

56

Add source code to WD components: VcAddressOverview: CC Methods


wdDoExit cancel
- wdThis.wdGetFcPersInfoInterface().cancel();

create delete edit isDirty


- return wdThis.wdGetFcPersInfoInterface().isDirty();

onBeforeOutput onEvent onInit

Others section

//@@begin others static String IT = "0006"; IFPM fpm; VAC thisVAC = new VAC( "demo.com/ess~address", "com.demo.hr.ess.address.vc.overview.VcAddressOverview"); selectedRecord; int String selectedSubtype; //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 57

Source code for wdDoExit


//@@begin wdDoExit() try { fpm.exitCalled(); } catch (Exception e) { } //@@end

Source code for onBeforeOutput


//@@begin onBeforeOutput() onCleanup(); wdThis.wdGetFcAddressInterface().readRecord(); //Set UI based on Mailing Address record - assumption is that mailing address record //is the first record in the context node - just for the demo //Better to make sure we get country from the correct subtype record! wdThis.wdGetFcAddressInterface().setUI( wdContext.currentInfotypeListElement().getLand1()); //@@end

Source code for onInit


//@@begin onInit() this.fpm = fpm; fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcPersInfoComponentUsage()); fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcAddressComponentUsage()); fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcEmployeeServicesComponentUsage()); String ITName = wdThis.wdGetAPI().getTextAccessor().getText("ITName"); wdThis.wdGetFcPersInfoInterface().initPernr( wdThis.wdGetFcEmployeeServicesInterface().getEmployeenumber(), IT, ITName); //@@end

57

Add source code to WD components: VcAddressOverview: IC Methods


isConsistent
return true;

isDirty
return wdThis.wdGetVcAddressOverviewController().isDirty();

isHidingPossible
return true;

isSelectionChangePossible
return true;

onBeforeOutput
wdThis.wdGetVcAddressOverviewController().onBeforeOutput();

onEvent
wdThis.wdGetVcAddressOverviewController().onEvent(); return true;

onInit
wdThis.wdGetVcAddressOverviewController().onInit(fpm);

SAP AG 2006, SAP TechEd 06 / SDN Day / 58

58

Add source code to WD components: VcAddressOverview: BizCardsView Methods


wdDoModifyView onActionCancel
- wdThis.wdGetVcAddressOverviewController().cancel();

onActionDelete
wdThis.wdGetVcAddressOverviewController().delete(index); wdThis.wdGetVcAddressOverviewController().edit(index); wdThis.wdGetVcAddressOverviewController().create(subtype);

onActionEdit onActionNew

SAP AG 2006, SAP TechEd 06 / SDN Day / 59

Source code for wdDoModifyView


//@@begin wdDoModifyView BizcardFieldInfo[] fieldInfo1; //Mailing Address BizcardFieldInfo[] fieldInfo2; //Emergency Contact Date defaultBegda = wdContext.currentContextElement().getDefault_Begda(); String bizcardField1 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField1"); String bizcardField2 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField2"); String bizcardField3 = wdContext.currentUIElement().getRegionLabel(); String bizcardField4 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField4"); String bizcardField5 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField5"); String bizcardField6 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField6"); String bizcardField7 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField7"); String bizcardField8 = wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "BizCardField8"); //Mailing Address fieldInfo1 = new BizcardFieldInfo[] { new BizcardFieldInfo(bizcardField1, "Stras"), new BizcardFieldInfo(bizcardField2, "Ort01"), new BizcardFieldInfo(bizcardField3, "State_Text"), new BizcardFieldInfo(bizcardField4, "Land1_Text"), new BizcardFieldInfo(bizcardField5, "Telnr_Biz")}; //Emergency Contact fieldInfo2 = new BizcardFieldInfo[] { new BizcardFieldInfo(bizcardField6, "Priority_Text"), new BizcardFieldInfo(bizcardField7, "Zz_Cnt_Name"), new BizcardFieldInfo(bizcardField8, "Zz_Cnt_Relat"), new BizcardFieldInfo(bizcardField5, "Telnr_Biz"), new BizcardFieldInfo(bizcardField4, "Land1_Text")}; AddressOverviewHelper.CreateOverview( wdThis.wdGetContext().nodeInfotypeList(), wdThis.wdGetContext().nodeSubtypes(), view, fieldInfo1, fieldInfo2, defaultBegda, "Anssa"); //@@end

59

Add source code to WD components: VcAddressDetail: CC


Methods
wdDoExit isConsistent isDirty
return wdThis.wdGetFcPersInfoInterface().isDirty();

onBeforeOutput onFlush onInit selectCountry


wdThis.wdGetFcAddressInterface().selectCountry(Country);

selectPriority
wdThis.wdGetFcAddressInterface().selectPriority(Priority);

selectState
wdThis.wdGetFcAddressInterface().selectState(State);

Others section
//@@begin others private IFPM fpm = null; //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 60

Source code for wdDoExit


//@@begin wdDoExit() try { fpm.exitCalled(); } catch (Exception e) { } //@@end

Source code for onBeforeOutput

//@@begin isConsistent() if (fpm.getEventData().getEventName().equals(IFPM.EVENT_REVIEW)) { if (wdThis .wdGetFcPersInfoInterface() .check(wdContext.currentSelectedInfotypeElement()) == true) { //return Veto.NO_VETO; return true; } else { //return Veto.VETO; return false; } } else { //return Veto.NO_VETO; return true; } //@@end

Source code for onInit


//@@begin onInit() this.fpm = fpm; fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcAddressComponentUsage()); fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcPersInfoComponentUsage()); //@@end

60

Add source code to WD components: VcAddressDetail: IC


Methods
isConsistent
return wdThis.wdGetVcAddressDetailController().isConsistent();

isDirty
return wdThis.wdGetVcAddressDetailController().isDirty();

isSelectionChangePossible
return true;

onBeforeOutput
wdThis.wdGetVcAddressDetailController().onBeforeOutput();

onCleanup
wdThis.wdGetVcAddressDetailController().onCleanup();

onEvent
return true;

onFlush
wdThis.wdGetVcAddressDetailController().onFlush();

onInit
wdThis.wdGetVcAddressDetailController().onInit(fpm);

SAP AG 2006, SAP TechEd 06 / SDN Day / 61

61

Add source code to WD components: VcAddressDetail: DetailView Methods


onActionCountrySelect
- wdThis.wdGetVcAddressDetailController().selectCountry(wdContext.currentCountryRecords Element().getLand1());

onActionPrioritySelect
- wdThis.wdGetVcAddressDetailController().selectPriority(wdContext.currentPriorityRecordsEl ement().getPriority());

onActionStateSelect
- wdThis.wdGetVcAddressDetailController().selectState(wdContext.currentStateRecordsElem ent().getState());

SAP AG 2006, SAP TechEd 06 / SDN Day / 62

62

Add source code to WD components: VcAddressReview: CC


Methods
wdDoExit isDirty
return wdThis.wdGetFcPersInfoInterface().isDirty();

onBeforeOutput onInit

Others section
//@@begin others private IFPM fpm = null; //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 63

Source code for wdDoExit


//@@begin wdDoExit() try { fpm.exitCalled(); } catch (Exception e) { } //@@end

Source code for onBeforeOutput


//@@begin onBeforeOutput() Date record_Begda = wdContext.currentSelectedInfotypeElement().getBegda(); Date default_Begda = wdContext.currentContextElement().getDefault_Begda(); if ((record_Begda == null) || (record_Begda.before(default_Begda))) { wdContext.currentSelectedInfotypeElement().setBegda(default_Begda); } //@@end

Source code for onInit


//@@begin onInit() this.fpm = fpm; fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcPersInfoComponentUsage()); fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcAddressComponentUsage()); //@@end

63

Add source code to WD components: VcAddressReview: IC


Methods
isConsistent
return true;

isDirty
return wdThis.wdGetVcAddressReviewController().isDirty();

isHidingPossible
return true;

isSelectionChangePossible
return true;

onBeforeOutput
wdThis.wdGetVcAddressReviewController().onBeforeOutput();

onEvent
return true;

onInit
wdThis.wdGetVcAddressReviewController().onInit(fpm);

SAP AG 2006, SAP TechEd 06 / SDN Day / 64

64

Add source code to WD components: VcAddressReview: ReviewView


Methods
wdDoModifyView
//@@begin wdDoModifyView try { IWDTextView areaCode = (IWDTextView) view.getElement("AreaCode"); if (wdContext .currentSelectedInfotypeElement() .getAreac() .equalsIgnoreCase("000")) { areaCode.setVisible(WDVisibility.NONE); } else { areaCode.setVisible(WDVisibility.VISIBLE); } } catch (Exception ex) { } if (wdContext .currentSelectedInfotypeElement() .getAnssa() .equalsIgnoreCase("4")) { TextFieldInfo[] fieldInfo = new TextFieldInfo[] { new TextFieldInfo("Zz_Cnt_Langu", "Language")}; F4TextHelper.GetF4Text( wdThis.wdGetAPI(), wdContext.nodeSelectedInfotype(), view, fieldInfo); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 65

65

Create backend conversion class


The conversion class with its methods includes the main business logic for the service and is used to transfer data between backend and frontend Got to Class Builder (/se24) or via ABAP Workbench (se80) Copy SAP standard class CL_HRPA_CONVERT_0006_US to ZCL_HRPA_CONVERT_0006_XX Add phone number conversion method for US/CA
CONVERT_USCA_TELNR CONVERT_TO_USCA_PHONE

Source code for standard conversion class methods


INPUT_CONVERSION OUTPUT_CONVERSION FILL_DROPDOWN_LISTBOX

SAP AG 2006, SAP TechEd 06 / SDN Day / 66

66

Important SAP backend configuration tables


Configure the assignment of UI structures (V_T588IT_SCREEN)
Delete country specific entries for the address infotype
- Only those country specific entries that are replaced by the custom service e.g. US, CA and GB

Add a new entry to link the custom conversion class to our custom service

Define active subtypes and use cases (V_T7XSSPERSUBTYP) Use Case A1 for Main Address Use Case B3 for Emergency Contact No other subtypes can be used with this service if they are not configured in this table

SAP AG 2006, SAP TechEd 06 / SDN Day / 67

Other important configuration tables


V_T588MFPROPC
- Configuration of field attributes e.g. make a field a required field and thus have automatically an error message displayed if there is no value provided

V_T582ITVCLAS
- Infotype specific business logic and validation checks that is part of the new infotype framework. Classes are executed for entered infotypes in ESS even without concurrent employment enabled!

V_T582ITVCHCK
- Country specific infotype business logic and validation checks. Classes are executed for entered country version and infotypes in ESS even without concurrent employment enabled!

67

DEPLOY & RUN


SAP AG 2006, SAP TechEd 06 / SDN Day / 68

68

Session Abstract Create WD components Add source code to WD components Demo and screenshots

69

Screenshots of the completed application: Overview screen

SAP AG 2006, SAP TechEd 06 / SDN Day / 70

70

Screenshots of the completed application: Detailed screen

SAP AG 2006, SAP TechEd 06 / SDN Day / 71

71

Screenshots of the completed application: Review/Delete screen

SAP AG 2006, SAP TechEd 06 / SDN Day / 72

72

Screenshots of the completed application: Confirmation screen

SAP AG 2006, SAP TechEd 06 / SDN Day / 73

73

Source code: FcAddress: CC: deleteRecord

//@@begin deleteRecord() try { WDCopyService.copyCorresponding( wdThis .wdGetContext() .nodeReadOutput() .nodeReadRecords() .getElementAt( selection), wdThis.wdGetContext().currentSelectedInfotypeElement()); wdContext.nodeDeleteInfotype().bind( (Z_Hress_Delete_P0006_Input) model.createModelObject( Z_Hress_Delete_P0006_Input.class)); wdContext.currentDeleteInfotypeElement().setObjectkey( wdContext.currentSelectedInfotypeElement().getObject_Key()); wdContext.currentDeleteInfotypeElement().modelObject().execute(); wdThis.addValueHelp(); //error handling will be done by international Fc in method check() } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 74

74

Source code: FcAddress: CC: getPriorities

//@@begin getPriorities() try { fpm.getMessageManager().deleteAllMessages( wdThis.wdGetAPI().getComponent()); wdContext.nodePriorityMc().bind( (Z_Hress_P0006_Prioritymc_Input) model.createModelObject( Z_Hress_P0006_Prioritymc_Input.class)); wdContext.currentPriorityMcElement().setI_Withemptyline(false); wdContext.currentPriorityMcElement().setI_Employeenumber( Employeenumber); wdContext.currentPriorityMcElement().setI_Priority(Priority); wdContext.currentPriorityMcElement().modelObject().execute(); //An exception is triggered and application will be terminated. Only first //message in messages node will be displayed MessageHelper.raiseException( fpm, wdThis.wdGetAPI(), wdContext.nodePriorityMessages()); } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 75

75

Source code: FcAddress: CC: getStates


//@@begin getStates() try { fpm.getMessageManager().deleteAllMessages( wdThis.wdGetAPI().getComponent()); wdContext.nodeStateMc().bind( (Z_Hress_P0006_Statemc_Input) model.createModelObject( Z_Hress_P0006_Statemc_Input.class)); wdContext.currentStateMcElement().setI_Withemptyline(false); wdContext.currentStateMcElement().setI_Countrykey(Country); wdContext.currentStateMcElement().modelObject().execute(); //An exception is triggered and application will be terminated. Only first //message in messages node will be displayed MessageHelper.raiseException( fpm, wdThis.wdGetAPI(), wdContext.nodeStateMessages()); } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 76

76

Source code: FcAddress: CC: modifyRecord

//@@begin modifyRecord() try { wdContext.nodeModifyInfotype().bind( (Z_Hress_Modify_P0006_Input) model.createModelObject( Z_Hress_Modify_P0006_Input.class)); Zhcmt_Bsp_Pa_R0006 recordElem = (Zhcmt_Bsp_Pa_R0006) model.createModelObject( Zhcmt_Bsp_Pa_R0006.class); wdContext.nodeModifyRecord().bind(recordElem); wdContext.currentModifyInfotypeElement().modelObject().setRecord( recordElem); WDCopyService.copyCorresponding( wdThis.wdGetContext().currentSelectedInfotypeElement(), wdThis.wdGetContext().currentModifyRecordElement()); wdContext.currentModifyInfotypeElement().modelObject().execute(); //error handling will be done by international Fc in method check() } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 77

77

Source code: FcAddress: CC: newRecord

//@@begin newRecord() try { //create new record wdContext.nodeNewInfotype().bind( (Z_Hress_New_P0006_Input) model.createModelObject( Z_Hress_New_P0006_Input.class)); wdContext.currentNewInfotypeElement().setInfty("0006"); wdContext.currentNewInfotypeElement().setSubty(subtype); wdContext.currentNewInfotypeElement().modelObject().execute(); WDCopyService.copyCorresponding( wdThis.wdGetContext().nodeNewRecord().currentNewRecordElement(), wdThis.wdGetContext().currentSelectedInfotypeElement()); wdThis.addValueHelp(); //error handling will be done by international Fc in method check() } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 78

78

Source code: FcAddress: CC: onInit

//@@begin onInit() setInstructions(); try { this.fpm = fpm; model = (ZHR_ESS_P0006) WDModelFactory.getModelInstance( ZHR_ESS_P0006.class, WDModelScopeType.APPLICATION_SCOPE); fpm.connectModel(model); wdContext.nodeSelectedInfotype().bind( (Zhcmt_Bsp_Pa_R0006) model.createModelObject( Zhcmt_Bsp_Pa_R0006.class)); //debughelp //if (fpm.getApplicationContext().inDebugMode()) { fpm.registerContext(wdContext); //} } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } fpm.attachComponentToUsage( wdThis.wdGetAPI().getComponent(), wdThis.wdGetFcPersInfoComponentUsage()); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 79

79

Source code: FcAddress: CC: readRecord

//@@begin readRecord() try { // GetInfotypeList wdContext.nodeReadInfotype().bind( (Z_Hress_Read_P0006_Input) model.createModelObject( Z_Hress_Read_P0006_Input.class)); wdContext.currentReadInfotypeElement().setInfty("0006"); wdContext.currentReadInfotypeElement().modelObject().execute(); MessageHelper.raiseException( fpm, wdThis.wdGetAPI(), wdContext.nodeReadMessages()); } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 80

80

Source code: FcAddress: CC: selectCountry

//@@begin selectCountry() //Set new UI attribute values according to provided country setUI(Country); //Update current record context node with provided country information wdContext.currentSelectedInfotypeElement().setLand1(Country); int iCountry = wdContext.nodeCountryRecords().getLeadSelection(); wdContext.currentSelectedInfotypeElement().setLand1_Text( wdContext .nodeCountryRecords() .getCountryRecordsElementAt(iCountry) .getLandx()); //Update drop down for states according to provided country getStates(Country); //Update current record context node with defaulted state information //This is necessary because user can decide to use value displayed in state drop down //and not select a new state! wdContext.currentSelectedInfotypeElement().setState( wdContext.currentStateRecordsElement().getState()); int iState = wdContext.nodeStateRecords().getLeadSelection(); wdContext.currentSelectedInfotypeElement().setState_Text( wdContext .nodeStateRecords() .getStateRecordsElementAt(iState) .getState_Text()); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 81

81

Source code: FcAddress: CC: selectPriority & selectState


//@@begin selectPriority() //Update current record context node with provided priority information wdContext.currentSelectedInfotypeElement().setZz_Cnt_Priority(Priority); int iPriority = wdContext.nodePriorityRecords().getLeadSelection(); wdContext.currentSelectedInfotypeElement().setPriority_Text( wdContext .nodePriorityRecords() .getPriorityRecordsElementAt(iPriority) .getPriority_Text()); //@@end

//@@begin selectState() //Update current record context node with provided state information wdContext.currentSelectedInfotypeElement().setState(State); int iState = wdContext.nodeStateRecords().getLeadSelection(); wdContext.currentSelectedInfotypeElement().setState_Text( wdContext .nodeStateRecords() .getStateRecordsElementAt(iState) .getState_Text()); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 82

82

Source code: FcAddress: CC: selectRecord

//@@begin selectRecord() try { WDCopyService.copyCorresponding( wdThis .wdGetContext() .nodeReadOutput() .nodeReadRecords() .getElementAt( selection), wdThis.wdGetContext().currentSelectedInfotypeElement()); wdContext.nodeEditInfotype().bind( (Z_Hress_Edit_P0006_Input) model.createModelObject( Z_Hress_Edit_P0006_Input.class)); wdContext.currentEditInfotypeElement().setObjectkey( wdThis .wdGetContext() .currentSelectedInfotypeElement() .getObject_Key()); wdContext.currentEditInfotypeElement().modelObject().execute(); MessageHelper.raiseException( fpm, wdThis.wdGetAPI(), wdContext.nodeEditMessages()); // WDCopyService.copyCorresponding(wdThis.wdGetContext().nodeEditOutput ().nodeEditRecord().currentEditRecordElement(), // wdThis.wdGetContext ().currentSelectedInfotypeElement()); wdThis.addValueHelp(); } catch (Exception ex) { fpm.getMessageManager().raiseException( wdThis.wdGetAPI().getComponent(), ex); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 83

83

Source code: FcAddress: CC: setDefaultCountry & setDefaultPriority


//@@begin setDefaultCountry() //Set default value of drop down to provided country value for (int iCountry = 0; iCountry < wdContext.nodeCountryRecords().size(); iCountry++) { if (wdContext .nodeCountryRecords() .getCountryRecordsElementAt(iCountry) .getLand1() .equals(Country)) { wdContext.nodeCountryRecords().setLeadSelection(iCountry); wdContext.currentSelectedInfotypeElement().setLand1_Text( wdContext.currentCountryRecordsElement().getLandx()); } } //@@end

//@@begin setDefaultPriority() //Set default value of drop down to provided priority value for (int iPriority = 0; iPriority < wdContext.nodePriorityRecords().size(); iPriority++) { if (wdContext .nodePriorityRecords() .getPriorityRecordsElementAt(iPriority) .getPriority() .equals(Priority)) { wdContext.nodePriorityRecords().setLeadSelection(iPriority); wdContext.currentSelectedInfotypeElement().setPriority_Text( wdContext .currentPriorityRecordsElement() .getPriority_Text()); } } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 84

84

Source code: FcAddress: CC: setDefaultState & setInstructions


//@@begin setDefaultState() //Set default value of drop down to provided state value for (int iState = 0; iState < wdContext.nodeStateRecords().size(); iState++) { if (wdContext .nodeStateRecords() .getStateRecordsElementAt(iState) .getState() .equals(State)) { wdContext.nodeStateRecords().setLeadSelection(iState); wdContext.currentSelectedInfotypeElement().setState_Text( wdContext.currentStateRecordsElement().getState_Text()); } } //@@end
//@@begin setInstructions() wdContext.currentTextElement().setCreditCardHeader( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "DinersClubHeader")); wdContext.currentTextElement().setCreditCardInstructions( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "DinersClubInstructions")); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 85

85

Source code: FcAddress: CC: setUI


//@@begin setUI() if (Country.equalsIgnoreCase("US")) { wdContext.currentUIElement().setRegionLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "RegionLabel_US")); wdContext.currentUIElement().setZipLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "ZipLabel_US")); wdContext.currentUIElement().setIsCountyEntryVisible( WDVisibility.VISIBLE); wdContext.currentUIElement().setIsAreaCodeVisible( WDVisibility.VISIBLE); wdContext.currentUIElement().setIsRegionRequired(WDState.REQUIRED); wdContext.currentUIElement().setIsZipRequired(WDState.REQUIRED); } else if (Country.equalsIgnoreCase("CA")) { wdContext.currentUIElement().setRegionLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "RegionLabel_CA")); wdContext.currentUIElement().setZipLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "ZipLabel_CA")); wdContext.currentUIElement().setIsCountyEntryVisible( WDVisibility.NONE); wdContext.currentUIElement().setIsAreaCodeVisible( WDVisibility.VISIBLE); wdContext.currentUIElement().setIsRegionRequired(WDState.REQUIRED); wdContext.currentUIElement().setIsZipRequired(WDState.REQUIRED); } else if (Country.equalsIgnoreCase("GB")) { wdContext.currentUIElement().setRegionLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "RegionLabel_GB")); wdContext.currentUIElement().setZipLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "ZipLabel_GB")); wdContext.currentUIElement().setIsCountyEntryVisible( WDVisibility.NONE); wdContext.currentUIElement().setIsAreaCodeVisible( WDVisibility.NONE); wdContext.currentUIElement().setIsRegionRequired(WDState.REQUIRED); wdContext.currentUIElement().setIsZipRequired(WDState.REQUIRED); } else { wdContext.currentUIElement().setRegionLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "RegionLabel_Other")); wdContext.currentUIElement().setZipLabel( wdThis.wdGetAPI().getComponent().getTextAccessor().getText( "ZipLabel_Other")); wdContext.currentUIElement().setIsAreaCodeVisible( WDVisibility.NONE); wdContext.currentUIElement().setIsRegionRequired(WDState.NORMAL); wdContext.currentUIElement().setIsZipRequired(WDState.NORMAL); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 86

86

Source code: FcAddress: CC: setUI_ECMVisible

//@@begin setUI_EMCVisible() //Check provided subtype value to hide or display Emergency Contact Container if (Subtype.equalsIgnoreCase("4")) { wdContext.currentUIElement().setIsEmergencyContactVisible( WDVisibility.VISIBLE); } else { wdContext.currentUIElement().setIsEmergencyContactVisible( WDVisibility.NONE); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 87

87

Source code: BizCard Helper class: Part 1 & Part 2

Part 1
/** * Copied from SAP standard overview helper class: OverviewHelper.java of DC: ess/per * on 08/22/06 by harald.reiter@ssip.com * Code changes are identified by 'HR<date>' * */ /** * HR082206 change package name to point to correct location of class */ package com.demo.hr.ess.address.helpers; import java.util.Date; import java.util.GregorianCalendar; import com.sap.dictionary.runtime.ISimpleType; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDButton; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDCaption; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDGridData; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDGridLayout; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDGroup; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDLabel; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDTextView; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDTransparentContainer; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.WDButtonDesign; import com.sap.tc.webdynpro.clientserver.uielib.standard.api.WDGroupDesign; import com.sap.tc.webdynpro.progmodel.api.IWDNode; import com.sap.tc.webdynpro.progmodel.api.IWDNodeElement; import com.sap.tc.webdynpro.progmodel.api.IWDView; import com.sap.xss.per.helpers.BizcardFieldInfo; /** * @author i007419 * * To change the template for this generated type comment go to * Window>Preferences>Java>Code Generation>Code and Comments */ /** * * HR082206 change public class name to avoid conflicts */ public class AddressOverviewHelper { public static void CreateOverview( IWDNode records, IWDNode subtypes, IWDView view, BizcardFieldInfo[] fieldInfo1, //HR082206 BizcardFieldInfo[] fieldInfo2, //HR082206 Date defaultBegda, String subtypeFieldName) { view.resetView(); IWDTransparentContainer rootContainer = (IWDTransparentContainer) view.getElement("rootContainer"); //Create Bizcard Container ---------------------------------IWDTransparentContainer bizcardContainer = (IWDTransparentContainer) view.createElement( IWDTransparentContainer. class , "bizcardContainer"); bizcardContainer.setWidth("70%"); IWDGridLayout bcContainerGridLayout = (IWDGridLayout) bizcardContainer.createLayout(IWDGridLayout. class ); bcContainerGridLayout.setColCount(2); //Create Button Container ---------------------------------IWDTransparentContainer buttonContainer = (IWDTransparentContainer) view.createElement( IWDTransparentContainer. class , "buttonContainer"); IWDGridLayout buttonContainerGridLayout = (IWDGridLayout) buttonContainer.createLayout(IWDGridLayout. class ); buttonContainer.setWidth("250px"); buttonContainerGridLayout.setColCount(2); rootContainer.addChild(bizcardContainer); rootContainer.addChild(buttonContainer); //Create Bizcards for ( int i = 0; i < records.size(); i++) { //Create Bizcard for this Record ---------------------IWDGroup bizcard = (IWDGroup) view.createElement(IWDGroup. class , "bizcard_" + i); bizcard.setWidth("300px"); bizcard.setDesign(WDGroupDesign.SAPCOLOR); IWDGridLayout bcGridLayout = (IWDGridLayout) bizcard.createLayout(IWDGridLayout. class ); bcGridLayout.setColCount(2); IWDGridData bcGridData = (IWDGridData) bizcard.createLayoutData(IWDGridData. class ); bcGridData.setPaddingRight("15px"); bcGridData.setPaddingBottom("15px"); IWDNodeElement recordElement = records.getElementAt(i); //Create Bizcard Header --------------------------------------IWDCaption header = (IWDCaption) view.createElement(IWDCaption. class , "header" + i);

Part 2
//Get Subtype text-------------------------------------------String stext; for (int j = 0; j < subtypes.size(); j++) { IWDNodeElement subtypeElement = subtypes.getElementAt(j); String tableSubtypeNumber = subtypeElement.getAttributeValue("Subtype").toString(); if (subtypeFieldName.equals("")) { if (tableSubtypeNumber.equals("")) { header.setText( subtypeElement .getAttributeValue("Stext") .toString()); } } else { String recordSubtypeNumber = recordElement .getAttributeValue(subtypeFieldName) .toString(); if (tableSubtypeNumber.equals(recordSubtypeNumber)) { header.setText( subtypeElement .getAttributeValue("Stext") .toString()); } } } //If future record, append begin date of record to Bizcard header try { ISimpleType st = records.getNodeInfo().getAttribute("Begda").getSimpleType(); String recordDateFormat = st.format(recordElement.getAttributeValue("Begda")); String recordDateString = recordElement.getAttributeValue("Begda").toString(); GregorianCalendar calendar_default = new GregorianCalendar(); GregorianCalendar calendar_record = new GregorianCalendar(); calendar_default.setTime(defaultBegda); calendar_record.setTime(defaultBegda); calendar_record.set( Integer.parseInt(recordDateString.substring(0, 4)), Integer.parseInt(recordDateString.substring(5, 7)) - 1, Integer.parseInt(recordDateString.substring(8, 10))); if (calendar_record.equals(calendar_default)) { header.setText( header.getText() + " (" + view.getComponent().getTextAccessor().getText( "EffectiveAsOfToday") + ")"); } else if (calendar_record.after(calendar_default)) { header.setText( header.getText() + " (" + view.getComponent().getTextAccessor().getText( "EffectiveAsOf", new String[] { recordDateFormat }) + ")"); } } catch (RuntimeException ex) { // TODO Auto-generated catch block ex.printStackTrace(); }

//HR082206 Begin bizcard.setHeader(header); BizcardFieldInfo[] fieldInfo; String strSubtype = recordElement.getAttributeValue("Anssa").toString(); if (strSubtype.equals("4")) fieldInfo = fieldInfo2; else fieldInfo = fieldInfo1; //HR082206 End // bizcard.setHeader(header); HR082206

SAP AG 2006, SAP TechEd 06 / SDN Day / 88

88

Source code: BizCard Helper class: Part 3 & Part 4

Part 3
for (int k = 0; k < fieldInfo.length; k++) { IWDLabel labelView = (IWDLabel) view.createElement( IWDLabel.class, "labelView" + i + k); labelView.setText(fieldInfo[k].label); IWDTextView textView = (IWDTextView) view.createElement( IWDTextView.class, "textView" + i + k); labelView.setLabelFor("textView" + i + k); if (recordElement.getAttributeValue(fieldInfo[k].fieldname) == null) { textView.setText(""); } else { textView.setText( recordElement .getAttributeValue(fieldInfo[k].fieldname) .toString()); } IWDGridData textGridData = (IWDGridData) textView.createLayoutData(IWDGridData.class); textGridData.setWidth("60%"); bizcard.addChild(labelView); bizcard.addChild(textView); } //Create EDIT Button Container ---------------------------------IWDTransparentContainer editButtonContainer = (IWDTransparentContainer) view.createElement( IWDTransparentContainer.class, "editButtonContainer" + i); IWDGridLayout editButtonContainerGridLayout = (IWDGridLayout) editButtonContainer.createLayout(IWDGridLayout.class); IWDGridData editButtonContainerGridData = (IWDGridData) editButtonContainer.createLayoutData(IWDGridData.class); editButtonContainer.setWidth("150px"); editButtonContainerGridData.setColSpan(2); editButtonContainerGridData.setPaddingTop("15px"); editButtonContainerGridLayout.setColCount(2); //Create Edit Button -------------------------------IWDButton editButton = (IWDButton) view.createElement( IWDButton.class, "editButton_" + i); editButton.setText( view.getComponent().getTextAccessor().getText("Edit")); editButton.setOnAction(view.getAction("Edit")); editButton.mappingOfOnAction().addParameter("index", i); editButton.setWidth("50px"); IWDGridData editButtonGridData = (IWDGridData) editButton.createLayoutData(IWDGridData.class); editButtonGridData.setPaddingRight("10px"); editButton.setDesign(WDButtonDesign.NEXT); //bizcard.addChild(editButton); editButtonContainer.addChild(editButton);

Part 4
//Create Delete Button -------------------------------if (hasDeleteButton(recordElement, subtypes, subtypeFieldName, defaultBegda)) { IWDButton deleteButton = (IWDButton) view.createElement( IWDButton.class, "deleteButton_" + i); deleteButton.setText( view.getComponent().getTextAccessor().getText("Delete")); deleteButton.setOnAction(view.getAction("Delete")); deleteButton.mappingOfOnAction().addParameter("index", i); deleteButton.setWidth("50px"); IWDGridData deleteButtonGridData = (IWDGridData) deleteButton.createLayoutData( IWDGridData.class); deleteButtonGridData.setPaddingRight("15px"); //bizcard.addChild(deleteButton); editButtonContainer.addChild(deleteButton); } //Add EDIT Button container to Bizcard bizcard.addChild(editButtonContainer); //Add this Bizcard to bizcardContainer bizcardContainer.addChild(bizcard); } int newButtonCount = 0; for (int subtypeCount = 0; subtypeCount < subtypes.size(); subtypeCount++) { IWDNodeElement subtypeElement = subtypes.getElementAt(subtypeCount); if (hasNewButton(records, subtypeElement, subtypeFieldName)) { //Create NEW button String subtypeName = subtypeElement.getAttributeValue("Stext").toString(); String subtypeNumber = subtypeElement.getAttributeValue("Subtype").toString(); IWDButton newButton = (IWDButton) view.createElement( IWDButton.class, "newButton_" + subtypeNumber); newButton.setText( view.getComponent().getTextAccessor().getText( "New", new String[] { subtypeName })); newButton.setWidth("150px"); newButton.setOnAction(view.getAction("New")); newButton.mappingOfOnAction().addParameter( "subtype", subtypeNumber); IWDGridData newButtonGridData = (IWDGridData) newButton.createLayoutData(IWDGridData.class); newButton.setDesign(WDButtonDesign.NEXT); newButtonGridData.setPaddingBottom("10px"); newButtonCount++;

SAP AG 2006, SAP TechEd 06 / SDN Day / 89

89

Source code: BizCard Helper class: Part 5 & Part 6

Part 5
//Create Cancel button----------------------------------if (newButtonCount == 1) { newButtonGridData.setColSpan(1); IWDButton cancelButton = (IWDButton) view.createElement( IWDButton.class, "cancelButton"); cancelButton.setText( view.getComponent().getTextAccessor().getText( "Cancel")); cancelButton.setWidth("50px"); cancelButton.setOnAction(view.getAction("Cancel")); IWDGridData cancelButtonGridData = (IWDGridData) cancelButton.createLayoutData( IWDGridData.class); cancelButtonGridData.setPaddingLeft("30px"); buttonContainer.addChild(newButton); buttonContainer.addChild(cancelButton); } else { newButtonGridData.setColSpan(2); buttonContainer.addChild(newButton); } } } if (newButtonCount == 0) { IWDButton cancelButton = (IWDButton) view.createElement(IWDButton.class, "cancelButton"); cancelButton.setText( view.getComponent().getTextAccessor().getText("Cancel")); cancelButton.setWidth("50px"); cancelButton.setOnAction(view.getAction("Cancel")); IWDGridData cancelButtonGridData = (IWDGridData) cancelButton.createLayoutData(IWDGridData.class); buttonContainer.addChild(cancelButton); } } private static boolean hasNewButton( IWDNode records, IWDNodeElement subtypeElement, String subtypeFieldName) { boolean hasNewButton = true; String usecase = (String) subtypeElement.getAttributeValue("Case"); if (usecase.equals("B3")) { // New button is needed for case B3---------------------hasNewButton = true; } else { if (subtypeFieldName.equals("") & records.size() > 0) { hasNewButton = false; } else { // Other cases, check whether there is record with same subtype for (int i = 0; i < records.size(); i++) { IWDNodeElement recordElement = records.getElementAt(i); if (recordElement .getAttributeValue(subtypeFieldName) .equals(subtypeElement.getAttributeValue("Subtype"))) { hasNewButton = false; //} break; } } } } return hasNewButton;

Part 6
private static boolean hasDeleteButton( IWDNodeElement recordElement, IWDNode subtypes, String subtypeFieldName, Date defaultBegda) { boolean hasDeleteButton = false; if (((Date) recordElement.getAttributeValue("Begda")) .after(defaultBegda)) hasDeleteButton = true; else { String usecase = ""; if (subtypeFieldName.equals("")) { for (int j = 0; j < subtypes.size(); j++) { IWDNodeElement subtype = subtypes.getElementAt(j); if (subtype .getAttributeValue("Subtype") .equals(subtypeFieldName)) { usecase = (String) subtype.getAttributeValue("Case"); break; } } } else { for (int j = 0; j < subtypes.size(); j++) { IWDNodeElement subtype = subtypes.getElementAt(j); if (recordElement .getAttributeValue(subtypeFieldName) .equals(subtype.getAttributeValue("Subtype"))) { usecase = (String) subtype.getAttributeValue("Case"); break; } } } //if ((usecase.substring(1).equals("2")) || (usecase.substring(1).equals("3"))) if ((usecase.equals("A2")) || (usecase.equals("B2")) || (usecase.equals("B3"))) { hasDeleteButton = true; } } return hasDeleteButton; } } //HR082206 Set closing bracket! Use Organize Imports to get import statements! /** * HR082206 all code below has been deleted as it is not necessary anymore! * */ // public static void CreateOverview( // IWDNode records, // IWDNode subtypes, // IWDView view, // BizcardFieldInfo[] fieldInfo, // Date defaultBegda, // String subtypeFieldName, // java.util.Locale locale) { // view.resetView(); // //

SAP AG 2006, SAP TechEd 06 / SDN Day / 90

90

Source code: VcAddressOverview: CC: create & delete


//@@begin create() //Hide/Display Emergency Contact Container on next screen based on selected subtype wdThis.wdGetFcAddressInterface().setUI_EMCVisible(subtype); //Populate drop down field: Country wdThis.wdGetFcAddressInterface().getCountries(); //Populate drop down field: Priority //Only execute for Emergency contact if (subtype.equalsIgnoreCase("4")) { wdThis.wdGetFcAddressInterface().getPriorities( wdThis.wdGetFcEmployeeServicesInterface().getEmployeenumber(), ""); } //Next perspective selectedSubtype = subtype; fpm.raiseEvent(IFPM.EVENT_ADD, thisVAC); //@@end

//@@begin delete() //Set new UI attribute values based on country of selected record wdThis.wdGetFcAddressInterface().setUI( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getLand1()); //Hide/Display Emergency Contact Container on next screen for selected subtype record wdThis.wdGetFcAddressInterface().setUI_EMCVisible( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getAnssa()); //Next perspective selectedRecord = index; fpm.raiseEvent(IFPM.EVENT_REMOVE, thisVAC); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 91

91

Source code: VcAddressOverview: CC: edit


//@@begin edit() //Set new UI attribute values based on country of selected record wdThis.wdGetFcAddressInterface().setUI( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getLand1()); //Hide/Display Emergency Contact Container on next screen for selected subtype record wdThis.wdGetFcAddressInterface().setUI_EMCVisible( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getAnssa()); //Populate drop down field: Country wdThis.wdGetFcAddressInterface().getCountries(); //Set drop down to country of selected record wdThis.wdGetFcAddressInterface().setDefaultCountry( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getLand1()); //Populate drop down field: State wdThis.wdGetFcAddressInterface().getStates( wdContext.currentCountryRecordsElement().getLand1()); //Set drop down to state of selected record wdThis.wdGetFcAddressInterface().setDefaultState( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getState()); //Populate drop down field: Priority //Only execute for Emergency contact if (wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getAnssa() .equalsIgnoreCase("4")) { wdThis.wdGetFcAddressInterface().getPriorities( wdThis.wdGetFcEmployeeServicesInterface().getEmployeenumber(), wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getZz_Cnt_Priority()); //Set drop down to priority of selected record wdThis.wdGetFcAddressInterface().setDefaultPriority( wdContext .nodeInfotypeList() .getInfotypeListElementAt(index) .getZz_Cnt_Priority()); } //Next perspective selectedRecord = index; fpm.raiseEvent(IFPM.EVENT_EDIT, thisVAC); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 92

92

Source code: VcAddressOverview: CC: onEvent

//@@begin onEvent() String event = fpm.getEventData().getEventName(); if (event.equals(IFPM.EVENT_ADD)) { wdThis.wdGetFcAddressInterface().newRecord(selectedSubtype); wdThis.wdGetFcPersInfoInterface().setModeCreate(selectedSubtype); } else if (event.equals(IFPM.EVENT_EDIT)) { wdThis.wdGetFcAddressInterface().selectRecord(selectedRecord); wdThis.wdGetFcPersInfoInterface().setModeEdit( wdContext.currentSelectedInfotypeElement().getAnssa()); } else if (event.equals(IFPM.EVENT_REMOVE)) { wdThis.wdGetFcAddressInterface().deleteRecord(selectedRecord); wdThis.wdGetFcPersInfoInterface().setModeDelete( wdContext.currentSelectedInfotypeElement().getAnssa()); } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 93

93

Source code: VcAddressDetail: CC: isConsistent

//@@begin isConsistent() if (fpm.getEventData().getEventName().equals(IFPM.EVENT_REVIEW)) { if (wdThis .wdGetFcPersInfoInterface() .check(wdContext.currentSelectedInfotypeElement()) == true) { //return Veto.NO_VETO; return true; } else { //return Veto.VETO; return false; } } else { //return Veto.NO_VETO; return true; } //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 94

94

Source code: VcAddressDetail: CC: onFlush

//@@begin onFlush() Date record_Begda = wdContext.currentSelectedInfotypeElement().getBegda(); Date default_Begda = wdContext.currentContextElement().getDefault_Begda(); if (record_Begda == null || record_Begda.equals("")) { record_Begda = default_Begda; } if (wdContext.nodeAs_of_radiobutton().getLeadSelection() == 0) { wdContext.currentSelectedInfotypeElement().setBegda(default_Begda); } else { // check future date, if not future, set to default_date + 1 if (record_Begda.before(default_Begda) || record_Begda.equals(default_Begda)) { // issue error message? GregorianCalendar calendar_Default = new GregorianCalendar(); calendar_Default.setTime(default_Begda); calendar_Default.add(Calendar.DAY_OF_MONTH, 1); Date next_Date = new Date(calendar_Default.getTime().getTime()); wdContext.currentSelectedInfotypeElement().setBegda(next_Date); } } // wdThis.wdGetFcAddressInterface().modifyRecord(); //@@end

SAP AG 2006, SAP TechEd 06 / SDN Day / 95

95

Source code: Backend conversion class: INPUT_CONVERSION

METHOD if_hrpa_standard_conversions~input_conversion . FIELD-SYMBOLS <r0006> TYPE zhcmt_bsp_pa_r0006. FIELD-SYMBOLS <p0006> TYPE p0006. is_ok = true. ASSIGN screen_structure TO <r0006>. ASSIGN pnnnn TO <p0006>. MOVE-CORRESPONDING <r0006> TO <p0006>. *--Country specific conversions CASE <r0006>-land1. WHEN 'US' OR 'CA'. "US/CA specific MOVE '10' TO <p0006>-itbld. *--Convert phone number CALL METHOD me->convert_usca_telnr EXPORTING i_area = <r0006>-areac i_telnr = <r0006>-telnr i_message_handler = message_handler IMPORTING e_telnr = <p0006>-telnr. WHEN 'GB'. "UK specific MOVE '08' TO <p0006>-itbld. WHEN OTHERS. "International version MOVE '99' TO <p0006>-itbld. ENDCASE. ENDMETHOD.

SAP AG 2006, SAP TechEd 06 / SDN Day / 96

96

Source code: Backend conversion class: OUTPUT_CONVERSION Part 1


METHOD if_hrpa_standard_conversions~output_conversion . * data definitions FIELD-SYMBOLS: <r0006> <p0006> DATA DATA DATA DATA DATA TYPE zhcmt_bsp_pa_r0006, TYPE p0006.

Part 2
*--Country text CLEAR: <r0006>-land1_text. IF <p0006>-land1 IS NOT INITIAL. SELECT SINGLE landx FROM t005t INTO <r0006>-land1_text WHERE spras = sy-langu AND land1 = <p0006>-land1. ENDIF. *--Region/State/County/Province text CLEAR: <r0006>-state_text. IF <p0006>-state IS NOT INITIAL. SELECT SINGLE bezei FROM t005u INTO <r0006>-state_text WHERE spras = sy-langu AND land1 = <p0006>-land1 AND bland = <p0006>-state. ENDIF. *--Priority Text for Emergency Contact CLEAR: <r0006>-priority_text. IF <p0006>-zz_cnt_priority IS NOT INITIAL. ld_value = <p0006>-zz_cnt_priority. CALL FUNCTION 'DDUT_DOMVALUE_TEXT_GET' EXPORTING name = 'ZPA_CNT_PRIORITY' value = ld_value langu = sy-langu IMPORTING dd07v_wa = ld_dd07v_wa EXCEPTIONS not_found = 1 illegal_input = 2 OTHERS = 3. *--Check RC IF sy-subrc NE 0. CLEAR <r0006>-priority_text. ELSE. <r0006>-priority_text = ld_dd07v_wa-ddtext. ENDIF. ENDIF. "if <p0006>-zz_cnt_priority is not initial. ENDMETHOD.

lenzip TYPE i. lennum TYPE i. remainnum TYPE i. lv_telnr TYPE telnr. lv_area TYPE p10_ui_areac.

*--For priority text DATA: ld_value TYPE dd07v-domvalue_l, ld_dd07v_wa TYPE dd07v. is_ok = true. * Global field assignments ASSIGN pnnnn TO <p0006>. ASSIGN screen_structure TO <r0006>. * Fill UI Structure MOVE-CORRESPONDING <p0006> TO <r0006>. *--Process country specific content CASE <r0006>-land1. WHEN 'US' OR 'CA'. "US/CA specific *--Phone number IF <p0006>-telnr IS NOT INITIAL. CLEAR: lv_telnr, lv_area. CALL METHOD EXPORTING i_telnr IMPORTING e_areac e_telnr me->convert_to_usca_phone = <p0006>-telnr = lv_area = lv_telnr.

*--For BizCard only CONCATENATE lv_area lv_telnr INTO <r0006>-telnr_biz SEPARATED BY space. ENDIF. WHEN OTHERS. *--Phone number *--For BizCard only MOVE <p0006>-telnr TO <r0006>-telnr_biz. ENDCASE. "case <r0006>-land1.

SAP AG 2006, SAP TechEd 06 / SDN Day / 97

97

Source code: Backend conversion class: FILL_DROPDOWN_LISTBOX


METHOD if_hrpa_screen_control~fill_dropdown_listbox . *--Data definitions *--Key/Description definition for Language drop down TYPES BEGIN OF ts_language_data. TYPES langy TYPE zspras. TYPES langt TYPE sptxt. TYPES END OF ts_language_data. DATA: lt_language_data TYPE STANDARD TABLE OF ts_language_data. DATA: ls_language_data LIKE LINE OF lt_language_data. *--Drop down handling FIELD-SYMBOLS <ddlb> TYPE crmt_dropdownlistbox_data. FIELD-SYMBOLS <ddlb_data_tab> TYPE STANDARD TABLE. *--Initialize CLEAR: ls_language_data. REFRESH: lt_language_data. LOOP AT dropdownlb_datas ASSIGNING <ddlb>. CASE <ddlb>-fieldname. WHEN 'ZZ_CNT_LANGU'. <ddlb>-keycolumnname = 'LANGY'. <ddlb>-valuecolumnname = 'LANGT'. CREATE DATA <ddlb>-data TYPE STANDARD TABLE OF ts_language_data. ASSIGN <ddlb>-data->* TO <ddlb_data_tab>. *--Get language records from custom table ZLANGUT SELECT zspras sptxt INTO TABLE lt_language_data FROM zlangut WHERE spras EQ sy-langu. *--Check RC IF sy-subrc NE 0. *--TO DO EXIT. ENDIF. *--Assign records to output structure LOOP AT lt_language_data INTO ls_language_data. APPEND ls_language_data TO <ddlb_data_tab>. ENDLOOP. ENDCASE. ENDLOOP. ENDMETHOD.

SAP AG 2006, SAP TechEd 06 / SDN Day / 98

98