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

Service Call

 

 

With the help of the service call function it is possible to call an existing function module from within a Web Dynpro component.

 

To simplify the creation process we have an wizard. Using the wizard automatically creates the required context elements and the methods that call the function module with required parameters  in the controller we choose.

 

Refer to sap link:

 http://help.sap.com/saphelp_scm50/helpdata/en/3f/429840893d2d54e10000000a1550b0/frameset.htm

 

A Simple Example

You wish to read data from a database table and display it in a view with the help of an existing function module. For this purpose, you have created a service call for the function module in your Web Dynpro component. The global controller that you have chosen or created during the creation procedure now contains the required context nodes and attributes as well as a method for calling the function module.

 

clip_image002

 

Now let us see an simple example of creating a service call.

 

Scenario: I have a remote enabled function module BAPI_FLIGHT_GETDETAIL which will return me the availability of the seats for the airline given the inputs like airline id, connection id and flight date. I want to make use of this function module in my webdynpro component. Lets see how to create a service call for this function module.

 

 

The interface of the function module is as below. It get the importing parameter airline id, connection id and flight data and return the availability of seats.

clip_image004

 

 

  

Step 1: Go to the Tcode SE80 and create a webdynpro component.

clip_image006

 

Assign the component to the package or save it in the local object.

 

Step 2: Right click on the component and choose service call to start the wizard for service call.

 

clip_image008

 

Wizard for the service call will be opened. Click on continue it will ask for the controller.

 

clip_image010

 

Choose the radio button use existing controller and select the component controller using f4 help. This step is to choose the controller where you wanted the nodes and method to be created. If you want you can create a new controller and assign the nodes and methods there.

 

clip_image012

 

 

 

Select the service type as function module as we wanted to get the functionality of the function module . We can also create a service call for the methods of the class.

 

clip_image014

 

 

Enter the name of the function module and click on continue. This step is to provide the name of the function module for which you want the attributes nodes or method to be created. Provide the destination name if this RFC is to be called from another server.

 

clip_image016

 

 

Choose the object type as the context so that context node will be created in the controller.  Do the same for all importing parameter airline id, connection id and flight date and exporting parameter availability.

 

clip_image018

 

   

Specify the name for the method to be created and  click on continue.

 

clip_image020

 

 

 

Click on complete to complete the wizard.

 

clip_image022

 

 

In the context tab of the component controller you will now be able to see the context nodes created.

 

clip_image024

 

 

In the methods tab of the component controller you will see the method created with the functionality inside it. It will get the value of the importing context node and pass it to the function module and get the result and bind it back to the exporting parameter.

 

 

clip_image026

 

 

 

Step 3: Go to the context tab of the view controller and drag and drop the nodes generated in the component controller to make the node accessible to the view controller.

 

clip_image028

 

clip_image030

 

 

 

Step 4: Go to the layout tab of the view controller and create the UI elements to get the input and

display the output.

 

Click on the code wizard to generate the layout using the wizard.

 

clip_image032

 

Select the form and press enter to continue.

clip_image034

 

 

Choose the node importing form the context and select the checkbox to create the ui element in the new container and select the layout as matrix layout.

 

clip_image036

 

 

 

Layout will be created as below.

 

clip_image038

 

 

Step 5: Create a button UI element and an action for the button UI element.

 

clip_image040

 

Enter the text for the button and create an action for the button UI element.

 

clip_image042

 

 

Step 6: Choose the code wizard again to set the output table.

 

clip_image044

 

Select the table and click on continue.

 

clip_image046

 

Choose the context node exporting and the cell editor as text view and press enter.

 

clip_image048

 

Table will be created as below in the layout.

 

clip_image050

 

 

 

 

 

Step 7: Go to the action for the button UI element and call the method created in the service call using the instance provided in the view controller to call the component controller objects.

 

clip_image052

 

 

Save and activate the whole component.

 

Step 8: Create an webdynpro application to test the component.

clip_image054

 

 

 

Output:

 

clip_image056

 

Enter the input details and click on get details button to see the output.

 

clip_image058

 

 

 

 

About Arun

1 Comments:

  1. I suggest give another example except flight details example

    ReplyDelete

Powered by Blogger.