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.

Steps to set color for List UIBB

Step 1

Add a additional field into the structure in get_defination with data element                             .             WDUI_TEXT_VIEW_DESIGN.

Example : you have 5 field in the list then add one more field with name 'DESIGN'.

Step 2 

Set field name for which you need to change the color.

Example: you have a field name 'FIELD_1' which you want to change the color, then use the below code.

  ls_field_def-name = 'FIELD_1'.
  ls_field_def-cell_design_ref = 'DESIGN'.
  APPEND ls_field_def TO CT_FIELD_DESCRIPTION.

Step 3

At run time update any value which is listed below in get_data method.

  00 emphasized
11 groupTitle
01 header1
02 header2
03 header3
04 header4
05 label
06 label_small
07 legend

Example : ct_data has below entries.

Field_1	Field_2	Field_3	Field_4	Field_5	Design
Data	Data	Data	Data	Data	07
Data	Data	Data	Data	Data

update 07 for the first row and make  ct_data_changed = abap_true.

Steps to create Quick view UIBB - FPM

In this example Quick view is used to display customer details.

Prerequisites: Need a Form UIBB which display customer ID (KNA1-KUNNR).

If you need steps to crate form UIBB click on below link.

Steps to Create Form UIBB

Implementation of Feeder class:

• Create a new class and add interface IF_FPM_GUIBB_QV_THING
• Create empty implementations for methods FLUSH, PROCESS_EVENT, GET_DEFAULT_CONFIG, CHECK_CONFIG, INITIALIZE and GET_PARAMETER_LIST
• Create a type and a data object for storing the displayed data

    private section.

    TYPES: BEGIN OF ty_st,
             kunnr TYPE kunnr,
             name1 TYPE name1_gp,
             name2 TYPE name2_gp,
             ort01 TYPE ort01_gp,
           END OF ty_st .

• GET_DEFINITION Implementation:

   DATA: ls_data TYPE ty_st,
        ls_field_description TYPE fpm_qv_thing_field_description.

  eo_field_catalog ?        = cl_abap_structdescr=>describe_by_data( ls_data ).

  es_options-title_ref = 'KUNNR'.

• GET_DATA Implementation:

          Iv_key contain customer id i.e KUNNR

    DATA: ls_data TYPE ty_st.
 SELECT SINGLE kunnr name1 name2 ort01 FROM kna1 INTO ls_data WHERE kunnr = iv_key.
  IF sy-subrc = 0.
    cs_data = ls_data.
    ev_data_changed = abap_true.
  ENDIF.

Creating configuration:

• Open form UIBB configuration and create Quickview by selecting Thing component

  

• Enter new configuration ID and click on configure Quickview

• Popup will display to create new configuration ID, Click on yes and create configuration ID.

          After save enter Feeder class which is created using above step.

• Select attribute which you need to display on the Quick view.

• Save.

• Now go back to the form UIBB and select attribute for which you need attach quick view.

          Select Quickview ID which you created and save.

• Output 

          when use mouse over on customer id it will display the customer details (Quick view).