Deze tutorial bouwt verder aan de tweede tutorial ("Web Dynpro for ABAP Tutorial 2: Navigatie"). De tabel in de MAIN View wordt in deze derde tutorial vervangen door een ALV overzicht met behulp van Component Usage.

We voeren achtereenvolgens de volgende stappen uit:

Stap 1: Bestaande Web Dynpro Component kopiëren naar een nieuwe Component.
Stap 2: Used Component toevoegen aan de nieuwe Web Dynpro Component
Stap 3: TABLE element van de MAIN View verwijderen en ViewContainerUIElement toevoegen aan MAIN View. Het ALV overzicht zal uiteindelijk in deze Container getoond worden.
Stap 4: Node SBOOK mappen naar de node DATA van de InterfaceController.
Stap 5: View TABLE van de Used Component in het ViewContainerUIElement invoegen.
Stap 6: Applicatie creëren en testen.

Het resultaat zal er als volgt uit zien:

Stap 1: Web Dynpro Component creëren

Open de Web Dynpro Component uit Tutorial 2 in de Object Navigator een maak een kopie van deze Component. Noem de nieuwe WD Component ZWDA_ALV_**, waarbij ** voor het cursistnummer staat.

Stap 2: Used Component

Open het tabblad Used Components van de Web Dynpro Component en vul Component Use ‘ALV’ in en selecteer Component ‘SALV_WD_TABLE’.

Sla de wijzigingen op en activeer de Web Dynpro.

Stap 3: MAIN View wijzigen

Open het tabblad Layout van de Main View.

Verwijder het UI Element TABLE door met de linkmuisknop op het element te klikken en uit het context menu Remove Element te selecteren.

Voeg een nieuw UI Element met ID ‘ALV’ en Type ‘ViewContainerUIElement’.

Plaats het UI Element middels drag & drop onder het Element CAPTION.

Sla de wijzigingen op.

Stap 4: Node mappen naar de InterfaceController.

Open het tabblad Context van de INTERFACECONTROLLER_USAGE.

Klik op de button Controller Usage en dubbelklik op de ComponentController van de Web Dynpro Component. Rechts wordt nu de Context van de Component Controller geopend. Map de node SFLIGHT naar de node DATA van de InterfaceController Context middels drag & drop.

Sla de wijzigingen op.

Stap 5: Window wijzigen

Open de Window en navigeer naar de ViewContainerUIElement van de MAIN View. Klik met de rechtermuisknop op het Container Element en selecteer Embed View uit het context menu.

Selecteer View TABLE in het pop-up scherm achter View to Be Embedded.

Sla de wijzigingen op en activeer de Web Dynpro.

Stap 6: Applicatie creëren en testen.

Klik met de rechtermuisknop op de Web Dynpro Component en selecteer menupad Create > Web Dynpro Application. Sla de applicatie lokaal op.

Klik met de rechtermuisknop op de applicatie en selecteer Test. Log in met de SAP gebruikersnaam en wachtwoord.