Step by Step guide to create Form UIBB

What is Form UIBB

              This is a generic design template for displaying data in a form that is implemented using the Web Dynpro. User can design template in application-specific views (UIBB) where you want to display data using a form.

Layout in a form

8/1 Layout: The Form has 8 columns with names A to H. The element can be arranged in this Layout.

16/1 Layout: The form has 16 columns with names A to P. The element can be arranged on the whole form.

16/2 layout: The form has 16 columns which are separated into panels. Panel 1 column A to H, Panel 2 column I to P. Elements can be put in the first or in the second panel. No overlapping possible

      Creating Feeder class for Form UIBB

To implement the feeder class for Form GUIBB we must implement the interface IF_FPM_GUIBB_FORM.

This interface contains the following method:

IF_FPM_GUIBB_FORM~FLUSH

IF_FPM_GUIBB_FORM~PROCESS_EVENT

IF_FPM_GUIBB_FORM~GET_DATA

IF_FPM_GUIBB_FORM~GET_DEFINITION

IF_FPM_GUIBB_FORM~GET_DEFAULT_CONFIG

IF_FPM_GUIBB_FORM~CHECK_CONFIG

IF_FPM_GUIBB~INITIALIZE

IF_FPM_GUIBB~GET_PARAMETER_LIST

Below are the methods which must be implemented in order to create a simple application

• GET_DEFINITION
• GET_DATA

GET_DEFINITION: Allows the feeder to provide all necessary information for configuring a form: the list of available fields and their properties and the list of actions (FPM events).

INITIALIZE: Called at runtime when the form is created. It is the first feeder method which is called from FPM.

FLUSH: The first feeder method which is called during an event loop. Whenever an FPM event is triggered (this includes all round trips caused by the form itself) this method is called. Use it to forward changed form data to other components in the same application.

PROCESS_EVENT: Called within the FPM event loop, it forwards the FPM PROCESS_EVENT to the feeder class. Here the event processing can take place and this is where the event can be canceled or deferred.

GET_DATA: Called within the FPM event loop and forwards the FPM PROCESS_BEFORE_OUTPUT event to the feeder class. Here you specify the form data after the event has been processed.

GET_DEFAULT_CONFIG: Call this if you want to have a default configuration. Use it to call pre-configured form configurations when a user starts the FPM Configuration Editor. This avoids the user, who uses a feeder class to create a form, having to create it from the beginning.

CHECK_CONFIG: Call this if you want to make your own application-specific checks on the configuration in the FPM Configuration Editor immediately before saving.

      Steps Involve in creating a FPM Application

• Goto Tcode SE80 and select your Package to create FPM Application.
• Right click on WebDynpro Application and Create Web Dynpro Application.
• Provide Name of Application and description.

• Provide Name of FPM Standard Component (Here We are creating and FPM_OVP_APPLICATION)
• Interface view FPM_WINDOW and plug name is default.

• Press right click On Application created and choose Create/Change configuration.

• Provide Application Configuration ID and click on New Button to create.

• Provide description and click on OK
• Click on Assign Configuration Name and enter the configuration ID and click on OK.

•          To create Form UIBB click in UIBB button choice and select Form component.

• Provide Name of Configuration and click on Configure UIBB.

• In the Next step It will ask for Feeder class Provide name of feeder class

• Click on edit Parameters.

 

•       To add Field to UI click on Element button choice and select Add Element at current Level or use can create a group and and add fields into the group.
•        It will list all the elements given in the feeder class select the fields to be added to UI and click on OK and set the attribute like Lable and other properties

• Save the application.
• To Run the application right click on the application create and select test.

  Creating Feeder class

Create a class and implement the interface IF_FPM_GUIBB_FORM

Create a structure in the types tab which has to be added to the UI.

Types : BEGIN OF ty_st,
         emp_id(5) TYPE c,
         emp_name(25) TYPE c,
         emp_cno(10) TYPE n,
        END OF ty_st.

Implement the get_defination method  

 METHOD if_fpm_guibb_form~get_definition.

*** data declaration

  DATA : ls_itab TYPE ty_st.

*** assigning structure

  eo_field_catalog ?= cl_abap_structdescr=>describe_by_data( ls_itab ).

ENDMETHOD.

Implement get_data method

METHOD if_fpm_guibb_form~get_data.

*** Data declaration

  DATA: ls_itab TYPE ty_st.

**** Check event is FPM_START

  IF io_event->mv_event_id = 'FPM_START'.

    CLEAR ls_itab.

    ls_itab-emp_id = '1001'.

    ls_itab-emp_name = 'ABC'.

    ls_itab-emp_cno = 12345676890.

*** assign data into cs_data

    cs_data = ls_itab.

*** set flag to true

    ev_data_changed = abap_true.

  ENDIF.

ENDMETHOD.