10/30/2016

LetsWebDynpro.PartIIISAPYard

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
10
Shares

Lets Web Dynpro. Part III

TOPICS: Table Binding

Enteremail

Subscribe

We Respect Your Privacy !

Table Does Not Contain Visible Columns

Web Dynpro ABAP

SEARCH

Subscribe!

Follow@sapyard

POSTED BY: SAP YARD

NOVEMBER 11, 2014

http://www.sapyard.com/letswebdynpropartiii/

1/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

In Part II, we created one input eld, a button and one line of output. In this
post, we would create more than one input elds, a button and a table with
multiplelines as output.
Lets assume your functional speci cation documents says; We need a portal
application which would report the number of orders created by particular users
in a givendate frame. Document name, Document type, creation date and user
who created should be reported. Complex
. In other words, create one
input eld for User Id, onerange for Date eld and display VBAK-VBELN,
10
Shares VBAK-AUART, VBAK-ERDAT and VBAK-ERNAM.. Easy ..

SAPYard
656likes

Liked

Youand2otherfriendslikethis

Lets plan our design as we did in Part II.

1) Create WD Component in SE80.
2) In this exercise, we will not create context in the component controller,
but we will create in View Controller and use it locally.
3) De ne the input screen context (one line structure type) and output result
context (table type).
4) Design the layout and BIND your input elds and output elds.
5) In the execute button, create an Action and in the automatically created
method, generate the code to read input elds, select data and display
output elds.
Lets start..
Step 1: Create your component in SE80. Go to View Context and de ne the
selection screen context (CN_SEL_SCREEN). Three attributes/ elds i.e.
userid, from date andto date are de ned. Similarly de ne output table
context (CN_RESULT). As per requirement, four elds / attributes i.e. sales
order, created date, createdy by anddocument type are de ned.

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/letswebdynpropartiii/

2/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

Taboo? A big NO NO?

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

10

Zero

Shares

ABAP on SAP HANA.

Part I. First Program in
ABAP HANA
Get Latitude and
Subscribe!
Longitude of any place
using Google Map API in
SAP

NetworkedBlogs

Blog:
SAPYard
Topics:
Abap,Sap,Hana

Followourblog

http://www.sapyard.com/letswebdynpropartiii/

3/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

WEB DYNPRO ABAP TUTORIALS

DECEMBER 26, 2014

Lets Web Dynpro.

Part V

NOVEMBER 24, 2014

10

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

Step 2: Go to View Layout and create input elds. Group them in transparent
container. Do not forget to create Labels and align them. Remember to tag
one label withone input eld in the LabelFor property of Label.

http://www.sapyard.com/letswebdynpropartiii/

4/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Subscribe!

Your From Date and To Date might not be in one line..

.. Just change the
Layout type to Matrix Layout, both would be in one line.. happy..
Did you bind the input elds to the context? By now, you should know
that, context is your work area or variable or internal table. The UI element
with which youtag/bind it, that context would hold your data.. Freeze it..

http://www.sapyard.com/letswebdynpropartiii/

5/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Subscribe!

Step 3: Anxious to see how your screen looks like. Create an application for
your component (right click and created), give a name and description and
save it. Nowright click the application and test or hit F8 to test your screen.

http://www.sapyard.com/letswebdynpropartiii/

6/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

Congrats!! it does show up.

Tip: Please keep your input elds in different transparent containers. Check, we
have different containers for different UI elements. You might not imagine
itsimportance in simple developments. But for complex one with lots of UI
elements, these transparent container would help in easy grouping and
manipulation.
10
Shares

Step 4: Create another transparent container and pur TABLE UI element in

it. This would be our nal internal table. Bind it to the CN_RESULT context
which we havealready de ned.

Subscribe!

Still your table shows: Table does not contain visible columns.. What does it
mean?
You have one more step to do for Tables. Although you have bound the
datasource with CN_RESULT, you still need to create a binding and de ne
how it should look like.
Right click on the Table UI element -> Create Binding and de ne the Cell
editior for the table columns. We have shown it as text eld. You can show it
as button or input elds etc as per your requirement.

http://www.sapyard.com/letswebdynpropartiii/

7/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Subscribe!

http://www.sapyard.com/letswebdynpropartiii/

8/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Magic.. your columns are visible now..

Step 5: Oops, we forgot to add the Execute button.
Create the button element and link onAction. Say your action name is
Execute, check ONACTIONEXECUTE method is created.

http://www.sapyard.com/letswebdynpropartiii/

Subscribe!

9/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

Step 6: The most important steps. We need to read screen input data, fetch
data from database and display back in the screen.
* 1 Read value in the USERID Context entered in the screen
10
Shares * 2 Read value in the From Date and Two Date Context entered in the screen
* 3 Select from VBAK table with respect to the input screen elds
* 4 Bind the output to the CN_RESULT context to be displayed in the screen

Lets READ screen data rst.

Put the cursor at the right place, hit the wizzard icon (we call it MAGIC
WAND), select READ Operation and then select the Selection Screen
Context. Code is in placeto read the screen data and kept in
workarea/structure ls_cn_sel_screen. After deleting commented and
unwanted auto-generated code, we are left with these codes.

http://www.sapyard.com/letswebdynpropartiii/

Subscribe!

10/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Subscribe!

Please note, you could have used the wizard to read individual elds instead
of whole structure. In that case, you would have three variable, one each for
user id, fromdate and to date. Both the way would lead to your solution.
But, second option would generate more lines of codes.
Now, lets SET nal output data.
Put the cursor at desired place, hit the MAGIC WAND, make sure to select
SET and As Table Operation (as the output would be displayed in multiple
lines). Auto code are generated and after deleting commented line and
http://www.sapyard.com/letswebdynpropartiii/

11/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

unwanted code, below useful lines are left. LT_CN_RESULT is the nal
internal table which should be populated todisplay the result.

10
Shares

Subscribe!

So, we have code to read screen data and display to screen data. But, what
would we display!!!! We need to SELECT data from database and pass it to
output context.

http://www.sapyard.com/letswebdynpropartiii/

12/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

10
Shares

Before LT_CN_RESULT is been bound to screen, we should select the data

and populate it. This is the only piece of code snippet a developer has to write
byhim/herself for this application. Isnt this cool. Less code

Subscribe!

Step 7: Lets test.

Execute your application, give a valid user id and some date range. Bingo..
The output is displayed in the table.

This is a simple post to show output in table. We should handle the errors, also
the output table skeleton should not be shown when we see the page rst.
Columnsshould be displayed once user hits the Execute button. Also, the date
range should be handled so that, To date is not less than From date.
http://www.sapyard.com/letswebdynpropartiii/

13/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

We will show how you can achieve these requirements in simple tricks in our
next post. Please stay tuned.
Please let us know, if you face any issue in any of the steps. We would be glad to
elaborate them.
If you want to get practical issues and resolutions straight to your inbox, please
SUBSCRIBE. We respect your privacy and take protecting it seriously.
10
Shares

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 Dynpro ABAP
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
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

http://www.sapyard.com/letswebdynpropartiii/

Subscribe!

14/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

UI?: Getting back the old look and feel after EhP740 upgrade
11. Can we avoid Table Type declaration for Attributes section in Web
Dynpro?

10

Shares

Isn't it Fair to Share??

Related Posts:
Subscribe!

http://www.sapyard.com/letswebdynpropartiii/

15/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

Lets Web Dynpro.

Part V

ABAP on SAP
HANA. Part III

Previous post

10
Shares

2 COMMENTS

Next post

ON "LETS WEB DYNPRO. PART III"

krishnamraju | July 5, 2016 at 12:45 pm | Reply

Subscribe!

I Thought You Forgot To show Table cordiality (1..n).

right now it is taking as structure
Any how well explanation..thank you

SAP Yard | July 5, 2016 at 1:30 pm | Reply

Dear Krishnamraju Thank you so much for your
feedback. You are right, for table, it should be 1:n.
Glad you liked our way of explanation.
Regards,
Team SAPYard.
http://www.sapyard.com/letswebdynpropartiii/

16/17

10/30/2016

LetsWebDynpro.PartIIISAPYard

Comment, Criticism, Opinion, Feedback. Please do not

hold back. Share your Thoughts!!
10
Shares

Enteryourcommenthere...

COPYRIGHT 2016 | MH NEWSDESK LITE BY MH THEMES

Subscribe!

http://www.sapyard.com/letswebdynpropartiii/

17/17