ALV in Webdynpro Application

ALV Output display is one of the most used concept in SAP to meet business requirements. Currently to develop ALV on a normal dynpro output, there are various methods in ABAP. Initially Functional Modules were used to develop ALV's, later SAP introduced Object Oriented classes to develop ALV and introduction of OOP's did help in adding quite new features

Simple ALV on a Webdynpro application is quite simple to develop. In the below example, I am trying to display SPFLI output on an ALV.

First Step is to Create a new Webdynpro Application through SE80 with a View and a Window.

In this example, I have my data retrieval logic inside Main View(WDDOINIT) but you can also have that in Component Controller itself and fill the Context node in a WDDOINIT of Component Controller.

After WD Component is created, go to the Used Component section in the WD definition and add Component Usage for SALV_WD_TABLE.

About SALV_WD_TABLE: For some of the core features of ABAP, SAP has already developed re-usable components which can be used to get required functionality. Another example for this is, WDR_SELECT_OPTIONS using which we can display Select-Options on our Webdynpro Application.

Create a Context Node of Type SPFLI and add all its fields to the node(You can use Add Attributes from Structure button to add all the fields of that table in the node). Dont forget to make the Cardinality as 0..n to indicate that its a table and not structure type.

Next Step is to Create a View and add Context Node type SPFLI and Bind it to the Component Controller Context node.(You can even directly use Context node created in Controller directly here just by dragging and dropping).

Here, I am dragging Node from Controller to View.

Now, click on the MAIN View, and add an element of type ViewContainerUIElement and give an ID to it.

Important point here is, whenever you add a View ContainerUI Element, it provides and option for you to embed another view(which displays data) to it in the Window section.

Until here, we are done with the part of creating Context Node, View, adding a view container to the view. Next step is to fill the Context node table with the data.

In the WDDOINIT, write code to get data and then bind it to context node table. Binding part can be done easily using code generation wizard provided by SAP as shown below.

and the code generated is,

  DATA lo_nd_spfli TYPE REF TO if_wd_context_node.

  DATA lt_spfli TYPE wd_this->elements_spfli.

* navigate from <CONTEXT> to <SPFLI> via lead selection
  lo_nd_spfli = wd_context->get_child_node( name = wd_this->wdctx_spfli ).

  SELECT * FROM spfli INTO TABLE lt_spfli.

  lo_nd_spfli->bind_table( new_items = lt_spfli set_initial_elements = abap_true ).

With this we are done with the part of filling context node, next step is to Bind the Context Node with the SALV_WD_TABLE context node.

Logic here is, when we develop ALV using function module, we pass our output internal table data to the function modules ALV data table and that data will be shown on the output screen in an ALV, similarly in Webdynpro once you bind Context Node table data to SALV* data node, output is shown in ALV. Binding is done as below,

Whenever you add a Component Usage(Another WD Component) to the Webdynpro, interface controller of that WD component will be available in our WD too and you can see that in the left tree under component usages node.

Double click on the Interfacecontroller_Usage node and in the context, Map SPFLI node to Data Node of SALV* component as shown below,

I have dragged SPFLI node to Data Node.

Now, in the window, navigate to the ALV View container, right click on that and click on Embed View and then in the pop-up select the ALV data view, once you do that it will look somewhat shown as below

That is the last step in the development, we are ready with an SPFLI ALV output. Once you create a WD Application for this component and execute it, it looks like below screen shot.

In my next blog, I will write as how to handle configurations to the ALV, similar to Layout options we do on dynpro ALV.