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

List UIBB

This tutorial explains the usage of Generic component list (FPM_LIST_UIBB) for data display in the form of table.

The following tutorial is split into two parts.

1.      Modeling the feeder class

2.      Creating the configuration list component

 

Scenario: Display the data from the SFLIGHT table in the form of list at the time of start of application.

Part 1: Modeling the feeder class.

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

Assign the class to a package or save it in the local object.

 1

Step 2: In the interface tab of the class implement the interface IF_FPM_GUIBB_LIST, this will automatically implement the interface IF_FPM_GUIBB.

2 

Step 3: In the attributes tab of the class create the attribute as shown below.

3 

 4

Step 4: Implement the GET_DEFINITION method of the interface.

*  field catalog - Table columns
  
  eo_field_catalog ?= cl_abap_tabledescr
=>describe_by_data( mt_sflight )
.

Code Explanation:

EO_FIELD_CATALOG is an exporting parameter which is used to provide the list of columns to be added to the table. This exporting parameter is of type CL_ABAP_TABLEDESCR and the object reference for the internal table is created and passed on to this exporting variable.

Step 5: Implement the initialize method to fill values to be displayed.

 select *
        
from
sflight
        
into table
mt_sflight
        
UP TO 10 rows
.

 

Code Explanation:

Since we don’t have any selection criteria in this application, I am initializing the data in the initialize method with values to be displayed in the output table.

 

Step 6: Implement the method GET_DATA to move the data to the list.

 if iv_eventid->mv_event_id = 'FPM_START'.

  ev_data_changed
= abap_true.

  ct_data
= mt_sflight.

 
endif.

 

Code Explanation:

I wanted the application to display the data at the start of the application itself. FPM_START will be the event triggered whenever the application is being executed for the first time. You can make use of this event id in case you wanted to assign default values to fields.

Save and activate the methods of feeder class. This completes the modelling of our feeder class. Let’s get into configuration part now.

Note: All the methods of the feeder class has to activated individually going inside the method

Part 2: Configuration of Feeder class in FPM application.

Step 1: Create an application for the OVP floor plan component.

 5

Step 2: Create an application configuration for the application.

 6

 

Step 3: Enter the name for application configuration and click on new to create.

7

Enter the description and assign it to the package.

 

Step 4: Click on assign configuration name and enter the configuration name. Click the link generated for the application configuration name. System will prompt that configuration does not exist click on new to create the component configuration.

8

Enter the description and assign the package for component configuration.

Step 5: In the FLUID editor, add a list UIBB as shown below.

 9

Enter the name for configuring the UIBB and click on enter. System throws an error message as configuration does not exist. Select the lead for the UIBB and click on configure UIBB.

10

System will throw a message that configuration does not exist. Click on new to create the configuration. A pop up will appear on the screen asking for name of the feeder class and click on edit parameters. Since we have not added any parameter in the method GET_PARAMETER of feeder class system says a message no feeder parameter. Click on ok.

 

11

Since we have not added any parameter in the method GET_PARAMETER of feeder class system says a message no feeder parameter. Click on ok.

Step 6: Click on the column button to add the columns to the list.

12

A pop up will appear showing the list of fields. Choose the layout you want and press ok.

13

I have modified the general settings panel as below.

14 

Check and save the application.

Step 7: Test the application.

15 

Output:

 16

This tutorial only explains how to display the data in the form of list. There is a purpose I haven’t created a selection screen in this application and retrieve data based on the selection criteria. We have already developed an application for search that retrieve the data from SFLIGT table and displayed the result in its own list. Instead I wanted the search component to be separate UIBB and wanted the result to be displayed in the separate LIST.

Hence I am going to merge the created two applications into one. We can make use of the same feeder class to configure these two UIBB’s in one application. This will give us the opportunity to learn data transfer possibilities between UIBB through static variable and singleton concepts.

About Arun

2 Comments:

  1. Is it possible to add columns dynamically in LIST UIBB?
    I mean at the time of configuration there are say 5 columns but later on some condition the few additional columns should be added.
    possible in FPM?

    ReplyDelete
  2. yes, you can add columns dynamically in IF_FPM_GUIBB_LIST~GET_DEFAULT_CONFIG:

    IO_LAYOUT_CONFIG->ADD_COLUMN( EXPORTING IV_NAME = |{ -NAME }|
    IV_DISPLAY_TYPE = 'IN'"'IN'"Modo modificar.
    " Si ponemos if_fpm_guibb_constants=>gc_display_type-text_view
    " sale read-only.
    IV_INDEX = LV_INDEX
    IS_SPECIAL_PROPERTIES = LS_SPECIAL_PROPERTIES ).

    ReplyDelete

Powered by Blogger.