Skip to Content

This article illustrates the Usage of Guided Activity Floorplan Manager & data sharing between different UIBB’s in Web Dynpro ABAP applications.

Table of Contents:

Basic Overview

Demo Scenario

Development:

  1. Table

  2. Interface Component Creation

  3. Personal Information Component creation

  4. Employee Skill Information Component creation

  5. Guided Activity Floorplan Creation

  6. Implementing the Code

  7. Output

Basic Overview

  Interfaces:
   IF_FPM_SHARED_DATA          :   Component implemented with this interface can behave as a data sharing  link between different UIBB’s.So in such a  component all the interface nodes & methods are created which can be used in different components as component usage.
   IF_FPM_UI_BUILDING_BLOCK :   Component implemented with interface can participate in FPM .So in such a component all the UIBB’s and events are   triggered.

Demo Scenario:   

  In this demo scenario Employee information which is collected from different UIBB’s of GAF steps will be  updated to a table ‘YEMPLOYEE’.

    YSHARE -> In this Webdynpro component interface ‘IF_FPM_SHARED_DATA’ will be implemented  which contains all interface nodes & methods.

    YEMP     -> In this Webdynpro component interface ‘IF_FPM_UI_BUILDING_BLOCK will be implemented  which contains Views having  Employee personal information .

    YSKILL  -> In this Webdynpro component interface ‘IF_FPM_UI_BUILDING_BLOCK will be implemented which contains Views having  Employee Skillset information  & in this component all the details will be updated to employee table.

Development:

i. Table :

Create a transparent table YEMPLOYEE with the below fields

/wp-content/uploads/2012/03/tab_84144.jpg

ii. Interface Component Creation:

Logon to SAP and go to “SE80”

            Create a WebDynpro component as shown.

            Select WebDynpro Comp. /Intf and give a name to the component.

/wp-content/uploads/2012/03/log_84145.jpg

Give the component name and press EnterKey .Click “YES” on the pop upscreen.View are not required for this Interface component since this is used only as data sharing component.

/wp-content/uploads/2012/03/comp_84194.jpg

Under “Implemented Interface” tab enter the interface “IF_FPM_SHARED_DATA” & save.

/wp-content/uploads/2012/03/ysh1_84195.jpg

Create nodes ‘N_EMP’ in the Component controller which is used for holding employee personal information.

/wp-content/uploads/2012/03/ysh2_84196.jpg

/wp-content/uploads/2012/03/ysh3_82990.jpg

/wp-content/uploads/2012/03/ysh4_82991.jpg

Create nodes ‘N_SKILL’ in the Component controller which is used for holding employee skillset information.

/wp-content/uploads/2012/03/ysh5_84197.jpg

/wp-content/uploads/2012/03/ysh6_82993.jpg

/wp-content/uploads/2012/03/ysh7_84198.jpg

Create an interface method “UPDATE” which will fetch the data of employee personal information ( node N_EMP) , skillset information ( node N_SKILL) and update the data in table YEMPLOYEE.

/wp-content/uploads/2012/03/ysh8_82998.jpg

Inside the UPDATE method implement the below code.

Update Method

method UPDATE
  DATA ls_yemployee type yemployee. 
***Get personal information
  DATA lo_nd_n_emp TYPE REF TO if_wd_context_node.
  DATA lo_el_n_emp TYPE REF TO if_wd_context_element.
  DATA ls_n_emp TYPE wd_this->Element_n_emp.
* navigate from <CONTEXT> to <N_EMP> via lead selection
  lo_nd_n_emp = wd_context->get_child_node( name = wd_this->wdctx_n_emp ).
* get element via lead selection
  lo_el_n_emp = lo_nd_n_emp->get_element( ).
* get all declared attributes
  lo_el_n_emp->get_static_attributes(
    IMPORTING
      static_attributes = ls_n_emp ).
 
  ls_yemployee-pernr = ls_n_emp-pernr.
  ls_yemployee-vorna = ls_n_emp-vorna.
  ls_yemployee-nachn = ls_n_emp-nachn.
  ls_yemployee-gbdat = ls_n_emp-gbdat.
 
***Get Skillset information
  DATA lo_nd_n_skill TYPE REF TO if_wd_context_node.
  DATA lo_el_n_skill TYPE REF TO if_wd_context_element.
  DATA ls_n_skill TYPE wd_this->Element_n_skill.
* navigate from <CONTEXT> to <N_SKILL> via lead selection
  lo_nd_n_skill = wd_context->get_child_node( name = wd_this->wdctx_n_skill ).
* get element via lead selection
  lo_el_n_skill = lo_nd_n_skill->get_element( ).
* get all declared attributes
  lo_el_n_skill->get_static_attributes(
    IMPORTING
      static_attributes = ls_n_skill ).

  ls_yemployee-skill1 = ls_n_skill-skill1.
  ls_yemployee-skill2 = ls_n_skill-skill2.
  ls_yemployee-quali  = ls_n_skill-quali.
***Update YEMPLOYEE DB
  INSERT YEMPLOYEE FROM ls_yemployee.
endmethod.

Now activate the entire component.

iii. Personal Information Component creation:

Create Webdynpro component ‘YEMP’.

/wp-content/uploads/2012/03/yemp1_84199.jpg

Under “Implemented Interface” Tab enter the interface “IF_FPM_UI_BUILDING_BLOCK” and press enter key.

/wp-content/uploads/2012/03/yemp2_83000.jpg

Click “Reimplement” button icon will gets changes to green.

/wp-content/uploads/2012/03/yemp3_83001.jpg

Under “Used Components” Tab  declare shared component “YSHARE” so that the nodes in the interface component can be used.

/wp-content/uploads/2012/03/yemp4_83002.jpg

Create an attribute “FPM” of type “IF_FPM” in component controller.

/wp-content/uploads/2012/03/yemp5_83003.jpg

Inside Component controller create the controller Usage & copy the Context node “N_EMP”.Click “Controller Usage” & select Interface controller “YSHARE”.Do Context mapping for node N_EMP.

/wp-content/uploads/2012/03/yemp7_83004.jpg

Do Context mapping for “N_EMP” node to View controller “V_EMP”.

/wp-content/uploads/2012/03/yemp8_83005.jpg

Create Input field for Employee no in the View “V_EMP” Layout .Context Binding is done for input field with attribute “PERNR” of node “N_EMP”.

/wp-content/uploads/2012/03/yemp9_83006.jpg

Create a Button and method as “SUB_STEP”.On click of this button Sub Step will get activated which we will be displaying View “V_SUB_EMP” in the Sub step.

/wp-content/uploads/2012/03/yemp10_83007.jpg

Create a View “V_SUB_EMP” which will be displayed as a sub road map.And Context mapping is done with Node “N_EMP”.

/wp-content/uploads/2012/03/yemp11_83008.jpg

In the Layout create input fields for First, Last & Date of Birth of Employee.

First Name Input field -> Context Bind with attribute “VORNA”

Last Name Input field -> Context Bind with attribute “NACHN”

Birth Date  Input field ->  Context Bind with attribute “GBDAT”.

/wp-content/uploads/2012/03/yemp12_83009.jpg

Now inside the Window “W_EMP” embed the Main view “V_EMP”.

/wp-content/uploads/2012/03/yemp13_83011.jpg

Create another window “W_SUB_EMP” and embed the sub view  “V_SUB_EMP”.

/wp-content/uploads/2012/03/yemp14_83012.jpg

Activate the entire component.

iv. Employee Skill Information Component creation:

Create Webdynpro component ‘YSKILL’.

Ysk1.jpg

Under “Implemented Interface” Tab enter the interface “IF_FPM_UI_BUILDING_BLOCK” and press enter key.

/wp-content/uploads/2012/03/ysk2_83014.jpg

Click “Reimplement” button icon will gets changes to green.

/wp-content/uploads/2012/03/ysk3_83015.jpg

Under “Used Components” Tab  declare shared component “YSHARE” so that the nodes in the interface component can be used.

/wp-content/uploads/2012/03/ysk4_83016.jpg

Inside Component controller create the controller Usage & copy the Context node “N_SKILL”.

/wp-content/uploads/2012/03/ysk5_83017.jpg

Do Context mapping for “N_SKILL” node to View controller “V_SKILL”.

/wp-content/uploads/2012/03/ysk6_83018.jpg

In the Layout Create input fields for Skillset1,Skillset2 & Qualification

Skillset 1       Input field -> Context Bind with attribute “SKILL1”

Skill set 2      Input field -> Context Bind with attribute “SKILL2”

Qualification  Input field ->  Context Bind with attribute “QUALI”.

/wp-content/uploads/2012/03/ysk7_83019.jpg

Now embed the View “V_SKILL” inside the Window “W_SKILL”.

/wp-content/uploads/2012/03/ysk8_83020.jpg

Create a view “V_CONFRM” and add a button for saving the employee data./wp-content/uploads/2012/03/ysk9_83021.jpg

And create methods “ONSAVE” & “ONCANCEL” for the respective buttons.Create a window “W_CONFRM” and embed the view “V_CONFRM”.

Now create the Interface controller Usage “YSHARE” in View “V_CONFRM” under “Properties” tab.By clicking the “CREATE” icon.

/wp-content/uploads/2012/03/ysk10_83022.jpg

/wp-content/uploads/2012/03/ysk11_83023.jpg

Activate the entire component.

v. Guided Activity Floorplan Creation:

Create an application “YEMP_GAF” for  standard webdynpro component “FPM_GAF_COMPONENT”.

/wp-content/uploads/2012/03/yfpm1_83024.jpg

/wp-content/uploads/2012/03/yfpm2_83025.jpg

Now for the application “YEMP_GAF” create the configuration, by right-click the application and select “Create/Change Configuration”.

/wp-content/uploads/2012/03/yfpm3_83026.jpg

Separate browser will gets opened for Configuration editor.Give the Configuration id as “YEMP_CONFIG”.And click “Create” button at top.And save the component as Local object

/wp-content/uploads/2012/03/yfpm4_83027.jpg

Now the application configuration “YEMP_CONFIG” got created.Create Component configuration so give name as “YEMP_COMP_CONFIG” and press Enter Key.

/wp-content/uploads/2012/03/yfpm5_83028.jpg

Select “Go to Component Configuration” button it will navigate to Component configuration editor.

/wp-content/uploads/2012/03/yfpm6_83029.jpg

/wp-content/uploads/2012/03/yfpm7_83030.jpg

Click “Create” button at the top to create the Component configuration “YEMP_COMP_CONFIG”.Save in the Local package.Now the Component configuration got created.

/wp-content/uploads/2012/03/yfpm8_83031.jpg

Rename the Roadmap “Main Step1” into “Employee”.For that select “Main Step(1)” green icon at left corner.

/wp-content/uploads/2012/03/yfpm9_83032.jpg

On selection we can see the attributes data as below.Rename “MainStep Id” & “MainStep name” with STEP1 & Employee info and save.

/wp-content/uploads/2012/03/yfpm10_83033.jpg

Now the Roadmap will be changed to “Employee Info”.

/wp-content/uploads/2012/03/yfpm11_83034.jpg

Now for the “Employee” roadmap we need to add window “W_EMP” having view “V_EMP” of component “YEMP”.So select “Attributes” button .

/wp-content/uploads/2012/03/yfpm12_83035.jpg

Then the below screen will be displayed.Fill the input fields with “YEMP” component data to assign window “W_EMP”.

/wp-content/uploads/2012/03/yfpm13_83036.jpg

Now include a Sub roadmap Step inside the Main roadmap “Employee Info”. So select the “Add Sub Step” Button at right corner of the editor.

/wp-content/uploads/2012/03/yfpm14_83037.jpg

On selection of “Add SubStep” a new Substep “SubStep 11” will gets created in between the “Employee Info” Main step.

/wp-content/uploads/2012/03/yfpm15_83038.jpg

Rename the “Substep ID” & “Substep name” to “SUBSTEP1” & “Employee Details”.

/wp-content/uploads/2012/03/yfpm16_83042.jpg

And SAVE the details by click of Save button at top left corner of editor.

/wp-content/uploads/2012/03/yfpm17_83043.jpg

Inside the Substep “Employee Details” add window “W_SUB_EMP” having view “V_SUB_EMP” of component “YEMP”.So select “Attributes” button .Fill the input fields with below details of YEMP component and SAVE.

/wp-content/uploads/2012/03/yfpm18_83048.jpg

Add a button “Exit Main Step” given by FPM frame work to move the control back to Main step “Employee Info” from Sub Step by clicking “Add Toolbar Element” on top right corner of editor.

/wp-content/uploads/2012/03/yfpm19_83049.jpg

Select “Exit To Main “ Button.

/wp-content/uploads/2012/03/yfpm20_83050.jpg

/wp-content/uploads/2012/03/yfpm21_83051.jpg

Now add another Mainstep for displaying the “Employee Skill set “ information which we had created in component “YSKILL”.So click “Add MainStep” button at top right corner of the editor.

/wp-content/uploads/2012/03/yfpm22_83052.jpg

On click of Add main step a new step “Main Step 2” will gets created as below.

/wp-content/uploads/2012/03/yfpm23_83053.jpg

Rename “Mainstep ID” & “Mainstep name” to “Step2” & “Employee Skillset” and Save.

/wp-content/uploads/2012/03/yfpm24_83054.jpg

Inside the Mainstep “Employee Skillset” add window “W_SKILL” having view “V_SKILL” of component “YSKILL”.So select “Attributes” button .And fill the below details for YSKILL component.

/wp-content/uploads/2012/03/yfpm25_83055.jpg

Now add a “Confirmation Screen” to save the all details of Employee information .So select the “Add button” for Confirmation screen creation.

/wp-content/uploads/2012/03/yfpm26_83056.jpg

The Confirmation screen will gets created & displayed as below.

/wp-content/uploads/2012/03/yfpm27_83057.jpg

Fill the Attributes data with the window “W_CONFRM” of the component “YSKILL” contains view “V_CONFRM” and SAVE.

/wp-content/uploads/2012/03/yfpm28_83058.jpg

With this entire design part of Floor plan is done.

vi. Implementing the Code:

1. Navigation to Sub step “Employee Details” on Click of SubStep Button of View “V_EMP” in Main  Step “Employee Info”:

   Create a method “ACTIVATE_SUBSTEP” in component controller of YEMP .And implement the below code in the Activate_substep method.

Activate_Substep

method ACTIVATE_SUBSTEP .
DATA  : IO_EVENT TYPE REF TO CL_FPM_EVENT.
*—Create FPM instance
CALL METHOD CL_FPM_FACTORY=>GET_INSTANCE
  RECEIVING
    RO_INSTANCE = wd_this->FPM.   
*—dynamically create event
  CALL METHOD CL_FPM_EVENT=>CREATE_BY_ID
    EXPORTING
      IV_EVENT_ID = CL_FPM_EVENT=>GC_EVENT_CHANGE_STEP
    RECEIVING
      RO_EVENT    = IO_EVENT     .
*–pass main step ID
*– for Employee Info we had declared Mainstep Id as “STEP1”.
CALL METHOD IO_EVENT->MO_EVENT_DATA->SET_VALUE
   EXPORTING
     IV_KEY   = CL_FPM_EVENT=>GC_EVENT_PARAM_MAINSTEP_ID
     IV_VALUE = ‘STEP1’.   
*–pass substep ID
*– for Employee Details we had declared Substep Id as “Substep1”.
CALL METHOD IO_EVENT->MO_EVENT_DATA->SET_VALUE
   EXPORTING
     IV_KEY   = CL_FPM_EVENT=>GC_EVENT_PARAM_SUBSTEP_ID
     IV_VALUE = ‘SUBSTEP1’.   
*–Pass the Substep Varient name
  CALL METHOD IO_EVENT->MO_EVENT_DATA->SET_VALUE
    EXPORTING
      IV_KEY   = CL_FPM_EVENT=>GC_EVENT_PARAM_SUBVARIANT_ID
      IV_VALUE = ‘SUBSTEPVARIANT_1’.     
*–Trigger event.
  CALL METHOD WD_THIS->FPM->RAISE_EVENT
    EXPORTING
      IO_EVENT = IO_EVENT. 

endmethod.

Now call the “ACTIVATE_SUBSTEP” method in View controller “V_EMP” of component “YEMP” for  button action “SUB_STEP”.Implement the below code.

Onactionsub_step

method ONACTIONSUB_STEP .

  DATA lo_COMPONENTCONTROLLER TYPE REF TO IG_COMPONENTCONTROLLER .
  lo_COMPONENTCONTROLLER =   wd_this->get_componentcontroller_ctr( ).

    lo_componentcontroller->activate_substep(
    ).
endmethod.

2. Updating the total Employee Information in Confirmation Screen On Click of “SAVE” button into table “YEMPLOYEE”:

Call the Interface method  “UPDATE” of Interface component “YSHARE” in the “ONSAVE” method of View  “V_CONFRM” of component “YSKILL”.

Implement the below code in the “ONSAVE” method.

Onactiononsave

method ONACTIONONSAVE .
*– call update method of Interface component “YSHARE”.
  DATA lo_INTERFACECONTROLLER TYPE REF TO YIWCI_SHARE .
  lo_INTERFACECONTROLLER =   wd_this->wd_cpifc_share_data( ).

    lo_interfacecontroller->update(
    ).
endmethod.

3. Closing the browser On Click of “CANCEL” button in Confirmation Screen:

   Create a method “CLOSE_STEP” in Component controller of “YSKILL”.

Close_Step

method CLOSE_STEP .

DATA: IO_EVENT TYPE REF TO CL_FPM_EVENT.

   CALL METHOD CL_FPM_FACTORY=>GET_INSTANCE
     RECEIVING
    RO_INSTANCE = wd_this->fpm.

    CALL METHOD CL_FPM_EVENT=>CREATE_BY_ID
      EXPORTING
        IV_EVENT_ID = CL_FPM_EVENT=>GC_EVENT_CLOSE
      RECEIVING
        RO_EVENT    = IO_EVENT
        .

    CALL METHOD WD_THIS->FPM->RAISE_EVENT
      EXPORTING
       IO_EVENT = IO_EVENT.
    .
endmethod.

  And call the method “CLOSE_STEP” inside the CANCEL button method “ONCANCEL” of View “V_CONFRM”.

Onactiononcancel

method ONACTIONONCANCEL .

  DATA lo_COMPONENTCONTROLLER TYPE REF TO IG_COMPONENTCONTROLLER .
  lo_COMPONENTCONTROLLER =   wd_this->get_componentcontroller_ctr( ).

    lo_componentcontroller->close_step(
    ).

endmethod.

And Activate all the Components.

vi. Output:

Goto Application “YEMP_GAF” created by us for Component “FPM_GAF_COMPONENT”.Select the “Parameters” tab.Select the parameter “WDCONFIGURATIONID” and pass the application configuration value “YEMP_CONFIG” created by us.Now SAVE the application and test the entire application.

/wp-content/uploads/2012/03/yop1_83059.jpg

Enter some employee no here entered as “1”.

/wp-content/uploads/2012/03/yop2_83060.jpg

Now click “Full Details Of Employee” button it will navigate to Sub Step roadmap.

/wp-content/uploads/2012/03/yop3_83061.jpg

/wp-content/uploads/2012/03/yop4_83062.jpg

Now click “Exit to Main roadmap Step” button now the control will reach back to “Employee Info” step.

/wp-content/uploads/2012/03/yop5_83063.jpg

Click “Next” button it will navigate to “Employee Skillset” Main step. And fill some data.

/wp-content/uploads/2012/03/yop6_83064.jpg

/wp-content/uploads/2012/03/yop7_83065.jpg

Now click the “Next” button it will navigate to “Confirmation Screen”.

/wp-content/uploads/2012/03/yop8_83066.jpg

Click “SAVE” button to save the Employee information in table “YEMPLOYEE” database.On Click of “SAVE” button the employee will gets saved the database./wp-content/uploads/2012/03/yop9_83067.jpg

To close the browser click the “CANCEL” button.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

    1. Nandi Kishore Post author

      Hi GIM,

      Inside the Component configuration under Control Region select  “ADD” button we can find Varient,Substep Varient & Confirmation screen list display.From the list we need to select COnfirmation screen …

      Thanks,

      Nandi

      (0) 
  1. Kalesha Shaik

    Hi Nandi,

    Really Good Work. Its very useful object whoever working in WebDynpro. But I am trying to copy all information’s in word document. its can not copying.

    Can you please send me any document related this. Thanks in Advance.

    (0) 
  2. krishna teja peddada

    Hello Nandi,

    Thanks for sharing the knowledge.

    I am curious to know if there is any option of ‘Save and Exit’ functionality in a GAF.
    I mean, I do not want to finish the complete 10 steps in the process, but would like to change the data till step 4 and save. so that I can come back at a later point of time to continue from the next steps.

    Thanks,

    Krishna Teja Peddada

    (0) 

Leave a Reply