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

Form UIBB

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.

clip_image001

 

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.

clip_image003

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

clip_image005

 

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


* Field catalog

  mo_sflight ?= cl_abap_structdescr
=>describe_by_data( ms_sflight )
.
  
  eo_field_catalog
= 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.

clip_image007

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

clip_image009

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.

clip_image010

 

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

clip_image011

 

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.

clip_image013

 

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.

clip_image015

 

Save the configuration and test the application.

 

Output:

clip_image017

 

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

0 Comments:

Post a Comment

Powered by Blogger.