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.heilman2/blog 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
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.
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.
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.
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.
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.
Figure 8 - Window Maintenance
We then map this view container to the TABLE View of the Component SALV_WD_TABLE.
Figure 9 - Embed a View Settings
The resulting Window settings should appear just like in Figure 10.
Figure 10 - Window Settings
The Results
If we run our sample application you should find results similar to Figure 11 and 12.
Figure 11 - Sample Output
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.
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.
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.
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
Figure 17 shows the new output display.
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.
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.
4 Comments
