Dynamic creation of component usage

Background: While working on one or other Webdynpro component, we all have come across the implementation of ALV. Interactive ALV is the type of ALV where after giving the input, user is first shown the primary list of ALV. A secondary list will be displayed on the click by user in one of the records of primary ALV. This secondary list will have more elaborated data of the selected record. 

For implementation of ALV in  ABAP Webdynpro, we have to create the component usage of one standard Webdynpro component named SALV_WD_TABLE. Further we have to do the external mapping of DATA node of SALV_WD_TABLE to our context node which is going to have the final value for display in ALV. We also have to embed the TABLE view of SALV_WD_TABLE into our ViewContainerUIElement of the respective view of our custom component, where we want to display the ALV. 

While working on one such ALV requirement, I came across one scenario where I need to implement the interactive ALV. As per the requirement both the ALVs must be displayed on the same screen (View).  

The usual approach to achieve this is to create as many separated usage of SALV_WD_TABLE as the number of ALVs you want to implement. In my case I could have to create 2 usages. The other approach is to implement the component usage dynamically. This approach can particularly be proved helpful when at design time you are not sure how many of component usage you need to create. 

So the component usage which we create at design time is called the static component usage, while the one created through program s called the dynamically created component usage 

Instead of following the static approach all the way, I created one component usage statically while other one I created through program (dynamic creation of component usage). 

Pre-requisite: Must have worked on normal Webdynpro application. Knowledge on static creation of component usage in own custom Webdynpro component.

Creation of Static Component Usage:

1. Create one Webdynpro component with main view and a window.

2. Now go to the webdynpro component -> Used component tab and create a static component usage of SALV_WD_TABLE.

3. Now go to component controller and create a new controller usage.

4. Now in context tab of component controller create 3 new node named sales_doc,    

    sales_header_data, sales_item_data with the below mentioned attribute and properties.

5. Go to Component Usage sub tree which is coming in left side panel and there click on INTERFACECONTROLLER_USAGE. There do the external binding of Sales_header_data context node to the DATA context node of SALV_WD_TABLE.

6. Now got to the window and there by right clicking on the ViewContainerUIElement Header_alv click on Embed_view and there choose the table view of SALV_WD_TABLE.

7. Now in layout tab of main view create appropriate UI element as shown in below screen shot. 

In the Input element we will be giving the VBELN as input and on clicking of button Show primary ALV will be displayed on ViewContainerUIElemenrt HEADER_ALV. 

On the onAction property of button ‘Show’ we have created an action named SHOW and a corresponding method names ONACTIONSHOW has been created automatically.

8. Go to the context tab of the view main and drag and drop the context node of component controller to the view’s context.

9. In attribute tab add one attribute as follows.

10. Now go to the method ONACTIONSHOW and write the below logic for fetching the data to be displayed.

11. By doing this till here your primary screen will be coming happily on clicking of ‘Show’ button. Create a webdynpro application and test it. It will look like below

Creation of Dynamic Component Usage:

12. Now if we want to click on one row of ALV and want the secondary list to be displayed we have to use the Hotspot technique of ALV. Hotspot technique is about creating one column in ALV as hotspot. By clicking on that column’s value ONCLICK event of ALV will be triggered and further defined code will trigger.

13. In order to define the hotspot in our ALV, we need to do further coding in ONACTIONSHOW method itself. Below is the screen shot of code which is pretty self explanatory

14. Now in Method list create a new event handler method and in even column pick ON_CLICK event of the interface controller of the component usage ALV_USAGE.

15. This method will automatically have one importing reference parameter named R_PARAM. This variable’s Value field will have the value of the clicked column of ALV list.

16. In this method we will first write the logic for fetching the data for secondary list for clicked value of primary list.

17. Below is the screen shot of the code which is meant for creating the component usage dynamically. For that we have first created a component usage group and then created a component usage. The code in screen shot is self explanatory. I have put a lot of comment there to make everything clear. And yes…put this code in ACTIONCLICK method itself.

18. Now test your application again. This time click on the Sales Doc. column’s value of primary list to get the secondary list. The result is like below.

                                                                                                              By: Reetika Patel