Skip to Content

Introduction
Now that WebDynpro ABAP is Web Dynpro For ABAP! we can take some time and look at some of the most powerful features of this new development environment. What are you getting for the Holidays: WebDynpro ABAP!, I promised to post a weblog that I had been working on for just one of these great features of WDA – ALV Grid. Amazingly WDA comes with an ALV Grid implementation that is a very close match to its SAPGui cousin. What I want to do today is just create a simple introduction to the WDA’s ALV Grid implementation. To really explore all the more advanced features, you will find that SAP has delivered quite a few example programs (look for WDA Components that begin with the name SALV).

Originally I had a sample program with its own selection UI area. However yesterday Rich Heilman posted his weblog on WDA – Using Select Options in a Web Dynpro(ABAP) Application. I thought right away – why make readers create a whole new application from scratch that basically had the same selection criteria. Instead I decided to adjust my example to build on top of Rich’s. That way we combine two of the best elements of WDA – Select-Options and ALV Grid.

Building the Sample
We will start our new sample application by copying the WebDynpro Component from Rich’s example. I named the new copy Z_ALV_TUTORIAL.

Like the Select-Options implementation, the ALV is exposed as its own Component. Therefore our first step is to add the component SALV_WD_TABLE to our component usage list.
image
Figure 1 – Adding the ALV Component Usage

Before we get into the changes to the View, we need to first make some more adjustments at the component controller level. We are going to need to add the FLIGHTS Node and its attributes to the Component Controller.
image
Figure 2 – Creating the Flights Node in the Component Controller

It is the component controller context node that we will actually data bind into the ALV component. That does mean later that we will have to add an extra mapping in our View Context to our Component Controller Context.

However first we will complete the mapping of the Component Context to the ALV Component. Bring up the edit view of the Interface Controller Usage. We will start by creating a new Controller Usage. For this new Controller Usage we will choose our Component Controller.
image
Figure 3 – Adding the Controller Component to the Interface Controller Usage

We are now able to data bind from the Data Node for the ALV Interface Controller to the Flights Node of our Component Controller Context.
image
Figure 4 – ALV to Component Controller Context Mapping

We can now turn our attention to the changes that must be made to our View. We will start by adding the ALV Component to the View as well.
image
Figure 5 – ALV Component Added to the View

Next we can delete the TableView UI element from the original example. We can replace this with another VIEW_CONTAINER_UIELEMENT.
image
Figure 6 – New ALV View Container

To complete our changes to our view, we just need to add the mapping between the Flights node in our View Context to the Flights Node in the Component Controller Context.
image
Figure 7 – Context Mapping – View to Component Controller

Next we need to adjust the settings for the Window. When you enter edit mode you should see the new View container nested under our Main View. We will choose Embed View.
image
Figure 8 – Window Maintenance

We then map this view container to the TABLE View of the Component SALV_WD_TABLE.
image
Figure 9 – Embed a View Settings

The resulting Window settings should appear just like in Figure 10.
image
Figure 10 – Window Settings

The Results
If we run our sample application you should find results similar to Figure 11 and 12.
image
Figure 11 – Sample Output

image
Figure 12 – Sample Output Continued

Although what we see initially may look like a standard TableView UI element, there are several additional features exposed by the ALV.

First of all we have the buttons for Excel Download and Printing. The Excel download actually takes an interesting approach. Instead of downloading the content as a tab delimited text file, SAP is using XML to retain the formatting options of the ALV display. I performed a download and then saved the results to my local drive so that I could have a look at the internal format of the content that is sent back.
image
Figure 13 – Internal Excel Download Content

Most important of the additional UI elements is probably the settings link. This opens a new dialog that allows you to customize the ALV Output.
image
Figure 14 – Settings Dialog

Just like in the classic ALV we have the power to control which columns are displayed, their sort order, filtering and various other display options. Also similar to the classic ALV is the ability to save our settings into what is called a view. Just like the classic ALV layout, this allows users to save and retrieve sets of customizing settings for the ALV.

The Filter Option continues to impress. As you choose new fields to filter by, Select-Option UI elements are generated dynamically. This greatly enhances the ability to filter columns over the TableView element.
image
Figure 15 – Filter Dialog

Finally in the Display area we can change the basic look of the ALV output. A nice new option is the ability to change to a Hierarchy View and choose your Hierarchy columns from this maintenance window. To demonstrate this I will change to Hierarchy mode and fix my output at 4 columns. I then save these settings as the initial view for output.
image
Figure 16 – Display Settings

Figure 17 shows the new output display.
image
Figure 17 – Hierarchy Output

Because we limited the number of columns to output, we have new UI elements to navigate back and forth through all the columns. However the Hierarchy column always remains locked in place.
image
Figure 18 – Hierarchy Column Locking

Closing
This is really just the tip of the iceberg when it comes to ALV functionality in WDA. I have attempted to provide a quick overview of some of the great new functionality. I encourage the reader to look through the listing SALV* WDA components to get a full range of all the functionality. I am sure we will see more weblogs and tutorials on the subject as everyone begins to explore features like editable ALV, Cell Coloring, Etc.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Klaus-Dieter Scherer
    Several tutorials are available to allow a quick start for developers into Web Dynpro ABAP ALV. All tutorials have been posted to SDN beginning of November 2005. Just search for ALV as key word, and look for articles with title “SAP List Viewer in Web Dynpro : …”. The examples address the simple case as well as complex programming including event handling, editability and dynamic data context definition.
    (0) 
    1. Thomas Jung
      I had a look at the tutorials you mention this morning.  They are quite nice with lots of screen shots (very helpful given the design time environment of WebDynpro).  It would be really great if links to these tutorials were added to the SDN WebDynpro ABAP Knowledge Center. 
      (0) 

Leave a Reply