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

Passing data between views using plugs

To navigate from one view to another view we use plugs. The data’s available in the view are local to the controller and there may be a scenario where you want data from one view to another to be processed. One way of doing this is to bind the data in the context node of component controller before you leave the view and read the data from another view in the event handler method for the inbound plug or where ever necessary. Instead we can also pass the data using the parameters of the plug.

 

Scenario: In this scenario we will discuss how to pass the values between the views using plugs. Let us create an input field in the first view and whatever the value is entered in the first view will be transported using plugs and displayed in the second view in the form of text view.

 

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

 

clip_image002[4]

 

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

 

Step 2: Go to the context tab of the view controller and create a context attribute as shown below.

 

clip_image004[4]

 

Enter the name and type for the attribute and press enter.

 

clip_image006[4]

 

 

Step 3: Go to the layout tab of the view controller and create a label and input field as shown below.

 

Right click on the root container UI element and select insert UI element.

clip_image008[4]

 

Provide the ID and type for the UI element and press enter.

 

clip_image010[4]

 

In a similar way insert a input field UI element.

 

clip_image012[4]

 

 

Bind the obligatory binding property value of the input field to the context attribute created.

                                                                                                                                                           

clip_image014[4]

 

 

Create an action on enter for the input field UI element.

 

clip_image016[4]

 

Now go back to the label UI element and change the property of the label UI element as shown below.

 

clip_image018[4]

 

 

Step 4: Right click on the view controller and create a view.

 

clip_image020[4]

 

Enter the name and description for the view and press enter.

 

clip_image022[4]

 

 

Go to the context tab of the view created and create a context attribute as shown below.

 

clip_image023[4]

 

Enter the name and type for the attribute and press enter.

 

clip_image025[4]

 

 

Go to the layout tab of the view controller and create a text view UI element and bind the attribute to it.

 

clip_image027[4]

 

Bind the property of text view to the attribute created.

 

clip_image029[4]

 

 

Insert a button UI element and create an action for the button UI element.

 

clip_image031[4]

 

Create an action for the button UI element.

 

clip_image033[4]

 

 

 

Step 5: Go to the first view and create the inbound plug and outbound plugs as shown below.

 

clip_image035[4]

 

 

Create an outbound plug with an parameter for passing the data from this view.

 

clip_image036[4]

 

 

Similarly go to the second view and create the inbound and outbound plugs.

clip_image038[4]

 

clip_image040[4]

Step 6: Go to the window controller and embed the second view in the window and create a navigation links between the views.

clip_image041[4]

Choose the view to be embedded as second view and press enter.

clip_image042[4]

 

Create a navigation link between the first view and second view.

clip_image043[4]

 

clip_image045[4]

 

Create a navigation link between the second view and first view.

clip_image047[4]

clip_image049[4]

 

Step 7: Go to the First view and in the action created for the input field UI element do the following.

Read the value entered in the input field using the context attribute binded.

clip_image051[4]

Codings will be generated as below.

clip_image052[4]

Generate the coding for naviagtion from the first view to second view using the outbound plug of the first view as shown below.

clip_image054[4]

 

Coding will be generated as below.

clip_image056[4]

Pass the value to the parameter of the outbound plug.

clip_image058[4]

Code:

  DATA lo_el_context TYPE REF TO if_wd_context_element.
 
DATA ls_context TYPE
wd_this->Element_context.
 
DATA lv_name TYPE
wd_this->Element_context-name.

  lo_el_context = wd_context->get_element( ).

  lo_el_context->get_attribute(
   
EXPORTING

      name = 
`NAME`
   
IMPORTING
     
value = lv_name ).

    wd_this->fire_to_second_plg(
      name = lv_name                            
" string

    ).

Step 8: Go to the second view and in the event handler method created for the inbound plug do the following.

Create an importing parameter with the name passed in the outbound plug of first view.

clip_image060[4]

Now the importing parameter will hold the value passed from the view one and set it in the attribute created in the second view to be displayed in the text view UI element.

clip_image062[4]

Coding's will be generated as below.

clip_image064[4]

Note: I have removed the unwanted codes.

Change the codings as below:

clip_image065[4]

Code in this method:

  DATA lo_el_context TYPE REF TO if_wd_context_element.
 
DATA ls_context TYPE
wd_this->Element_context.
 
DATA lv_disp_name TYPE
wd_this->Element_context-disp_name.

  lo_el_context = wd_context->get_element( ).

 
CONCATENATE 'The name entered is:' name into lv_disp_name SEPARATED BY
  space.

  lo_el_context->set_attribute(
    name = 
`DISP_NAME`
   
value = lv_disp_name ).

 

 

In the event handler method created for the back button do the following to generate a code for navigation from second view to first view.

clip_image067[4]

Coding will be generated as below.

clip_image069[4]

 

Save and activate the whole component.

 

Step 9: Create the application for the component and press enter.

clip_image070[4]

 

Output:

clip_image072[4]

Enter the name and press enter.

clip_image074[4]

clip_image076[4]

Press back button to navigate back to the first view.

  

About Arun

1 Comments:

  1. Hi I got error saying that Method "FIRE_TO_SECOND_PLG" does not have any parameters parameters. Even though, I have followed each and every steps.

    ReplyDelete

Powered by Blogger.