Component usages allow you to incorporate reusable user interface components into a Web Dynrpo ABAP and can help you to build feature-rich applications. In addition to the ability to build your own custom components for component usage, SAP provides several very useful components. In this article, we demonstrate how to incorporate ABAP List Viewer (ALV) into a Web Dynpro ABAP.
You need to display an ALV of flight data and provide the user with dropdown values by which to filter on airline carrier and plane type.
Create a web dynpro component, ZDEMO_ALV with a view, MAIN and window, WINDOW.
On the Used Components tab of component ZDEMO_ALV, create a component usage for SALV_WD_TABLE.
Create the same component usage on view MAIN for both the SALV_WD_TABLE component and its interface controller.
SALV_WD_TABLE includes an interface controller with five context nodes. In this example, we will use only the DATA and FILTER_VALUES nodes. Node DATA will contain the data to be displayed in the ALV and node FILTER_VALUES will contain dropdown values by which the user may filter individual ALV columns.
3.1 Create and Supply Context Node FLIGHT_DATA
In the component controller, create a node, FLIGHT_DATA, with cardinality 0..n and dictionary structure SFLIGHT. Use the wizard to add attributes to the node from the dictionary structure.
If the ALV's DATA node is defined as having a dictionary structure, it will automatically display all fields of the structure even if only a subset of fields is selected for the context node. To make the ALV display only the context node fields, remove the dictionary structure from the context node definition.
Also create supply function, SUPPLY_FLIGHT_DATA, to populate node FLIGHT_DATA.
METHOD supply_flight_data.
DATA lt_flight_data TYPE wd_this->elements_flight_data.
SELECT *
FROM sflight
INTO CORRESPONDING FIELDS OF TABLE lt_flight_data
ORDER BY carrid connid.
node->bind_table(
new_items = lt_flight_data
set_initial_elements = abap_true ).
ENDMETHOD.
3.2 Map Component Controller Node FLIGHT_DATA to ALV Interface Controller Node DATA
Open the component usage's interface controller by double-clicking it in the object navigator.
Click the button, Controller Usage, and select the ZDEMO_ALV component controller to create a usage of the ALV's interface controller context. Next, map component controller node FLIGHT_DATA to ALV interface controller node DATA by drag-and-drop from the component controller context to its corresponding node in the interface controller context.
3.3 Map ALV Interface Controller Node FILTER_VALUES to the View Controller Context
Open the context of view MAIN and map ALV interface controller node FILTER_VALUES to the view's context by drag-and-drop from the interface controller context to the view context.
In hook method WDDOINIT of view MAIN, populate context node FILTER_VALUES with dropdown values for ALV columns carrier and plane type.
METHOD wddoinit.
DATA lt_filter_values TYPE wd_this->elements_filter_values.
DATA ls_filter_values TYPE wd_this->element_filter_values.
DATA lo_nd_filter_values TYPE REF TO if_wd_context_node.
* Filter values for carrier
ls_filter_values-fieldname = 'CARRID'.
SELECT carrid AS key
carrname AS value
FROM scarr
INTO TABLE ls_filter_values-t_dropdown_values
ORDER BY carrname.
APPEND ls_filter_values TO lt_filter_values.
* Filter values for plane type
ls_filter_values-fieldname = 'PLANETYPE'.
SELECT planetype AS key
planetype AS value
FROM saplane
INTO TABLE ls_filter_values-t_dropdown_values
ORDER BY planetype.
APPEND ls_filter_values TO lt_filter_values.
lo_nd_filter_values = wd_context->get_child_node(
name = wd_this->wdctx_filter_values ).
lo_nd_filter_values->bind_table(
new_items = lt_filter_values
set_initial_elements = abap_true
).
ENDMETHOD.
Open the layout of view MAIN and create a ViewContainerUIElement to receive the ALV table.
Finally, open window WINDOW and embed the ALV view TABLE into view MAIN's ViewContainerUIElement.
Save, activate and run the web dynpro application. The listing of flight data displays as a read-only ALV table, and the columns for carrier and plane type offer the user dropdown values for filtering the individual columns.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
6 | |
4 | |
3 | |
3 | |
3 | |
3 | |
2 | |
2 |