SlideShare une entreprise Scribd logo
1  sur  98
Télécharger pour lire hors ligne
Custom
development of web
dynpro ESS
applications using
Floor Plan Manager




     1
Agenda


Harald Reiter, PMP
   Project Manager,




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




                                2
Session Abstract

Create WD components

Add source code to WD components

Demo and screenshots




         3
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
DEMO
 © SAP AG 2006, SAP TechEd ’06 / SDN Day / 5




           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




                                        6
Session Abstract

Create WD components

Add source code to WD components

Demo and screenshots




         7
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
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
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
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
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
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
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
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
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
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
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 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
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
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
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
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          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
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 VAC’s 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 – don’t 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 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
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   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
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 – don’t 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 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
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
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
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                                     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
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
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
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 – don’t 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 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
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
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
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
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                                              – 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
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
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");
                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
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);
                – 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
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
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager
Custom development of web dynpro ESS applications using Floor Plan Manager

Contenu connexe

Tendances

vCenter Infrastructure Navigator 1.1 - What's New
vCenter Infrastructure Navigator 1.1 - What's NewvCenter Infrastructure Navigator 1.1 - What's New
vCenter Infrastructure Navigator 1.1 - What's NewEric Sloof
 
SCCM Interview Questions & Answers
SCCM Interview Questions & AnswersSCCM Interview Questions & Answers
SCCM Interview Questions & AnswersMirasrajSrivastava
 
Alternative Architecture Overview 44956 A
Alternative Architecture Overview 44956 AAlternative Architecture Overview 44956 A
Alternative Architecture Overview 44956 AJames Price
 
Amd V Nested Paging
Amd V Nested PagingAmd V Nested Paging
Amd V Nested Pagingjworth
 
December 2012 (Belmont Self Service Portal)
December 2012 (Belmont Self Service Portal)December 2012 (Belmont Self Service Portal)
December 2012 (Belmont Self Service Portal)CM-UG.com
 
Qmf for z os nordic db2 days andy
Qmf for z os nordic db2 days andyQmf for z os nordic db2 days andy
Qmf for z os nordic db2 days andyPeter Schouboe
 
BP501 - Building and deploying custom IBM sametime connect client installatio...
BP501 - Building and deploying custom IBM sametime connect client installatio...BP501 - Building and deploying custom IBM sametime connect client installatio...
BP501 - Building and deploying custom IBM sametime connect client installatio...Carl Tyler
 
TSM 6.4 Technical updates
TSM 6.4 Technical updates TSM 6.4 Technical updates
TSM 6.4 Technical updates Solv AS
 
md firmware upgrade UI spec Demo
md firmware upgrade UI spec Demomd firmware upgrade UI spec Demo
md firmware upgrade UI spec Demoyiwensyao
 
Amey Documentum V6 Upgrade Case Study
Amey Documentum V6 Upgrade Case StudyAmey Documentum V6 Upgrade Case Study
Amey Documentum V6 Upgrade Case StudyDavidBusby
 

Tendances (11)

vCenter Infrastructure Navigator 1.1 - What's New
vCenter Infrastructure Navigator 1.1 - What's NewvCenter Infrastructure Navigator 1.1 - What's New
vCenter Infrastructure Navigator 1.1 - What's New
 
SCCM Interview Questions & Answers
SCCM Interview Questions & AnswersSCCM Interview Questions & Answers
SCCM Interview Questions & Answers
 
Alternative Architecture Overview 44956 A
Alternative Architecture Overview 44956 AAlternative Architecture Overview 44956 A
Alternative Architecture Overview 44956 A
 
Amd V Nested Paging
Amd V Nested PagingAmd V Nested Paging
Amd V Nested Paging
 
December 2012 (Belmont Self Service Portal)
December 2012 (Belmont Self Service Portal)December 2012 (Belmont Self Service Portal)
December 2012 (Belmont Self Service Portal)
 
Qmf for z os nordic db2 days andy
Qmf for z os nordic db2 days andyQmf for z os nordic db2 days andy
Qmf for z os nordic db2 days andy
 
BP501 - Building and deploying custom IBM sametime connect client installatio...
BP501 - Building and deploying custom IBM sametime connect client installatio...BP501 - Building and deploying custom IBM sametime connect client installatio...
BP501 - Building and deploying custom IBM sametime connect client installatio...
 
TSM 6.4 Technical updates
TSM 6.4 Technical updates TSM 6.4 Technical updates
TSM 6.4 Technical updates
 
Reddy
ReddyReddy
Reddy
 
md firmware upgrade UI spec Demo
md firmware upgrade UI spec Demomd firmware upgrade UI spec Demo
md firmware upgrade UI spec Demo
 
Amey Documentum V6 Upgrade Case Study
Amey Documentum V6 Upgrade Case StudyAmey Documentum V6 Upgrade Case Study
Amey Documentum V6 Upgrade Case Study
 

En vedette

08 01 businessobjectsbuilder
08 01 businessobjectsbuilder08 01 businessobjectsbuilder
08 01 businessobjectsbuildertflung
 
15 a 01 reporting
15 a 01 reporting15 a 01 reporting
15 a 01 reportingtflung
 
02 01 introduction
02 01 introduction02 01 introduction
02 01 introductiontflung
 
10 01 containersbindings
10 01 containersbindings10 01 containersbindings
10 01 containersbindingstflung
 
2.business object repository
2.business object repository2.business object repository
2.business object repositoryAjay Kumar ☁
 
03 01 whatisworkflow
03 01 whatisworkflow03 01 whatisworkflow
03 01 whatisworkflowtflung
 
07 b 01workflowdefinition
07 b 01workflowdefinition07 b 01workflowdefinition
07 b 01workflowdefinitiontflung
 
05 a 01workflowarchitecture
05 a 01workflowarchitecture05 a 01workflowarchitecture
05 a 01workflowarchitecturetflung
 
09 01 tasks
09 01 tasks09 01 tasks
09 01 taskstflung
 
04 01 workplace inbox
04 01 workplace inbox04 01 workplace inbox
04 01 workplace inboxtflung
 
12 01 deadline
12 01 deadline12 01 deadline
12 01 deadlinetflung
 
05 b 01workflowcustomizing
05 b 01workflowcustomizing05 b 01workflowcustomizing
05 b 01workflowcustomizingtflung
 
11 01 routing
11 01 routing11 01 routing
11 01 routingtflung
 
07 a 01templates
07 a 01templates07 a 01templates
07 a 01templatestflung
 
SAP Business Workflow - Best Practices
SAP Business Workflow - Best PracticesSAP Business Workflow - Best Practices
SAP Business Workflow - Best PracticesWarren Eiserman
 
06 1 organizational structure
06 1 organizational structure06 1 organizational structure
06 1 organizational structuretflung
 
SAP HCM EhP6 and HR Renewal Overview
SAP HCM EhP6 and HR Renewal OverviewSAP HCM EhP6 and HR Renewal Overview
SAP HCM EhP6 and HR Renewal OverviewAndrey Kulikov
 
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...SAPinsider Events
 

En vedette (20)

08 01 businessobjectsbuilder
08 01 businessobjectsbuilder08 01 businessobjectsbuilder
08 01 businessobjectsbuilder
 
15 a 01 reporting
15 a 01 reporting15 a 01 reporting
15 a 01 reporting
 
02 01 introduction
02 01 introduction02 01 introduction
02 01 introduction
 
10 01 containersbindings
10 01 containersbindings10 01 containersbindings
10 01 containersbindings
 
2.business object repository
2.business object repository2.business object repository
2.business object repository
 
03 01 whatisworkflow
03 01 whatisworkflow03 01 whatisworkflow
03 01 whatisworkflow
 
07 b 01workflowdefinition
07 b 01workflowdefinition07 b 01workflowdefinition
07 b 01workflowdefinition
 
05 a 01workflowarchitecture
05 a 01workflowarchitecture05 a 01workflowarchitecture
05 a 01workflowarchitecture
 
09 01 tasks
09 01 tasks09 01 tasks
09 01 tasks
 
04 01 workplace inbox
04 01 workplace inbox04 01 workplace inbox
04 01 workplace inbox
 
12 01 deadline
12 01 deadline12 01 deadline
12 01 deadline
 
05 b 01workflowcustomizing
05 b 01workflowcustomizing05 b 01workflowcustomizing
05 b 01workflowcustomizing
 
11 01 routing
11 01 routing11 01 routing
11 01 routing
 
07 a 01templates
07 a 01templates07 a 01templates
07 a 01templates
 
SAP Business Workflow - Best Practices
SAP Business Workflow - Best PracticesSAP Business Workflow - Best Practices
SAP Business Workflow - Best Practices
 
06 1 organizational structure
06 1 organizational structure06 1 organizational structure
06 1 organizational structure
 
SAP workflow classics
SAP workflow classicsSAP workflow classics
SAP workflow classics
 
SAP HCM EhP6 and HR Renewal Overview
SAP HCM EhP6 and HR Renewal OverviewSAP HCM EhP6 and HR Renewal Overview
SAP HCM EhP6 and HR Renewal Overview
 
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...
Latest Enhancements in SAP ERP HCM Self-Services: HR Renewal, SAP Fiori, and ...
 
Sap workflow training
Sap workflow trainingSap workflow training
Sap workflow training
 

Similaire à Custom development of web dynpro ESS applications using Floor Plan Manager

Cloud-native Java EE-volution
Cloud-native Java EE-volutionCloud-native Java EE-volution
Cloud-native Java EE-volutionQAware GmbH
 
Stephan pfister deep dive personal v disk
Stephan pfister deep dive personal v diskStephan pfister deep dive personal v disk
Stephan pfister deep dive personal v diskDigicomp Academy AG
 
Product Overview: The New IBM UrbanCode Deploy 6.0
Product Overview: The New IBM UrbanCode Deploy 6.0Product Overview: The New IBM UrbanCode Deploy 6.0
Product Overview: The New IBM UrbanCode Deploy 6.0IBM UrbanCode Products
 
EMC SRM vs. Sentinel Navigator - Deep dive
EMC SRM vs. Sentinel Navigator - Deep diveEMC SRM vs. Sentinel Navigator - Deep dive
EMC SRM vs. Sentinel Navigator - Deep divesansentinel
 
NetWeaver Developer Studio for New-Beas
NetWeaver Developer Studio for New-BeasNetWeaver Developer Studio for New-Beas
NetWeaver Developer Studio for New-BeasChander445
 
Application Model for Cloud Deployment
Application Model for Cloud DeploymentApplication Model for Cloud Deployment
Application Model for Cloud DeploymentJim Kaskade
 
Mdb dn 2017_14b_cloud_foundry
Mdb dn 2017_14b_cloud_foundryMdb dn 2017_14b_cloud_foundry
Mdb dn 2017_14b_cloud_foundryDaniel M. Farrell
 
Release webinar architecture
Release webinar   architectureRelease webinar   architecture
Release webinar architectureBigData_Europe
 
WebSphere Technical University: Top WebSphere Problem Determination Features
WebSphere Technical University: Top WebSphere Problem Determination FeaturesWebSphere Technical University: Top WebSphere Problem Determination Features
WebSphere Technical University: Top WebSphere Problem Determination FeaturesChris Bailey
 
Pivotal Cloud Foundry 2.6: A First Look
Pivotal Cloud Foundry 2.6: A First LookPivotal Cloud Foundry 2.6: A First Look
Pivotal Cloud Foundry 2.6: A First LookVMware Tanzu
 
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...Peter Daalmans
 
Private Cloud Academy: Backup and DPM 2010
Private Cloud Academy: Backup and DPM 2010Private Cloud Academy: Backup and DPM 2010
Private Cloud Academy: Backup and DPM 2010Aidan Finn
 
Upgrade to IBM z/OS V2.5 Planning
Upgrade to IBM z/OS V2.5 PlanningUpgrade to IBM z/OS V2.5 Planning
Upgrade to IBM z/OS V2.5 PlanningMarna Walle
 
Exercise: Building Node-webkit apps
Exercise: Building Node-webkit appsExercise: Building Node-webkit apps
Exercise: Building Node-webkit appsEvgenios Skitsanos
 
Creating UX Applications that Target both Silverlight and WPF
Creating UX Applications that Target both Silverlight and WPFCreating UX Applications that Target both Silverlight and WPF
Creating UX Applications that Target both Silverlight and WPFChristian Thilmany
 
Building Composite Applications with Silverlight - Prism 2.0
Building Composite Applications with Silverlight - Prism 2.0Building Composite Applications with Silverlight - Prism 2.0
Building Composite Applications with Silverlight - Prism 2.0Christian Thilmany
 

Similaire à Custom development of web dynpro ESS applications using Floor Plan Manager (20)

Cloud-native Java EE-volution
Cloud-native Java EE-volutionCloud-native Java EE-volution
Cloud-native Java EE-volution
 
Stephan pfister deep dive personal v disk
Stephan pfister deep dive personal v diskStephan pfister deep dive personal v disk
Stephan pfister deep dive personal v disk
 
Product Overview: The New IBM UrbanCode Deploy 6.0
Product Overview: The New IBM UrbanCode Deploy 6.0Product Overview: The New IBM UrbanCode Deploy 6.0
Product Overview: The New IBM UrbanCode Deploy 6.0
 
GuideIT High Level Consulting Framework
GuideIT High Level Consulting FrameworkGuideIT High Level Consulting Framework
GuideIT High Level Consulting Framework
 
EMC SRM vs. Sentinel Navigator - Deep dive
EMC SRM vs. Sentinel Navigator - Deep diveEMC SRM vs. Sentinel Navigator - Deep dive
EMC SRM vs. Sentinel Navigator - Deep dive
 
NetWeaver Developer Studio for New-Beas
NetWeaver Developer Studio for New-BeasNetWeaver Developer Studio for New-Beas
NetWeaver Developer Studio for New-Beas
 
Application Model for Cloud Deployment
Application Model for Cloud DeploymentApplication Model for Cloud Deployment
Application Model for Cloud Deployment
 
Mdb dn 2017_14b_cloud_foundry
Mdb dn 2017_14b_cloud_foundryMdb dn 2017_14b_cloud_foundry
Mdb dn 2017_14b_cloud_foundry
 
Release webinar architecture
Release webinar   architectureRelease webinar   architecture
Release webinar architecture
 
Sybase Unwired Platform- Data Change Notification
Sybase Unwired Platform- Data Change NotificationSybase Unwired Platform- Data Change Notification
Sybase Unwired Platform- Data Change Notification
 
WebSphere Technical University: Top WebSphere Problem Determination Features
WebSphere Technical University: Top WebSphere Problem Determination FeaturesWebSphere Technical University: Top WebSphere Problem Determination Features
WebSphere Technical University: Top WebSphere Problem Determination Features
 
Pivotal Cloud Foundry 2.6: A First Look
Pivotal Cloud Foundry 2.6: A First LookPivotal Cloud Foundry 2.6: A First Look
Pivotal Cloud Foundry 2.6: A First Look
 
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...
How to Extend the App Model to Support Your User-Centric XenDesktop in the Da...
 
RESUME-NirmalUpadhyay
RESUME-NirmalUpadhyayRESUME-NirmalUpadhyay
RESUME-NirmalUpadhyay
 
Private Cloud Academy: Backup and DPM 2010
Private Cloud Academy: Backup and DPM 2010Private Cloud Academy: Backup and DPM 2010
Private Cloud Academy: Backup and DPM 2010
 
Upgrade to IBM z/OS V2.5 Planning
Upgrade to IBM z/OS V2.5 PlanningUpgrade to IBM z/OS V2.5 Planning
Upgrade to IBM z/OS V2.5 Planning
 
Exercise: Building Node-webkit apps
Exercise: Building Node-webkit appsExercise: Building Node-webkit apps
Exercise: Building Node-webkit apps
 
Creating UX Applications that Target both Silverlight and WPF
Creating UX Applications that Target both Silverlight and WPFCreating UX Applications that Target both Silverlight and WPF
Creating UX Applications that Target both Silverlight and WPF
 
Building Composite Applications with Silverlight - Prism 2.0
Building Composite Applications with Silverlight - Prism 2.0Building Composite Applications with Silverlight - Prism 2.0
Building Composite Applications with Silverlight - Prism 2.0
 
React october2017
React october2017React october2017
React october2017
 

Plus de Juanfe1978

Component fite
Component fiteComponent fite
Component fiteJuanfe1978
 
1ux2y54tcwomq2gtx7pd
1ux2y54tcwomq2gtx7pd1ux2y54tcwomq2gtx7pd
1ux2y54tcwomq2gtx7pdJuanfe1978
 
Mss new object_data_provider_(oadp)
Mss new object_data_provider_(oadp)Mss new object_data_provider_(oadp)
Mss new object_data_provider_(oadp)Juanfe1978
 
Ess xss homepage_framework_ecc_50_erp_2004
Ess xss homepage_framework_ecc_50_erp_2004Ess xss homepage_framework_ecc_50_erp_2004
Ess xss homepage_framework_ecc_50_erp_2004Juanfe1978
 

Plus de Juanfe1978 (6)

Component fite
Component fiteComponent fite
Component fite
 
Km
KmKm
Km
 
1ux2y54tcwomq2gtx7pd
1ux2y54tcwomq2gtx7pd1ux2y54tcwomq2gtx7pd
1ux2y54tcwomq2gtx7pd
 
Mss new object_data_provider_(oadp)
Mss new object_data_provider_(oadp)Mss new object_data_provider_(oadp)
Mss new object_data_provider_(oadp)
 
Ess xss homepage_framework_ecc_50_erp_2004
Ess xss homepage_framework_ecc_50_erp_2004Ess xss homepage_framework_ecc_50_erp_2004
Ess xss homepage_framework_ecc_50_erp_2004
 
Leave Request
Leave RequestLeave Request
Leave Request
 

Custom development of web dynpro ESS applications using Floor Plan Manager

  • 1. Custom development of web dynpro ESS applications using Floor Plan Manager 1
  • 2. Agenda Harald Reiter, PMP Project Manager, © SAP AG 2006, SAP TechEd ’06 / SDN Day / 2 2
  • 3. Session Abstract Create WD components Add source code to WD components Demo and screenshots 3
  • 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
  • 7. Session Abstract Create WD components Add source code to WD components Demo and screenshots 7
  • 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
  • 52. Session Abstract Create WD components Add source code to WD components Demo and screenshots 52
  • 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
  • 69. Session Abstract Create WD components Add source code to WD components Demo and screenshots 69
  • 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