Deze tutorial bouwt verder aan de tutorial "Web Dynpro for ABAP Tutorial 1: Introductie". We gaan een tweede View maken waarin boekingsgegevens voor een geselecteerde vlucht worden getoond. De tweede view kan aangeroepen worden vanuit de View die in Tutorial 1 is gecreeerd.

We voeren achtereenvolgens de volgende stappen uit:

Stap 1: Bestaande Web Dynpro Component kopiëren naar een nieuwe Component.
Stap 2: Nieuwe node creëren in de Context voor database tabel BOOKINGS
Stap 3: Nieuwe View creëren met een Koptekst en een tabel waarin de boekingen getoond zullen worden.
Stap 4: In- en Outbound Plug toevoegen aan BOOKINGS View.
Stap 5: In- en Outbound Plug toevoegen aan de MAIN View.
Stap 6: MAIN View uitbreiden met een button voor het tonen van boekingen voor de geselecteerde vlucht.
Stap 7: BOOKINGS View toevoegen aan de Window.
Stap 8: Applicatie creëren en testen.

Stap 1: Web Dynpro Component creeren

Open de Web Dynpro Component uit Tutorial 1 in de Object Navigator een maak een kopie van deze Component. Noem de nieuwe WD Component ZWDA_BOOKING.

Stap 2: Nieuwe node creeren

Open de context van de ComponentController en voeg een nieuwe node toe. Deze node zal de boekingsgegevens gaan bevatten.

De node heeft als Dictionary structuur SBOOK, Cardinality 0..n en Selection 0..1. Klik op de button ‘Add Attribute from Structure’.

Voeg de velden CARRID, CONNID, FLDATE, BOOKID en CUSTOMID toe aan de node. Sla de wijzigingen aan de ComponentController op.

Stap 3: BOOKINGS View

Creëer een nieuwe View met naam BOOKINGS.

Open het tabblad Context en map de node SBOOK uit de ComponentController naar de Context van de View.

Open het tabblad Layout.

Voeg een UI Element Caption toe met een relevante tekst.

Voeg via de Web Dynpro Code Wizzard () een tabel toe waarin de gevonden boekingen worden getoond. Deze stappen zijn in Tutorial 1 beschreven. Open de map en dubbelklik op Table.

Klik in het volgende scherm op de button Context.

Selecteer de node SBOOK en bevestig de Wizzard.

Voeg een button toe aan de View. Na het aanmaken van de In- en Outbound plugs zullen we een actie toevoegen aan de button.

Sla de wijzigingen aan de View op.

Stap 4: In- en Outbound Plug BOOKINGS View

Open het tabblad Inbound Plugs en voeg een nieuwe Inbound Plug toe voor navigatie van de MAIN View naar de BOOKINGS View.

Open het tabblad Outbound Plugs en voeg een nieuwe Outbound Plug toe voor navigatie van de BOOKINGS View naar de MAIN View.

Open het tabblad Layout van de BOOKINGS View. Open de properties van de button, scroll naar het onAction Event en klik op de create button.

Geef een naam op voor de Action en selecteer de Outbound plug TO_MAIN.

Sla de wijzigingen aan de BOOKINGS View op.

Stap 5: In- en Outbound Plug MAIN View

Open het tabblad Inbound Plugs van de MAIN View. Voeg een nieuwe Inbound Plug toe voor navigatie van de BOOKINGS View naar de MAIN View.

Open het tabblad Outbound Plugs en voeg een nieuwe Outbound Plug toe voor navigatie van de MAIN View naar de BOOKINGS View.

Stap 6: MAIN View

Open de View MAIN. Een voeg een nieuw UI Element toe aan de View.

Voeg een UI Element van type Button toe.

Voeg een tekst voor de button toe in de properties van het Element. Om ervoor te zorgen dat de boekingen worden opgehaald wanneer op de button wordt geklikt, dient de button een methode uit te voeren. Klik op de button Create achter de property onAction.

Geeft een naam voor de actie in en klik op de button Continue.

Open het tabblad Context en map de node BOOKINGS uit de ComponentController naar de Context van de MAIN View door het vanuit de CONTEXT van de ComponentController naar de Context van de View te slepen.

Open in het tabblad Methods de nieuwe methode ONACTIONGET_BOOKING door op de regel te dubbelklikken.

In de Methode lezen we eerst de geselecteerde regel in de tabel met vluchtgegevens.
DATA: node_sflight  TYPE REF TO if_wd_context_node,
elem_sflight  TYPE REF TO if_wd_context_element,
ls_sflight    TYPE if_main=>element_sflight .

node_sflight = wd_context->get_child_node( name = if_main=>wdctx_sflight ).

IF NOT node_sflight IS INITIAL.

elem_sflight = node_sflight->get_element(  ).

IF NOT elem_sflight IS INITIAL.
elem_sflight->get_static_attributes(
IMPORTING
static_attributes = ls_sflight ).
ENDIF.
ENDIF.

Vervolgens halen we gegevens op uit tabel SBOOK op basis van de vluchtgegevens.

Let op: in deze tutorial word de databasetabel sbook direct vanuit een WDA methode aangeroepen. In een productieve Web Dynpro zouden dit soort acties altijd via een Supply method (zie tutorial 1), via een BAPI call of via een externe klasse uitgevoerd moeten worden omwille van herbruikbaarheid.

DATA: node_bookings TYPE REF TO if_wd_context_node,
lt_bookings   TYPE TABLE OF sbook.

SELECT * FROM sbook
INTO CORRESPONDING FIELDS OF TABLE lt_bookings
WHERE carrid EQ ls_sflight-carrid
AND   connid EQ ls_sflight-connid
AND   fldate EQ ls_sflight-fldate.

node_bookings = wd_context->get_child_node(
name = if_main=>wdctx_bookings ).

node_bookings->bind_table(
new_items = lt_bookings ).

Ten slotte navigeren we naar de BOOKINGS View door de outbound-plug TO_BOOKINGS aan te roepen. Via de code wizzard () kan de code automatisch gegenereerd worden.

wd_this->fire_to_bookings_plg( ).

Sla de wijzigingen aan de View op.

Stap 7: Window

Open de Window en voeg de BOOKINGS View aan de Window toe.

Koppel de outbound plug FROM_MAIN aan de inbound plug TO_BOOKINGS en de outbound plug FROM_BOOKINGS aan de inbound plug TO_MAIN door de inbound plugs naar de outbound plugs te slepen.

Stap 8: Applicatie creeren 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.