Skip to Content
UI Web Dynpro ABAP

DATA COMMUNICATION BETWEEN TWO UIBBS THROUGH WIRING

Tags:

In this application we will enter car rent and display in a list (table).

First of all you need to see what UIBB’s are required to create your application in our case we need the user to input some data( whenever we need to input we require FORM UIBB) and a list in which we will display the entered data( so for that we require LIST UIBB). There are several UIBB present as mentioned in the cookbook.

Step1: we need to create a class for every UIBB we will be using and add the relevant interface in that class.

So, first we will create a class through which users can input.

Go to se24 and enter a name for a class. For naming conventions always use ‘cl’ for a class like this.

Once you do that it will ask you for a package enter that or go for local objects. After that go to the interfaces tab and enter ‘IF_FPM_GUIBB_FORM’ and hit enter button, it will add another interface called IF _FPM_GUIBB like this.

Then switch to methods tab, you will see some methods available.

Whenever you add this interface have to implement GET_DEFINITION and GET_DATA method.

NOTE: All methods of the interface must be activated else the application will dump.

Also you will see that there are various parameters in all the methods, all the importing parameters contain some information you might need.

SHORT DESCRIPTION OF SOME IMPORTANT METHODS: For more details read the section, IF_FPM_GUIBB_FORM Interface in the cookbook.

FLUSH: This method is the first method triggered at every FPM event. Use this method if you want to pass the changed values of the form. The parameter IS_DATA, this has all the values entered in the form.

PROCESS_EVENT: This event is triggered within the event loop and here you can use IO_EVENT parameter to see which event is triggered and then, suppose there is a wrong value entered by the user and you don’t want to process anything further, in that situation use this method. To do so, use the parameter EV_RESULT like this within the condition which will throw error (say empty field):

ev_result = if_fpm_constants=>gc_event_result-FAILED.

This will stop further processing unless that value is corrected by the user. But you will have to handle if the value is corrected by writing like this:

ev_result = if_fpm_constants=>gc_event_result-OK

GET_DATA: This event is triggered in event loop and you can use it for processing the data. That is if you want to change anything after the input you can do it and pass the new data to parameter CS_DATA.

GET_DEFINITION: This method is used to describe the properties of all the inputs, actions you want to add in the form.

Since it is necessary to implement GET_DEFINITION and GET_DATA, we need to do the following:

First we need to implement the GET_DEFINITION method, double click on it and you will enter in the method. There you might have to write the following code:

METHOD if_fpm_guibb_form~get_definition.
*  the exporting parameter eo_field_catalog is used to provide the name of the structure containing all the fields that is to be displayed on the ui
eo_field_catalog ?= cl_abap_typedescr=>describe_by_name( p_name =
'zRent_Vehicle' ).

*  the exporting parameter et_field_description is used to define properties of fields in the form
DATA ls_field_description TYPE fpmgb_s_formfield_descr. "double click on TYPE FPMGB_T_FORMFIELD_DESCR to see the line type
CLEAR ls_field_description.
ls_field_description-name                 =
'PLATE_ID'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'. " defined in the domain
ls_field_description-label_text           = text-001.
" always define texts, labels, tooltip in text elements
ls_field_description-tooltip              = text-001.
APPEND ls_field_description TO et_field_description.

CLEAR ls_field_description.
ls_field_description-name                 =
'TYPE'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'.
ls_field_description-label_text           = text-002.
ls_field_description-tooltip              = text-002.
APPEND ls_field_description TO et_field_description.

CLEAR ls_field_description.
ls_field_description-name                 =
'MODEL'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'.
ls_field_description-label_text           = text-003.
ls_field_description-tooltip              = text-003.
APPEND ls_field_description TO et_field_description.

CLEAR ls_field_description.
ls_field_description-name                 =
'COLOR'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'.
ls_field_description-label_text           = text-004.
ls_field_description-tooltip              = text-004.
APPEND ls_field_description TO et_field_description.

CLEAR ls_field_description.
ls_field_description-name                 =
'SRV_YEAR'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'.
ls_field_description-label_text           = text-005.
ls_field_description-tooltip              = text-005.
APPEND ls_field_description TO et_field_description.

CLEAR ls_field_description.
ls_field_description-name                 =
'PRICE'.
ls_field_description-visibility           =
'X'.
ls_field_description-default_display_type =
'IN'.
ls_field_description-label_text           = text-006.
ls_field_description-tooltip              = text-006.
APPEND ls_field_description TO et_field_description.

*  the exporting parameter et_action_definition is used to define the actions needed to perform various activities
DATA ls_action_definition TYPE fpmgb_s_actiondef. "double click on TYPE FPMGB_T_ACTIONDEF to see the line type
CLEAR ls_action_definition.
ls_action_definition-id                   =
'EVENT_SAVE'.
ls_action_definition-enabled              =
'X'.
ls_action_definition-imagesrc             =
'~Icon/Save'.
ls_action_definition-text                 = text-007.
ls_action_definition-tooltip              = text-007.
APPEND ls_action_definition TO et_action_definition.

CLEAR ls_action_definition.
ls_action_definition-id                   =
'EVENT_DELETE'.
ls_action_definition-enabled              =
'X'.
ls_action_definition-imagesrc             =
'~Icon/Save'.
ls_action_definition-text                 = text-008.
ls_action_definition-tooltip              = text-008.
APPEND ls_action_definition TO et_action_definition.

CLEAR ls_action_definition.
ls_action_definition-id                   =
'EVENT_ADD'.
ls_action_definition-enabled              =
'X'.
ls_action_definition-imagesrc             =
'~Icon/Save'.
ls_action_definition-text                 = text-009.
ls_action_definition-tooltip              = text-009.
APPEND ls_action_definition TO et_action_definition.
ENDMETHOD.

For text elements do as in the screen shot.

Though we should write GET_DATA and any other method now but I would first show you how it looks in the configuration so, we will create it.

Go to SE80 and type FPM_OVP_COMPONENT in web dynpro comp/intf you will see the following:

Right click on Web Dynpro Applications and click on CREATE->a pop up appears enter the application name and ENTER

Then enter the following and SAVE either in local object or in any package.

Once you do that, find your application in Web Dynpro Applications (where you right clicked and created) again do a right click and click on Create/Change configuration. Browser will open.

In the browser enter configuration ID and click on new following screen will appear

Enter OK, another screen will appear asking for package, enter the same. Then application configuration screen will come, click on assign configuration name and enter a name. Once done it looks like this:

Click on zcc_start_fpm and then on new and click OK and enter the package.

After that you will see the following page

In the page id define an id through which you can refer the page and give an appropriate title which will come on the browser. On right side you will see section_1 in overview page schema tab highlighted, click on UIBB button and then click on Form Component since in the class we added form uibb interface. Once you add that it will again ask for a configuration name, provide the same

It gives an error that configuration does not exist, click on save on the top left and then click on configure UIBB again click on new, enter OK and enter the package.

After that it will ask for a feeder class enter the name of the class (class should be active) and click on edit parameters.

Click on element button, there you can add group, elements, buttons and button row.

Click on attributes button on top (small red square) to see the attributes of the field you want to edit by selecting on that element in form uibb schema panel. There you can adjust the position in position and label, tooltip etc in element


Once you reach there go to toolbar schema tab, then select toolbar and then toolbar element. A pop up appears click button.


First we will implement GET_DEFINITION method as follows

METHOD if_fpm_guibb_list~get_definition.
DATA lo_struct_descr TYPE REF TO cl_abap_structdescr.
lo_struct_descr ?= cl_abap_structdescr=>describe_by_name(
'zRent_Vehicle' ).
eo_field_catalog = cl_abap_tabledescr=>create( lo_struct_descr ).

DATA lt_comp_tab TYPE abap_component_tab.
lt_comp_tab = lo_struct_descr->get_components( ).
DATA ls_comp_tab TYPE abap_componentdescr.
DATA ls_field_descr TYPE fpmgb_s_listfield_descr.
LOOP AT lt_comp_tab INTO ls_comp_tab.
ls_field_descr-name                 = ls_comp_tab-name.
ls_field_descr-visibility           = cl_wd_uielement=>e_visible-visible.
ls_field_descr-read_only            = abap_true.
ls_field_descr-default_display_type =
'TV'.
APPEND ls_field_descr TO et_field_description.
ENDLOOP.
ENDMETHOD.

Now we will add this in the configuration. Click on uibb and then list component. Give the configuration name, save and click on configure uibb, then on new, give description and press ok and enter the package. It will ask for the feeder class enter it (ZCL_RENT_LIST) and click edit parameters, then on ok.


To do so we need to implement an interface called if_fpm_feeder_model.

For this we need to create two classes’ data container and data connector say; ZCL_RENT_DATA_CONNECTOR and ZCL_RENT_DATA_CONTAINER.

In ZCL_RENT_DATA_CONTAINER declare the following attributes.

In attributes tab declare the following:

In the method: IF_FPM_CONNECTOR_DEF~SET_INPUT write the following:

method IF_FPM_CONNECTOR_DEF~SET_INPUT.
me->mo_data_container ?= io_input.
endmethod.

In the method: IF_FPM_CONNECTOR_RUN~GET_OUTPUT write the following:

method IF_FPM_CONNECTOR_RUN~GET_OUTPUT.
ro_output = mo_data_container.
endmethod.

Add a CLASS_CONSTRUCTOR and write the following:

if_fpm_connector_def~sv_namespace = 'RENT'.

In the class ZCL_RENT_LIST

Add interface IF_FPM_FEEDER_MODEL

Write the following codes in their respective methods

method IF_FPM_FEEDER_MODEL~GET_OUTPORTS.
DATA ls_outport LIKE LINE OF et_outport.
DATA lr_key     TYPE REF TO data.
ls_outport-type   =
'LS'.
ls_outport-identifier  =
'form_list_ident'.
ls_outport-description =
'list outport'.
ls_outport-object_key  = lr_key.
APPEND ls_outport TO et_outport.
endmethod.

method IF_FPM_FEEDER_MODEL~GET_OUTPORT_DATA.
ro_data = me->mo_data_container.
endmethod.

method IF_FPM_FEEDER_MODEL~SET_CONNECTOR.
mo_connector = io_connector.
endmethod.

method IF_FPM_FEEDER_MODEL~GET_NAMESPACE.
rv_namespace =
'RENT'.
endmethod.

method IF_FPM_GUIBB_LIST~FLUSH.
mo_data_container->mv_lead_sel_index = iv_new_lead_sel.
mo_data_container->mv_lead_plate_id  = zcl_rent_data=>get_plate_id( tableindex = iv_new_lead_sel ).
endmethod.

method IF_FPM_GUIBB_LIST~GET_DATA.
  IF ct_data IS INITIAL.
ct_data = zcl_rent_data=>get_all( ).
ENDIF.
IF zcl_rent_data=>is_dirty( ) = abap_true.
ct_data = zcl_rent_data=>get_all( ).
ev_data_changed = abap_true.
ENDIF.
endmethod.

method IF_FPM_GUIBB~INITIALIZE.
CREATE OBJECT mo_data_container.
endmethod.

Declare the following attributes:

In the class ZCL_RENT_INPUT

Add interface IF_FPM_FEEDER_MODEL

Write the following codes in their respective methods

method IF_FPM_FEEDER_MODEL~GET_OUTPORTS.
DATA ls_outport LIKE LINE OF ET_OUTPORT.
DATA lr_key     TYPE REF TO data.
DATA lv_key     TYPE string VALUE 'form_input'.
ls_outport-type         =
'LS'.
ls_outport-identifier   =
'form_input_ident'.
GET REFERENCE OF lv_key INTO lr_key.
ls_outport-object_key   = lr_key.
ls_outport-description  =
'form outport'.
APPEND ls_outport TO et_outport.
endmethod.

method IF_FPM_FEEDER_MODEL~SET_CONNECTOR.
mo_connector = io_connector.
endmethod.

method IF_FPM_FEEDER_MODEL~GET_NAMESPACE.
rv_namespace =
'RENT'.
endmethod.

method IF_FPM_GUIBB_FORM~GET_DATA.
mo_data_container ?= mo_connector->get_output( ).
if mo_data_container is not bound.
return.
ENDIF.


CASE io_event->mv_event_id.
WHEN 'EVENT_SAVE'.
zcl_rent_data=>update( cs_data ).
WHEN 'EVENT_DELETE'.
field-symbols <cs_data> type zrent_vehicle.
assign cs_data to <cs_data> casting.
zcl_rent_data=>remove( <cs_data>-plate_id ).
ev_data_changed = abap_true.
WHEN 'EVENT_ADD'.
zcl_rent_data=>add( cs_data ).
WHEN OTHERS.
" user selected a new row, udpat the data.
cs_data = zcl_rent_data=>GET_CAR_BY_INDEX( mo_data_container->mv_lead_sel_index ).
ev_data_changed = abap_true.
return.
ENDCASE.

" refresh other GUIBB
zcl_rent_data=>SET_DIRTY( ).
data: lo_fpm
type ref to if_fpm.
lo_fpm = cl_fpm_factory=>get_instance( ).
lo_fpm->raise_event_by_id( IF_FPM_CONSTANTS=>GC_EVENT-REFRESH ).
endmethod.

Create another class ZCL_RENT_DATA

Declare the following methods.

With the following code and parameters

In the configuration go to the wire schema tab and click on wire and do the following:

Application looks like this:


Former Member