Guided Activity FloorPlan Manager and Usage of Shared data between UIBB’s in Web Dynpro ABAP Applications

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

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.

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.

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

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

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

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.

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’.

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

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

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

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

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.

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

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”.

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.

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

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”.

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

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

Activate the entire component.

iv. Employee Skill Information Component creation:

Create Webdynpro component ‘YSKILL’.

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

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

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

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

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

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”.

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

Create a view “V_CONFRM” and add a button for saving the employee data.

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.

Activate the entire component.

v. Guided Activity Floorplan Creation:

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

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

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

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

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

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.

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

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

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

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

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

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.

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

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

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

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.

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.

Select “Exit To Main “ Button.

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.

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

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

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.

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

The Confirmation screen will gets created & displayed as below.

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

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.

Enter some employee no here entered as “1”.

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

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

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

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

Click “SAVE” button to save the Employee information in table “YEMPLOYEE” database.On Click of “SAVE” button the employee will gets saved the database.

To close the browser click the “CANCEL” button.