introduction to web dynpro for abap

8/18/2019 Introduction to Web Dynpro for ABAP

1/77

Introduction to web dynpro for ABAP, introduction to SAP web technologies

+ -

• Web Dynpro is a new SAP programming model to develop SAP web based applications.

• Web dynpro is delivered in 2 languages.

• Web Dynpro ABAP and Web Dynpro Java.

• Web Dynpro ABAP is released from SAP ECC 6.0.

Basic differances between web dynpro ABAP and web dynpro Java

Web Dynpro ABAP Web Dynpro JAVA

Uses ABAP as programming language. Uses JAVA as a programming language

Uses ABAP stack for executing web dynproABAP objects.

Uses JAVA stack for executing web dynpro JAVAobjects.

Uses ABAP workbench !"#$% for designingweb dynpro ABAP applications.

Uses &'(! &et)wea*er (e*eloper !tudio% fordesigning web dynpro JAVA applications.

!upports A+V, select)options etc (osen-t support A+V, select)options.

&ot highly de*eloped language. t is a /ighly de*eloped language.

What is SAP Enterprise Portal ? Advantages of SAP Enterprise Search

+ -Enterprise Portal (EP) is a portal software developed by SAP AG.

Portal

Portal is a container of developed internet ap plications which connects t o various h eterogeneous servers forexecution .

The best example for portal is www.yahoo.com ,yahoo.com is web portal contains d ifferent internet applicationlike Yahoo News, Yahoo Sports, Yahoo Finance etc, all these applications are individually developed andintegrated into one portal (yahoo.com).

Web Dynpro applications in Portal

• In SAP the web dynpro applications will be developed individually by w eb dynpro ABAP consultants.

• Once the web dynpro application is developed and tested, the a pplication will be integrated into portalwhere end users uses these a pplications.

SAP Enterprise Portal

http://www.yahoo.com/http://www.yahoo.com/


2/77

There are different portal software's a vailable in market ex: web sphere portal, SAP also released it̀s o wn portalsoftware called Enterprise Portal for integrating SAP applications .

The main advantage of SAP Enterprise Portal is Single Sign On (SSO), SSO is a co ncept of connecting andaccessing different heterogeneous servers with single username and password.

In Enterprise Portal we integrate different SAP business applications like SD Applications, HR applications, BIapplications(Reports), CRM applications etc which are connected to different servers (SD--R/3 Server, HR--R/3Server, BI--BI Server, CRM--CRM server etc), by using SSO we can connect to all these applications with singleuser name .

Roles and responsibilities of Web Dynpro ABAP consultants and Web dynpro javaconsultants

+ -Web Dynpro is delivered in two programming languages, web dynpro ABAP and web dynpro JAVA.

The below are roles and responsibilities of Web dynpro ABAP and web dynpro JAVA Consultants .

Web Dynpro ABAP Consultants Web Dynpro JAVA Consultants

'eb (ynpro ABAP consultants are responsible forde*eloping web dynpro applicatins using !APABAP programming language.

'eb (ynpro JAVA consultants areresponsible for de*eloping web dynproapplications using JAVA language .

&eed to de*elop both front end screens% and backend logic.

&eed to de*elop front end screens% only, back end logic will be de*eloped by ABAPconsultants in the form of BAP , 012 etc

'eb (ynpro ABAP consultants are not responsiblefor integrating web dynpro applications into portal

some times may need to integrate based on project%.

'eb (ynpro JAVA consultants areresponsible for integrating web dynproapplications to portal.

What is MVC architecture in web dynpro ABAP ? Model View Controller in Web DynproABAP

+ -Web Dynpro is based on MVC (Model-View-Controller) architecture.

Item Description

3odel 4bjects which can communicate with database.

View !creen5View5page

2ontroller 2ontroller is an interface between View and 3odel.

Model


3/77

Models a re objects which contains business logic statements to read or write data into database.The models ca nbe developed in the form of Function Modules, BAPÌs, Classes etc.

View

View is a screen displayed in browser.

Controller

Controller is a n interface between model and the view, it is responsible for taking the input from screen and itsubmits to the model, the model will communicate with the database and gives back the resu lt to controller, whichintern submits t he result to the screen.

Different types of controllers used in web dynpro for ABAP programming as a part of MVCarchitecture

+ -

What is a controller ?

Controller is a n interface between model and view ( part of MVC architecture ), controller is re sponsible forcommunicating view and model.

There a re ve types of controllers in web dynpro for ABAP.

1. View Controller

Aview is n othing but a screen that contain different screen elements like input, table etc

A controller which is responsible for view related logic or programming is ca lled as view controller, a web dynprocomponent can have multiple views, each view has it̀s own controller.

2. Window controller

https://www.sapnuts.com/courses/Webdynpro-for-ABAP/webdynpro-introduction/webdynpro-architecture.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/webdynpro-introduction/webdynpro-architecture.html


4/77

Awindow is a container of views, in web dynpro all views must be inserted into a window to display.

Window controller is a controller which is responsible for window related programming.A web dynpro componentcan have multiple windows, each window has it̀s own controller.

3.Component Controller

This is a g lobal controller for a web dynpro component, the methods, attributes etc declared in componentcontroller can be used by all controllers in a component.

4.Interface Controller

Interface controller is a controller which is responsible for communication between two or more web dynprocomponents .

5.Custom Controller

This ia an optional controller an d this is u sed to reduce the burden on component controller to improve theperformance.

Custom controllers b e also used as a conguration controller and will be used for personalization.


5/77

what is a c ontext ?, what is a n ode ? in web dynpro for ABAP


6/77

+ -

Context

Context is a t emporary place where we declare data deceleration's in the form of nodes and attributes.

Attribute

It is u sed to store a single value, these are similar to elds in table or structure.

Ex: MATNR, MTART, VBELN

Node

Node is a collection of attributes, i t is similar t o structure or internal table.

Properties o f node

Cardinality

It species how many records that can be stored in a node, four options a re available under cardi nality.

Minimum

Maximum Description

0 1 Node can store only one record i:e same as work area.Node can only be flled through back end logic only ( can not beused or user input ).

1 1 Node can store only one record I:e same as work areaNode can be used or user input .

0 n Node can store ma imum !n! number o records.Node can only be flled through back end logic only ( can not beused or user input )

1 n Node can store !N! number o records I:e same as internal tableNode can be used or user input .

If maximum value = 1, it can store 1 record.If maximum value = n, it can store 'N' records.

If minimum value = 0, data is se lected from back e nd (using select, itab etc).If minimum value = 1, data can be selected from front end (user input).

Understanding for Basic Users


7/77

For basic understanding, here I am comparing web dynpro with ABAP.

In ABAP we declare internal table like below.

"#$# : I$%'# $ * $#+,* - '#.

In web dynpro we create a node for mara with cardinality 0-n or 1-n, both can store 'n' number of records(Internaltable can store n records).In future lesson we will learn when to take 0-n and 1-n cardinality for creating a node.

In ABAP we declare work area like below.

"#$# : wa%'# $ * '#.

In web dynpro we create a node for mara with cardinality 0-1 or 1-1, both can store one record only(work areacan store o nly one record).In future lessons we will learn when to take 0-1 and 1-1 cardinality .

Creating a node in webdynpro for ABAP, nodes and attributes in web dynpro for ABAPprogramming.

+ -

Node : Node is nothing but a collection of attributes, node can be used as internal table or work area based onthe selected cardinality .

Nodes ca n be created in view controller, component controller and window controller .

Follow the below steps to create a node in web dynpro ABAP.

Go to SE80, select Web Dynpro Comp./Intf. from drop down, provide a web dynpro component name and pressenter.


8/77

A pop up will open, click on create

Provide description, enter.

Save it in a local object, expand views a nd double click on main view.


9/77

Click on ch ange icon to go to change mode.

Select Context tab, right click on context, create, node.


10/77

A pop up will open provide node name, select cardinality, enter.

Now node is created with mara s tructure( work area for MARA table because cardinality is 1-1, it can store onlyone record).

We will discuss more details in future lessons.

Creating UI elements in webdynpro for ABAP, UI element properties in SAP web dynpro

+ -

UI Element : UI elements are screen elements which are used to design screen in web dynpro ABAP, each UIelement has some specic properties .Properties of UI elements:There a re three kinds of properties for UIelements.

1. Mandatory.

2. Can be bindable.

3. Not bindable.

We will discuss a bout all properties of UI elements in future lessons, in this lesson we will be learning how tocreate UI elements.

Follow the below steps to create a UI element in web dynpro ABAP.


11/77

Go to SE80, select Web Dynpro Comp./Intf. from drop down, provide a web dynpro component name and pressenter.

A pop up will open, click on create.

Provide description, enter.

Save it in a local object, expand views a nd double click on main view.


12/77

Click on ch ange icon to go to change mode.

Select Layout, right click on ROOTUIELEMENTCONTAINER, Insert Element.

A popup will open, provide ID, select type from drop down, enter.


13/77

Now the UI element is inserted, we will learn designing layout with UI elements in next lessons.

Data binding in web dynpro for ABAP, binding UI elements to nodes and attributes

+ -

• Binding the UI element data { ex: Input eld, check box, table etc } to corresponding node or attribute iscalled data binding.

• The data is a utomatically transported from a view controller context to a UI element

• .By using the data binding concept we can control multiple properties of a UI element like visibility,enable/disable etc.

• The UI element properties can be manipulated through context by using data binding.

Why we need d ata binding ?

We all know that all the UI elements a re just user interfaces, they can not store any data, the best example isexplained below.

The simple example for data binding is check box, when ever the check box is checked/unchecked from userinterface, we need to access t he value of check box whether it is se lected or not, this ca n be accessed by usingdata binding .

Ex: I have created a check box UI element in view and I have binded the check box to a context attribute thecheck box value can be ret rieved through context attribute, if the check box is se lected X will be stored in context

attribute, if check box is deselected space will be stored in context.


14/77

Creating rst webdynpro ABAPcomponentWeb dynpro component : It is a central control of a application, it has views, windows, controllers.

Web dynpro application : It is a URL which is a ssociated to a web dynpro component, through which we can testa web dynpro component.

Creating hello world application in Web Dynpro ABAP.

Go to SE80, select web dynpro component/ intf from drop down, provide componenet name asZSAPN_HELLO_WORLD, press enter a pop up will open click yes.


15/77

Provide description and enter.

Save it in a local object, save the component (Ctrl S).Go to main view, layout, rootuielementcontainer, insert element, provide id, select page header from drop downand press enter.

Select PageHeader, and provide title in the properties a rea and enter.


16/77

Save (Ctrl S), double click on component name (ZSAPN_HELLO_WORLD), right click and aativate.

A pop up will open just press e nter.Now the hello world component is created, we have to execute and test this component, to test a web dynprocomponent we need a application...So we have to create an application for this

Again right click on component, create, Web Dynpro application.


17/77

Provide application name, description, enter and Save (Ctrl S).

Application is crea ted, right click on application name (not component name) and test.


18/77

The out put will open in a browser...

Working with UI elements in webdynpro ABAPSimple Web Dynpro component to display customer details based on a customer number

+ -

Requirement: Develop a web dynpro component to display customer basic details for a cust omer number input.

Understand and follow below diagram.


19/77

Step1: Go to transaction SE80, select web dynpro component from drop down, provide name asZSAPN_CUSTOMER_DETAILS, enter, click yes, provide description, enter and save it in a local object.

Step2: Go to main view, go to context, right click on context -> Create -> node, provide name as KNA1, providedictionary s tructure as KNA1, cardinality 1-1, selection 0-1 and click on add attributes f rom structure.

Step3: A popup will come, select KUNNR, NAME1, ORT01 and LAND1 and press enter.

Step4: Select node and remove dictionary st ructure under node properties.

Step5: Go to layout tab, right click on rootuielementcontainer, create container from, click on context and selectKNA1, enter.

Step6: Again right click on rootuielementcontainer -> insert element , provide id as BTN_GET and type asBUTTON, press enter.

Step7: Provide button text as get customer and create an action method on_get.

Step8:Go to actions tab, double click on on_get.

1. Read node static a ttributes using code wizard.

2.Get data from KNA1 and set data to node using set_static_attributes method.

Step8:Save and activate the component.

Step9:Test the application.

Provide a customer number(get from KNA1 table) and clcik on get customer, it will ll all elds.


20/77

Working with table UI element in SAP web dynpro ABAP programming, table UI elementproperties

+ -

Requirement : Develop a web dynpro component to display list of vendors .

UI elements to be used in this requirement are INPUT FIELD,LABEL, BUTTON and TABLE .

Step1 : Create context for storing table data.

Step2: Insert TABLE UI element .

Step3: Create data binding for table.

Step4: Add logic to get data.

Step1: Go to Context and Create a no de.Go to SE80, create a w eb dynpro component ZSAPN_TABLE, save it ina local object.

Go to context of main view, click on change mode, right click on context -> create -> node.


21/77

A popup will open, provide node name as LFA1, data dictionary st ructure as LFA1, click on add attributes fromstructure button.


22/77

Select r equired attributes, e nter.


23/77

Step2: Go to layout and insert table UI element.Go to view layout, right click on R OOTUIELEMENTCONTAINER,insert element, provide a id and select table, enter.


24/77

Step3:Create data binding for table.Right click on table, click on create binding, click on context.

Select LFA1.

Step4: Add logic to get data.Go to METHODS tab, double click on WDDOINIT add below code.

"#$# ,-%N"%, #1 $ * '* $- I %/"% -N$* $%N-"*.

"#$# ,$%, #1 $ * /"%$2I345*,*&*N$3%, #1.

6 na7igate rom 8conte t5 to 8l a15 7ia lead selection

,-%N"%, #1 9 /"% -N$* $45 *$% 2I,"%N-"*( N#&* 9 /"%$2I345/" $ %, #1 ).

6 ;$-"- handle non e istant child


25/77

6 I lo%nd%l a1 I3 INI$I#,.

6 *N"I .

6 6 ;$-"- compute 7alues

6 6 e.g. call a model unction6

3*,* $ ,I N' N#&*1 ,#N"1 -'$01 '-& , #1 IN$- $#+,* ,$%, #1 < $- =0 '-/3.

,-%N"%, #145+IN"%$#+,*( N*/%I$*&3 9 ,$%, #1 3*$%INI$I#,%*,*&*N$3 9 #+# %$'


26/77

Step1: Go to SE80, create a web dynpro component ZSAN_CHECKBOX, save it in a local object.

Step2: Double click on main view, click on change, go to context, create a node Ã¢â‚¬ËœCHKÃ¢â‚¬â„¢ with (1 -1) cardinality and create two attributes a s b elow.

CHK -> TYPE -> CHAR1.

SELECTED -> TYPE -> CHAR30.

Step3: Go to layout, right click on ROOTUIELEMENTCONTAINER, insert element id : CHK, type : Checkbox,enter, create binding for the property Ã¢â‚¬ËœVALUEÃ¢â‚¬â„¢ to CHK of node CHK, create an action method Ã¢â‚¬ËœON_CHK_SELÃ¢â‚¬â„¢ for Ã¢â‚¬ËœON_TOGGLEÃ¢â‚¬â„¢ of CHK. Similarly insert another UI elementid: TEXT, type: TextView, enter, create data binding for the property Ã¢â‚¬ËœtextÃ¢â‚¬â„¢ to SELECTED of nodeCHK.

Step4: Go methods, double click on WDDOINIT, and add below logic.

Step5: Save and activate whole component, create application and test.

Working with radio button group in web dynpro for ABAP, using radio button group UIelement

+ -

As a part of real-time projects, we doǹt use individual radio buttons, instead we use radio button group UIelement, Radio Button Group Ui element is a UI element which created multiple radio buttons in the form of agroup.

SAP has provided two options for this radio buttons groups in web dynpro ABAP, based on the requirement wecan choose suitable one.


27/77

Radio Button Group by Key:

• This is used when ever we have xed values for a domain ex: Gender (go to SE11, select domain,provide GENDER, display to check xed values).

• The number of radio buttons created will be determined statically ex:Gender.

Radio Button Group by index:

• This is used when ever we have dynamic number of radio buttons with dynamic values.

• The number of radio buttons a re determined dynamically ex: radio buttons for material type (we willdiscuss i n next lessons)

• Working with radio button group by key UI element in SAP web dynpro ABAP

• + -

• Radio Button Group by Key: When ever we have xed values for a domain, we will use this UI element todisplay them in the form of radio button group.

• In the below example we are going to display GENDER, in the form of radio button by using radio buttonby key UI element.I recommend you to check GENDER domain in SE11 and understand xed values.

• Step1: Go to SE80, create a web dynpro component ZSAPN_RB_GROUP.

• Step2:Create View Context.

• Go to main view, go to context, right click and create a node.


28/77

•

• Provide node name RBG, enter

•

• Right click on node RBG, create attribute.


29/77

•

• Provide name as G ENDER, type as G ENDER and enter.

•

•

Step3: Insert Radio Button Group in Layout.• Go to layout, right click on ROOTUIELEMENTCONTAINER, create element, name as R BG, type as

RadioButtonGroupByKey.


30/77

•

• Step4: Create binding for radio button group.

• Select RBG UI element, click on the yellow icon under properties, select GENDER attribute.

•


31/77

•

• Now you can see 5 radio buttons in a group.

• Step5: Go to Context and create one more attribute.

• Go to view context, create one more a ttribute with name text, type char30.

•

• Go to layout, create one more UI element TextView UI element, bind text property to TEXT attribute.

• Step6:Create action method for Radio Button Group, on select property.


32/77

•

• Step7:Go to methods, add logic.

• Go to methods tab, double click on method ONACTIONON_SELECT, add below logic.

•

• Use Code Wizard to read node and set text attribute.

• "#$# ,-%N"%'+ $ * '* $- I %/"% -N$* $%N-"*.

•

• "#$# ,-%*,%'+ $ * '* $- I %/"% -N$* $%*,*&*N$.

• "#$# ,3%'+ $ * /"%$2I345*,*&*N$%'+ .

•

• 6 na7igate rom to 7ia lead selection

• ,-%N"%'+ 9 /"% -N$* $45 *$% 2I,"%N-"*( N#&* 9 /"%$2I345/" $ %'+ ).

•

• 6 ;$-"- handle non e istant child

• 6 I lo%nd%rbg I3 INI$I#,.

• 6 *N"I .


33/77

•

• 6 get element 7ia lead selection

• ,-%*,%'+ 9 ,-%N"%'+ 45 *$%*,*&*N$( ).

• 6 ;$-"- handle not set lead selection

• I ,-%*,%'+ I3 INI$I#,.

• *N"I .

•

• 6 get all declared attributes

• ,-%*,%'+ 45 *$%3$#$I %#$$'I+%$* $ $ * /"%$2I345*,*&*N$% -N$* $4$* $.

•


• ,-%*,% -N$* $ 9 /"% -N$* $45 *$%*,*&*N$( ).

•


• I ,-%*,% -N$* $ I3 INI$I#,.

• *N"I .

•

• 6 ;$-"- fll attribute

• 6 l7%te t 9 1.

• I ,3%'+ 4 *N"*' 9 ! !.

• ,>%$* $ 9 ! emale 3elected!.

•

• *,3*I ,3%'+ 4 *N"*' 9 !&!.

• ,>%$* $ 9 !&ale 3elected!.

•

• *,3*I ,3%'+ 4 *N"*' 9 !N!.

• ,>%$* $ 9 !Neutrel 3elected!.

• *N"I .

•

• 6 set single attribute

• ,-%*,% -N$* $453*$%#$$'I+


34/77

• >#,%$* $ ).

•

• Activate the component, create application and test.

•

• Working with radio button by index in web dynpro ABAP

• + -

• RadioButtonByIndex: It is a Ui element, which creates radio button group with dynamic number of radiobuttons.

• Step1: Go to SE80, create a w eb dynpro component ZSAPN_RBG_INDEX.

• Step2: Create context.

• Go to main view, go to context , create a node RBG_INDEX with cardinality (0 - n), create two attributesMTART ->TYPE-> MARA-MATRT, TEXT -> TYPE -> CHAR30.

• Step3:Design Layout.

• Go to layout, create RadioButtonGroupByIndex UI element, bing text property to attribute MTART ofnode RBG_INDEX, create action method for ON_SELECT .

• Create another UI element TextView, bind text property to attribute SELECTED of node RBG_INDEX.


35/77

•

• Step4: Go to action method and add below code.

• "#$# ,-%N"%'+ %IN"* $ * '* $- I %/"% -N$* $%N-"*.

•

• "#$# ,$%'+ %IN"* $ * /"%$2I345*,*&*N$3%'+ %IN"* . @internal table

• "#$# ,3%'+ %IN"* $ * wd%this45*,*&*N$%'+ %IN"* . @work area

•

• 6 na7igate rom 8conte t5 to 8rbg%inde 5 7ia lead selection

• ,-%N"%'+ %IN"* 9 /"% -N$* $45 *$% 2I,"%N-"*( N#&* 9 /"%$2I345/" $ %'+ %IN"* ).

•

• 6 ;$-"- handle non e istant child

•

6 I lo%nd%'+ %IN"* I3 INI$I#,.• 6 *N"I .

• 66add radio buttons

• ,3%'+ %IN"* 4$* $ 9 !'adio 1!.

• # *N" ,3%'+ %IN"* $- ,$%'+ %IN"* .

• ,*#' ,3%'+ %IN"* .

• ,3%'+ %IN"* 4$* $ 9 !'adio 1A!.

• # *N" ,3%'+ %IN"* $- ,$%'+ %IN"* .

• ,*#' ,3%'+ %IN"* .

•

,3%'+ %IN"* 4$* $ 9 !'adio B!.• # *N" ,3%'+ %IN"* $- ,$%'+ %IN"* .


36/77

• ,*#' ,3%'+ %IN"* .

• ,3%'+ %IN"* 4$* $ 9 !'adio C!.

• # *N" ,3%'+ %IN"* $- ,$%'+ %IN"* .

• ,*#' ,3%'+ %IN"* .

• 6 6 ;$-"- compute 7alues• 6 6 e.g. call a model unction

• 6

• ,-%N"%'+ %IN"* 45+IN"%$#+,*( N*/%I$*&3 9 ,$%'+ %IN"* 3*$%INI$I#,%*,*&*N$3 9#+# %$'


37/77

•

•

• "#$# ,-%*,% -N$* $ $ * '* $- I %/"% -N$* $%*,*&*N$.

• "#$# ,3% -N$* $ $ * /"%$2I345*,*&*N$% -N$* $.

• "#$# ,>%3*,*$* $ $ * /"%$2I345*,*&*N$% -N$* $43*,*$* $.

•


• ,-%*,% -N$* $ 9 /"% -N$* $45 *$%*,*&*N$( ).

•


• I ,-%*,% -N$* $ I3 INI$I#,.

• *N"I .

•

• 6 ;$-"- fll attribute

• 6 l7%selete t 9 1.

• I ,>%$* $ 9 !'adio 1!.

• ,>%3*,*$* $ 9 !'adio 1 selected!.

• *,3*I ,>%$* $ 9 !'adio A!.

• ,>%3*,*$* $ 9 !'adio A selected!.

• *,3*I ,>%$* $ 9 !'adio B!.

• ,>%3*,*$* $ 9 !'adio B selected!.

• *,3*I ,>%$* $ 9 !'adio C!.• ,>%3*,*$* $ 9 !'adio C selected!.

• *N"I .

• 6 set single attribute

• ,-%*,% -N$* $453*$%#$$'I+#,%3*,*$* $ ).

•

•

Step7:Activate, Create Application and test

Working with drop downs in SAP Web Dynpro for ABAP to display drop down lists

+ -

Just like Radio Button Group, drop down also have two kinds of development options.

1. Drop Down By Key.

2. Drop Down By Index.


38/77

Just like Radio Button Group, drop down also have two kinds of development options.

Drop Down By Key:

This UI element will be used, when ever we wants to display drop down based on xed values of a domain. ex:GENDERNumber of drop down options will be determined statically.

Drop Down By Index:

This is used when ever we have dynamic options in drop down.Number of drop down options will be determined dynamically.

Working with Drop Down by Key in Web Dynpro for ABAP to display drop down list usingdomain xed values.

+ -


39/77

Step1: Go to SE80, create a web dynpro component ZSAPN_DDK.

A popup will come provide some description and enter, save in a local object.


40/77

Step2: Double click on main menu, click on change, go to context tab, right click on context, create->node.

A popup will come provide name as DDK, cardinality (1 Ã¢â‚¬â€œ 1) and enter.


41/77

Step3: Right click on node DDK, create->attribute, provide name as G ENDER -> TYPE -> GENDER and enter.


42/77

Similarly create another attribute SELECTED -> TYPE -> CHAR30.

Step4: Go to layout tab, right click on R OOTUIELEMENTCONTAINER -> Insert element.


43/77

A popup will come, provide id: DDK, type: DropDownByKey and enter.

Create binding by clicking on bind icon.

A popup will come, select GENDER and enter.


44/77

Similarly right click on ROOTUIELEMENTCONTAINER, insert element id: Test, type: TextView and enter.

A popup will come select Ã¢â‚¬ËœSELECTEDÃ¢â‚¬â„¢, enter.

Select DDK UI element, create action method.

Step5: Go to actions tab, double click on Ã¢â‚¬ËœON_SELECTÃ¢â‚¬â„¢ method and add below code.


45/77

"#$# ,-%N"%""D $ * '* $- I %/"% -N$* $%N-"*.

"#$# ,-%*,%""D $ * '* $- I %/"% -N$* $%*,*&*N$.

"#$# ,3%""D $ * /"%$2I345*,*&*N$%""D.

"#$# ,>% *N"*' $ * /"%$2I345*,*&*N$%""D4 *N"*'.

6 na7igate rom 8 -N$* $5 to 8""D5 7ia lead selection

,-%N"%""D 9 /"% -N$* $45 *$% 2I,"%N-"*( N#&* 9 /"%$2I345/" $ %""D ).


6 I lo%nd%ddk I3 INI$I#,.

6 *N"I .

6 get element 7ia lead selection

,-%*,%""D 9 ,-%N"%""D45 *$%*,*&*N$( ).

6 ;$-"- handle not set lead selection

I ,-%*,%""D I3 INI$I#,.

*N"I .

6 get single attribute

,-%*,%""D45 *$%#$$'I+%$* $ 9 ! emale selected!.

*,3*I ,>% *N"*' 9 !N!.

,>%$* $ 9 !Neutral selected!.

*N"I .


46/77

6 get single attribute

,-%*,%""D453*$%#$$'I+


47/77

Similarly insert another UI element id: TEXT, type: TextView, enter, create data binding for the property Ã¢â‚¬ËœtextÃ¢â‚¬â„¢ to SELECTED of node DD_INDEX.

Step4: Go methods, double click on WDDOINIT, and add below logic.

Step5: Save and activate whole component, create application and test.

Hook Methods in webdynpro ABAP

What are hook methds in web dynpro ABAP? list of hook methods availabel in web dynproABAP

+ -

HOOK METHODS in View Controller:

Hook Methods are standard SAP methods in web dynpro programming which are automatically created by SAPto control the execution ow of a web dynpro application.

These methods are similar to events in SAP reports (classical reports).


48/77

WDDOINIT:

Method for initialization logic, this i s t he rst method displayed before view is d isplayed. This m ethod is u sed toinitialize variables, default data etc.

WDMODIFYVIEW:

This method is used to modify view dynamically based on user actions, this is used for dynamic programming.

WDDOBEFOREACTION:

This method is used to validate user input.

WDDOAFTERACTION:

Method for all common logic used in all methods or event handler methods.

WDEXIT:

This m ethod is u sed for clearing/refreshing nodes, attributes e tc.


49/77

Using WDDOINIT method in web dynpro ABAP, initialization in web dynpro for ABAP

+ -

WDDOINT is the hook method which will trigger rst and it will be triggered before displaying the view, so we canuse this method to initialize data(input elds, di splay data etc), it is like initialization event in SAP ABAP.

Previously we have used this method so many times, in different demo components. check for example: Usingtable UI element in web dynpro ABAP etc.

Uisng WDDOMODIFYVIEW in web dynpro for ABAP

Using WDDOBEFORACTION in Web Dynpro ABAP to validate user inputs

Webdynpro Programming

web dynpro programming for reading nodes, attributes without using code wizard

+ -

Most of the times we use code wizard to read a node or attribute, but is ve ry important for us to write codemanually or reading a node or attribute or table, by the end of this lesson you will be able to understand manualcode writing.

Code generated using code wizard:

The below is u sed to read static a ttributes o f a node(one record).

"#$# ,-%N"%N-"*%N#&* $ * '* $- I %/"% -N$* $%N-"*.

"#$# ,-%*,%N-"*%N#&* $ * '* $- I %/"% -N$* $%*,*&*N$.

"#$# ,3%N-"*%N#&* $ * /"%$2I345*,*&*N$%N-"*%N#&*.

6 na7igate rom 8conte t5 to 8node%name5 7ia lead selection

,-%N"%N-"*%N#&* 9 /"% -N$* $45 *$% 2I,"%N-"*( N#&* 9 /"%$2I345/" $ %N-"*%N#&* ).


6 I lo%nd%node%name I3 INI$I#,.

6 *N"I .

6 get element 7ia lead selection

,-%*,%N-"*%N#&* 9 ,-%N"%N-"*%N#&*45 *$%*,*&*N$( ).

6 ;$-"- handle not set lead selection

https://www.sapnuts.com/courses/Webdynpro-for-ABAP/working-with-ui-elements/using-table-ui.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/working-with-ui-elements/using-table-ui.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/working-with-ui-elements/using-table-ui.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/working-with-ui-elements/using-table-ui.html


50/77

I ,-%*,%N-"*%N#&* I3 INI$I#,.

*N"I .

6 get all declared attributes

,-%*,%N-"*%N#&*45 *$%3$#$I %#$$'I+


51/77

* -'$IN

N#&* 9 8#$$'I+


52/77

• *$% 2I,"%N-"* - Gets ch ild node instance.

• *$%*,*&*N$3 - Get all elements of a node.

• *$%*,*&*N$3% -#,I"#$* - Refresh node elements.

Other useful methods from IF_WD_CONTEXT_ELEMENT, using element instance.

• *$%#$$'I+


53/77

Group container is an UI element, we can insert other UI elements into it, using this we can format design of aweb dynpro screen(view).

Step1: Go to SE80, create a web dynpro component ZSAPN_GROUP_CONTAINER.

Step2: Go to Main view, go to layout, right click on roo tuielementcontainer ->insert element, provide id as G1,type as group.

Step3: Group is inserted, by default caption will be created for group, select CAPTION, provide text underproperties.

Step4: Now you can insert other UI elements into it.

Working with transparent container in web dynpro for ABAP, transparent container webdynpro ABAP

+ -

Transparent container is a n UI element, we can insert other UI elements into it, using this we can format design ofa web dynpro screen(view).

Step1: Go to SE80, create a web dynpro component ZSAPN_TRANSPARENT_CONTAINER.

Step2: Go to Main view, go to layout, right click on rootuielementcontainer ->insert element, provide id as T1, typeas 'TransparentContainer'.

Step3: Transparent container is inserted.


Working with tray container in web dynpro ABAP, tray container in web dynpro abap

+ -

TRAY container is an UI element, we can insert other UI elements into it, using this we can format design of aweb dynpro screen(view).

Step1: Go to SE80, create a web dynpro component ZSAPN_TRAY_CONTAINER.

Step2: Go to Main view, go to layout, right click on rootuielementcontainer ->insert element, provide id as TR1,type as 'Tray'.

Step3: Group is inserted, by default caption will be created for group, select CAPTION, provide text underproperties, we can set borders for this.



54/77

Layouts in webdynpro ABAPLayout is a concept of arranging UI elements in a screen as per the client requirements.

There are four types o f layouts.

Flow Layout

This l ayout arranges all the UI elements s equentially in a single line form left to right.This t s t he default layout inweb dynpro ABAP.

Row layout

This layout arranges the UI elements in a same line or sep arate line, this layout have two options.

1. Row Head Data:It arranges UI elements in a separate line.

2. Row Data: It arranges UI elements in the same line.

Row layout doesǹt follow any vertical arrangement format.

Matrix Layout

This layout is sa me as row layout, by using this we can arrange UI elements in same line or sep arate line withvertical formatting options.

Matrix layout have two options

1. Matrix head data: It arranges UI elements in a separate line.

2. Matrix data: It arranges UI elements in the same line.

Grid Layout

This layout arranges the UI elements with the help of column count, we can display UI elements as c olumns.Byusing grid layout we can specify column spacing, column count(UI elements ti display in specic columns),padding etc.

This l ayout arranges all the UI elements s equentially in a single line from left to right, this i s a default layout.

Example of using ow layout.

Go to SE80, select web dynpro component from drop down, provide name as ZSAPN_FLOW_LAYOUT and pressenter.

Provide description and enter.

Go to main view, click on change, go to context and right click on context -> Create -> node, provide name asKNA1, di ctionary st ructure as KNA1, cardinality a s 1 -1 and click on add attributes from structure.


55/77

Select some attributes as below and press e nter.

Clear dictionary structure immediately after creating node.


56/77

Go to layout, right click on ROOTUIELEMENTCONTAINER -> insert element.

Click on context.


57/77

Select KNA1 and enter.

Select follow layout from drop down and enter.


58/77

Again right click on ROOTUIELEMENTCONTAINER -> insert element.

Provide an ID, select button from drop down and press enter.

Select button, provide a button text and click on create to create an action method.


59/77

Provide action method name, descriptions and press enter.

Go to actions tab, double click on O N_GET and add below code.


60/77


61/77

Right click on component and create -> web dynpro application.

Provide name, enter, click save (Ctrl + S) and save it in a local object.

Right click on application name and click test to test the application.


62/77

A browser will open, provide a customer no(get from KNA1 table) and click on get.

Working with row layout in web dynpro ABAP, UI element allignment using row layout

+ -

Step1: Go to Se80, create a web dynpro component ZSAPN_ROW_LAYOUT.

Step2: Expand view, double click on main view, click change.

Step3: Go to context right click on context -> create -> node, provide name as KNA1, dictionary structure asKNA1, cardinality 1-1 and click on add attributes from structure. Select KUNNR, NAME1, LAND1 and ORT01,

press enter.

Step4: Select node KNA1 and remove dictionary st ructure.

Step5: Go to layout, right click on rootuielementcontainer -> create container form, click on context, select KNA1,select row layout and press e nter.


63/77

Step6: Select input eld, select layout data from drop down and try changing and observe ch anges.


64/77

Working with matrix layout in web dynpro for ABAP, align screen elements using matrixlayout

+ -

Step1: Go to Se80, create a web dynpro component ZSAPN_ROW_LAYOUT.

Step2: Expand view, double click on main view, click change.

Step3: Go to context right click on context -> create -> node, provide name as KNA1, dictionary structure asKNA1, cardinality 1-1 and click on add attributes from structure. Select KUNNR, NAME1, LAND1 and ORT01,press enter.

Step4: Select node KNA1 and remove dictionary st ructure.

Step5: Go to layout, right click on rootuielementcontainer -> create container form, click on context, select KNA1,select matrix layout and press e nter.

Step6: Select input eld, select layout data from drop down and try changing and observe ch anges.


65/77

Working with grid layout in web dynpro for ABAP, alignment of screen elements using grid

layout

+ -

Grid layout is the most commonly used layout in web dynpro ABAP, because it has very goo d options to arrangescreen elements (UI elements), by using grid layout we can specify column count, padding etc.

Step1: Go to transaction SE80, create a w eb dynpro component ZSAPN_GRID_LAYOUT and save i t in a l ocalobject.

Step2: Go to main view, go to context create a node KNA1 with four attributes.

Step3: Insert a group container, go to layout, right click on rootuielementcontainer -> insert element, provide id asG1, type as 'Group' and enter.

Step4: Right click on group G1 -> create container form, click on context, select KNA1, select 'GridLayout' andenter.


66/77

Step5: Select group, scroll down and you can specify options for column count, cell spacing and cell padding.


67/77

Concept of view plugs and exampleConcept of plugs in web dynpro ABAP, using plugs to navigate from one view to another view

+ -

By the end of this lesson, you will be able to understand navigation techniques between two different views.

Before g oing to this lesson, keep b elow thing in m ind.

1. We can cr eate multiple views in a w eb dynpro component.

2. If we need to display a vi ew, it must be embedded into a window, without a window we cannot displayview.

Web Dynpro Plugs:

As a part of real-time business applications, we need to navigate from one screen to another, for this o ne there isa concept of plugs in web dynpro ABAP.Plugs is a concept which is used to navigate from one view to anotherview. There are two types of plugs available in web dynpro ABAP.


68/77

What ate outbound and inbound plugs?

Outbound Plugs Inbound Plugs

$his plug is used to e it a 7iew. $his plug is used to enter into a 7iew.

*7ery outbound plug must linked to ainbound plug.

*7ery inbound plug must be linked toa outbound plug.

or e7ery outbound plug a method by nameI'*% will be created.

or e7ery inbound plug a e7enthandler method will be created byname 2#N",*%.

Eust fre the out bound plug method tona7igate. * : /d%this45 I'*%. 2ere wd%thisis the instance o 7iew controller.

$his plug e7ent handler method willbe automatically trigger whene7er weenter into a 7iew.

Example component of using view navigation

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUGS.

Step2: Go to main view, insert a button, provide button text as 'Next', and create action method for buttonON_NEXT.

Step3: Right click on component -> create -> view, provide name as S ECOND and enter.

Step3: Go to SECOND view, insert a button, provide button text as 'Previous', create action method for buttonON_PREVIOUS.

Step5: Go to main view, outbound plugs tab, add outbound plug as GOTO_SECOND and inbound plugs tab addinbound plug as IN_MAIN.

Step6: Go to SECOND view, outbound plugs tab, add outbound plug as G OTO_MAIN and inbound plugs tab addinbound plug as IN_SECOND.


69/77

Step7: Expand window, drag and drop MAIN, SECOND view into window.

Step8: Expand two views, right click on GOTO_SECOND -> Create Navigation Link, press F4, select destinationview as SECOND and enter.

Step9: Right click on GOTO_MAIN -> Create Navigation Link, press F4, select destination view as MAIN andenter.

Step10: Go to main view actions tab, double click on ON_NEXT method and add below code. wd_this->FIRE_GOTO_SECOND_PLG( );

Step11: Go to SECOND view actions tab, double click on ON_PREVIOUS method and add below code. wd_this->FIRE_GOTO_MAIN_PLG( );

Step12: Save and activate the component.

Step13: Test the component.

Working with view plugs in web dynpro ABAP, simple example on view plugs and viewnavigation in web dynpro ABAP

+ -

The below is the simple example of using view plugs in web dynpro for ABAP, hope you understand the conceptof plugs in web dynpro abap

Step1: Go to SE80, create a web dynpro component ZSAPN_VIEW_PLUGS.

Go to SE80, select web dynpro component from drop down, provide name as ZS APN_VIEW_PLUGS and pressenter.

Click on yes, provide description, continue(enter) an d save it in a local object.

https://www.sapnuts.com/courses/Webdynpro-for-ABAP/view-navigation/concept-of-view-plugs.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/view-navigation/concept-of-view-plugs.htmlhttps://www.sapnuts.com/courses/Webdynpro-for-ABAP/view-navigation/concept-of-view-plugs.html


70/77

Step2: Go to main view, insert a button

Go to change mode, expand views, double click on main view and right click on ROOTUIELEMENTCONTAINER-> Insert element.

A popup will come, provide id as BT1 and type as button and enter.


71/77

Select button ui element, provide text, create action method under events, a popup will code, provide action anddescription and enter.

Step3: Create another view

Right click on view -> create

A popup will come, provide name, description and enter.


72/77

Save the component immediately(then only we can see second view).

Go to second view and insert button

Go to (double click) second view and right click on ROOTUIELEMENTCONTAINER -> insert element.

A popup will come, provide id as BT2, type as button and enter.

Select button, provide text, click on create under events, provide action and description and enter.


73/77

Step4: Add inbound and outbound plugs

Go to main view, go to outbound plugs tab and add a plug as below.

Go to main view, go to inbound plugs tab and add a plug as below.


74/77

Repeat the same steps in SECOND view by adding plug names as I N_SECOND (inbound plug) andGOTO_MAIN (outbound plug).

Create navigation link

To use a view, we must embed it into a window(with out window we can not display a view), go to window(doubleclick), drag and drop SECOND view onto window.


75/77

Navigation link is a link between outbound and inbound plug, through which an outbound plug will identify thedestination(target vi ew).

Expand main view and right click on outbound plug -> create navigation link .


76/77

Press F4 , select second view and enter .

Similarly create navigation link for outbound plug of second view right click on GOTO_MAIN -> create navigationlink, popup opens press F4, select MAIN and enter.

Step5: Fire outbound plg

When we ca ll an outbound plug, we ca ll that process as ring of outbound plug.

Go to main view, go to actions tab, double click on ON_BT1 method, click on code wizard, re outbound plg.

The below code will be generated.


77/77

/"%$2I345 I'*% -$-%3* -N"% , (

).

Similarly go to SECOND view, actions, double click on ON_BT2 method and re outbound plug (GOTO_MAIN).

below code will be generated.

/"%$2I345 I'*% -$-%IN% , (

).

Step6: Create application and test

Save and activate the web dynpro component, right click on component name create -> web dynpro application,provide a name, enter save it in a local object.

Right click on application -> test.

Browser will open, click on go to second view, it will go to second view and click on go to previous view, it will goto main view.

introduction to web dynpro for abap

Documents