Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP


This tutorial explains to create a form with the help of generic component FPM_FORM_UIBB.

This tutorial is split into two parts

1.      Modeling the feeder class

2.      Configuring the Form component with feeder class

NOTE: If you are working in EHP6 then the name of the form component appears with addition GL2. It was the latest component created according to guidelines.


Part 1: Modeling the feeder class

Step 1: Go to the transaction class builder (SE24) and create a class.



Step 2: In the interface tab of the class implement an interface if_fpm_guibb_form, this interface also implements if_fpm_guibb along with it.


Step 3: In the attributes tab of the class create the following attributes.



Step 4: Implement the get definition method of the class as follows.

* Field catalog

  mo_sflight ?= cl_abap_structdescr
=>describe_by_data( ms_sflight )
= mo_sflight


Step 5: Write the following code in the get data method of the class.

  cs_data = ms_sflight.

Thus the modeling of our feeder class is complete. Save and activate the whole class.

Note: Activate all the methods by going inside the method. Activating the whole class will not implement all the methods.

Also in the modeled feeder class no where the data has been retrieved.


Part 2: Configuration of the FPM application.

Instead of creating a new application, I have configured the form UIBB in the fpm application created in the previous tutorial for Data Transfer Between Two Uibb’s.

Step 1: Go to the component configuration page(ZAPP_DATA_TRANSFER) created in previous tutorial. Add a form component as shown below.


Enter the name for the configuration and click on the configure UIBB.


System will prompt that the configuration does not exist. Click on new to create the configuration and provide a suitable description and assign it to the package.


Enter the name of the feeder class that we have modeled for the form and click on edit parameters and then ok.



Step 2: Click on the element->add_group to add group to the form.



Step 3: Add title to the form in the attributes for the group and then choose element->add element at current level to add elements to the form.



A pop up will be available with the available fields, choose the required fields and generate the form you want.

I have splitted the form layout into two by choosing 16/2 layout option and splitted the fields into two groups as shown below to make it compatible fit in one window without introducing scroll bars and UI element type of all attributes are input field.

Note: Creating application with scroll bar are performance intensive.



Save the configuration and test the application.





I have purposefully not added to fill data in the form. Now in the application created user clicks on search then the data is displayed on the list. When the user selects the lead on the list I am going to fill the form with values of the row selected. This time I am not going to retrieve the data in the form UIBB using the method of accessing the static attributes of the class or by storing the value in the singleton class. Instead I am going to transfer the data from the list UIBB to the Form UIBB using wiring concept. The application continues in the next blog for Wiring.

About Arun


Post a Comment

Powered by Blogger.