Contenu connexe
Similaire à Custom development of web dynpro ESS applications using Floor Plan Manager
Similaire à Custom development of web dynpro ESS applications using Floor Plan Manager (20)
Custom development of web dynpro ESS applications using Floor Plan Manager
- 4. 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
4
- 5. DEMO
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 5
5
- 6. 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
6
- 8. 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
8
- 9. Create WD components: Used DC requirements
Ensure that the following DC’s 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
9
- 10. Create WD components: Declaration of additional used DC’s
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
- 11. Create WD components: Configuration Component
A DC that uses FPM has three different types of components:
– Configuration Components
– Business Logic Components
– Visual Application Components
Our DC needs the following Web Dynpro components:
– A configuration component (CC), specifying the configuration of our application
- CcAddress
– The necessary business logic component (BLC) for backend access
- FcAddress
– The necessary visual application components (VACs) for the visual parts of your application
- VcAddressDetail
- VcAddressOverview
- VcAddressReview
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
- 12. 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
CC’s don’t contain
any visual parts –
it’s 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: OverviewROP
- Message Type: standard
- Message Text: Overview
– For the Detailed screen enter/select:
- Message Key: DetailROP
- Message Type: standard
- Message Text: Edit
– For the Review screen enter/select:
- Message Key: ReviewROP
- Message Type: standard
- Message Text: Review and Save
– For the Confirmation screen enter/select:
- Message Key: ConfirmationROP
- Message Type: standard
- Message Text: Completed
12
- 13. 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 BLC’s don’t contain any visual parts –
it’s 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: DeleteConfirmation
- Message Type: standard
- Message Text: The following {0} data will be deleted
– For the delete review message enter/select:
- Message Key: DeleteReview
- Message Type: standard
- Message Text: The following {0} data was deleted
– For the edit review message enter/select:
- Message Key: EditReview
- Message Type: standard
- Message Text: Please check {0} below
– For the edit confirmation message enter/select:
- Message Key: EditConfirmation
- Message Type: standard
- Message Text: The changes you have made to your {0} data have been saved.
13
- 14. Create WD components: Model & RFC’s for IT operations
The BLC needs a model to call the RFC’s.
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 RFC’s of that function group!
Create a new DDIC structure and table type to replace SAP standard
components in copied RFC’s
– 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
- 15. Create WD components: Model & RFC’s for Matchcodes
Create RFC’s 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
- 16. 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 RFC’s 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: ZHR_ESS_P0006 (*)
– Model Package: com.demo.hr.ess.address.model
– Default logical system name for model instances: WD_MODELDATA_DEST
– Default logical system name for RFC metadata: WD_RFC_METADATA_DEST
– Logical Dictionary: ZHR_ESS_P0006
(*) Function group name in SAP backend
16
- 17. 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 RFC’s of this function group
Our DC should contain the following elements:
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 17
17
- 18. 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
- 19. Create WD components: BLC: CC: Create context nodes
To use the RFC’s from FcAddress we need to create context nodes that allows us
to fill the import parameters, execute the RFC’s 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 Important
– StateMc Set cardinality to 0..n
Set selection to 1..1
– PriorityMc
Add the following value nodes to manage UI elements and text instructions
– UI
– Text
© 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
- 20. Create WD components: BLC: CC: Create value nodes
Add the following value nodes to manage UI elements and text
instructions
– UI Important
Set cardinality and selection to 1..1
– Text
Add the following value attributes to value node UI
– isEmergencyContactVisible(*)
– isAreaCodeVisible(*)
*Set type to
– isCountyEntryVisible(*) com.sap.ide.webdynpro.uielementdefinitions.Visibility
– isRegionRequired(**)
– isZipRequired(**) **Set type to
– RegionLabel (String) com.sap.ide.webdynpro.uielementdefinitions.State
– ZipLabel (String)
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
- 21. Create WD components: BLC: CC: Bind context nodes
Bind the following context nodes to the corresponding nodes in the
model
– DeleteInfotype
Please note to rename generated sub nodes!
– EditInfotype
– ModifyInfotype Rename nodes to
– NewInfotype
– ReadInfotype
– CountryMc Sub nodes are automatically created for each model input node
with the same name. Web dynpro does not allow context nodes
– StateMc with the same name in the same context. Sub nodes should
– PriorityMc always be renamed to prevent conflicts!
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 0..n
- selection 1..1
- singleton false
– StateRecords
- cardinality 0..n
- selection 1..1
- singleton true
21
- 22. 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 – setDefaultCountry
– getStates - Country
- Country – setDefaultState
- State
– getPriorities
- Employeenumber – setDefaultPriority
- Priority
- Priority
– setInstructions
– selectCountry
- Country – setUI
- Country
– selectState
– setUI_EMCVisible
- State
- Subtype
– selectPriority
- Priority
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 22
22
- 23. 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
- 24. 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
- 25. 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
- 26. 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
- 27. 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
- 28. 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
- 29. 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 Edit Context mapping->FcAddress->CountryMc->CountryRecords
- InfotypeList Edit Context mapping->FcAddress->InfotypeList->All fields
- SelectedInfotype Edit Context mapping->FcAddress->SelectedInfotype>All fields
- Subtypes Edit Context mapping->FcPersInfo->Subtypes>All fields
– Model attribute
- Default_Begda Edit Context mapping->FcPersInfo->Default_Begda
– Value nodes
- Text Edit Context mapping->FcAddress->Text->All fields
- UI Edit Context mapping->FcAddress->UI>RegionLabel & ZipLabel
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 29
29
- 30. 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
- 31. 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 VAC’s as well after
you completed the component controller setup!
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 31
31
- 32. 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
- 33. 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 – don’t select the web dynpro component
interface controller which has the same name!
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 33
33
- 34. Create WD components: VAC: View: Overview: Context
To pass the data between BLC’s 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 Edit Context mapping->VcAddressOverview->InfotypeList->All fields
- Subtypes Edit Context mapping-> VcAddressOverview->Subtypes->All fields
– Model attribute
- Default_Begda Edit Context mapping-> VcAddressOverview->Default_Begda
– Value nodes
- UI Edit Context mapping-> VcAddressOverview->UI->All fields
- Text 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
- 35. 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
- 36. 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 Edit Context mapping->FcAddress->SelectedInfotype->All fields
- Subtypes Edit Context mapping->FcPersInfo->Subtypes->All fields
- CountryMc Edit Context mapping->FcAddress->CountryMc->CountryRecords
- StateMc Edit Context mapping->FcAddress->StateMc->StateRecords
- PriorityMc Edit Context mapping->FcAddress->PriorityMc->PriorityRecords
– Model attribute
- Default_Begda Edit Context mapping->FcPersInfo->Default_Begda
– Value nodes
- UI Edit Context mapping->FcAddress->UI->All fields
- FutureDay Edit Context mapping->FcPersInfo->All fields and sub folders
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 36
36
- 37. 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
- 38. 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 – don’t select the web dynpro component
interface controller which has the same name!
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 38
38
- 39. Create WD components: VAC: View: Detail: Context
To pass the data between BLC’s 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 Edit Context mapping->VcAddressDetail->SelectedInfotype->All fields
- Subtypes Edit Context mapping-> VcAddressDetail->Subtypes->All fields
- CountryMc Edit Context mapping-> VcAddressDetail->CountryMc->CountryRecords
- StateMc Edit Context mapping-> VcAddressDetail->StateMc->StateRecords
- PriorityMc Edit Context mapping-> VcAddressDetail->PriorityMc->PriorityRecords
– Model attribute
- Default_Begda Edit Context mapping-> VcAddressDetail->Default_Begda
– Value nodes
- UI Edit Context mapping-> VcAddressDetail->UI->All fields
- FutureDay Edit Context mapping-> VcAddressDetail->FutureDay->All fields/ subfolders
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 39
39
- 40. 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 header3
– text Select field Stext of context node Subtypes
– paddingBottom 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 MatrixLayout
- stretchedHorizontally false
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 40
40
- 41. Create WD components: VAC: View: Detail: Layout cont.
Add the following transparent containers to AddressContainer
– AddressDataContainer and TelephoneContainer
- layout MatrixLayout
- stretchedHorizontally false
Add the following elements to AddressDataContainer
– CountryLabel Label – City InputField
– Country DropDownByIndex – StateLabel Label
– CareOfLabel Label – State DropDownByIndex
– CareOf InputField – ZipLabel Label
– AddressLabel Label – Zip InputField
– Address InputField
– CountyLabel Label
– Address2Label Label
– County InputField
– Address2 InputField
– EmailLabel Label
– CityLabel Label
– Email InputField
Add the following elements to TelephoneContainer
– TelephoneLabel Label
– AreaCode InputField
– Telephone InputField
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 41
Specific label properties
– text use a descriptive text
- StateLabel set to field RegionLabel of context node UI
- ZipLabel set to field ZipLabel of context node UI
– visible set to visible
- CountyLabel set to field isCountyEntryVisible of context node UI
– Width
- CountryLabel & TelephoneLabel 100px
Input field properties
- CareOf – Zip
- length 30 - state set to field isZipRequired of context code UI
- value set to field Name2 of context node SelectedInfotype - value set to field Pstlz of context node SelectedInfotype
- tooltip Care of – County
- Address - length 20
- length 30 - value set to field Ort02 of context node SelectedInfotype
- value set to field Stras of context node SelectedInfotype - visible set to field isCountyEntryVisible of context node UI
- tooltip Street and House number – Email
- state required
- length 35
- Address2 - value set to field Zzemail_Id of context node SelectedInfotype
- length 30 – AreaCode
- value set to field Locat of context node SelectedInfotype
- tooltip Area code
- tooltip Additional address information
- value set to field Areac of context node SelectedInfotype
- City - visible set to field isAreaCodeVisible of context node UI
- length 20 – Telephone
- value set to field Ort01 of context node SelectedInfotype
- length 20
- tooltip City
- tooltip Telephone number
- state requied
- value set to field Telnr of context node SelectedInfotype
41
- 42. 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
- 43. Create WD components: VAC: View: Detail: Layout cont.
Add the following transparent container to EmergencyContactContainer
– EMCDataContainer
- layout MatrixLayout
- stretchedHorizontally false
Add the following elements to EMCDataContainer
– ContactPriorityLabel Label
– ContactPriority DropDownByIndex
– ContactNameLabel Label
– ContactName InputField
– RelationshipLabel Label
– Relationship InputField
– LanguageLabel Label
– Language DropDownByKey
Properties for drop down fields
– ContactPriority
- texts set to field Priority_Text of context node PriorityMc->PriorityRecords
- state required
- onselect Push new action button to setup PrioritySelect action
– Language
- selectedKey set to field Zz_Cnt_Langu of context node SelectedInfotype
- state required
- onselect Push new action button to setup Dummy action
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 43
Specific label properties
– Width
- ContactPriorityLabel 100px
Input field properties
- ContactName
- value set to field Zz_Cnt_Name of context node SelectedInfotype
- tooltip Contact Name
- state required
- Relationship
- value set to field Zz_Cnt_Relat of context node SelectedInfotype
- tooltip Relationship
- state required
43
- 44. Create WD components: VAC: View: Detail: Layout cont.
Add the following elements to DateContainer
– Radio_asofdate RadioButtonGroupByIndex
– Begda InputField
Properties for Radio_asofdate Properties for Begda
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 44
44
- 45. 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 Edit Context mapping->FcAddress->SelectedInfotype->All fields
- Subtypes Edit Context mapping->FcPersInfo->Subtypes->All fields
– Model attribute
- Default_Begda Edit Context mapping->FcPersInfo->Default_Begda
– Value nodes
- UI Edit Context mapping->FcAddress->UI->All fields
- FutureDay Edit Context mapping->FcPersInfo->All fields and sub folders
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 45
45
- 46. 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
- 47. 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 – don’t select the web dynpro component
interface controller which has the same name!
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 47
47
- 48. Create WD components: VAC: View: Review: Context
To pass the data between BLC’s and this VAC (and also to trigger events)
we need to create context nodes
Create model/value nodes and perform binding
– Model nodes
- SelectedInfotype Edit Context mapping->VcAddressReview->SelectedInfotype->All fields
- Subtypes Edit Context mapping->VcAddressReview->Subtypes->All fields
– Value nodes
- UI Edit Context mapping->VcAddressReview->UI->All fields
- FutureDay Edit Context mapping->VcAddressReview->FutureDay->All fields/ subfolders
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 48
48
- 49. 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 header3
– text Select field Stext of context node Subtypes
– paddingBottom 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 MatrixLayout
- stretchedHorizontally false
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 49
49
- 50. Create WD components: VAC: View: Review: Layout cont.
Add the following transparent containers to AddressContainer
– AddressDataContainer and TelephoneContainer
- layout MatrixLayout
- stretchedHorizontally false
Add the following elements to AddressDataContainer
– CountryLabel Label – City TextView
– Country TextView – StateLabel Label
– CareOfLabel Label – State TextView
– CareOf TextView – ZipLabel Label
– AddressLabel Label – Zip TextView
– Address TextView
– CountyLabel Label
– Address2Label Label
– County TextView
– Address2 TextView
– EmailLabel Label
– CityLabel Label
– Email TextView
Add the following elements to TelephoneContainer
– TelephoneLabel Label
– AreaCode TextView
– Telephone TextView
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 50
Specific label properties
– text use a descriptive text
- StateLabel set to field RegionLabel of context node UI
- ZipLabel set to field ZipLabel of context node UI
– visible set to visible
- CountyLabel set to field isCountyEntryVisible of context node UI
– Width
- CountryLabel & TelephoneLabel 100px
Text view field properties
- Country
set to field Land1_Text of context node SelectedInfotype–
- text
Zip
- tooltip Country - text set to field Pstlz of context node SelectedInfotype
- CareOf – County
- text set to field Name2 of context node SelectedInfotype - text set to field Ort02 of context node SelectedInfotype
- tooltip Care of - visible set to field isCountyEntryVisible of context node UI
- Address – Email
- text set to field Stras of context node SelectedInfotype - text set to field Zzemail_Id of context node SelectedInfotype
- tooltip Street and House number – AreaCode
- Address2 - tooltip Area code
- text set to field Locat of context node SelectedInfotype - text set to field Areac of context node SelectedInfotype
- tooltip Additional address information – Telephone
– City - tooltip Telephone number
- text set to field Ort01 of context node SelectedInfotype - text set to field Telnr of context node SelectedInfotype
- tooltip City
– State
- text set to field Sate_Text of context node SelectedInfotype
50
- 51. 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: sap.xss.configurationComponentDC
Value: 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: sap.xss.configurationComponentName
Value: com.demo.hr.ess.address.cc.CcAddress
51
- 53. 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
- 54. Add source code to WD components: FcAddress: CC
Method
– wdDoExit
– addValueHelp
- wdThis.wdGetFcPersInfoInterface().getF4();
- F4TextHelper.SetF4Values(wdThis.wdGetAPI(), wdContext.nodeF4_Values());
– cleanup
- clearSelection();
– clearSelection – selectCountry
– deleteRecord – selectPriority
– getCountries – selectRecord
– getPriorities – selectState
– getStates – setDefaultCountry
– modifyRecord – seteDefaultPriority
– newRecord – setDefaultState
– setInstructions
– onInit
– setUI
– readRecord
– 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
- 55. Add source code to WD components: FcAddress: IC
Methods
– cleanup – readRecord
- wdThis.wdGetFcAddressController().cleanup(); - wdThis.wdGetFcAddressController().readRecord();
– clearSelection – selectCountry
- wdThis.wdGetFcAddressController().clearSelection(); - wdThis.wdGetFcAddressController().selectCountry(Country);
– deleteRecord – selectPriority
- wdThis.wdGetFcAddressController().deleteRecord(selection); - wdThis.wdGetFcAddressController().selectPriority(Priority);
– getCountries – selectRecord
- wdThis.wdGetFcAddressController().getCountries(); - wdThis.wdGetFcAddressController().selectRecord(selection);
– getPriorities – selectState
- wdThis.wdGetFcAddressController().getPriorities(Employeenu - wdThis.wdGetFcAddressController().selectState(State);
mber, Priority);
– setDefaultCountry
– getStates - wdThis.wdGetFcAddressController().setDefaultCountry(Count
- wdThis.wdGetFcAddressController().getStates(Country); ry);
– modifyRecord – setDefaultPriority
- wdThis.wdGetFcAddressController().modifyRecord(); - 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
- 56. 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
- 57. 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");
int selectedRecord;
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
- 58. 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
- 59. Add source code to WD components: VcAddressOverview:
BizCardsView
Methods
– wdDoModifyView
– onActionCancel
- wdThis.wdGetVcAddressOverviewController().cancel();
– onActionDelete
- wdThis.wdGetVcAddressOverviewController().delete(index);
– onActionEdit
- wdThis.wdGetVcAddressOverviewController().edit(index);
– onActionNew
- wdThis.wdGetVcAddressOverviewController().create(subtype);
© 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
- 60. 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
- 61. 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
- 62. 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
- 63. 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
- 64. 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
- 65. 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
- 66. 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
- 67. 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
- 68. DEPLOY &
RUN
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 68
68
- 70. Screenshots of the completed application: Overview screen
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 70
70
- 71. Screenshots of the completed application: Detailed screen
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 71
71
- 72. Screenshots of the completed application: Review/Delete screen
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 72
72
- 73. Screenshots of the completed application: Confirmation screen
© SAP AG 2006, SAP TechEd ’06 / SDN Day / 73
73
- 74. 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
- 75. 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
- 76. 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
- 77. 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