Feb

Creating First FPM application (GAF-

Guided Activity Floorplan)
Scenario: FPM provides different instances like OIF, QAF, GAF and
OVP. Each instance is having a different look and feel UI interface. This
post demonstrates about the GAF instance. GAF instance provides Step
based UI . One GAF instance can use any number of web dynpro
componets. Each webdynpro window forms the UI part of the GAF
instance.

Creation of Web dynpro components are described in Link:

http://freesapabap.blogspot.in/2014/02/creating-first-fpm-
application-oif.html
From Step1 to Step 65.

Step1. To Create a GAF application , Standard Web dynpro

component is provided " FPM_GAF_COMPONENET. Go to SE80 and
open the Web Dynpro Component 'FPM_GAF_COMPONENT'.
Step2. Go to the Web Dynpro Application option under the
component and right click on it to create our GAF application. Click
on the Option Create.
Step3. Provide a application name and Description and Click on the
Continue button.
Step4. The status is New. Click on Save button.
Step5. Save as Local Object.
Step6. Expand the Web Dynpro Application Option i n the left hand tree
and select the above created application. Navigate down to locate our
application.
Step7. Now our GAF application is present.
Step8. Right Click on the Application and select the Create/Change
configuration option.
Step9. The following web browser screen comes up.

Step10. Provide a Configuration ID . Now click on the New Button to

create a configuration ID.
Step11. Provide a description and click on the OK button.
Step12. Save as Local Object.
Step13. The following screen comes up. Now click on the Assigned
Configuration Name button as highlighted.
Step14. The below screen pop up comes up.
Step15. Provide a Configuration Name and Click on OK button.
Step16. The below screen appears.
Step17. Now click on the Configuration Name.
Step18. An error message is displayed. Click on the NEW button to
create the configuration.
Step19. Provide description and click on Ok button.
Step20. Save as Local Object.
Step21. The below screen Comes up.
Step22. Click On the Guided Activity Schema. we are in the Main
Step1.
Step23. Provide the Precreated Web dynpro component name under
the component column and window name under window column and
Provide some good Main Step name . The screen appearance you can
see in the preview section.
Step24. Now Click on the Main Step button to add a new step.
Step25. Provide the component name, window name and a
meaningful step name and Save the configuration.
Step26. Again click on Main Step button to Add a new main step.
Step27. Provide the second web dynpro component name and the
window name. Provide main step name and save the configuration.
Step28. Again click on Main Step button to Add a new main step.
Step30. Provide the second web dynpro component name and the
window name. Provide main step name and save the configuration.
Step31. The preview section shows the total number of steps
involved in the configuration. Save the final configuration.
Step32. Now in SE80, expand our application.
Step33. Right click on the Configuration ID and click on the Test
Button.
Step34. The below output appears. First Step.

Step35. Click on the second step.

Step36. Click on the third step.
Step37. Click on the fourth/Last step.

Creating First FPM application (OIF-

Object Instance Floorplan)
Scenario: FPM provides different instances like OIF, QAF, GAF and OVP. Each instance is
having a different look and feel UI interface. This post demonstrates about the OIF
instance. OIF instance provides Tab based UI. One OIF instance can use any number of
web dynpro componets. Each webdynpro window forms the UI part of the OIF instance.
This post creates two web dynpro components each having two windows and each window
embeds a view within the web dynpro component.

________________________________________________________________________
________
Step1. Go to Tcode- SE80.

Step2. Provide a web dynpro component name and hit the key board Enter button and
from the Pop up click on the Yes button to continue with the creation process.
Step3. Provide a description. Automatically the system suggests the window and view
name. If u want change the name and continue by clicking on the Yes button.

Step4. Save as Local Object.

Step5. Double click on the Web Dynpro component name and click on the Activate button
and the status will be active.
Step6. In order to a web dynpro component participate in the FPM application it has to
implement the interface 'IF_FPM_UI_BUILDING_BLOCK' . So Click on the Implemented
interface tab and provide the interface name as 'IF_FPM_UI_BUILDING_BLOCK' and hit the
Enter button from key board. Enter the Re implementation button to implement the
interface.
Step7. The status turns into green.
Step8. Expand the View option from the left hand tree under the web dynpro component
and double click on the view 'MAIN_VIEW'.
Step9. Right click on the ROOTUIELEMENTCONTAINER button in the right hand side to
create some UI element in the view. Select the Insert Element option.
Step10. Provide a ID and select type as Text View.
Step11. The TextView element is added on the View. The element property provides
certain option.
Step12. Provide some text definition in the Text option and hit the Enter button. The text
will appear in the View.
Step13. Right click on the View Option in the left hand tree and click on the create option
to create a new view.
Step14. Click on Yes to continue.
Step15. Provide the view name and description and hit the Continue button.
Step16. The New view appears.
Step17. Right click on the ROOTUIELEMENTCONTAINER button in the right hand side to
create some UI element in the view. Select the Insert Element option.

Step18. Provide a ID and select type as Text View.

Step19. The TextView element is added on the View. The element property provides
certain option.
Step20. Provide some text definition in the Text option and hit the Enter button. The
text will appear in the View.
Step21. Right click on the Windows Option in the left hand tree and click on the create
option to create a new window.
Step22. Provide the new window name, description and click on the Continue button.
Step23. Save it.
Step24. Teh window status changed from New to Inactive.
Step25. To Embed the second_view in the window, Right click on the window and select
Embed_view option.
Step26. Click on the F4 button.
Step27. Selectg the View name and double click on it.
Step28. The view in assigned to the window. Click on continue button.
Step29. The SECOND_VIEW is embedded to the SECOND_WINDOW.
Step30. Double click on the Web dynpro component and the status is Inactive.
Step31. Right click on the Web Dynpro component name and from the option click on
Activate.
Step32. Click on Continue button.
Step33. The status is active.
Step34. Similarly create a second web dynpro component. Provide a web dynpro
component name and hit the key board Enter button and from the Pop up click on the Yes
button to continue with the creation process.

Step35. Provide a description. Automatically the system suggests the window and view
name. If u want change the name and continue by clicking on the Yes button.
Step36. Save as Local Object.
Step37. The status is inactive. click on the Activate button .
Step38. Click on Yes button.
Step39. The web dynpro component is active.
Step40. In order to a web dynpro component participate in the FPM application it has to
implement the interface 'IF_FPM_UI_BUILDING_BLOCK' . So Click on the Implemented
interface tab and provide the interface name as 'IF_FPM_UI_BUILDING_BLOCK' and hit the
Enter button from key board. Enter the Re implementation button to implement the
interface.
Step41. The status turns into green.
Step42. From the left hand tree, double click on the window 'first_window'. The window
embeds the view.
Step43. Double click on the view 'FIRST_VIEW' from the left hand tree.
Step44. Right click on the node 'ROOTUIELEMENTCONTAINER' and select the option Insert
Element.
Step45. Provide any ID name and select type as TextView and click on the Continue
button.

Step46. The ID property provides some properties in the right hand side.
Step47. Provide some text in the Text tab and hit the Enter key from key board. The
Entered text appears on the View.
Step48. Right click on the View Option ion the Left hand tree and select create option to
create a new view.
Step49. Provide the View name and description and click on the Continue button.
Step50. The View Appears.
Step51. Right click on the node 'ROOTUIELEMENTCONTAINER' and select the option Insert
Element.
Step52. Provide any ID name and select type as TextView and click on the Continue
button.
Step53. The ID property provides some properties in the right hand side.
Step54. Provide some text in the Text tab and hit the Enter key from key board. The
Entered text appears on the View.
Step55. Right Click on the Windows option from the left hand tree under Web dynpro
component and click on Create option.
Step56. Provide the Window name and short description and click on Continue button.
Step57. Expand the window & right click on the Window name and select Embed View
option.

Step58. Click on the F4 option.

Step59. From the list select the SECONS_VIEW and double click on it.
Step60. The SECOND_VIEW is assigned to the SECOND_WINDOW.
Step61. The view is assigned to the window.
Step62. The web dynpro component status is inactive.
Step63. Right click on the component name and click on the Activate option
Step64. Click on Continue button.
Step65. The status is active.
Up to this, our web dynpro components are created with necessary windows and also they
are enabled to participate in the FPM application by implementing the interface
'IF_FPM_UI_BUILDING_BLOCK'.
________________________________________________________________________
_____
Step66. Go to Tocde- SE80.

Step67. We are going to create an OIF - FPM Instance. So open the standard FPM
Component- 'FPM_OIF_COMPONENT'.
Step68. Go to the Web Dynpro Application option Under the component and right click on
it and click on Create option.
Step69. Provide a application name and Description and Click on the Continue button.
Step70. The status is New. Click on Save button.
Step71. Save as Local Object.
Step72. Expand the Web Dynpro Application Option i n the left hand tree and select the
above created application.
Step73. Navigate down to locate our application.
Step74. Now our OIF application is present.
Step75. Right Click on the Application and select the Create/Change configuration option.

Step76. The following web browser screen comes up.

Step77. Provide a Configuration ID and hit the Enter button. An error message comes up.
Now click on the New Button to create a configuration ID.
Step78. Provide a description and click on the OK button.
Step79. Save as Local Object.
Step80. The following screen comes up. Now click on the Assigned Configuration Name
button as highlighted.
Step81. The below screen pop up comes up.
Step82. Provide a Configuration Name and Click on OK button.
Step83. A warning message comes up. Now click on the Configuration Name.
Step84. Click on the NEW button to create the configuration Name.
Step85. Provide description and click on Ok button.
Step86. Save as Local Object.
Step87. The below screen Comes up.
Step88. Under the 'Object instance Schema', there is a main view and under this a sub
view. Under the Subview, a UIBB line . Provide the web dynpro component name we
created very first in the post. and press F4 button under the Window Name section to
select the window name of the Web Dynpro Component.
Step89. Select the view 'MAIN_VIEW'.
Step90. So the OIF instance, contains the main view->sub view->uibb->web dynpro comp-
>Window.
Step91. Save it .
Step92. Now go to your SE80 screen, Refresh the web dynpro component. Go to the web
dynpro application. Expand it. The application contains the configuration ID.
Step93. Righ click on the Configuration ID and click on Test Button.
Step94. The following output comes up.
Step95. Now Go to the Configuration.
Step96. Under the Object Instance Schema, Click on the Sub view button. Now one more
UIBB line comes up under the new sub view .
Step97. In theUIBB line, Provide our Web dynpro component name created very first and
click on F4 button under Window Name column.
Step98. Select the 'SECOND_WINDOW'.
Step99. Save the configuration. Now the Main view contains two sub views and each sub
view contains a UIBB element referring to a web dynpro component->window.
Step100. Go to the Application and right click on the Configuration ID and select the TEST
button.
Step101. The below output is displayed. Click on the Sub view 2.
Step102. The output is changed.
Step103. Again go to the Configuration. Select the Main view under Object Instance
Schema.
Step104. Change the Main View Name.
Step105. Select the first sub view and change the name.
Step106. Change the sub view name.
Step107. Select the Second Sub View and change the name.
Step108. In th ePreview Section U can see the screen preview.
Step109. Again go to the OIF application and Test the Configuration ID.
Step110. The Main view and sub view name is updated in the output.

Step111. Again go to the Configuration. This time we will be add up a new Main View.
Under the Object instance Schema, click on the Main View button.
Step112. The below input fields comes up.
Step113. Provide the Main View Name. Provide our WEB dynpro component- 2 name
under the component column in the UIBB line. Click on F4 button under the Window
column. Select the First_Window.
Step114. Provide the Sub View name and then click on the Sub View button to add a new
sub view Under the Main view2.
Step115. A new input line is inserted in our Configuration.
Step116. Provide the Web Dynpro component-2 name and click on the F4 button under
the Window column. Select the Second Window.
Step117. Provide the Sub view name and Save the configuration.
Step118. Again go to the OIF application and Test the Configuration ID. Two main tabs
appear in the output.
Step119. Click on the sub view 2 under main view1.

Step120. click on the Main View2.

Step121. Click on the Sub view 2 under Main view 2.

Part1 : FPM Integrating Search UIBB and

List UIBB into FPM OVP Application
----------------------------------------------------------------------
-------------
We need a FPM application Which Enables us to
provide some search parameter and on basis of that
some result records are populated in the list like
below.

Provide some search criteria & Press Enter or Click on

the Search Button, then result list is filled with
dependent records.
This is a FPM OVP ( Over View Page) Application, which
embeds Search UIBB and List UIBB.
Design Approach:
1. Search UIBB- Search Structure, Search Feeder class
2. List UIBB- List Table type, List Feeder Clss Feeder
Class
3. Application Controller CLass
----------------------------------------------------------------------
-----------------------------------------------------------

Step1. Our Search application tries to get the details

from the VBRK table.
Step3. Here we have the structure that will provide
the search fields.
Step4. Here we have the table type which will provide
the table structure.
Step5. Display List fields.

Step6. Application controller class which implements

the interface IF_FPM_APP_CONTROLLER.
Step7. Go to the individual methods and activate each
one. At last activate the class.
Step8. Here we have the SE24 class- called as the
feeder class for the search UIBB implementing the
required interface.
Step9. Activate each method and activate the class.
Step10. Here we have the SE24 class- called as the
feeder class for the list UIBB implementing the
required interface.
Step11. Activate each method and activate the class.
Step12. Now we have to create a component
configuration for search UIBB. Go to Tx- SE80 and open
the Web dynpro component: FPM_SEARCH_UIBB. Right
click on the Component configuration and Create.
Step13. The below screen appears.
Provide the Configuration ID name and click on Enter
key. As it is not created, Click on NEW button to
create.
Step14. Provide the Description and OK.
Step15. Save in Local Object.
Step16. So here it will ask for the Feeder class.
Step17. Provide the above created Feeder class name
and click on the button Edit Parameters.
Step18. Click on OK.
Step19. Save it.
Step20. So the below message appears. Currently we
don't have any search fields are available. Close the
screen.
Step21. Go to the Search related feeder class we have
created . Open the Method GET_DEFINITION method.
Step22. Provide the below code which will use the
previously created Search Structure. Activate the
method.
Step23. Go to SE80, Open FPM_SEARCH_UIBB, Go to
our previously created Component configuration.
Double click on the Component Configuration and click
on the Display Configuration.
Step24. So here we have the search fields are
available. Click on Edit button.
Step25. Click on the Search Criteria button.

Step26. Select all the fields and click on OK button.

Step27. Save it.
Step28. Expand the Preview part. So we are done with
the Search Component Configuration.
Step29. Now let's configure the List Display part. Go to
the feeder class and open the method
GET_DEFINITION. Provide the below code and activate
the method.

Step30. Go to SE80 and open the web dynpro

component: FPM_LIST_UIBB_ATS. Right click on the
Component Configuration and click on Create.
Step31. The below screen appears.
Step32. provide a Configuration ID name and as it is
not exists at last select Create button.

Step33. Provide the description and Ok.

Step34. Save it.
Step35. It will ask for the Feeder class.
Step36. Provide the pre created feeder class name and
then select Edit Parameters.
Step37. Select OK.
Step38. The below screen appears and here in the left
side all display list fields available which is provided in
the feeder class GET_DEFINITION method. Click on
Column button.
Step39. Select all the fields and select OK.
Step40. Save it. Expand Preview Option. So we have
completed List Component Configuration.
Step41. Now go to - SE80 and open the Web Dynpro
Component: FPM_OVP_COMPONENT.
here we will create a component configuration first
and then an application. Right click on the Component
Configuration and click on Create.
Step42. The below screen appears.

Step43. Provide the configuration name and hit Enter.

As it is not yet created, click on New button to create.

Step44. Provide a description and then OK.

Step45. Save in local package.
Step46. The below screen appears.
Step47. Change the page title, provide the Explanation
Text and select Section_1.
Step48. Under Overview Page Schema: Select the
Section: SECTION_1.
Step50. From the UIBB, option select Search
Component.

Step51. The below screen appears.

Step52. Provide our pre created Search UIBB
Configuration ID and press Enter. Then Select the row
and click on Configure UIBB button.
Step53. The below screen appears. To go back click on
the marked link.
Step54. Now to add the List UIBB, From the drop down
List Component.
Step55. The below screen appears.
Step56. provide our pre step created List UIBB
component Configuration name and select the row and
click on Configure UIBB button.
Step57. So we are in our LITS UIBB configuration
screen . To go back click on the marked Link.
Step58. Save the OVP component configuration.
Step60. Expand preview option.
Step61. So we are done with the OVP component
configuration where we have added our search uibb
component configuration and list uibb component
configuration. Now let's create an OVP application.

Step62. Provide a name, description and Continue.

Step63. The below screen appears.
Step64. provide the values from theh F4 help and save
it. Expand the application.
Step65. Select the application and right click on it to
Create the application configuration.
Step66. The below screen appears.

Step67. Provide a configuration ID name and Enter. As

it is not yet created select New button.

Step68. Provide description and OK.

Step69. Save in package.
Step70. Click on the assign Configuration Name button.
Step71. The below screen appears.
Step72. Provide our pre created Component
Configuration name and OK.
Step73. Save it. Click on the configuration name link.
Step74. So we reached the previously configured
screen with the search UIBB & List UIBB. Go back by
selecting the marked link.
Step75. Save it. close the screen.
Step76. In SE80, open the pre step created application
configuration and click on the test button.
Step77. So here the needed screen appeared. But if
you provide some search criteria and click on the
search button, nothing would be displayed. The search
button is a standard button on click it triggers an
event.
Step78. Go to the feeder class of the search UIBB and
open the Process_event method. All the search
parameter provides in the search screen it would be
available in IT_FPM_SEACRH_CRITERIA internal table as
an importing parameter to this method. Set all the
search parameters to the event data and at last trigger
the LIST_FILTER which would be handled in the list
uibb feeder class PROCESS_EVENT method.
Step79. Prepare some range table type for the three
fields of the search structure.
Step80. Add a global parameter in the list feeder class.
We have to fill the select data into this global internal
table.
Step81. In the process event method of the list feeder
class handle the event which is raised in the process
event of the search uibb feeder class. Read the search
criteria values and convert into range table and have a
select query on the table and fill the global internal
table.
Step82. Go to the GET_DATA method of the list uibb
feeder class and pass the global internal table which
contains the search results to CT_DATA so that the
result records will appear on the UI screen.

Step83. Provide Search.

Step84. So the list table is filled with records from
VBRK table.
Step85. provide maximum number of records as 2 and
hit ENTER key or Search button. Only 2 lines appear in
the list.
Step86. provide a billing doc number and search. It
appears on the result list.
Part2 : FPM Integrating Search UIBB and
List UIBB into FPM OVP Application :
Link to action
-------------------------------------------------------------------------------------------------------------------
-------------------
Here is the link to create : FPM OVP Application Integrating Search UIBB and List UIBB into
FPM OVP Application

Part1: FPM :Integarting Search UIBB and List UIBB into FPM OVP Application

Here we have the FPM OVP search and display application. One more functionality we
need like the Billing Document number should be displayed as a LINK( hot spot in ABAP)
and upon selection it should display the billing document in the transaction VF03.
To achieve this functionality we need to enable below points:
1. Define an action
2. Enable the link for the billing document
3. Binding the action to the link
4. Handling the action to display the billing doc in VF03 transaction.
Step2. Go to the feeder class of the LIST UIBB. In the method GET_DEFINITION .

Step3. Define an action "DISP_BILL_DOC" in the method GET_DEFINITION .

Step4. Gp to Tcode- SE80 and open the list GUIBB component configuration.
Step5. Continue in change mode.
Step6. Select the column: VBELN & click on the display type drop down.
Step7. Select Link to action as display type.
Step8. So now the display type for VBELN is LINK to action. Now we have to assign an
event to this action.
Step9. From the FPM Event ID choose DISP_BILL_DCO(). This appears here as we have
defined an action in the GET_DEFINITION method of the feeder class of the list UIBB.
Step10. So action is defined and attached to an event . Save it.
Step11. In SE80, Open our pre created OVP application configuration and test it.
Step12. Provide some search parameters and Search. So now the billing document
number appears as a link . upon selscting the link it will not open the billing doc in VF03
tcode as we have not handled the event yet.
Step13. Now go the PROCESS_EVENT method of the feeder class of the LIST UIBB. Put the
below code under the EVENT: DISP_BILL_DOC.
Step14. Now click on the link of the billing document.
Step15. Here it is opened in VF03 tcode.

Part3 : FPM OVP Application -Integrating

Search UIBB and List UIBB: Message
Display
-------------------------------------------------------------------------------------------------------------------
-------------------------
Step1. Here we have the previously created FPM OVP application with Search & List UIBB.
Step2. Provide some search values and Search it.
Step3. Based on the search value we have below records are displayed.
Step4. Now change the search field value and click Search. Nothing is displayed. Here we
want to display a message if the search is unsuccessful so that the user can change the
search criteria and request for records.
Step5. Something like this. To Achieve this we need a small code.
Step6. Create a message text in the message class.

Step7. In the PROCESS_EVENT method of the list feeder class add the below high lighted
code.
-------------------------------------------------------------------------------------------------------------------
----------------------
METHOD if_fpm_guibb_list~process_event.

DATA : lt_fpm_search_criteria TYPE fpmgb_t_search_criteria,

lv_max_number TYPE i,
ls_rsds TYPE rsdsselopt,
lt_vbeln_range TYPE ztest_t_vbeln_range,
ls_vbeln_range LIKE LINE OF lt_vbeln_range,
lt_vkorg_range TYPE ztest_t_vkorg_range,
ls_vkorg_range LIKE LINE OF lt_vkorg_range,
lt_vtweg_range TYPE ztest_t_vtweg_range,
ls_vtweg_range LIKE LINE OF lt_vtweg_range,
lv_index TYPE sy-tabix,
l r_fpm TYPE REF TO if_fpm,
lr_navigate TYPE REF TO if_fpm_navigate_to,
ls_trans TYPE fpm_s_launch_transaction,
ls_tr_param TYPE apb_lpd_s_add_trans_parameters,
ls_para TYPE wdy_key_value.

FIELD-SYMBOLS: <fs_params_search> TYPE fpmgb_s_search_criteria,

<fs_ui_billing_doc> LIKE LINE OF gt_ui_billing_doc.
CASE io_event->mv_event_id .
* Search Event
WHEN 'DISP_BILL_DOC'. " Open Tx- VF03 TO Display the billing doc
io_event->mo_event_data->get_value(
EXPORTING
iv_key = if_fpm_guibb_list=>gc_event_par_row
IMPORTING
ev_value = lv_index ). " get the line number on the list on whcih user clicked the
link
READ TABLE gt_ui_billing_doc ASSIGNING <fs_ui_billing_doc> INDEX lv_index.

ls_trans-tcode = 'VF03'.
ls_trans-gui_type = 'WEB_GUI'.

ls_para-key = 'VBELN'.
ls_para-value = <fs_ui_billing_doc>-vbeln. " billing dcoument number
INSERT ls_para INTO TABLE ls_trans-parameter.

ls_tr_param-navigation_mode = 'EXTERNAL'.
ls_tr_param-skip_init_screen_if_possible = abap_true.

lr_fpm = cl_fpm_factory=>get_instance( ).
lr_navigate = lr_fpm->get_navigate_to( ).

lr_navigate->launch_transaction( " Opens tcode- vf03

EXPORTING is_transaction_fields = ls_trans
is_additional_parameters = ls_tr_param ).

WHEN if_fpm_guibb_list~gc_event_list_filter.
* Get fpm parameters
io_event->mo_event_data->get_value(
EXPORTING iv_key = 'SEL_TAB'
IMPORTING ev_value = lt_fpm_search_criteria ).

io_event->mo_event_data->get_value(
EXPORTING iv_key = 'MAX_NUM'
IMPORTING ev_value = lv_max_number ).

IF lt_fpm_search_criteria IS NOT INITIAL.

LOOP AT lt_fpm_search_criteria ASSIGNING <fs_params_search>.
CASE <fs_params_search>-search_attribute.
WHEN 'VBELN'.
TRY.
cl_fpm_guibb_search_conversion=>to_abap_select_option(
EXPORTING
is_fpm_search_row = <fs_params_search>
RECEIVING
rs_abap_sel_option = ls_rsds ) .
MOVE-CORRESPONDING ls_rsds TO ls_vbeln_range.
INSERT ls_vbeln_range INTO TABLE lt_vbeln_range.
CATCH cx_fpmgb.
ENDTRY.
WHEN 'VKORG'.
TRY.
cl_fpm_guibb_search_conversion=>to_abap_select_option(
EXPORTING
is_fpm_search_row = <fs_params_search>
RECEIVING
rs_abap_sel_option = ls_rsds ) .
MOVE-CORRESPONDING ls_rsds TO ls_vkorg_range.
INSERT ls_vkorg_range INTO TABLE lt_vkorg_range.
CATCH cx_fpmgb.
ENDTRY.
WHEN 'VTWEG'.
TRY.
cl_fpm_guibb_search_conversion=>to_abap_select_option(
EXPORTING
is_fpm_search_row = <fs_params_search>
RECEIVING
rs_abap_sel_option = ls_rsds ) .
MOVE-CORRESPONDING ls_rsds TO ls_vtweg_range.
INSERT ls_vtweg_range INTO TABLE lt_vtweg_range.
CATCH cx_fpmgb.
ENDTRY.
ENDCASE.
ENDLOOP.

SELECT * FROM vbrk UP TO lv_max_number

ROWS INTO CORRESPONDING FIELDS OF TABLE gt_ui_billing_doc
WHERE vbeln IN lt_vbeln_range
AND vkorg IN lt_vkorg_range
AND vtweg IN lt_vtweg_range.
ELSE.
SELECT * FROM vbrk UP TO lv_max_number
ROWS INTO CORRESPONDING FIELDS OF TABLE gt_ui_billing_doc.
ENDIF.

FIELD-SYMBOLS : <fs_message> LIKE LINE OF et_messages.

IF gt_ui_billing_doc IS INITIAL.
APPEND INITIAL LINE TO et_messages ASSIGNING <fs_message>.
<fs_message>-msgid = 'ZMSG_EXP'.
<fs_message>-severity = 'S'.
<fs_message>-msgno = '000'.
ENDIF.

WHEN OTHERS.
ENDCASE.
ENDMETHOD.

-------------------------------------------------------------------------------------------------------------------
----------------------
The method ZCL_TEST_BILL_FEEDER_LIST-PROCESS_EVENT having an exporting
parameter ET_MESSAGES which should be filled to display any message on UI.
Jan
21
Part4 : FPM OVP Application -Integrating
Search UIBB and List UIBB: Displaying
POPUP Screen
-------------------------------------------------------------------------------------------------------------------
-------------------

Step1. In our search and display list screen, need to enable the link for the billing type
field and on click on certain billing type, its relevant customizing value should be
displayed in the pop up fpm screen in different sections.
Step2. Go to Tx- SPRO. Open billing types.

Step3. Double click on billing types.

Step4. Double click on any billing type like F2.

Step5. Here we have the set up for the bill type F2.
Step6. This information are stored in TVFK table. Some of the filed info we need in our
FPM pop up screen. Just marked which we need.
Step7. For the pop up screen we need a feeder class. Go to Tcode- SE24 and create a class
and implement the below two interfaces.

Step8. Implement and active each method. FOr our popup screen design Go to the
method GET_DEFINITION.
Step9. Provide below code. Activate the method and feeder class.
Step10. Go to Tx- SE80 . Our popup screen would be a FORM UIBB. So open the below
webdynpro component & right click on the Componnnet configuration. Create.
Step11. The below screen appears.
Provide a component configuration name and click on New button to create it.

Step12. Provide the description and OK.

Save in package.
Step13. Ask for a feeder class.
Provide the feeder class that we have created in prestep. Then OK.
Step14. The left hand side field are available as we have passed the structure TVFK in the
method GET_DEFINITON.
Step15. From the drop down choose Add Group.

Step16. Similarly add 4 groups.

Step17. Select each group and change the text as per required.
Step18. First Group as: General Info.
Second Group as: Cancellation Info.
Third Group as: Pricing Info.
Fourth Group as: Output Info.
Step19. All group text is maintained properly.
Step20. Select each group ad add elements to it.
Step21. select relevant fields and ok.
Step22. So 4 fields are added to group 1.
Step23. Now drag and drop the fields on group 2 as needed.
Step24. Now drag and drop the fields on group 3 as needed.
Step25. Now drag and drop the fields on group 4 as needed.
Step26. Preview the design. Save it and close.
Step27. Now in our application configuration, we have to create a pop up page and we
have to configure the above create form component configuration. In SE80 open the
application configuration. Click on display configuration.

Step28. click on the configuration name.

Step29. Click on Edit button.
Step30. Form the left side panel, New->choose dialog box.
Step31. Change the title. Remember the Dialog box page id as 'PAGE_2' we need this page
id when calling the dialog box screen.
Step32. From the UIBB drop down, select Form component.
Step33. The below screen appears.
Step34. provide the pre created form uibb component configuration and hit enter key.
Select the line and click on Configure UIBB.
Step35. We reach here. To go back click the marked link.
Step36. Save it.
Step37. Execute our application configuration.
Now we have to make billing type filed as a link and on click on it, the modal dialog box
should open.
Step38. Go to the feeder class, get_definition method of the list uibb. Define an action.
Step39. In Tx- SE80, open the application configuration and click on display
configuration.

Click con the link configuration ID.

Select the list uibb and click configure uibb.
Step40. So our defined action is available in the left hand side. Choose the column FKART.
Change Display type to Link to action and provide FPM event ID as DISP_BILL_TYPE. Save
and close the screen.
Step41. Run the application configuration in SE80. Now bill type field appears as a link.
Step42. Now go to the feeder class of the list uibb and go to the method process event.
Provide below code under event DISP_BILL_TYPE. So it will read the bill type on click and
set teh event data nd launch the dialog box screen.
Step43. Now go to the form uibb. In the method get data, read the event data which is
the value of the billing type. Based on this get the billing type details form the TVFK
table. Set the data to UI an d make it as read only else the data will appear in edit mode.

Define the below global structure in the form feeder class attribute.
Step44. Run the application. Click on one billing type.
Step45. So here we have the pop up screen.
Step46. test for a different billing type.
Aug
25

Part5 : FPM OVP Application -Integrating

Search UIBB and List UIBB: Displaying
field Tooltip
----------------------------------------------------------------------
-----------------------

So here we have the search and list UIBB are

integrated in an OVP application. On search it displays
some records.
If you put the cursor point of CARRID field it should
display the tooltip text as the CARRNAME.
For the list we have the table type and the structure.
The structure includes both CARRID and CARRNAME
field.
In the feeder class method GET_DEFINITION of the
LIST UIBB, we have to set CARRNAME field as the
TOOLTIP reference of the CARRID field.
Here we have the select query that gets the value
when SEARCH is pressed.
Part6 : FPM OVP Application -Integrating
Header LIST UIBB and ITEM List UIBB
& Dynamically hiding ITEM LIST UIBB
----------------------------------------------------------------------
-------------------------

Here the OVP application contains two list UIBBs. One

is header UIBB which displays records form SCARR
table and another one is ITEM UIBB which displays the
records from the SPFLI table depending upon the row
selected in the HEADER UIBB.

If more than one line selected in the header UIBB then

the ITEM UIBB is set as invisible/hidden.
More than one line are selected in the header, So the
ITEM UIBB is hidden.
Create a table type and structure for the header list
UIBB.
Create a table type and structure for the item list
UIBB.
Create a feeder class for the header list UIBB and
implement the interfaces.

Activate all the methods.

Provide the below code in the GET_DEFINITION
method.
Create a feeder class for the ITEM list UIBB and
implement the interfaces.
Activate all the methods.

Provide the below code in the GET_DEFINITION

method.
Create another class which will be the application
controller class. Implement the interfaces.
Activate all the methods.
Create a configuration for the header list UIBB.
Mark all necessary attribute and provide the feeder
class.
Create a configuration for the ITEM list UIBB.
Provide the feeder class and maintain all attributes.
Create a configuration for the FPM_OVP_COMPONENT.
Add two list UIBB's and the application controller class
and mention the PAGE ID.
Here is the controller class.
Maintain the below code in the header list feeder
class.
Very first screen is loaded, the first line is made
selected and an event 'SET_SPFLI_LIST' is raised which
is handled in the ITEM list feeder class.

After onwards for any line selection and multiple line

selection different events are triggered which is
handled in the ITEM list feeder class and in the
application controller class.
Event handled in ITEM LIST feeder class.

When multiple line are selected, then in the controller

class , the ITEM list UIBB is set as hidden .
Part6 : FPM OVP Application -Integrating
Header LIST UIBB and ITEM List UIBB
& Dynamically hiding ITEM LIST UIBB
----------------------------------------------------------------------
-------------------------

Here the OVP application contains two list UIBBs. One

is header UIBB which displays records form SCARR
table and another one is ITEM UIBB which displays the
records from the SPFLI table depending upon the row
selected in the HEADER UIBB.

If more than one line selected in the header UIBB then

the ITEM UIBB is set as invisible/hidden.
More than one line are selected in the header, So the
ITEM UIBB is hidden.
Create a table type and structure for the header list
UIBB.
Create a table type and structure for the item list
UIBB.
Create a feeder class for the header list UIBB and
implement the interfaces.

Activate all the methods.

Provide the below code in the GET_DEFINITION
method.
Create a feeder class for the ITEM list UIBB and
implement the interfaces.
Activate all the methods.

Provide the below code in the GET_DEFINITION

method.
Create another class which will be the application
controller class. Implement the interfaces.
Activate all the methods.
Create a configuration for the header list UIBB.
Mark all necessary attribute and provide the feeder
class.
Create a configuration for the ITEM list UIBB.
Provide the feeder class and maintain all attributes.
Create a configuration for the FPM_OVP_COMPONENT.
Add two list UIBB's and the application controller class
and mention the PAGE ID.
Here is the controller class.
Maintain the below code in the header list feeder
class.
Very first screen is loaded, the first line is made
selected and an event 'SET_SPFLI_LIST' is raised which
is handled in the ITEM list feeder class.

After onwards for any line selection and multiple line

selection different events are triggered which is
handled in the ITEM list feeder class and in the
application controller class.
Event handled in ITEM LIST feeder class.

When multiple line are selected, then in the controller

class , the ITEM list UIBB is set as hidden .
FPM OVP Application – Tree UIBB

The tree UIBB displays the flight data from SCARR & SPFLI table. The SCARR data
displayed as the header(root) and SPFLI data as child.

Create a table type.

Create a structure - add an include
structure FPMGB_S_TREE_MASTER_COLUMN and other field as shown.
Create a feeder class and implement the interfaces.
Create an attribute.

Activate all the methods of the class. Go to the GET_DEFINITION method.

Put the below code.
Go to the GET_DATA method.

Put the below code.

Create a component configuration of the FPM_TREE_UIBB.

Provide the feeder class name and save in package.

Add the below fields. Don't add the carrid, connid field as these are root and child
columns, these will be provided form the feeder class.
Create an web dynpro application and application configuration of the webdynpro
component FPM_OVP_COMPONENT.
Add a tree component and provide the FPM_TREE_UIBB componenet
configuration name created earlier. Save .
Now test the application configuration.
FPM OVP Application: Adding a Button on
the UIBB Panel Area
The below link provides how to create a header list UIBB and an item list
UIBB.

FPM OVP Application -Integrating Header LIST UIBB and ITEM List UIBB &
Dynamically hiding ITEM LIST UIBB.

The FPM application looks like as below.

Here we want to add some BUTTON.

Open the FPM Application.

Go to the Application configuration and click on display configuration.

Click on the configuration name link.

So here we have two LIST UIBB configurations.

Select the first UIBB and click on the toolbar Schema. Here the rendering
type should be WITH Panel.
Click on Edit button.

Click on Create Toolbar Element button.

Select button and click on OK button.

So a new button added.

Provide the button text as “Display”, tooltip and FPM EVENT ID as
‘DISPLAY_FLIGHT_INFO’. Save this.
So the final changes are saved now.

Test the application.

So here the button appears in the first UIBB panel area.Next task is to
response when the Display button is clicked.

We have to code in the feeder class of the first UIBB. Select the first UIBB
and select the Configure UIBB button.
Expand the general Settings section and click on the feeder class button.

So here we have the feeder class.

Go to the Process_Event method.

We want to display this message when Display button is clicked.

Put the below piece of code.

Test the application and click on the Display button which displays the
desired message.
FPM OVP Application: Adding a Button on
the UIBB Panel Area
The below link provides how to create a header list UIBB and an item list
UIBB.

FPM OVP Application -Integrating Header LIST UIBB and ITEM List UIBB &
Dynamically hiding ITEM LIST UIBB.

The FPM application looks like as below.

Here we want to add some BUTTON.

Open the FPM Application.

Go to the Application configuration and click on display configuration.

Click on the configuration name link.

So here we have two LIST UIBB configurations.

Select the first UIBB and click on the toolbar Schema. Here the rendering
type should be WITH Panel.
Click on Edit button.

Click on Create Toolbar Element button.

Select button and click on OK button.

So a new button added.

Provide the button text as “Display”, tooltip and FPM EVENT ID as
‘DISPLAY_FLIGHT_INFO’. Save this.
So the final changes are saved now.

Test the application.

So here the button appears in the first UIBB panel area.Next task is to
response when the Display button is clicked.

We have to code in the feeder class of the first UIBB. Select the first UIBB
and select the Configure UIBB button.
Expand the general Settings section and click on the feeder class button.

So here we have the feeder class.

Go to the Process_Event method.

We want to display this message when Display button is clicked.

Put the below piece of code.

Test the application and click on the Display button which displays the
desired message.
FPM OVP Application: Dynamically
Creating Buttons on UIBB Panel Area
The below link provides how to create a header list UIBB and an item list
UIBB.

FPM OVP Application -Integrating Header LIST UIBB and ITEM List UIBB.

The FPM application looks like as below and dynamically we have to add
some buttons on the marked area i.e the UIBB panel area.
Go to the method GET_DEFINITION of the feeder class of the UIBB.

Add the below code [ add one row to the ET_ACTION_DEFINITION TABLE].
Go to the application configuration and select the first UIBB configuration
and here Rendering type should be with Panel. Select the Toolbar Schema
button.
Select the first UIBB toolbar and here Capture action should be selected.
Execute the application.

Now the dynamically create action button appears on the screen UIBB
panel area.
Now task is to respond to the button click. Go to the process_event
method of the feeder class. Put the below code.

On lcik the Display button we have the message.

FPM OVP Application- Enabling and
disabling buttons created dynamically on
the UIBB panel area
The link : Dynamically Creating button choice on UIBB panel area shows
how to create dynamic buttons.

In this below post we will see how to enable and disable some buttons.
The current UI looks like as below. Now very first we will hide the EDIT
option and once CREATE button is clicked, EDIT option should appear.
Go to the GET_DAT method of the feeder class and put the code from 46 to
55 so that EDIT option will not appear when the application is launched.
test the application.

So the EDIT option is invisible.

To make the EDIT button enable when CREATE option is clicked, put the
below code from line 54 to 60 in the GET_DATA method of the feeder
class.
Now test the application again.
FPM OVP Application- Dynamically Hiding
Field(s) in List UIBB
The link: FPM OVP Application -Integrating Header LIST UIBB and ITEM
ListUIBB provides steps to display list UIBBs.

Test the application .

The application screen looks like this. Now we have to hide the MANDT
column from the header UIBB.
Go to the GET_DATA method of the feeder class of the UIBB.

In debugging the CT_FILED_USGAE table gives all the field attributes.

These are the field properties. Now in order to hide some field we have to
dynamically set the some property.

So write the lines of code from – 44 to 50 in the GET_DATA method of the

feeder class.
Test the application again and the MANDT field is invisible now.

Feb
23

FPM OVP Application- Enabling and

disabling buttons created dynamically on the
UIBB panel area
The link : Dynamically Creating button choice on UIBB panel
area shows how to create dynamic buttons.

In this below post we will see how to enable and disable some
buttons. The current UI looks like as below. Now very first we will
hide the EDIT option and once CREATE button is clicked, EDIT option
should appear.
Go to the GET_DAT method of the feeder class and put the code from
46 to 55 so that EDIT option will not appear when the application is
launched.
test the application.
So the EDIT option is invisible.

To make the EDIT button enable when CREATE option is clicked, put
the below code from line 54 to 60 in the GET_DATA method of the
feeder class.
Now test the application again.
FPM OVP Application-Adding buttons on
the Global toolbar of the FPM Application
The link: FPM OVP Application -Integrating Header LIST UIBB and
ITEMListUIBB provides steps to display list UIBBs.

Test the application .

Now we have to add some button on the global toolbar (area marked in
red color).
Select the application configuration and click on Display configuration
button.

Click on the link on the configuration name.

Click the Toolbar schema, then click the EDIT button, then select Global
toolbar, then click on the Create Toolbar element button.

Add SAVE< CANCEL and EDIT button.

Save it.

Now test the application and here the buttons available in the global
toolbar area of the application.
Next task is to respond to the button click(s). Now figure out the
application controller class.

Expand the general setting in the application configuration. From

Floorplan setting-> Application controller settings.
So here we have the feeder class.

The message class.

Go to the After_process_event method of the application controller class.

Put the below code as shown below.

test the application and click each button and the corresponding action is
triggered and the appropriate message text is displayed.
FPM OVP Application- Enabling/Disabling
Global toolbar buttons dynamically in
FPM Application
The link: Adding buttons on the Global toolbar of the FPM
Application describes how to add buttons on the global toolbar.

Test the application.

The application screen looks like as below. Now the task is very first when
the application is launched CANCEL button should be invisible and once
EDIT button is clicked then only CANCEL button would be visible.
Go to the application controller class. Open the OVERRIDE_EVENT_OVP
method.
put the below code.
Now test the application again. Now the CANCEL button is hidden now.
once Edit button is clicked, the CANCEL button again appears.
------------------------------------------------------------------------------------------------------
--------------------

FPM OVP Application- Dynamically setting

the application title of FPM OVP
Application
The link: FPM OVP Application -Integrating Header LIST UIBB and
ITEMListUIBB provides steps to display list UIBBs.

Test the application .

The current title is “Flight Info” which is maintained in the application
configuration. Now we have to set this at run time dynamically.
Open the application configuration. Here the title is set as Flight Info
which is displayed as title.

Expand the general setting in the application configuration. From

Floorplan setting-> Application controller settings.
So here we have the feeder class.

Go to the IF_FPM_APP_CONTROLLER~AFTER_PROCESS_BEFORE_OUTPUT
method of the application controller class.

Put the below code.

Test the application. Now the dynamically set title text appears .
Calling GUI Transaction from FPM
Application
The post is about displaying a LIST UIBB of Billing related fields and on
selecting the billing document number it should display the billing
document in VF03 transaction.

The highlighted fields of VBRK table that is going to be displayed on the

FPM List UIBB.

Create a structure and a table type.

Create a class in SE24 and implement the interfaces.

Activate all the methods. Put the code in the GET_DEFINITION method.
Here we are passing the table type and creating an action.

Declare an attribute.
Put the below code in GET_DATA method.

Go to SE80 and create a component configuration for the list UIBB.

The below screen appears.

Provide a name and click on create.

Provide description, package and then provide the feeder class.

Add all the fields as the list column and change VBELN field display type as
LINK TO ACTION. Provide FPM EVENT ID as BILL_DISP.Save it.
Create an OVP application.
Create OVP Application configuration.

Provide a name and click on New button.

Then click on button Assign Configuration name.

Provide the name and ok.

Save and click on the appl configuration link.

The below screen appears.

provide title and add list component.

Add the list UIBB configuration name and Save.

test the OVP Application configuration.

Here the list displaying the billing document list. Now the task is when
billing document is selected then it should open the billing doc in VFo3
transaction.

Go to the process_event method of the feeder class.

Put the below code.
-------------------------------------------------------------------------------------------------------------------

METHOD if_fpm_guibb_list~process_event.
DATA: lv_index TYPE sy–tabix,
ls_bill_list LIKE LINE OF gt_bill_list,
lr_navigate TYPE REF TO if_fpm_navigate_to,
lr_fpm TYPE REF TO if_fpm,
ls_trans_fields TYPE fpm_s_launch_transaction,
ls_add_params TYPE apb_lpd_s_add_trans_parameters,
lt_param TYPE apb_lpd_t_params,
ls_param TYPE LINE OF apb_lpd_t_params.
CASE io_event->mv_event_id.
WHEN ‘BILL_DISP’.
CALL METHOD io_event->mo_event_data->get_value(
EXPORTING
iv_key = if_fpm_guibb_list=>gc_event_par_row
IMPORTING
ev_value = lv_index ).
READ TABLE gt_bill_list INTO ls_bill_list INDEX lv_index.
IF sy–subrc IS INITIAL.
lr_fpm = cl_fpm_factory=>get_instance( ).
lr_navigate = lr_fpm->get_navigate_to( ).
ls_param–key = ‘VBRK-VBELN’.
ls_param–value = ls_bill_list–vbeln.
APPEND ls_param TO lt_param.

ls_trans_fields–gui_type = ‘WIN_GUI’.
ls_trans_fields–system_alias = ‘SAP_Localsystem’.
ls_trans_fields–parameter = LT_PARAM.
ls_trans_fields–tcode = ‘VF03’.

ls_add_params–skip_init_screen_if_possible = abap_true.
ls_add_params–parameter_forwarding = ‘P’.
ls_add_params–batch_input_program = ‘SAPMV60A’.
ls_add_params–batch_input_dynnr = ‘0101’.
ls_add_params–batch_input_ok_code = ‘/00’.

CALL METHOD lr_navigate->launch_transaction

EXPORTING
is_transaction_fields = ls_trans_fields
is_additional_parameters = ls_add_params.
ENDIF.

WHEN OTHERS.
ENDCASE.
ENDMETHOD.
---------------------------------------------------------------------------------------------------------------------
----

Now test the application and it displays the billing doc in VF03
transaction.