An SAP Consultant: Web Dynpro ABAP - Service Call for BAPI

Service Calls
A service call is used to call an existing function module or methods of an existing class within a Web Dynpro component.
Service Call Wizard
To create a service call, you have an easy-to-use wizard at your disposal within the Web Dynpro tools in the ABAP Workbench.

Service calls types

RFC's / BAPI's
Methods
Web Services

Comparison
The use of a service call is in no way different from the use of a manually created method of the controller.
Service Call for BAPI
We will create a Web Dynpro component ZOVH_SERVICE_CALL_BAPI_01 with one view SER_CALL_V. The view contains input field for Employee number. When you give input and press ENTER, OnEnter event for input field which triggers a search event and a table, in which the result list from the search is displayed. The component controller context refers to a BAPI structure and contains a service call for this BAPI (method EXECUTE_BAPI_ADDREMPSG_GETDETA). The component controller context structure is mapped to the view context of SER_CALL_V whereas the UI layout elements are bound to the context elements of the view.
Steps to implement Service call for BAPI

Create Web Dynpro component and Save it as local object.

Right click on Web Dynpro component create Service Call.

Start Service call wizard and follow the steps mentioned in the following screen shot

Select Controller - Existing controller - > Select from F4

Choose Service Type as Function Module

Give RFC or BAPI Function module name

Select Context nodes and attributes from function module IMPORTING, CHANGING and EXPORTING parameters.

Specify the name of the method.

Context of the Component controller->ADDRESS node will have 0..n cardinality automatically.

Go to View Context ->Map Component Controller context to View Context.

Change ROOTUIELEMENTCONTAINER layout type to MatrixLayout.
Create input field for EMPLOYEENUMBER and Bind with context attribute in the following way. Change label Layout to MatrixHeadData and input Layout to MatrixData.

Create Transparent Container and Insert Table UI element inside the container. Transparent Container Layout Data property to MatrixHeadData .

Bind ADDRESS context node to Table UI element.

Create OnEnter event on Input field EMPLOYEENUMBER.

Code

method ONACTIONGET_ADDRESS_DATA .
DATA 
     lo_componentcontroller TYPE REF TO ig_componentcontroller .
    
  lo_componentcontroller =   wd_this->get_componentcontroller_ctr( ).
  lo_componentcontroller->execute_bapi_addrempsg_getdeta( ).

endmethod.