10/30/2016

LetsWebDynpro.PartVSAPYard

SAP YARD

YOUR BACKYARD FOR SAP TECHNICAL TIPS AND SOLUTIONS

HOME

SEE ALL POSTS

TUTORIALS

CODE SNIPPETS

KNOW THY YARD MEN

HELP FORUM

BOOKS & JOBS

SAP QUIZ
18
Shares

Lets Web Dynpro. Part V

TOPICS: Component Usage

SALV_WD_TABLE

Enteremail

Subscribe

We Respect Your Privacy !

WDR_OVS

WDR_SELECT_OPTIONS
SEARCH

Subscribe!

Follow@sapyard

POSTED BY: SAP YARD

DECEMBER 26, 2014

http://www.sapyard.com/letswebdynpropartv/

1/16

10/30/2016

LetsWebDynpro.PartVSAPYard

In Part IV, we learnt how to make the elements visible as we need them and
also learnt how to make the mandatory elds throw error message. Till now
we dealt with the simple table output. In this part, we would see how we can
display the same tabular output in ALV. For ALV display in Web Dnypro
ABAP, we need to do Component Usage.
[adToAppearHere]
18
Shares

Another new term in Web Dynpro..

.. The Web Dynpro framework
provides us with a technique called Component Usage, with the help of
which we can reuse the events, methods and context of one WD component
into another WD component. In simple words, Component Usage means
reuse of already developed existing Web Dynpro Components (standard
and/or custom). Just like, we use standard REUSE_ALV_GRID_DISPLAY
function module to display our ALV in normal ABAP, similarly we can use
standard Web Dynpro Component SALV_WD_TABLE. Just like
REUSE_ALV_GRID_DISPLAY has table T_OUTTAB where we can assign
ANY type of internal table, similarly in WD SALV_WD_TABLE has a
context node called DATA where we can bind context of ANY type.
We need to use:
a) Interface View TABLE of component SALV_WD_TABLE
b) Interface node DATA of component SALV_WD_TABLE.
The other very oftenly used standard components are WDR_OVS (for Object
Value Selector OVS) and WDR_SELECT_OPTIONS (for select options).
Let us use the same example we did in Part III. This time we are declaring
global contexts in ComponentController (not necessary, just for
demonstration).

SAPYard
656likes

Liked

Youand2otherfriendslikethis

SAP ABAP LINKS

Subscribe!

Abapinho

7MostPopular&FeaturedArticles

SAP HANA from Space

Level
Lazy and Smart ABAPers

DELETING rows of the internal

table within the LOOP. Is it a
http://www.sapyard.com/letswebdynpropartv/

2/16

10/30/2016

LetsWebDynpro.PartVSAPYard

Taboo? A big NO NO?

Fiori App - An
Introduction from an
ABAPer
SAP HANA at Ground

18

Zero

Shares

ABAP on SAP HANA.

Part I. First Program in
ABAP HANA

Drag these nodes in the main View and now they are available in the view
(just like we pass variables as parameters in the Subroutine/Performs to
make those variable available in the subroutines).

Get Latitude and

Subscribe!
Longitude of any place
using Google Map API in
SAP

NetworkedBlogs

Blog:
SAPYard
Topics:
Abap,Sap,Hana

Followourblog

Hope, by now you know how to create button and link it to an actions
(screen shot below in case you forgot).
http://www.sapyard.com/letswebdynpropartv/

3/16

10/30/2016

LetsWebDynpro.PartVSAPYard

WEB DYNPRO ABAP TUTORIALS

DECEMBER 26, 2014

Lets Web Dynpro.

Part V

NOVEMBER 24, 2014

18

Lets Web Dynpro.

Part IV

Shares

NOVEMBER 11, 2014

Lets Web Dynpro.

Part III
Subscribe!
NOVEMBER 5, 2014

Lets Web Dynpro.

Part ZZ

NOVEMBER 3, 2014

Lets Web Dynpro.

Part II

For displaying the ALV output, we can use View Container UI Element
( gure above). The View Container UI Element need NOT be bound to any
http://www.sapyard.com/letswebdynpropartv/

4/16

10/30/2016

LetsWebDynpro.PartVSAPYard

context here. We will show later how it is bound.

18
Shares

Hope you have bound all other screen elements.

On Execute button, we need to carry out three steps.

Subscribe!

1. Read data entered in the screen ( g below).

2. Use the data entered in screen to extract data from database (in this example
VBAK).
3. Bind the extracted data to the output result context node (it would display the
nal output) ( g below).

http://www.sapyard.com/letswebdynpropartv/

5/16

10/30/2016

LetsWebDynpro.PartVSAPYard

18
Shares

Subscribe!

* Code Snippet
http://www.sapyard.com/letswebdynpropartv/

6/16

10/30/2016

LetsWebDynpro.PartVSAPYard

METHOD onactionexecute .
* Read data entered in screen
DATA lo_nd_cn_sel_screen TYPE REF TO if_wd_context_node.
DATA lo_el_cn_sel_screen TYPE REF TO if_wd_context_element.
DATA ls_cn_sel_screen TYPE wd_this->element_cn_sel_screen.
DATA lo_nd_cn_result TYPE REF TO if_wd_context_node.
DATA lt_cn_result TYPE wd_this->elements_cn_result.
18
Shares

lo_nd_cn_sel_screen = wd_context->get_child_node( name = wd_this>wdctx_cn_sel_screen ).

* get element via lead selection
lo_el_cn_sel_screen = lo_nd_cn_sel_screen->get_element( ).
* 1. Read data entered in the screen.
lo_el_cn_sel_screen->get_static_attributes(
IMPORTING
static_attributes = ls_cn_sel_screen ).

Subscribe!

* 2. Use the data entered in screen to extract data from database

* Select from VBAK with the input screen elds
SELECT
vbeln Sales Document
erdat Date on Which Record Was Created
ernam Name of Person who Created the Object
auart Sales Document Type
FROM vbak
INTO TABLE lt_cn_result
WHERE ernam = ls_cn_sel_screen-userid
AND erdat GE ls_cn_sel_screen-from_date
AND erdat LE ls_cn_sel_screen-to_date.
IF lt_cn_result[] IS NOT INITIAL.
* Keep the extracted data in a context node (table) bound to ALV
http://www.sapyard.com/letswebdynpropartv/

7/16

10/30/2016

LetsWebDynpro.PartVSAPYard

lo_nd_cn_result = wd_context->get_child_node( name = wd_this>wdctx_cn_result ).

* 3. Bind the extracted data to the output result context node
lo_nd_cn_result->bind_table( new_items = lt_cn_result set_initial_elements =
abap_true ).
ENDIF.
18
Shares

ENDMETHOD.
The View Container UI Element is still not bound to any context. So the nal
step is to link a context to the nal output. For this we would leverage the
already existing standard WD Component, SALV_WD_TABLE.
Create a component usage. In this example the name is CU_DETAIL of WD
Component SALV_WD_TABLE. Naming convention CU_ for Component
Usage. Please note in the left side panel new Component Usages attributes
(CU_DETAIL) get created. Save/Activate the changes done till now.

http://www.sapyard.com/letswebdynpropartv/

Subscribe!

8/16

10/30/2016

LetsWebDynpro.PartVSAPYard

18
Shares

Go to the Window W_MAIN. On the right side, right click on the W_MAIN
window and select EMBED View. Choose the view V_MAIN. View V_MAIN
along with the View Container UI element is embedded in the Window. Now
right click on the View Container VC_RESULT and chose EMBED View select
Component Usage View TABLE. Your window is linked to standard
component SALV_WD_TABLEs TABLE view.

http://www.sapyard.com/letswebdynpropartv/

Subscribe!

9/16

10/30/2016

LetsWebDynpro.PartVSAPYard

18
Shares

Subscribe!

http://www.sapyard.com/letswebdynpropartv/

10/16

10/30/2016

LetsWebDynpro.PartVSAPYard

18
Shares

Now we need to bind the output data to the context of the SALV_WD_TABLE.
The context we would be binding to is DATA. Click on the
INTERFACECONTROLLER of the Component Usage CU_DETAIL. Check the
icon under DATA in context has single arrow underlined. Now we need to
let the SALV_WD_TABLE know, what data would be bound to the DATA
context. In our example, CN_RESULT context has the nal data, so, we drag
CN_RESULT from right to the DATA context on the left.

http://www.sapyard.com/letswebdynpropartv/

Subscribe!

11/16

10/30/2016

LetsWebDynpro.PartVSAPYard

18
Shares

Check, the arrow is two way now and also you should get the message
External mapping for context element DATA was de ned.

Subscribe!

Save and Activate your component. You are done.

Let us test out baby.

http://www.sapyard.com/letswebdynpropartv/

12/16

10/30/2016

LetsWebDynpro.PartVSAPYard

This is one of the simplest way to show ALV. In real project scenarios, you rarely
use one ALV output. In the next parts, we would explore multiple ALVs and also
different features of the ALV list; like onclick of a row/ eld, make the ALV
display/input only, activate/deactive standard features of ALV, put custom
buttons programatically etc.
Please let us know, if you face any issue in any of the steps. We would be glad to
elaborate them.
18
Shares

If you want to get practical issues and resolutions straight to your inbox, please
SUBSCRIBE. We respect your privacy and take protecting it seriously.
If you liked this post, please hit the share button at the left side of your screen.
Thank you very much for your time!!
Our series on Web Dynrpo ABAP

Subscribe!

1. Lets Web Dynpro. Part I: Overview of Web Dynrpo

2. Lets Web Dynpro. Part II : Create your rst Web Dynpro Application
3. Lets Web Dynpro. Part II : Display a simple tabular output in Web
Dynpro
4. Lets Web Dynpro. Part IV : Show and hide UI elements dynamically in
Web Dynpro
5. Lets Web Dynpro. Part V: ALV display explaining Component Usage in
Web Dynpro
6. Lets Web Dynpro. Part VI : Add custom buttons programmatically to the
ALV output tool bar/header
7. Lets Web Dynpro. Part VII : Personalization and Customization in Web
Dynpro
8. Lets Web Dynpro. Part ZZ : Export an EXCEL le with data in cell
formatted excel sheet with colors, borders, lters in Web Dynpro
http://www.sapyard.com/letswebdynpropartv/

13/16

10/30/2016

LetsWebDynpro.PartVSAPYard

9. Is data element WDY_BOOLEAN and Flag (Char1) same for Web Dynpro
ALV?: Trick to create checkbox in ALV
10. Taking one step back after EhP7.4, does it make sense for Web Dynpro
UI?: Getting back the old look and feel after EhP740 upgrade
11. Can we avoid Table Type declaration for Attributes section in Web
Dynpro?

18
Shares

Image source: via Free Stock Photos foter.com

Subscribe!

Isn't it Fair to Share??

Related Posts:

http://www.sapyard.com/letswebdynpropartv/

14/16

10/30/2016

LetsWebDynpro.PartVSAPYard

Lets Web Dynpro.

Part II

Lets Web Dynpro.

Part III

18
Shares

Previous post

BE THE FIRST TO COMMENT

Next post

Subscribe!

ON "LETS WEB DYNPRO. PART V"

Comment, Criticism, Opinion, Feedback. Please do not

hold back. Share your Thoughts!!
Enteryourcommenthere...

http://www.sapyard.com/letswebdynpropartv/

15/16

10/30/2016

LetsWebDynpro.PartVSAPYard

COPYRIGHT 2016 | MH NEWSDESK LITE BY MH THEMES

18
Shares

Subscribe!

http://www.sapyard.com/letswebdynpropartv/

16/16