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

Dynamically creating the component usage

 

 

This tutorial explains to dynamically creating the component usage.

Scenario: Usually for displaying a set of data in the form of ALV table we use the standard component SALV_WD_TABLE. Here is the procedure of creating a simple ALV report . In that particular scenario we have created the component usage for the ALV table statically whereas in this tutorial we are going to create the ALV Component usage dynamically and display the result.

Steps while statically defining the component usage:

1.      Add the component in Used component list

2.      Add the controller usage in the view controller

3.      Embed the view to  be displayed in the view container UI element

4.      Map the context node to the context node of used component.

 

Step 1: Create a Webdynpro component.

clip_image002

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

 

Step 2: In the layout tab of the view controller, create a View container UI element. In this view container UI element we will embed the ALV table view programmatically.

clip_image004

 

Step 3: Create a context node of cardinality 0..N. This context node will be mapped to the ALV data context node programmatically to pass the values from our component to ALV component.

clip_image005

 

Step 4: Go to doinit method of the view controller and fill some data in the context node.

clip_image007

 

Step 5: Get the API reference of View controller and component controller.


* API reference
  
 
data : lo_api                type ref to if_wd_view_controller,
         lo_cmp_api           
type ref to if_wd_component.
  
  lo_cmp_api
= wd_comp_controller->wd_get_api( ).       " Component controller
  lo_api    
= wd_this->wd_get_api( ).                  " View controller

Step 6: Create a component usage group as shown below. In Application, we might create a ‘N’ no of component usages dynamically. We need the references of those dynamically created component usage for further processing. We can store and manage them in an internal table or create a component usage group and add the component usages to the group. This step usually is taken care internally while component usage is defined statically.

* Creating the component usage group
  
 
data : lo_cmp_grp type ref to IF_WD_COMPONENT_USAGE_GROUP.
  
  lo_cmp_grp
= lo_cmp_api->create_cmp_usage_group( name           = 'USAGE_GROUP_ALV'
                                                   used_component
= 'SALV_WD_TABLE' ).

 

Code Explanation:

This step is similar to adding the component in the used component list. With the reference to the API of component controller we are creating the component usage group in the component controller.

Step 7: Dynamically create the component usage.

  data : lo_cmpt_usage TYPE REF TO if_wd_Component_usage.
  
  lo_cmpt_usage
= lo_cmp_grp->add_component_usage(
                                 name              
= 'USAGE_ALV'
                                 embedding_position
= 'V_MAIN/VCE'
                                 used_component    
= 'SALV_WD_TABLE'
 
).

Code Explanation:

This step is similar to adding the controller usage in the view controller. Here within the component usage group created we are adding a component usage and specified the target where the usage is to be embedded.

Step 8: Instantiate the created component usage.

* Instantiate the dynamically created component usage

 
if lo_cmpt_usage->has_active_component( ) is initial.

    lo_cmpt_usage
->create_component( 'SALV_WD_TABLE' ).

 
endif.

Code Explanation:

Here we are checking if the component usage is created or not and then creating the component usage in case if there are no component usage.

Step 9: Embed the Table View of the ALV component to the View container UI element.


* Embed the view in the view controller

 
data : lo_view_embed type ref to if_wd_repository_handle.

 
try.
     
call method lo_api->if_wd_navigation_services_new~prepare_dynamic_navigation
       
exporting

          source_window_name       
= 'W_MAIN'
          source_vusage_name       
= 'V_MAIN_USAGE_0'
          source_plug_name         
= 'TO_V1'
          target_component_name    
= 'SALV_WD_TABLE'
          target_component_usage   
= 'USAGE_ALV'
          target_view_name         
= 'TABLE'
          target_plug_name         
= 'DEFAULT'
          target_embedding_position
= 'V_MAIN/VCE'
        receiving
          repository_handle        
= lo_view_embed.
   
catch cx_wd_runtime_repository .
 
endtry.

 

The data to be passed to the methods can be found as below.

Source Details:

Source_window_name -> Name of the window where we are going to embed the ALV table view

Source_Vusage_Name->In a window, while embedding a view, a component usage for the view will be created in the window, which you can find from the below image.

Source_plug_name -> Provide the name for the plug whichever u want.

clip_image009

Target Details:

Target Component name-> Name of the component (SALV_WD_TABLE).

Target Component usage-> Name of the dynamically created component usage name (USAGE_ALV).

Target View name ->Name of the interface from the used component to be embedded.

Target Plug name-> Name of the startup plug for the interface view.(You can see it in the outbound plug tab of window).

Target Embedding position->Where in the using component the interface view is to be embedded.

Below is the image of table interface view of SALV_WD_TABLE.

clip_image010

Output at this stage:

If you execute the application at this stage you can only see a square being embedded and the ALV table will not be created as there is no data in the table.

Step 10: Set the data in the ALV table.

Comparison: When defining ALV table statically we fill the data to be displayed in the context node and map is to the context node of ALV table called “DATA”. Since we don’t have the choice of mapping context node by dragging and dropping we are accessing the interface controller of ALV component and from there using the method set_data we are setting the data for ALV component.

 

* Setting the data in the ALV table
  
 
data : lo_alv_interface type ref to IWCI_SALV_WD_TABLE.
 
data : lo_object type ref to object.
  
 
call method lo_cmpt_usage->get_interface_controller
     receiving
       if_controller
=
lo_object
      
.


   lo_alv_interface ?= lo_object
.
   
  
call method lo_alv_interface->set_data
   
exporting

      r_node_data      
=
lo_nd_sflight
     
.

 

 Output:

clip_image012

About Arun

0 Comments:

Post a Comment

Powered by Blogger.