ABAP Web dynpro ALV report table

Step 1 - Create a View Container UIElement
Within the layout tab of your VIEW add a new element of type ViewContainerUIElement and give it a name, such as VIEWCONT1. This will be used to display your ALV table.


Step 2 - Create your context node
Now create your context which will be used to generate your ALV grid table. I.e. the fields in this context will make up the columns of your ALV table. Double click on the ComponentController and select the 'Context' tab. Now add a new node to the context node (right click the context and select Create->Node).


Step 2 - Populate properties of your context node
Give the new node a name and enter which table structure you want to base it on (i.e. structure you want your ALV grid based on ). Also rememeber to set the cardinality to 0:n (or 1:n) to denote a table.


Step 3 - Add field attributes to your context node
Now click on the 'add attributes from structure' button, and select your desired table fields.


Step 4 - context node created!
Press the green tick on both the new popup screens to return to your context section, your new context node should now have been added.


Step 5 - Populate Context used by ALV within VIEW
Go to the context tab of your VIEW and drag the ALV table context(ALV_TABLE) from the right hand side to the left hand conext node.


Step 6 - Access the Component usage
Within the left hand object tree expand Component Usages and then the usage you just created (ALV_COMP). Now double click on INTERFACECONTROLLER_USAGE


Step 7 - Assign controller usage to ALV usage
Click on the 'Controller Usage' button and select your web dynpro component


Step 8 - Assign context to ALV usage data
A second context view will open on the right hand side containing the context node you created earlier for your ALV table. Simply drag this node from the right hand side to the left hand side DATA node.


Step 9 - Embed the ALV into VIEW Container
Go to your main window where the view (VIEW1) has been embeded. Expand the view until you reach the VIEW Container VIEWCONT1. Now right click on the View Container and select 'Embed View'


Step 10 - choose view to embed
Click the drop down option of the 'View to Be Embedded' field and select the TABLE view of your ALV component usage (ALV_COMP).


Step 11 - Assign component usage
Double click on your web dynpro component and select the 'Used Components' tab


Step 12 - Enter ALV component usage details
Ensure the ALV component details exist, if not click the + button and add the following component details: SALV_WD_TABLE and enter a component name i.e. ALV_COMP


Step 13 - Add ABAP code to populate ALV table
Within the WDDOINTINIT method of your VIEW (VIEW1) enter the following code.

* create local data variable to access context information
  Data: context_node type ref to if_wd_context_node.

* create table based on context structure
  data: it_scarr type STANDARD TABLE OF if_view1=>element_ALV_TABLE,
        wa_scarr like line of it_scarr.

*select data from required SAP table
  select *
    from scarr
    into table it_scarr.

* bind data to context used by ALV
  context_node = wd_context->get_child_node( name = 'ALV_TABLE').
  context_node->BIND_table( it_scarr ).

Step 14 - All done!
Well thats it your all done, simply save and activate everything and execute the application. you should see something like the following...


Step 15 - Populate Context used by ALV within VIEW
Note: You will notice that client is displayed within the ALAV even though you did not select the client field during the context creation stage. This is just to demonstrate that all fields from the route structure are brought through to the ALV despite how many you actually choose. If you dont want certain fields to appear you can create a structure which does not contain them or insert some code to hide fields of the web dynpro ALV you do not want to see.