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.
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.
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.
Figure 3 – Adding the Controller Component to the Interface Controller Usage
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.
Figure 7 – Context Mapping – View to Component Controller
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.
Figure 13 – Internal Excel Download Content
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.
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.
Figure 16 – Display Settings
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.
Figure 18 – Hierarchy Column Locking
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.