SAP Webdynpro ABAP Guide

Introduction to webdynpro ABAP
Webdynpro:
SAP Standard UI technology for developing web applications in ABAP Environment.
Advantages:
1. Reduces implementation effort.
2. Separation of layout and business data.
3. Reusability of components.
4. Automatic data transfer using context binding.
5. Support stateful applications. i.e. Even when the pages change the data in the previous page
still remains.
Webdynpro Architecture:
It is based on MVC Architecture and supports:
1. Clear separation of business and display logic.
2. Metamodel Concept.
3. Execution on number of client platforms.
4. Extensive Platform Independence of interfaces.
MVC Architecture:
The Model View Controller (MVC) design pattern contains a clear distinction between
processing control, data model and displaying the data in the interface.
Model
The model is used as an application object of the application data administration. It responds to
information requests about its status, which usually come from the view, as well as to statements
for status changes, which are usually sent by the controller. In this way, only the model is used to
process data internally, without making reference to the application and its user interface.
There can be different views for a model, which can be implemented using different view pages.
View
The view handles the graphical and textual output at the interface and therefore represents the
input and output data in each interface element, such as pushbuttons, menus, dialog boxes and so
on. The view takes of visualization. To visualize the status, the view queries the model, or the
model informs the view about possible status changes.
www.onlinewebdynprotraining.com
One stop shop for all your training needs.
Page
Controller
The controller interprets and monitors the data that is input by the user using the mouse and the
keyboard, causing the model or the view later to change if necessary. Input data is forwarded and
changes to the model data are initiated. The controller uses the model methods to change the
internal status and then informs the view about this. This is how the controller determines
reactions to the user input and controls processing.
Page
Different controllers of Webdynpro

The different types of controllers in webdynpro abap are:
1.
2.
3.
4.
5.
Component controller
Custom controller
Interface controller
View Controller
Window Controller
Before learning about the Controllers let us know something about different types of interfaces
that are created at the time of creation of the component. These interfaces are as below.
1. IF_<ControllerName>
2. IG_<ControllerName>
3. IWCI_<ComponentName>
The interface begin with the prefix IF is local and can be used for coding only within that
controller.
The interface begin with the prefix IG is used for cross controller communication.(E.g View
controller to component controller)
The interface begin with the prefix IWCI is used for cross component communication. (E.g.
ComponentA to ComponentB)
Component Controller:
There is only one component controller exists per webdynpro component and it is global. i.e
Component controller consist of data and processing logic that is available to all the views in the
component. This controller does not have any visual interface. The life time of the component
controller is the life time of the component.
Components of Component controller:
Properties:
In the properties tab of the component controller we can declare the component usage of the
other component so that the interface methods of that component can be accessed by the methods
of the component controller.
Page
Context:
Context is a hierarchical form of storage of data which we will briefly study about it in the
upcoming sections. And for now context is a place where you declare the data. The Nodes
declared here can be mapped to any no of view and can be accessed from there hence making the
data of the component controller global.
Attributes:
The attributes required by the Component controller are declared in the attributes and are
accessible to the methods of the component controller using the handle provided for the
component controller(WD_THIS). These attributes can also be accessed from different
controllers using the handle provided for the component
controller(WD_COMP_CONTROLLER) in the respective controller. The attribute WD_THIS
declared in any controller refers to the interface of the current controller and the attribute
WD_CONTEXT declared refers to the corresponding context of the controller.
Page
Events:
Events can be created in component and custom controller.Events created in the component
controller are visible only within the component which means it can only be triggered by the
methods of the component controller. But it can be handled in different controllers. Thus Events
are used to communicate between the controllers and enable one controller to trigger the event
and handler the event in different controller. Events can also implement cross component
communication provided that the interface check box is checked.
Methods:
Components controller consist of number of predefined methods called hook up methods which
are executed in a pre-defined manner. We will study about these hook up methods in the later
sections. We can also created the methods on our own and the methods which we created can be
called from any controller using the handle for the component
controller(WD_COMP_CONTROLLER).
Page
Custom Controller:
Custom controllers can be additionally created in the component and there are exactly similar to
the component controller in terms of functionality. This means it is visible to all the elements in
the component and life time of the controller is the lifetime of the component. Any number of
custom controller can be created in the component and it provides the option of structuring the
datas and functions. It only make sense to create a custom controller if certain function and
datas are to be associated with the specific set of views.
The first three components Properties, Context and Attributes are similarly to that of
component controller and the only differ in the events and method properties.
Events:
Events are created and implement in a similar way to the component controller except that they
cannot implement cross component communication. It can be handled only within the
component.
Page
Methods:
Unlike component controller the custom controller does not contain a no of hook up methods.
We can create own methods in the custom controller and these methods can be used by any
views provided that the custom controller is added to the used controller in the properties tab of
the view.
Thus these two options resitrict the visibility of the custom controller to protected.
Interface Controller:
Interface controller is used for cross component communication. Interface controller does not
contain any implementation. It it the point of contact of communication for other component to
use this component. Only nodes, methods and events marked as interfaces can be used by other
components.
Components of interface Controller:
Properties:
Page
In the Properties tab you will be able to see the administration data and Interface that was created
for the external communication(IWCI).
Context:
In the context tab you will be able to see the context nodes of the component controller which is
marked as interface node in the node properties of the component controller.
Events:
In the events tab you will be able to see the events which are marked as interface events for cross
component implementation.
Methods:
Page
In the methods tab, you will be able to see the interface methods that can be accessed by the
other components.
View Controller:
Each view exactly consist of one view controller. No of view controllers in a component depends
upon the no of views. The view controller cares about the view specific flow logic like checking
user input, handling user actions etc. The lifetime of the view controller is restricted to the life
time of the view.
Components of view Controller:
Properties:
The properties tab of the view controller consist of the admin data as well as the option to add
the used controllers for the view.
Page
In this example I have added the custom controller of the same component as the used
component so that the methods of the custom controllers can be accessed in this view.
Layout:
Layout tab of the view controller provides the option for placing the UI element. It is
WYSIWYG type of editor. (What You See Is What You Get).
Inbound Plugs:
Plugs are required for the navigation between the views. Inbound plugs consist plugs which is
pointing into the view. Unlike outbound plug the inbound plug consist of event handler method
which will be executed before displaying the view.
Outbound Plug:
Inbound plugs consist plugs which is pointing away from the view. This does not contain any
event handler method and the outbound plug can be fired using following syntax.
WD_THIS->FIRE_<Plugname>_PLG.
Page 10
Context:
Context as mention earlier is a hierarchical form of data storage and the context node declared in
the view can be used only in that corresponding view and it cannot be accessed in any other
views. The node created in the view context does not provide the option for interface node.
Attributes:
Attributes is similar to that of the attribute tab discussed in the component controller. Here in the
view controller you will be able to see the handler to the component controller with reference to
the interface of the type IG_(Cross controller). Using this handler the attributes and methods of
the component controller can be accessed.
Actions:
Actions tab consist of the on action events created for the UI elements.
Page 11
Methods:
In the methods tab you will be able to see the set of hook methods specific to the view controller
and event handler methods created for the UI element actions and own defined methods.
Window Controller:
Each window in a webdynpro component consist of a window controller. It is visible throughout
the component and behaves like component or custom controller.
Components of window controller:
Properties:
Properties tab of the window controller is similar to that of the view controller.
Page 12
Window:
In the window tab we will be able to see the views that are embedded in the window, inbound
and outbound plug of each view and the view that is marked as default. Here we can also specify
the navigation link between the views using the view plugs.
Inbound Plug:
The properties of a windows inbound plug differ from a views inbound plugs by the
characteristics Interface and Start up or Resume that can be maintained:
Interface:
The interface check box determines whether the inbound plug is used only for navigation within
the component or cross component navigation.
Startup:
If the plug type is selected as start up then webdynpro application can be started using this plug.
When creating an webdynpro application only the interface view inbound plug can be used. All
Page 13
other type of plugs can only be used for navigation in an already running application. Window
inbound plug also has the event handler method. The Plug type suspend and resume are used for
portal navigation and will be discussed in later sections.
Outbound plug:
Outbound plugs consist of interfaces, Exit and Suspend characteristics.
Context attributes and methods tab are similar to that of the view controller except that the
method of the window controller has different set of Hook methods.
Note : At run time all the controller instances are singleton.
Page 14
Context in Webdynpro ABAP

Context is a method of storing a data in a hierarchical manner. The data used by the component
or a view are stored in the form of context. We can read or write data in the context using the
controller as a starting point.
Structure of a Context node:

If you look
at the context tab of any controller you will be able to see a thing called context. It is actually a
singleton root node under which we will be declaring our nodes and attributes.
Page 15
Each context has a node and a number of attributes underneath a node. The attribute declared
directly will be coming under the root context node CONTEXT.
Each node consists of data can be one of the two ways:

1. A individual instance
2. Table of Instance
We will discuss it when we come to the topic properties of the context node.
Recursion Node:
Dynamic nesting of node is also possible within the context called recursion node.
Page 16
1. The node which is used for recursion should always be a predecessor of new node. Here
in the above given example the node2 is the recursion node and the node1 is the
predecessor node.
2. The recursion node cannot be processed separately.
3. You cannot use the root node CONTEXT as a predecessor node.
How to access the data in the context?
By default all the nodes which we are declaring will be the child node of the root node
CONTEXT. The reference to this root context is available in the Attributes tab of the
Controller.
The interface consist of number of methods that will help us play with the context. All the
context node we declare will become a child node of the root node CONTEXT. Using the
object reference of the root context node calling the get_child_node method of the interface will
give the object reference of the context node specified. Once we got the control of the context
using its object reference we can push or pull the data from that context.
Page 17
A Simple webdynpro Application

Part 1: Creating a component.
Step 1: Go to tcode SE80. In the repository browser choose the Webdynpro comp/intf and
provide the component name and press enter.
Save it in a package or assign the component to the local object.

Step 2: Go to the component controller and create a context node and a context attributes.
Right click on the root context node and choose create->node as shown below.
Page 18
Enter the node name and press enter.
Create an attribute for the node as shown below.

Page 19
Provide the attribute name and data type and then press enter.
Page 20
After creating your screen will appear like below.
Step 3: Go to the view controller and map the context node of the component controller to the
context of view controller so that the node in component controller can be accessed in the view
controller.
Double click on the view and click on the context tab.
You will see the nodes of the component controller in the right hand side. Select the context node
and drag and drop it in the context of the view controller.
Page 21
Drag and drop the context node NODE to the context of the view controller.
Step 4: Go to the layout tab of the view controller to place the UI elements.
Page 22
Right click on the root UI container and select insert element to insert a UI element.
Insert a label UI element.
Page 23
The properties with red shadow are the mandatory properties to be filled.
Page 24
Provide a text for the label and you can see it on the layout.
Page 25
Label for property refers to which UI element we have created this label. As of now we dont
have any other UI elements created. Now let us create a UI element Input field and assign this
label to the input field.
In a similar way create an input UI element.
Page 26
While the obligatory bindings for the UI elements are missing you can see them grayed out.
Page 27
Property value is an obligatory binding for the input UI element and it has to be binded to the
context attribute. So that what ever the value entered in the Input field will get binded to that
particular context attribute.
To bind it to the context attribute click on the binding button.
Page 28
Select the attribute which you want to bind and double click on it. And now you can see the input
field highlighted.
Page 29
Double click on the lable UI element and in the property Label for assign this input field to the
lable property.
Page 30
From the drop down select the input field. Now you can see the label UI element also gets
highlighted.
Page 31
Now save and activate the whole application.
Page 32
Part 2: Creating a webdynpro Application.

Page 33
To create a webdynpro application, Right click on the component -> create-> webdynpro
application.
Enter the description for the webdynpro application. It will appear on the browser tab.
Page 34
Save the application.
Test the application.
Page 35
OUTPUT
Page 36
Reading the user input and setting

the output
In the previous section we have seen how to create a simple webdynpro component. We have
created a webdynpro component with a label and input field and we displayed it in the browser.
In this section we will see how to read the input entered in the browser and display the same in
the output.
Scenario: we will create a button and on the click of that button we will read the values entered
and display the output in a text view.
Step 1: In the view controller v_main of the component zcsk_simple which we created earlier,
create a UI element Button.
Right click on the ROOTUIELEMENT Container and select insert element. Enter the ID and
choose the Button UI element.
This tutorial is brought to you by www.onlinewebdynprotraining.com
You can see the button UI element in the Layout with no description.
Page 37
Enter the description in the text property of the Button UI element.
Once you have entered the properties, it will reflect in the UI element.
Page 38
Still the UI element looks disabled. The button UI element requires an event handler method to
perform an action on click of the button. To create an event to the Button do the following.
Click on create action button. Enter a name for the action and press enter.
In the properties you will be able to see the method.
Page 39
We now require an attribute to be binded to the textview. Create an attribute output of type string
as shown below.
Go to the context tab of the component controller and create an attribute in the node which we
created in the previous application.
Page 40
Page 41
Go to the context of the view controller and Update the mapping so that the attribute which we
added newly in the component controller will be reflected here in the view controller and
accessible here.
Right click on the context node and update the mapping.
Page 42
System will prompt you to match the node. Select Yes.
Page 43
System will again prompt you to copy the attributes. Press yes.
Now we can see the attributes reflected in the view controller.

Page 44
In the layout of the view controller insert a textview UI element.
Bind the text property of the text view UI element to the attribute output.
Page 45
To arrange the layout double click on the rootuielementcontainer and change the property of
layout to matrix layout.
Page 46
Choose the text view UI element and change its layout property to Matrixheaddata so that the UI
element will be displayed in the next row.
Page 47
Now write the logic which is to be done on the click of submit button. Write the following code
in the event we declared for the submit button.
Page 48
Use the code wizard icon to generate the code. First read the input entered in the screen using the
code wizard. The Input field has been binded to the attribute ATTRIBUTE and whatever the
input has been entered by the user will be in that attribute. To know what user has entered we
need to read that attribute.
Click on the code wizard icon, choose the context operation as read and select the context
attribute using the F4 help.
Page 49
Code will be generated as below.
Page 50
Whatever the values entered by the user will now be in the attribute LV_ATTRIBUTE. Now let
us set this value to the text view to be displayed in the output.
Using the code wizard, choose the context operation as set and set the attribute OUTPUT.
Page 51
Codes will be generated as below.
Page 52
Remove the unwanted codes, Since we are performing action on the attributes belonging to the
same context node few object will be declared again remove those attributes.
Before the set attribute method pass the input values read in the variable lv_attribute to the
variable lv_output which is going to be set.
Final coding to be in the method submit.

method ONACTIONONSUBMIT .
* Read the context attribute
DATA LO_ND_NODE TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_NODE TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_NODE TYPE WD_THIS->ELEMENT_NODE.
DATA LV_ATTRIBUTE TYPE WD_THIS->ELEMENT_NODE-ATTRIBUTE.
Page 53
LO_ND_NODE = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_NODE ).

LO_EL_NODE = LO_ND_NODE->GET_ELEMENT( ).
LO_EL_NODE->GET_ATTRIBUTE(
EXPORTING
NAME = ÀTTRIBUTE`
IMPORTING
VALUE = LV_ATTRIBUTE ).
* Set the attribute
DATA LV_OUTPUT TYPE WD_THIS->ELEMENT_NODE-OUTPUT.
lv_output = lv_Attribute.
LO_EL_NODE->SET_ATTRIBUTE(
NAME = ÒUTPUT`
VALUE = LV_OUTPUT ).
endmethod.
Save and activate the component. Test the application.
Enter the name and click on submit.
Page 54
You can see the entered name in the text view, we placed.
Page 55
Navigation between views.

Navigation between different views is enabled by plugs. These can be divided into inbound and
outbound plugs. Several views can be embedded to an window but is necessary that we should
only display one view in a window at a time. The view which is assigned as a default view will
be displayed every time when the window is initialized. To move between the views embedded
to the window we need to create a navigation link for which the inbound and outbound plugs are
necessary.
To navigate from one view to another, each outbound plug from the first view must be linked
with an inbound plug of the second view with the help of a navigation link.
Inbound Plug:
The inbound plug defines the start point of the view. It handles the incoming from the other view
into its view. An event handler method will be created at the time of creation of inbound plug in
which we can handle the incoming to the view. When the inbound plug of this view is called by
the outbound plug of the another view this event handler method gets triggerd first.
Outbound Plug:
Outbound plug is used to call its subsequent views. Whenever a outbound plug is triggered it call
the inbound plug of the other view to which the navigation link is created for.
In the previous example Read the input and setting the output we have see how to read the data
enter by the user and set it in the output. There we have read the input and set the output in the
same view. Here in this scenario we will read the input entered by the user in the first screen and
set the output in the second screen so that we will learn how to navigate between views.
Step 1 : Go to the tcode SE80 and create a webdynpro component as shown below.
Page 56
Assign the component to the package or save it in the local object.

Step 2 : In the context tab of the component controller, create a node with an attribtue in it.
Note : The nodes created in the component controller is public and is accessible throughout all
the view.
Enter the name for the node and choose the cardinality as 1..1 and press enter.
Page 57
Create an attribute for the node as shown below.
Page 58
Enter the attribute name, choose a type and press enter.
Page 59
Step 3 : Go to the Context tab of the view controller and drag and drop the node created in the
component controller into context of the view controller so that the node can be accesible in our
view.
After drag and dropping the context node the view context will look like.
Step 4 : Go to the layout of the view controller and insert a lable UI element as shown below.
Page 60
Provide the ID and type of UI element.
In the property of the lable UI element Provide the text for the label and leave the label for
property as it is. We will fill it after creating a corresponing input UI element for it.
Page 61
Step 5 : In a similar way insert a input field UI element.
Bind the obligatory property of the UI element value to the context attribute name.
Page 62
Set the label for property of the lable UI element to our Input field.
Page 63
Step 6 : Insert a button UI element and create an event handler method for it.
Create an event handler for the UI element.
Page 64
In the outbound plug box if we provide the outbound plug the codings to navigate to the view
that the outbound plug points will be generated inside our event handler method. As of now we
havent created any outbound plug. We will call it later in the program using code wizard.
Step 7 :
Create a another view in the component as shown below.
Enter the name for the view and press enter.
Page 65
Step 8: In the context tab of the second view drag and drop the node of the component controller
to the context of our view.
In the layout tab of the second view, insert a lable and a text view UI element and bind it to the
attribute name.
Properties of the lable.
Page 66
Lets assign the lable for property to the text view after creating the text view.
Insert the text view UI element.
Bind the text property of the text view to the attribute name.
Page 67
Assign the label for property to the text view.
Page 68
So far we have created two views with an option to enter a name in the first view and display it
in the second view. The data will be transferred from one view to another using the node of the
component controller. Once we read the input entered by the user and set it in the node, the result
will be displayed where ever it is binded. So when we read the name and set it in the attribute
name it will be displayed wherever our attribute name is binded.
Note : Read Binding concept for more clarity on this.
Now the point is we have to navigate from one screen to another. By default the view which we
created at the timeof creation of the component will be the default view in the window and it will
be displayed now all we have to do is to shift the view within the windows.
Step 9:
Create the inbound plugs an outbound plug for the views.
Go to the inbound plug tab of the view v_main and create an inbound plug. By the time of
creation of inbound plug, an associated event handler method will be created.
Similarly create an outbound plug to navigate from the first view to the second view.
Similarly create an inbound plug and outbound plug for the second view.
Page 69
In outbound plug tab of the second view create an outbound plug.
Step 10:
Go to the Window controller and you will be able to see only the view v_main which was create
at the time of creation of component will be there.
Page 70
Now embed the second view which we created in our window and create a navigation link
between views.
Choose the view to be embedded as our second view from the popup.
Page 71
You will now be able to see both the views under our window.
Page 72
Right click on the outbound plug to create the navigation link.
Select create navigation link and choose the destination view using F4 help an press enter.
Page 73
Now you will see the navigation link is formed between the views indicated by a chain symbol.
Now when ever the outbound plug out_main is triggered the system will navigate from the first
view to the second view. Similarly create the path from second view to the first view.
Create a navigation link from second view to the first view.
Page 74
Choose the first view as destination.
Now navigation link from the second view to the first view is created.
Page 75
Step 11:
Now let us write the logic to read the input entered by the user and set it in the context node.
In the event handler method of the button UI element in the first view write the logic to read the
input and set the context node.
The Input field is binded to the context attribute name so Reading the context node attribute will
give the value entered by the user.
Using the code wizard read the context node attribute name.
Page 76
Note : I have removed the unwanted and dead codes.

Now set the value to the same attribute name.
Code will be generated by the code wizard. after deleting already declared attributes and
removing unwanted I have kept the remaining.
When click on the submit button we have to navigate from the first we to second view. So let us
trigger the outbound plug of the first view to navigate to the second view.
Page 77
In the code wizard general tab, choose the radio button start navigation and select the outbound
plug using f4 help.

Page 78
Now the code in the event handler for the button will be.
Step 12: In order to navigate back from the second view to the first view create a button back in
the second view.
Page 79
Create an event handler method for the button UI element.
If you provide the outbound plug at the time of creation of event then the coding for the
navigation will also be created inside that event handler method.
Step 13: Save and activate the whole component.
Page 80
Step 14 : Create an application and test the component.
Page 81
Output:
Enter the name and press submit.
Page 82
Passing data between the views using plugs

To navigate from one view to another view we use plugs. The datas available in the view are
local to the controller and there may be a scenario where you want data from one view to another
to be processed. One way of doing this is to bind the data in the context node of component
controller before you leave the view and read the data from the another view in the event handler
method for the inbound plug or where ever necessary. Instead we can also pass the data using the
parameters of the plug.
Scenario: In this scenario we will discuss how to pass the values between the views using plugs.
Let us create an input field in the first view and whatever the value is entered in the first view
will be transported using plugs and displayed in the second view in the form of text view.
Step 1: Go to the Tcode SE80 and create a webdynpro component.

Step 2: Go to the context tab of the view controller and create a context attribute as shown
below.
Page 83
Enter the name and type for the attribute and press enter.
Step 3: Go to the layout tab of the view controller and create a label and input field as shown
below.
Right click on the root container UI element and select insert UI element.
Page 84
Provide the ID and type for the UI element and press enter.
In a similar way insert a input field UI element.
Bind the obligatory binding property value of the input field to the context attribute created.
Page 85
Create an action on enter for the input field UI element.
Page 86
Now go back to the label UI element and change the property of the label UI element as shown
below.
Step 4: Right click on the view controller and create a view.
Enter the name and description for the view and press enter.
Page 87
Go to the context tab of the view created and create a context attribute as shown below.
Go to the layout tab of the view controller and create a text view UI element and bind the
attribute to it.
Page 88
Bind the property of text view to the attribute created.
Insert a button UI element and create an action for the button UI element.
Page 89
Create an action for the button UI element.
Step 5: Go to the first view and create the inbound plug and outbound plugs as shown below.
Create an outbound plug with an parameter for passing the data from this view.
Page 90
Similarly go to the second view and create the inbound and outbound plugs.
Page 91
Step 6: Go to the window controller and embed the second view in the window and create a
navigation links between the views.
Choose the view to be embedded as second view and press enter.
Create a navigation link between the first view and second view.
Page 92
Create a navigation link between the second view and first view.
Page 93
Step 7: Go to the First view and in the action created for the input field UI element do the
following.
Read the value entered in the input field using the context attribute.
Coding will be generated as below.
Page 94
Generate the coding for navigation from the first view to second view using the outbound plug of
the first view as shown below.
Pass the value to the parameter of the outbound plug.
Code:
DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->Element_context.
DATA lv_name TYPE wd_this->Element_context-name.
lo_el_context = wd_context->get_element( ).
lo_el_context->get_attribute(
EXPORTING
Page 95
name = `NAME`
IMPORTING
value = lv_name ).
wd_this->fire_to_second_plg(
name = lv_name
).
string
Step 8: Go to the second view and in the event handler method created for the inbound plug do
the following.
Create an importing parameter with the name passed in the outbound plug of first view.
Now the importing parameter will hold the value passed from the view one and set it in the
attribute created in the second view to be displayed in the text view UI element.
Page 96
Note: I have removed the unwanted codes.

Change the coding as below:
Code in this method:

DATA lo_el_context TYPE REF TO if_wd_context_element.
DATA ls_context TYPE wd_this->Element_context.
DATA lv_disp_name TYPE wd_this->Element_context-disp_name.
lo_el_context = wd_context->get_element( ).
CONCATENATE The name entered is: name into lv_disp_name SEPARATED BY
space.
lo_el_context->set_attribute(
name = `DISP_NAME`
value = lv_disp_name ).
In the event handler method created for the back button do the following to generate a code for
navigation from second view to first view.
Page 97
Save and activate the whole component.

Step 9: Create the application for the component and press enter.
Page 98
Output:
Enter the name and press enter.
Page 99
Press back button to navigate back to the first view.
Page 100
Message Handling
In the previous application we saw how to navigate from one view to the another.
In this blog we will see how to handle the message. In the previous application user enters the
name in the first screen and submit the name will be displayed in the second screen. Now let us
make the name input as mandatory and if name is not enter we will block the navigation to the
second view and throw an error message.
In order to display the error message in our required space we need to insert the messagearea ui
element. In case if this UI element is not place message will be displayed by default on the top of
the page.
Now lets move to the application.
In order to make the input field as mandatory, change the state of the Input field UI element as
required from normal. You will be able to see a red star indicating the field as mandatory in its
associated label. However the mandatory fields are not checked for emptiness by default in SAP
webdynpro like in normal abap. We have to incorporate the logic in our method to check for the
emptiness of the fields. There are also some standard class which is used to check the mandatory
fields in the screen which you will see in the later blogs.
Step1 : Go to the view and change the property of the input field.
Page 101
Step 2: Insert a message area UI element.
Step 3 : In the event handler method for the submit button check for the emptiness of the input
field and throw an error message.
Page 102
Modify the code as below.
In the else part generate the error message using the message manager in the code wizard.
Select the radio button generate message and choose a method report_error_message from the
F4.
Page 103
Page 104
Note: I have removed the dead codes and comments,

Pass the error message you want to display using the parameter message_text.
Save and activate the application. Test the component.
Page 105
Output :
Enter Submit without entering name.
You can see the error messge generated where we have placed the message area.
Remove the message area UI element and test the application the error message by default will
be displayed on the top.
Page 106
Generating a Pop-up
In this section we will study how to generated a pop-up in the screen.
Scenario : We will place a button on the screen and on clicking we will display the pop-up.
Step 1: Go to the object navigator (SE80) and create a webdynpro component.

Step 2: In the layout of the view controller, create a UI element for button as shown below.
Right click on the Root UI element container and click on insert element to insert the UI element.
Page 107
Enter the ID and Type for the UI element as shown below.
Set the text property of the Button UI element as shown below.
Page 108
Create an event handler method for the button UI element which is to be triggered when clicking
on the button.
Step 3: Right click on the view and click on create view to create a view for the popup.
Page 109
In the layout of the view created place a text view ui element and provide the text for it so that it
can be viewed in the pop up.
Page 110
Step 4: In the window controller, Create a window and embed the view for the Pop Up in it.
Page 111
Embed the pop up view to the pop up window as shown below.
Page 112
Choose the view to be embedded and press enter.
Activate the whole webdynpro component.
Page 113
Step 5: In the event handler method created for the button do the following to call the pop up
window.
Using code wizard declare the code for the Pop up window.
Page 114

data lo_window_manager type ref to if_wd_window_manager.
data lo_api_component type ref to if_wd_component.
data lo_window
type ref to if_wd_window.
lo_api_component = wd_comp_controller->wd_get_api( ).
lo_window_manager = lo_api_component->get_window_manager( ).
lo_window
= lo_window_manager->create_window(
window_name
= W_POP
*
title
=
*
close_in_any_case
= abap_true
message_display_mode = if_wd_window=>co_msg_display_mode_selected
*
close_button
= abap_true
button_kind
= if_wd_window=>co_buttons_ok
message_type
= if_wd_window=>co_msg_type_none
default_button
= if_wd_window=>co_button_ok
).
lo_window->open( ).
Save and activate the whole application.

Step 6: Right click on the component and create a webdynpro application.
Page 115

Output:
Page 116
Thus we have now generated and displayed a pop up.
Page 117
Calling an Web URL

In this section we will study how to call an web URL from an webdynpro component. In this
scenario we will place the button UI element
And on the click of the button UI element we will call the google home page.
Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to a package or save it in the local object.

Step 2: In the layout tab of the view controller, create a button UI element as shown below.
Right click on the Root container UI element and select insert UI element.
Page 118
Provide the ID and Type for the UI element and press enter.
Enter the text property of the Button UI element as Google and create the action for the button
UI element.
Step 3: In the event handler method for the Button UI element do the following to call the URL.
Generate the code using the code wizard.
Page 119
Instead of calling the method create_window call the method create_external_window to call the
external URL.
Step 4: Using pattern call the create external window of the interface if_wd_window_manager.
Page 120
Codings will be generated as below.
Replace the object reference me with the object reference for the window
manager(lo_window_manager) and provide the URL exporting parameter.
Page 121
Save and activate the whole component and create the application to test the component.
Step 5: Create the application as shown below.

Codings in the method for Button UI element.
Page 122
DATA lo_window_manager TYPE REF TO if_wd_window_manager.

DATA lo_api_component TYPE REF TO if_wd_component.
DATA lo_window TYPE REF TO if_wd_window.
CALL METHOD lo_window_manager->create_external_window
EXPORTING
url = http://www.google.com’
modal = ABAP_FALSE
has_menubar = ABAP_TRUE
is_resizable = ABAP_TRUE
has_scrollbars = ABAP_TRUE
has_statusbar = ABAP_TRUE
has_toolbar = ABAP_TRUE
has_location = ABAP_TRUE
receiving
window = lo_window
.
lo_window->open( ).
Output:
Click on the URL button. Enusre that the pop up is not blocked in the browser. Google page will
be opened in new tab.
Page 123
Page 124
Calling one webdynpro application

from another
In the previous section we have seen how to call an Web URL. In this section we will study how
to call an one webdynpro
application from another.
The procedure is same as the before, by providing the link of the webdynpro component to the
create external window method
The webdynpro application will be called. There is a method in a class cl_wd_utilities which will
generated the url of the webdynpro
Component. We will proceed with the same application.
In the event handler method for the button ui element call the method construct_wd_url of the
class cl_wd_utilities to get the URL of the
Webdynpro component.
Using pattern call the method of the class Cl_wd_utitlites as shown below.
Page 125
Pass the webdynpro application name and receive the url using the importing parameter
out_absolute_url.
Codings in the method:

Page 126
DATA lo_window_manager TYPE REF TO if_wd_window_manager.

DATA lo_api_component TYPE REF TO if_wd_component.
DATA lo_window TYPE REF TO if_wd_window.
data : lv_str type string.
CALL METHOD cl_wd_utilities=>construct_wd_url
EXPORTING
application_name = ZCSK_POP
IMPORTING
out_absolute_url = lv_str
.
CALL METHOD lo_window_manager->create_external_window
EXPORTING
url = lv_str
modal = ABAP_FALSE
has_menubar = ABAP_TRUE
is_resizable = ABAP_TRUE
has_scrollbars = ABAP_TRUE
has_statusbar = ABAP_TRUE
has_toolbar = ABAP_TRUE
has_location = ABAP_TRUE
receiving
window = lo_window
.
lo_window->open( ).
Now test the application.
Output:
Page 127
Page 128
Dynamically hiding the UI element

In this section we will see how to hide or display the UI element dynamically. Let us consider a
scenario where we have an check box.
On selection of the Check box an UI element text view has to be displayed and when deselecting
the check box the text view has to be hidden.

Step 2: In the context tab of the view controller create the one context attribute of type
wdy_boolean as shown below to be binded to the check box ui element to determine the checked
property of the check box.
Page 129
Provide the name and type for the attribute.
Step 3: Go the layout tab of the view controller and insert a check box UI element.
Page 130
Provide the ID and type for the UI element.
Bind the Checked attribute to the checked property of the checkbox UI element.
Page 131
Insert the text view UI element.
Enter the text property of the text view UI element.
Page 132
Save and activate the whole component and test the application.
Step 4: Create a application for the component.
Page 133

Output:
Now let us see how to dynamically hide the text view UI element and display it.
Step 5: Go the context tab of the view controller and create a context attribute to set the visibility
of UI element.
Choose the attribute type as WDUI_VISIBILITY
If value = 01 UI element not visible
If value = 02 UI element is visible
Bind the visibility attribute to the visible property of the text view UI element.
Page 134
Step 6: Go to the layout tab of the view controller and create an action for the check box UI
element.
Page 135
In the event handler method for the check box do the following.
Read the checked property of the check box.
Using code wizard read the attribute checked to know the checked property of the check box.
Page 136
Note : I have removed the unwanted codings.

Now the variable lv_checked will contain the checked property of the check box. If the variable
values is X then the check box is selected if it is space
Then the check box is not selected based on it set the visibility property as shown below.
Output:
Page 137
Since we havent provided the default value, the visibility attribute values is taken as 01
(Invisible).
Now select the check box and see for the changes in the output.
Page 138
Adding an Image UI element


Step 2: Import the image into the component as shown below.
Page 139
Choose the image to be uploaded from the pop up.
Provide the name and description for the image.
Page 140
Step 3: Go to the layout of the view controller and insert an image UI element.
Provide the id and type for the UI element.
Page 141
Add the component image to the source property of the image UI element.Choose the image
using the F4 help and component images tab.
Image UI element will be added as shown below. You will also be able to see a mime folder
added to the component which contains the image.
Page 142

Step 4: Create an application to test the component.
Page 143
Output:
Page 144
Radio Button
Radio Button UI element is a Button that has two states on and off which enable the users to
select option. This type of radio button UI element places the individual radio buttons on the
screen like
We can also place n no of radio buttons and toggle between them if all the radio buttons are
binded to the same context attributes.
How radio Button works?

The radio button UI element has two key properties.
1. Key to select
2. Selected Key
The radio button gets selected when the value in the key to select is same as the value in the
selected key.
Both property Selected key and Key to select is bindable to the attribute of type string.
Whenever we are placing the individual radio button UI element on the screen we need to handle
the toggle using a single method for each radio button.
The key to select attribute is fixed and Whenever the radio button is selected the system will
return the value to the selected key property whatever is there in the key to select.
Say if the key to select value is X and when I select the radio button1 the attribute binded to the
selected key property also will hold X.
Now let us see a simple example on how to use the radio button UI element.
In this scenario I am going to place the two individual radio buttons and create an individual
method for each radio button to toggle it. To know which radio button is selected I am going to
read the context and display which radio button is selected in a text view.
Step 1 : Go to the Tcode SE11 and create a webdynpro component.
Page 145
Enter the description and press enter.
Assign the component to a package or save it in a local object.

Step 2 : In the context tab of the view controller, create a context node with the three attributes.
Since I am going to created two radio button , I ll be needing an two attribute to bind the selected
key property one for each and a common key to select attribute.
Create a context node RADIO with three attribute key to select, radio1 and radio2 of type
string.
Right click on the context node and choose create -> node.
Page 146
Provide the node name the pop up and press enter.
Node will be created as below.
Page 147
Right click on the node Radio and select create ->attribute to add the attributes.
Enter the name and type of the attributes and press enter.
Page 148
Attribute for the node will be created as below.
In a similar way create two more attributes radio1 and radio2 of type string.
Step 3 : Go the layout tab of the view controller.

Page 149
Right click on the rootcontainerui element and select insert element to insert the ui element of
your choice.
Provide the id for the UI element and choose a type and press enter.
Bind the obligatory binding of the radio button ui element to the radio1 attribute.
Page 150
In a similar way bind the key to select property to the key to select attribute.
Page 151
Provide text for the radio button.
Page 152
Create an event handler method for this radio button as shown below.
Page 153
In a similar way create an another radio button and bind the radio2 attribute to the selected key
property and key_to_select to the key to select property and create an event handler method to it.
Step 4 : Initialization of the radio button.
Page 154
Rememeber the radio button gets selected when the selected key and key to select values are
same.
Take an example if
Key to select = X
Radio 1
= X (Selected Key property of radio button 1)
Radio 2
= (Selected Key property of radio button 2)
Then the radio button one will be selected as the key to select property and selected key value
binded to the radio button are same where as it differs for the radio button two.
Now I am going to set the radio button 1 as selected in the do init method.
In the WDDOINIT method do the following.
Set the context node radio using the code wizard . Select the node radio and choose the radio
option set and press enter.
Modify the code generated by the system as below.
Page 155
In the event handler for the radio button 1 write the following code.
In the event handler for the radio button 2 do the following to set the radio button2 as selected.
Page 156
So far, we have created methods to handle the toggling of radio button. Now let us create a
button and a text view UI element. On selection of the button we will read and display which
radio button is selected in the the text view.
Step 5 : Create a button UI element in the view layout.
The property of the Button UI element is as below.
Page 157
Provide the text for the button UI element and create an event handler method for the button.
Step 6 : Create a context attribute to be binded to the textview UI element of type string.
Create a text view UI element and bind the attribute text to the text property of the text view.
Page 158
Bind the property text of the text view to the attribute text.
Step 7 : In the event handler for the button do the following.

Read the context node radio from which you ll come to know which radio button I selected with
the flag X and set the text view accordingly for the radio button selected.
Read the context node radio.
Page 159

Note : I have removed the dead and unwanted codes.
Set the text view according to the radio button selected.
Code will be generated as below. From the system generated code modify the code as below.
Page 160
Step 8: Save and activate the whole component. Create an application for the component to test
the component.
Activating the component
Page 161
Create an application for the component.
Page 162
Output :
Click on read value.
Select the radio button 2 and click read value.
Note : Refer to the standard component WDR_TEST_UI_ELEMENT.
Page 163
Select a radio button and click on read value.
Page 164
Radio Button Group By Index

Step 1: Create a webdynpro component as shown below.
Enter the component name and press enter. Assign the component to a package.
Step 2: In the Context node of the view controller, create a context node RADIO of cardinality
0..n and attributes to it as shown below.
Page 165
Create an attribute for the node RADIO.
Page 166
Step 3 : Go to the layout of the view controller and place the UI element Radio button group by
index.
Page 167
Bind the texts property of the radio button to our attribute.
Page 168
Page 169
Page 170
Step 4: Now go to the WDDOINIT method to initialize the value for the radio buttons. Let us
assume we are gonna provide colors red, blue and green as a option for the radio button.
Just set the context node along with your values to it.
Page 171
Read the context node using code wizard. Select the icon and choose the context node. Select
the radio button set and click the check box as table operation to set the node as a table.
Now create a work area for the internal table generated by the code wizard.
Hard code the values to the work area and append the values to the internal table.
Page 172
Save and activate your whole component.

Step 5: Create an application to test your component.
Page 173
Test your application.
Page 174
Output:
So far we have only seen to set the radio buttons on the screen. Now let us see the action
associated with the radio button on dynamically changing the buttons on the screen.
Step 6: Create a context attribute text of type string as shown below in the view controller.
Page 175
Page 176
Step 7: Go to the layout of the view controller and inset a UI element Label.
In the property of the lable UI element fill in the obligatory parameters marked with red.
Page 177
Bind the lable for property to the text view which we are going to create now.
Step 8: Create a UI element text view.
Page 178
Bind the property of the text view TEXT to the attribute text which we created earlier.
Page 179
Assign the text view as the lable for property of the label.
Step 9 : In the properties of the Radio button UI element create an action.
Page 180
Page 181
Page 182
Double click on the action On toggle and write the following codings.
Page 183
Read the context node using the code wizard. (Note : Not as table operation ) .
Page 184
Declare an attribute for index and get the radio button selected using the method
get_lead_selection_index.
Now we have got the index number of which is being selected. To identify the value which is
selected read the context node as a table operation and read the selected value using the index
which we obtained.
Delete already declared variables from the code.
Now the internal table contains all the records from which we can choose the selected one using
Read statement with the index.
Page 185
Then Get the value of which radio button is selected and set the attribute text to indicate
which radio button has been selected.
Using code wizard set the attribute text as shown below.
Output:
Page 186
Page 187
Radio Button Group By Key

The RadioButtonGroupByKey UI element groups the individual radio button UI elements in table
form, and only one radio button can be selected within the UI element group.
Unlike radio button the radio Button group by Key has only the selected key property. The Radio
button group by key gets the list of values from the attributed binded to the selected key
property. The attribute must be of some data element with fixed range values. Radio button
group by key displays the option for the fixed range values. Say for example if i bind the
attribute of type BSYTP then the radio button displays all the fixed values assigned to it domain.
Domain fixed values for the data element BSTYP.
Page 188
Scenario : Let us create a radio button group by key UI element, and bind it to the fixed range
values of the BSTYP. Then read and display the values in the radio button.
Step 1 : Go to the Tcode SE11 and create a webdynpro component as shown below.
Page 189

Step 2 : In the context tab of the view controller create a context node as shown below.
Enter the node name and press enter.
Page 190
Context node will be created as shown below.
Create an attribute for the context node of type BSTYP.
Page 191
Enter the attribute name and type and press Enter.
Page 192
Step 3 : In the layout tab of the view controller, Insert a radio button Group by key UI element as
shown below.
Page 193
Bind the obligatory binding selected key of the radio button to the attribute key.
The list of radio button will contains all the fixed values in the domain.
Page 194
Step 4 : Insert a Button UI element and create a event handler method for that Button.
Set the property Text of the button ui element and create an event handler method for it as shown
below.
Page 195
Step 5 :
Create a context attribute text of type string to be binded to the text view UI element.
Insert a text view UI element and bind the text property of the text view UI element to the
attribute text which we created.
Page 196
Page 197
Step 6 :
In the event handler method for the read value button, write the code to read the radio button
selected and set the text attribute accordingly.
To know which radio button is selected the read the attribute which is binded to the selected key
property of the radio button. The system will provide the value of which
radio button is selected in that attribute.
Using code wizard read the key attribute which is binded to the radio button and press enter.
Page 198
System will genreate the code as below.

Note : I have removed the unwanted and dead codes.
The attribute lv_key will now contain the value of the radio button selected.
Set the context attribute text according to the radio button selected.
Page 199
Modify the code as below to set the text according to the radio button selected.
Page 200
Page 201
Step 7 : Activate the whole component.

Page 202
Output :
Select a radio button and click on read value.
Page 203
Page 204
Check Box
With a check box UI element we can implement a single on or off switch. The check mark in the
box indicates the option is selected and the value is true.
The Check Box UI element has an obligatory binding property checked which is to be binded to
an attribute of type WDY_BOOLEAN.
By default the value of the check box UI element is set as False which means the UI element will
not have check mark. However this property can be changed by initialzing the value in the doinit
method and display the check box with check mark at the time of display.
Now let us take an simple example on how to display a check box with switch on and switch off
option.
Let us create an check box ui element on selection of check box we will display the text activated
in the in the text view and deactivation on removing the tick in check box.
Step 1 : Go to the tcode SE80 and create a webdynpro component.
Page 205

Step 2 : In the context tab of the view controller, create two context attribute.
One context attribute of type wdy_boolean to be binded to the check box UI element and other of
type string to be binded to the text property of the check box UI element.
Attribute for the Checked property check box UI element.
Attribute for the Text property of the UI element.
Page 206
Context node will look like.
Step 3 : Go to the layout of the view container and insert a check box UI element.
Page 207
Provide the ID and type in the Popup and press enter.
Bind the obligatory binding on the check box to the attribute checkbox as shown below.
Page 208
Bind the attribute textview to the text property of the check box UI element.
Create an event handler method ontoggle to handle the event on selection of the check box.
Properties of the check box UI element.

Page 209
Step 4 : In the event handler method for the check box ontoggle write the code to handle the
occurrence on selection of check box.
Set the text property of the check box as activated in case of the check box is selected and
deactivated in case of the check box is not selected. To know whether the check box is selected
or not read the attribute binded to the checked property of the check box. The attribute will return
the value X (True) in case of the check box is selected and (False) in case of check box is not
selected.
Using code wizard Read the attribute checkbox to know whether the check box is selected or not.
The code will be generated as below.

Page 210
Note : I have removed the commented lines and dead codes
The variable lv_checkbox will now contains the value x or space according to the selection.
Based on this set the attribute textview.
The code will be generated as below by the code wizard.

I have removed the variables that have been declared already and the commented lines and kept
the remaining.
Modify the code in the event handler method on toggle as shown below.
Page 211
Note : This method will be triggered only when the check box is selected then only the text view
will be set. If you want the text view to hold activated or deactivated by the time of appearance
on the screen then you have to set the attribute accordingly in the doinit method.
Step 5 : Save and activate the whole component.
Page 212
Step 6 : Create an application for the component and test the application.
Page 213
Output:
Select the check box.
Page 214
Remove the tick then the output is
Page 215
Check Box Group

The CheckBoxGroup allows users to select an element from a set of predefined options using the
checkbox. The UI element CheckBoxGroup arranges the individual Check box in single-column
or two-column tables.
The property text of the check box group UI element is binded to the attribute of a context node
having an cardinality 0..n. The no of checkbox created in the screen depend upon the number of
elements in the context node binded. Suppose if you are binding internal table having 5 records
to the context node then 5 check boxes will be created in the screen.
Now let us take an example where I will create a check box group UI element and display the
selected checkbox in a text view.
Page 216

Step 2 : In the context tab of the view controller, create a context node of cardinality 0..n as
shown below.
Enter the node name, choose the cardinality as 0..n and press enter.
Page 217
Add attribute to the context node as shown below.
Page 218
Add the attribute name,choose a type and press enter.
Context node will be created as below.
Step 3 : Go to the layout tab of the view controller and insert a checkbox group UI element.
Page 219
Provide the ID and choose the UI element type. Press Enter.
Bind the text property of the check box UI element to the attribute value of context node
checkbox.
Page 220
Step 4 : Insert a button UI element and create an event handler method for the Button UI
element.
Create an event handler method for the Button UI element.

Page 221
Step 5 : Create an context attribute text of type string to be binded to the text view UI element.
Context node will look like.
Page 222
Step 6: In the layout tab insert a text view UI element.
Bind the text property of the text view UI element to the attribute text.
Page 223
Step 6: Initialize the text for the checkbox in the DOINIT method.
Step 7 : Do the following in the event handler method for the button.
First we need to know what are check boxes are ticked in the screen. To do that get the object
reference of the context node and call the method GET_SELECTED_ELEMENTS using the
object reference. This method will return the object reference for all the elements(Rows of
internal table we binded) which are selected.
Page 224
Then Using this objected reference the data in the row can be accessed. Concatenate all the
elements which are selected and bind it to the text view UI element.
Write the code as below in the eventhandler method onread.
Page 225
Page 226
Page 227
Page 228
Output :
Select the check boxes and click on read value.
Page 229
Drop Down By Key

The drop down by Key UI element provides the list of values from the domain fixed values. The
cardinality is 1..1 and type of the attribute to which the UI element is binded must have fixed
domain values.
In the above screen I have binded the drop down by key UI element to the attribute of type
BSTYP and the drop down UI element lists all the fixed domain values of the BSTYP.
Note : With the drop down by key UI element we can only have only fixed domain values and if
we need some more option we need to include it in the dictionary domain level only.
If the drop down by Key UI element is binded to a cell editor of a table UI element the drop
down can have only fixed values for all the row item where as the drop down list can be different
for each row in drop down by index.
Now let us see an simple example where I am going to set a drop down by key then read and
display the value selected.
Step 1 : Go to SE80 Tcode and create a webdynpro component.
Page 230

Step 2 : In the context tab of the view controller create an attribute of type BSTYP to be binded
to the drop down UI element and another attribute of the type string to be binded to the text view
UI element.
Enter the attribute name and type and press enter.
Page 231
Page 232
Step 3 : In the layout tab of the view controller. Insert a lable UI element.
Provide the id for the UI element, choose a type and press enter.
Page 233
Properties of the lable UI element.
We will set the label for property after creating the drop down UI element.
Insert a drop down UI element in a similar way.
Properties of the drop down UI element.

Bind the obligatory binding of the UI element selected key to the attribute BSTYP.
Page 234
Create an event hanlder for the drop down UI element.
Page 235
Now set the label for property of the lable UI element to point drop down
Insert a text view UI element and bind the text property of the UI element to the attribute text.
Page 236
Binding the property text of text view to the attribute text.
Step 4 : Do the following in the event handler method for the drop down.
Page 237
Page 238
Step 5: Save and activate the whole component.
Page 239
Step 6 : Create an application and test the application.
Page 240
Output :
Page 241
Drop down by Index

A DropDownByIndex UI element provides the user with a dropdown list box. You cannot select
more than one entry from the selection list. The UI element consists of a text field, a button, and
a selection list. Any list item already selected is displayed in the text field. When selecting the
button, a list with all possible values is displayed.
When Binded with the table UI element, the drop down by index can have a different set of
values for each row.
Let us do the similar example we did in the drop down by key.

Step 2 : In the context tab of the component controller create a node of cardinality 0..n.
Page 242
Enter the node name and choose a cardinality. Press enter.
Add an attribute text to the context node drop.
Page 243
Create one more attribute in the root context node to be binded to the text view.
Page 244
Step 3 : In the layout tab of the view controller do the following.

Insert a lable and drop down UI element . Set the property of the lable as.
Page 245
Bind the binding text property of the UI element drop down to the text attribute of context node
drop.
Page 246
Create an event handler method for the drop down.
Insert a text view UI element and bind its text property to the text view attribute which we
created.
Page 247
Step 4 : Initialize the values for the drop down in doinit method.
Page 248
Step 5 : In the event handler method, write the following codes.
Page 249
Page 250
Output :
Choose a value from a drop down.
Page 251
Read the context node as table operation

Predefined Object references:
WD_THIS Instance for the current controller.
WD_CONTEXT Instance for the Root context node.
Let us assume the name of the context node to be NODE and contains three attributes of type
string.
* Following is a Code generated by the code wizard for reading a context node as a table
operation.
Now let us see how the code has been generated.

Whenever a view has been created, an interface with name IF_<VIEW_NAME> will be created
by the system and an object reference for that interface will be WD_THIS which you will be
able to see in the attributes tab of the view.
Also whenever a view has been created a default root context node CONTEXT will be created
below which we will be creating our context node and attributes. An object reference will be
generated by the system WD_CONTEXT which is an instance for the root context node
referring to the SAP standard interface for context nodes
Page 252
IF_WD_CONTEXT_NODE. This interface if_wd_context_node contains methods which is

used to perform variety of operations in the context node.
Note : Whatever the context node we are creating under the root context node CONTEXT will
be of type if_wd_context_node but does not have a same instance and Context nodes are like
class and we need an instance to perform any action on it.
When ever I want to perform an action in the context node, I need to access the node first and to
access that node I need an object reference. Here when I am creating a node under the root
context node CONTEXT an instance for that context node will be generated by the system which
I will not be aware of. Then if you look at what are the possibilites available for acquiring the
object reference here it is. I have my access to my root context node CONTEXT which is
referring to an SAP standard interface IF_WD_CONTEXT_NODE. This interface contains a
method get_child_node which is used to return the object reference of its child node provided
that we are passing the name of the context node for which we need the object reference.
Note : Using this method you can only get the object reference of the immediate child of the root
node, not the child of its child node.
Code :
data : lo_node type ref to if_wd_context_node.
lo_node = wd_context->get_child_node( NODE ).
Remember all the child of the root context node CONTEXT will be of type
if_wd_context_node. So I am declaring a reference variable of that type to get store the object
reference for my context node. Then using the object reference of the root context node
CONTEXT I am accessing the method get_child_node which gives the object reference of the
child in return. Here I am exporting the name of the context node as a text and receving the
object reference of that context node in the reference variable which I created earlier.
Below is the parameters of the method get_child_node of interface if_wd_context_node.
Here name is the obligatory importing parameter for this method and it returns the object
reference of the node using returning parameter child_node.
In the code wizard the name of the context node will be passed as
name = wd_this->wdctx_node
As I mention earlier wd_this is the object reference which is created for the interface created at
the time of view creation. When ever a context node has been added to the root context a
constant variable will be declared in the interface with the standard naming convention for the
context wdctx followed by the node name.
Page 253
Here view name is v_main.

Interface created for that view is if_v_main.
Name of the context node created is NODE
Now I have got the object reference to my context node NODE in the reference variable
lo_node. Now what ever the method of interface if_wd_context_node accessed using this
object reference will be reflected in my context node.
To read the values in the context node there is a method get_static_attributes_table in the
interface if_wd_context_node. Using this method we can get the values in the context node in the
form of table.
Parameters of the method get_static_attributes_table are as below.
This methods returns the value in the form of table. To receive the value we need an internal
table with the structure of the context node.
Code generated by the code wizard for declaring the internal table is as below.
Page 254
As we know wd_this is the object reference for the view controller. Whenever a node has been
created an structure for the node with its attribute will be declared in the interface of the view.
Using this we can declare our internal table.
Using the object reference for our context node, and by accessing the get_static_attributes_table
method of interface if_wd_context_node we can import the values in the context node into our
internal table.
Page 255
Table UI Element
Scenario : In the following scenario we are going to see how to display a report in Webdynpro
ABAP using Table UI element.
Step 1 : Go to Tcode SE80 and Create a webdynpro component as shown below.

Step 2: In the context tab of the view controller, Create a context node EKKO with cardinality
0..n.
Page 256
Enter the name for the node,

dictionary structure, cardinality as shown below.
Click on Add attribute from structure to add the attributes to the context node from the dictionary
structure EKKO.
Page 257
Select the attributes required and press enter.

Context node will be created as shown below.
Page 258
Step 3 : In the layout tab of the view controller insert a table UI element and Bind the node to the
Table.
Provide ID and type for the UI Element.
Page 259
Right click on the table UI element and select create binding.
Click on the context button and choose the context node ekko as shown below.
Page 260
Page 261
Page 262
Press enter.
Page 263
Step 4: Go to the method WDDOINT and set the context node with some records. The values in
the context node will be displayed in the table.
Using Code wizard set the node EKKO as table Operation.
Following codes will be genereated by the code wizard.
Page 264
Step 5 : Save and activate the component. Create an application and test the application.
Output:
Page 265
Page 266
Table with input field

In this example we will see how to make the table UI element as an Input option for the user. Let
us consider an example where user wants to enter the observation. If we create a form with input
fields for the user to enter the observation, for entering five observation it will take a total of five
times for the user to submit each observations one after another. Hence we create a Table UI
element with Input field, user can enter all the observations at once and submit it in the database
table.
Step 1 :
Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to the package or save it in local object.
Step 2 :
Go to the context tab of the view controller and create context node as below.
Page 267
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the node as shown below.
Page 268
Enter the attribute name and type and press enter.
Page 269
Attributes will be created as below.
Similarly create the other attributes as below.
Page 270
Page 271
Attributes for the node will be created as below.
Step 3: Go to the layout of the view controller and insert the table UI element in the view
designer.
Right click on the RootUIelementcontainer and click on insert element.
Page 272
Provide the ID and type of the UI element.
Page 273
Choose the context node observation by right clicking on the context.
Page 274
Change the cell editor of the table column as shown below.
Page 275
Enter the suitable label for the column. Save and activate the whole program and create an
application to test the program.
Step 4 :
Create an webdynpro application as shown below.
Page 276
Output:
Still the table will be in non editable mode only, the reason is there is no records in the internal
table.
Step 5: Go to the DOINIT method and initialize some records in the table.
Page 277
Using the code wizard, set the node as table operation.
Page 278
Save and activate the component and test the application.

Output:
Enter the values.
Page 279
Here we can place an button UI element and on click of that button UI element we can read the
context node and update the data in the table.
Page 280
Table with drop down

In that we made the table column as editable for user to input values. In this section we will how
to set drop down to the table. The last field of the table which we created in the above mentioned
example we had a status field which contains value open and close, now let us make it as a drop
down field showing open and closed from which user chooses his option.
Pre-requisites : Must have created the component in the above mentioned section table with input
field.
I have copied the previously created component zcsk_table_input into another component
zcsk_table_drop. To copy a component right click on the main component and select copy and
provide the name for the component. You can also proceed with the same component.
Step1 : Go to the context tab of the view controller . In the context node observation which we
created in the previous section (Table with input field) create a child node drop as shown below.
The purpose of this node is to contain the list of values for the drop down.
Page 281
Enter the node name and choose the cardinality as 0..n.
Create an attribute for the node drop of type string to binded to the drop down UI element text
property.
Page 282
Enter the attribute name and provide the type.
Page 283
Step 2: Go to the layout tab of the view controller. Right click on the table UI element and select
create binding.
Page 284
Change the cell editor of the status field from input field to drop down by index.
Page 285
The text property of the UI element will now binded to status field of node observation.
Change the binding to the value attribute of the drop down node so that the column will display
the list of values from the drop node.
Page 286
Step 3: Go to the doinit method and populate the list of values for the drop down.
Using code wizard set the node drop as table operation.

Page 287
Output:
Page 288
Page 289
Table with link to action UI element

In this scenario we are going to discuss about how to use the Table UI element along with the
Link to action.
We will display the list of PO from the EKKO table and set the Purchase order number EBELN
as link to action. On clicking the EBELN link we will display the Item details for that Purchase
order in a separate table.
Step1: Go to TCODE SE80 and create a webdynpro component as shown below.

Step 2: In the context tab of the view controller, create two context nodes EKKO and EKPO as
shown below.
Page 290
Enter the name for the node, provide the dictionary structure as EKKO and set the cardinality as
0..N.
Click on add attribute from the structure to add the attribute fields from the dictionary structure
EKKO.
Page 291
Choose the fields required from the popup and click on enter.
Page 292
Context node will be created as below with the required attributes.
Page 293
Similarly create a EKPO node with the following attributes.
Step 3: Go to the layout of the view controller and insert a table UI element.
Page 294
Provide ID and type for the UI element.
Page 295
Right click on the Table UI element and click on create binding.
Click on the context button to choose the context node.
Page 296
Page 297
Change the cell editor of the column for the EBELN field as link to action.
Page 298
Change the label text as the PO number for the field EBELN.
Page 299
Step 4: Now create an action for the link to action UI element.
Page 300
Enter the name and description for action and press enter.
Page 301
Action for the Link to action will be created as below.
Step 5: Go to the DOINIT method and initialize some values for the context node as shown
below.
Generate the code using the code wizard as shown below.
Page 302
Note : I have removed the unwanted code.

Fill in the internal table with some records and bind it to the context node table.
Step 5: Save and activate the whole component and test the application.
Page 303

Output:
So far we have only set the link to action UI element. Now let us write the logic for what has to
happen on the click of the link to action UI element.
On the click of the link to action UI element we will display the item details for that PO in the
separate table.
Step 6: Go to the layout tab of the view controller and insert the Table UI element.
Page 304
Provide the ID and type.
Create binding for the table with the node EKPO as shown below and let remain all the cell
editor of the table as text view only.
Page 305
Step 7: Go to the event handler method for the link to action which we created earlier and do the
following.
This method has an importing parameter wdevent which is referring to a type
CL_WD_CUSTOM_EVENT.
This class contains a method call get_context_element which will return us the element object
reference for the row from where link to action is been triggered. The method gets the name as
the importing parameter and returns the element object reference. To know what is the name to
be passed go to the debugger and check what is the name passed in the attribute parameters.
Call this method in the event handler method for the link to action.
Using patter call the method get context element of the class cl_wd_custom_event.
Page 306
Right now I am passing the name as name as we dont know what is the name to be passed there.
We will check out in the debugger what is the name to be passed. Keep the break point in the and
test the application.
Page 307
Click on the function F5 to go inside the method. Double click on the internal table parameters
and see the ID. It is the name which we need to pass to the name parameter.
The row item which has the name context element provides the element object reference for the
selected index and hence we need to pass the context_element to the method to get the object
reference.
Page 308
Using the object reference calling the get_static_attributes method of interface will gives the
value of the row item.
Call the method using pattern and get the values in the work area.
Now the local structure will contain the row item values of the selected row.
Using the ebeln number in the work area gets it corresponding value and bind it to the EKPO
table.
Using code wizard, set the node EKKO as table operation.
Page 309
Note I have removed the unwanted codes. Using the ebeln number in the work area gets it
corresponding value and bind it to the EKPO table.
Code in the method for link to action.
Page 310
Debug to understand the flow.
Output:
Click on the link to action.
Page 311
Table with cell variant

In the following section we are going to see how to use the table UI element with cell variant.
The purpose of cell variant is to determine what is the cell editor supposed to be displayed in a
particular column of the cell. If you ask me is it possible whether in particular column of the
table can a first row be displayed as button UI element and the second row to be displayed as
link to action UI element my answer would be yes we could do it with the help of cell variant.
Scenario : Let us consider that there is a requirement where in you want to display the link to
action only to certains rows of the column based upon a condition.
Before starting to develop the component let us discuss a bit on how the cell variant works. If
you have worked with table UI element before you must be aware of how the table is created
with its no of columns.
Now you must be clear that the type of UI element the cell editor holds will be displayed on the
screen. Now for our requirement we need two types of UI element(Link to action and text view)
to be the cell editor out of which one has to be simultaneously displayed as the table cell based
upon the condition.
To do that we need to create a cell variant to the column and assign a type of UI element to the
variant.
Page 312

Step 2: In the context tab of the view controller create the context node of cardinality 0..N with
the attributes as shown below.
Page 313
Step 3: Go to the layout tab of the view controller and insert a table UI element as shown below.
Right click on the tab UI element and create binding as shown below.
Page 314
Step 4: In the properties of the Table column bind the attribute variant to the selected cell variant
property.
Right click on the table column and select insert cell variant.
Page 315
Enter the ID and the type for the cell variant.
Right click on the variant and insert editor to add the cell editor.
Page 316
Specify the UI element type and press enter.
Bind the text property of the Link to action UI element to the field1 attribute as shown below and
create an action for the link to action UI element.
Page 317
Provide variant key for the cell variant. When the context attribute binded to the selected cell
variant property of the table column contains this value enterd in the table colum then the system
displays the UI element(Link to action) specified in the variant.
Page 318
Step 5: Go to the methods tab of the view controller and in the doinit method initialize the values
for the context attributes.
Set the context node as table operation.
Note: I have removed the unwanted codes.

Page 319
Modify the code as below. Passing the variant to the cell makes the difference.

Step 6: Create an webdynpro application to test the component.
Page 320
Output:
Page 321
Filtering in table UI element

Unlike ALV, we dont have the default filtering option when we are displaying the data using the
Table UI element. Filtering options needs to be done manually. All we need to do is to trigger the
apply filter method of the interface if_wd_table_method_hndl to set the filter option to the table.
This method will take care of comparing the filter value with all other values in the column and
Every column in the table UI element is provided with a property called filterValue. The value
passed to this attribute will be the filter criteria. The value is compared with all the other values
in that column and only the matching rows are displayed. In case many no of columns are set
with filtering option, the rows with the combination of values will only be displayed.
When a filtering option is set a row will be introduced in the top of the table with input box or
drop down to the column where the column filtervalue attribute is binded to the context attribute
and non enabled field to the rest of the columns.
There are two types of input for filtering is possible.
1. When you bind the property filtervalue of the column to a context attribute whose type does
not have a fixed domain values then the input field UI element will be provided. However an
attribute without fixed domain values can be made displayed as a drop down instead of input
box by adding valueset to the attribute which will be covered in the following section.
2. When the attribute with fixed domain values is binded to the filtervalue property then drop
down UI element will be provided as a selection option.
For more refer to the SAP Help portal links:

http://help.sap.com/saphelp_nw73/helpdata/en/58/f80d7cd805406d8b5647b7bb2444e1/content.h
tm
http://help.sap.com/saphelp_nw2004s/helpdata/en/2d/390e422dfcde2ce10000000a1550b0/frame
set.htm
Now lets see how to set the filter option in the table UI element.
Pre- Requisite:
Knowledge on how to display the datas using table UI element. Refer to the link to learn how to
display the data using Table UI element.
I have created a simple webdynpro component that displays some records from the EKKO table.
The Output of the table is as below.
Page 322
Now let us provide filter option for this table in the column company code. Lets say that I want
to display the data only for the company code 1019.
Firstly, we are going to see how to set the filter with an input field and drop down later on.
Steps to do:
1. Create a context attribute to be binded to the filter value property of the company code
column.
2. Create a context attribute to switch on and switch off the filter.
3. Create a toolbar in the table UI element and button with an event handler method to switch on
and switch off the filter.
4. Create an action to be triggered when the filter is selected.
Procedure:
In this blog, lets replicate the code implemented by the SAP in the demo component for table UI
element DEMO_TABLE. Lets create the context node, attributes and method with the same
name so that we can copy paste the code as it is.
Step 1: Go to the context tab of the view controller and create a context node with the name
FILTER and cardinality 1..1 and attribute BUKRS of type BUKRS.
Page 323
Step 2: Go to the layout tab of the view controller and bind the filter value property of the table
column BUKRS to the context attribute created.
Page 324
Step 3: Create an attribute IS_FILTER_ON to set the filter option on or off.
Page 325
Step 4: Right click on the table UI element and insert a toolbar in the table to add the filter
button.
Right click on the toolbar and insert a right aligned toolbar element.
Page 326
Provide the ID and choose the type as toolbartogglebutton.
Bind the checked property of the toolbar element to the IS_FILTER_ON attribute created by us.
When the button is clicked the IS_FILTER_ON will be provided with value X.
Page 327
Create an action switch filter for the toolbar button created.
Page 328
Step 5: In the attributes tab of the view controller create a reference variable of type
if_wd_table_method_hndl to store the object reference to the table handler.
Now lets move into the coding part.

To change the properties of the table we need a handler to the table. Write the following code in
the domodify view of the view or copy paste the code from the demo component.
Note: Dont forget to change the value passed to the get element with the ID of the table UI
element. Otherwise you will get a dump.
Code explanation:
Getting the value IS_FILTER_ON binded to the toolbar button and getting the handler for the
table. If the IS_FILTER_ON is provided with value X which means the user have clicked the
table toolbar element we created and the value is set to space when we click it again. Using that
we are instructing the table handler to call the action FILTER (which we are going to create)
when the user click on filter button and in other case no action.
DATA: l_table TYPE REF TO cl_wd_table,

l_is_filter_on TYPE wdy_boolean.
* Find out whether filter is on
wd_context->get_attribute( EXPORTING name = IS_FILTER_ON
IMPORTING value = l_is_filter_on ).
* Get reference of the table view element
l_table ?= view->get_element( TAB_EKKO ).
* Get reference to the Filter & Sorting API
wd_this->TABLE_METHOD_HNDL ?= l_table->_method_handler.
* Set or cancel the tables filter action
IF l_is_filter_on = abap_true.
l_table->set_on_filter( FILTER ).
Page 329
ELSE.
l_table->set_on_filter( ).
ENDIF.
Write the following code in the SWITCH_FILTER action created for the table toolbar element.
This following code is to invalidate the value binded to the filtervalue property so that the line
inserted in the table for the filter will be invalidated.
DATA: l_node TYPE REF TO if_wd_context_node.

* in any case clear the tables filter strings
l_node = wd_context->get_child_node( if_v_main=>wdctx_filter ).
l_node->invalidate( ).
* if the filter is off: show the whole table back
wd_this->table_method_hndl->apply_filter( ).
Step 6: In the action tab of the view controller create an action FILTER.
Write the following code in the event handler for the FILTER.
Output:
The output of the application is as below. Selecting the Filter button mark (toolbar element) will
trigger the switch_filter method setting the value of IS_FILTER_ON as X. When the domodify
view method is called it will set the action FILTER as a method to be called when the user
presses filter.
Page 330
You can now see a line inserted in the table with company code as a Input filed and a filter
button in the left which will trigger the action FILTER.
Page 331
As i mentioned earlier, binding the filter value property of the column with the attribute with
fixed domain values will show a drop down as a filter and in the other case an input field.
Now let us see how to make the filter option as a drop down even though the attribute binded
does not have fixed domain values.
This can be achieved by adding an value set to the attribute.
Write the following code in the DOINIT method of the view controller to add a value set to the
attribute.
DATA lo_nd_filter TYPE REF TO if_wd_context_node.

DATA lo_nd_status_info TYPE REF TO if_wd_context_node_info.
DATA it_valset TYPE STANDARD TABLE OF wdr_context_attr_value.
DATA wa_valset TYPE wdr_context_attr_value.
lo_nd_filter = wd_context->get_child_node( name = wd_this->wdctx_filter ).
CALL METHOD lo_nd_filter->get_node_info
RECEIVING
node_info = lo_nd_status_info.
* Valuset for company code
Page 332
wa_valset-value = space.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
wa_valset-value = 1019 .
wa_valset-text = 1019 .
CLEAR wa_valset.
wa_valset-value = 1045 .
wa_valset-text = 1045 .
CLEAR wa_valset.
CALL METHOD lo_nd_status_info->set_attribute_value_set
EXPORTING
name = BUKRS
value_set = it_valset.
Ouput:
There may be a certain scenario where you wanted to reset the filter. Say for example you are
clicking a button search and you filter the company code value to 1045 then the next time you
click on search again only the records for 1045 will be displayed in the table. In that case we
need to reset the filter. Below is the peice of code which resets the filter.
* Resetting the filter option
DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
DATA LV_IS_FILTER_ON TYPE WD_THIS->ELEMENT_CONTEXT-IS_FILTER_ON.
LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
Page 333
lv_is_filter_on = abap_false.
LO_EL_CONTEXT->SET_ATTRIBUTE(
NAME = ÌS_FILTER_ON`
VALUE = LV_IS_FILTER_ON ).
Page 334
Table Popin
Popins are Insertion between the rows of the table. There are two kinds of Popins.
1. Row popin
2. Cell Popin.
Popins are linked to a table for row popin where as popins are linked to a table column for a cell
popin.
With a cell popin an associated background color of the popin is assigned to the cell so that we
can see which cell does this popin belongs to.
Page 335
SAP has provided a UI element TablePopinToggleCell to provide the expansion and closing of
the table Popin. This TablePopinToggleCell is a cell variant and all we have to do is to simply
insert it in a table column and set the selected cell variant of the table column and the variant key
of the tablepopintogglecell with a common value, but it should not be null.
Apart from this the root table UI element property selected popin must be binded to the
attribute of type string, so that when ever a table popin toggle cell is selected in a particular row
the system will provide a value tablepopin to the attribute binded to the selectedpopin.
Page 336
Refer to the URL for more details on Table Popin.

http://help.sap.com/saphelp_erp2005/helpdata/en/23/5e9041d3c72e7be10000000a1550b0/conten
t.htm
Now let us see a simple application to demonstrate the table popin.
Part I
Page 337
Step 1: Goto SE80 and Create a webdynpro Component.
Assign it to a package or save it in a local object.
Step 2: In the component controller, create a node EKKO and EKPO as shown below.
Page 338
If you want to add attributes from a dictionary structure or table then provide the table name or
structure in the dictionary structure and click on the add attributes form the structure.
Page 339
Select the required fields from the pop up which contains the fields of the dictionary structure
provided by you.
The selected attributes will be added to your context node.
Page 340
Similiarly create another node EKPO with cardinality 0..n.
Step 3:
Page 341
Now go to the view layout and insert the table UI element as shown below. Right click on the
rootcontaineruielement and select insert element.
Provide the ID for the UI element and choose the type as table.
Page 342
Step 4: Right click on the table UI element and select the insert table column option.
This particular column which we are adding now is for the tablepopintogglecell which I had
mentioned above in the blog.
Page 343
Right click on the inserted table column and add a cell variant to the column.
Select the cell variant as a table popin toggle cell.
Page 344
Step 5: Right click on the table UI element and select create binding to add the columns to the
table from the context node.
Page 345
Click on the context button to choose the context node.
Page 346
Select the context node EKKO and press enter.
Page 347
Keep the cell editor as the text view and press enter.
Page 348
Page 349
You ll now be able to see the every column binded except the one which we have created for the
table popin.
Page 350
Step 6 : Go to the method DOINIT to initialize some values for the node EKKO.
Page 351
Using code wizard set the node EKKO as a table operation and bind some records to the node.
Code will be generated by the system as below.
Page 352
Select some records form the EKKO table and bind it.
Page 353
Step 7: Create a webdynpro application to test the component.
You will see the output in the table we populated and our table popin column remains empty.
Part II
Step 8: So far we have only see how to display the records in the table. Now let us see how to
add table popin.
Page 354
In the table popin cell variant which we have created in the table popin colum provide the variant
key as key for example.
In the table column of the cell variant change the properties as below.
Change the fixed position to the left so that our popin will always occupy the left position.
Provide the variant key name in the selected cell variant so that this column will come to know it
has a table popin associated to it.
Page 355
If you test the application now at this stage it will go for a dump.
The reason behind this is whenever we have added a variant to the table popin, the system will
return a value TABLEPOPIN to identify in which row the table popin has been selected. To
capture this value for every row item we need to create a attribute in our context node for the
table.
Page 356
Go to the context node and add an attribute.

Note : If the context node still have the structure EKKO it will not allow you to add the attribute,
In that case remove the dictionary structure from the node and then add the attribute.
Create an attribute table_popin of type string.
Page 357
In the root of the table UI element, Bind the attribute table_popin to the property selected popin.
So that whenever a popin is selected from a particular row the system will return a value to the
attribute table_popin with TABLEPOPIN.
Page 358
Page 359
Now insert a table popin by right clicking on the table ui element and choosing the insert table
popin option.
If you test your application now, you will be able to see the table popin column in the left side of
the table.
Now we will be needing an event handler method for handling what needs to be done on the
selection of table popin.
Page 360
Go to the table popin cell variant and create an event ontoggle as shown below.
In this toggle method we will write the logic for what has to happen on selection of the Table
popin.
Before writing a logic we need to add some UI elements like what is to be displayed on the
expansion of the tabel popin.
Right click on the table popin and select insert content.
Page 361
Insert a transparent container UI element and and table to display the contents of the EKPO
table.
Similiarly insert the table ui element in a similar way.

Page 362
Bind the node EKPO to the table created inside the container.
Page 363
Page 364
Page 365
After Binding write the following code in the toggle method.

method onactionontoggle .
* read the context node ekko.
data lo_nd_ekko type ref to if_wd_context_node.
data lt_ekko type wd_this->elements_ekko.
data ls_ekko like line of lt_ekko.
* navigate from to via lead selection
lo_nd_ekko = wd_context->get_child_node( name = wd_this-wdctx_ekko ).
lo_nd_ekko->get_static_attributes_table( importing table = lt_ekko ).
* to know which row has been selected, read the table with key table_popin.
* table_popin is the attribute bounded to the selectedpopin property of the table
* and it returns an value tablepopin to that field which you can see in debugger.
read table lt_ekko into ls_ekko with key table_popin = tablepopin.
* now populate the item table for the corresponding header value and set it in the context node.
Page 366
data lo_nd_ekpo type ref to if_wd_context_node.

data lt_ekpo type wd_this->elements_ekpo.
lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ).
select * from ekpo into corresponding fields of table lt_ekpo
where ebeln = ls_ekko-ebeln.
*
lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ).
endmethod.
Now test your application.
Page 367
The table popin doesnt close automatically and the previously selected values is displayed for
all the popin the reason behind this is the first row when it was selected, the table_popin attribute
will be set as tablepopin and when we select the second row second row table_popin will also set
as tablepopin but when we read the table using the value table popin it will always pick the first
row which have the table popin. To differentiate the previously selected popin and newly
selected popin we need a flag.
Create a flag in the context node EKKO as shown below.
Page 368
Page 369
Now modify the code as shown below. What I have done is everytime when a tablepopin is set a
attribute table_popin I am setting a flag along with it. Next time when the other popin is selected,
I am first checking for the previously selected popin with the combination of tablepopin and flag
x. If previous value in that combination is available I am clearing it and reading the currently
selected popin with the value tablepopin and setting the flag as x to the new value.
When you remove the tablepopin value from the attribute that table popin will be closed.
method onactionontoggle .
* read the context ekko.
data ls_ekko like line of lt_ekko.
lo_nd_ekko = wd_context->get_child_node( name = wd_this->wdctx_ekko ).
Page 370
* @todo handle non existant child

* if lo_nd_ekko is initial.
* endif.
lo_nd_ekko->get_static_attributes_table( importing table = lt_ekko ).
read table lt_ekko into ls_ekko with key table_popin = tablepopin
flag = x.
data : lv_tabix type sy-tabix.
if sy-subrc = 0.
lv_tabix = sy-tabix.
clear : ls_ekko-table_popin , ls_ekko-flag.
modify lt_ekko from ls_ekko index lv_tabix.
clear lv_tabix.
endif.
read table lt_ekko into ls_ekko with key table_popin = tablepopin.
if sy-subrc = 0.
lv_tabix = sy-tabix.
ls_ekko-flag = x.
modify lt_ekko from ls_ekko index lv_tabix.
data lo_nd_ekpo type ref to if_wd_context_node.
data lt_ekpo type wd_this->elements_ekpo.
select * from ekpo into corresponding fields of table lt_ekpo
where ebeln = ls_ekko-ebeln.
*
endif.
lo_nd_ekko->bind_table( new_items = lt_ekko set_initial_elements = abap_true ).
endmethod.
Now test the application.
Page 371
Page 372
Exporting content of table to Excel sheet

In this section we will see how to export the contents of the table to the excel sheet. In the
previous blog we have already
created a application to display data in the form of the tables.
Output:
We will continue in the same application to export the table content to the excel sheet.
Step 1: Go to the layout tab of the view controller and create button UI element.
Page 373
Enter the text property of the button UI element as export and create an action for the button UI
element.
Step 2: In the event handler method for the button UI element do the following code to export the
content to the excel sheet.
First read the content of the table using the code wizard read as table operation.
Page 374
The content of the table will be exported to the internal table lt_ekko. Now we will move these
content to the excel sheet.
To do that concatenate all the data in to a string variable seperated by a horizontal tab and conver
it into xstring using function module
SCMS_STRING_TO_XSTRING.
Concatenate the contents of the row into a string variable.
Pass the string variable to the function module scms_string_to_xstring and convert the values
into xstring.
Page 375
There is a class called wdr_task which contains an static attribute client_window. This attribute
is of type reference variable to class CL_WDR_CLIENT_WINDOW
There is an attribute in the class cl_wdr_client_window called client which is again a reference
variable of type IF_WDR_CLIENT. This interface contains a method
Attach_file_to_response which will help us creating the excel sheet with the contents of the
variable lv_string.
Note : For people who dont understand oo abap codings can write the coding in a following
way.
Page 376
Coding in the method for Button UI element.
DATA lo_nd_ekko TYPE REF TO if_wd_context_node.
DATA lt_ekko TYPE wd_this->elements_ekko.
lo_nd_ekko->get_static_attributes_table( IMPORTING table = lt_ekko ).
DATA ls_ekko LIKE LINE OF lt_ekko.
DATA lv_text TYPE string.
LOOP AT lt_ekko INTO ls_ekko.
CONCATENATE lv_text
ls_ekko-ebeln
ls_ekko-bukrs
ls_ekko-bstyp
ls_ekko-aedat
ls_ekko-lifnr
cl_abap_char_utilities=>newline
INTO lv_text
SEPARATED BY cl_abap_char_utilities=>horizontal_tab.
CLEAR ls_ekko.
ENDLOOP.
DATA : lv_xstring TYPE xstring.
Page 377
CALL FUNCTION SCMS_STRING_TO_XSTRING

EXPORTING
text
= lv_text
IMPORTING
BUFFER
= lv_xstring
EXCEPTIONS
FAILED
=1
OTHERS
=2
.
IF sy-subrc <> 0.
MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.
* WDR_TASK=>CLIENT_WINDOW->CLIENT->ATTACH_FILE_TO_RESPONSE(
* I_FILENAME = table.xls
* I_CONTENT = lv_xstring
* I_MIME_TYPE = EXCEL ).
data : lv_clientwindow type ref to CL_WDR_CLIENT_WINDOW.
lv_clientwindow = WDR_TASK=>CLIENT_WINDOW.
data : lv_client type ref to IF_WDR_CLIENT.
lv_client = lv_clientwindow->client.
CALL METHOD lv_client->attach_file_to_response
EXPORTING
i_filename
= table.xls
i_content
= lv_xstring
i_mime_type = EXCEL.
Output:
Page 378
Click on the export button.
Page 379
Click on open or save button.

When you click on save file will be downloaded with the specified name.
Click on open to view the file.
Page 380
Roadmap UI element
The Roadmap UI element displays the steps followed in the wizard.
Each step can be a roadmap step object or MultipleRoadmap step.

A road map can use various symbols to mark the start and endpoint.
Let us see how to create a simple road map.

Page 381

Step 2: To save the current roadmap step we need an attribute. Go to the context tab of the view
controller and create the context node as shown below.
Enter the name for the node and press enter.
Create an attribute to the node as shown below.
Page 382
Provide the name and type for the attribute and press enter.
Step 3: Go to the layout tab of the view controller and insert a roadmap UI element as shown
below.
Page 383
Right click on the road map UI element and select insert step.
Page 384
Provide ID and Type for the step.
Similarly create two more steps with ID second and third.
In the property of the first step enter the description and Name.
Page 385
Similarly enter the description and name for the remaining two steps.
Bind the step attribute to the selected step property of the road map UI element.
Page 386
Step 4: We need a view container UI element to hold an view for the each step of the road map.
Right click on the root container UI element and select insert UI element to add view container
UI element.
Page 387
Similarly insert two button UI elements to navigate between the views with name previous and
next and create action for both the buttons.
Step 5: Create a view for each step. Right click on the view controller and create a view.
Enter the name and description for the view.
In the layout tab of the view created insert a text view UI element.
Page 388
Enter the text property of the text view as the first view.
Similarly create two more views and name the view as second and third. Insert a text view in
each view and provide the text as second and third view.
Page 389
Step 6: To navigate between the view we need to create the inbound and outbound plugs. Go to
the Outbound plug tab of the main view (V_MAIN) and create outbound plug to all other views.
Go to the inbound plug of the first view and create an inbound plug for the each view as shown
below.
Step 7: Go to the window and create the navigation links between the views.
Page 390
First embed all the views created first, second and third in the view container of the main view as
shown below.
Choose the view to be embedded and press enter.
Similarly embed second and third view to the view container.
Page 391
Create the navigation links to each view as shown below.
Choose the destination view as the first view.
Page 392
Navigation link will be formed from the main view to the first view will be created as below.
Similarly create the navigation link to the second and third view using their respective outbound
plugs.
Step 8: Go to the methods of the main view and in do init method set the attribute as first.
Remember the value we are setting to the selectedstep of the road map UI element must be same
Page 393
as the ID of the roadmap step so that the road map step will be highlighted.
Code :
DATA lo_nd_roadmap TYPE REF TO if_wd_context_node.
DATA lo_el_roadmap TYPE REF TO if_wd_context_element.
DATA ls_roadmap TYPE wd_this->Element_roadmap.
DATA lv_step TYPE wd_this->Element_roadmap-step.
lo_nd_roadmap = wd_context->get_child_node( name = wd_this->wdctx_roadmap ).
lo_el_roadmap = lo_nd_roadmap->get_element( ).
lo_el_roadmap->set_attribute(
name = `STEP`
value = FIRST ).
Write the following code in the next method. I have read the attribute to know the current step
and set the attribute again by increasing a step as next button has been triggered and accordinly I
am navigating to the view.
Code:
Page 394
lo_el_roadmap->get_attribute(
EXPORTING
name = `STEP`
IMPORTING
value = lv_step ).
case lv_step.
when FIRST.
lv_step = SECOND.
WHEN SECOND.
LV_STEP = THIRD.
WHEN THIRD.
LV_STEP = FIRST.
ENDCASE.
name = `STEP`
value = lv_step ).
case lv_step.
when FIRST.
wd_this->fire_to_first_plg(
).
WHEN SECOND.
).
WHEN THIRD.
wd_this->fire_to_third_plg(
).
ENDCASE.
Write the following code in the previous method. I have read the attribute to know the current
step and set the attribute again by decreasing a step as next button has been triggered and
accordinly I am navigating to the view.
Code:
Page 395
lo_el_roadmap->get_attribute(
EXPORTING
name = `STEP`
IMPORTING
value = lv_step ).
case lv_step.
when FIRST.
lv_step = THIRD.
WHEN SECOND.
LV_STEP = FIRST.
WHEN THIRD.
LV_STEP = SECOND.
ENDCASE.
name = `STEP`
value = lv_step ).
case lv_step.
when FIRST.
).
WHEN SECOND.
).
WHEN THIRD.
).
ENDCASE.
Page 396
Step 9: Save and activate the whole component. Create an webdynpro application and test the
component.
Output:
Page 397
We can also navigate by

selecting the road map step for that we need to create an action for onselect event of the roadmap
and write the action over there.
Code:
DATA LV_STEP TYPE STRING.
CALL METHOD WDEVENT->GET_STRING
EXPORTING
NAME = STEP
RECEIVING
VALUE = LV_STEP.
name = `STEP`
value = lv_step ).
Page 398
case lv_step.
when FIRST.
).
WHEN SECOND.
).
WHEN THIRD.
).
ENDCASE.
I have captured the selected button in the roadmap using the importing parameter wdevent and
set the attribute and triggerd the outbound plug accordingly.
Test the output.
Page 399
File Upload UI Element

File upload UI element is used to upload files from the client(Presentation server) to the server.
This UI element appears with an input field and a button to search the directory for the file.
Note: We cannot specify the URL path with the file Upload UI element.
Important properties of the UI element to be binded:
Data property of the UI Element must be binded to an attribute of type XSTRING. The system
will automatically converts the content of the file uploaded into XSTRING format and store it in
the attribute binded to the data property.
File Name property of the UI element is to be binded to the attribute of type string. The system
will store the name of the file uploaded in this attribute.
Mimetype property of the UI element is to be binded to the attribute of type string. The system
will store the type of file in this attribute.
Page 400
Properties of the context node to be maintained for the File Upload UI element.
Now let us see an example to how to use the file Upload UI element and then how to convert the
content of the file from XSTRING format to internal table contents.
Page 401
Step 2: Go to the context tab of the view controller and create a context node to be binded to the
file upload UI element.

Create context attribute to the node as shown below.
Page 402
Step 3: Go to the layout tab of the view controller and insert a file upload UI element.
Bind the properties of the UI Element to the respective attributes.
Since we dont have an action for the file Upload UI element insert a button UI element to
trigger the action.
Page 403
Enter the text for the button and create an action for the button.
In the event handler method created for the button UI element read the context node created for
file upload to get the content of the file.
Using code wizard read the node.
Note : I have removed the unwanted codes.

Page 404
Now the local structure ls_file_upload will contain the contents of the file.
Output:
Page 405
Click on browse to search the file from the directory and choose the file.
Page 406
Set a break point in the event handler fo the Upload UI element and check the content of the
node at runtime.
The content of the file is converted into Xstring format by the system and stored in the attribute
binded to the data property. Lets see how to obtain the contents of the file in the internal table in
the next section.
Page 407
OVS Search help

OVS SEARCH HELP
Theory :
OVS Stands for Object value selection. One way of using the F4 input help can be done by using
OVS in ABAP webdynpro, The other forms are dictionary search help and freely programmed
search help. Now let us see the way the OVS search help works.
The SAP has provided us with a standard webdynpro component WDR_OVS for OVS Search
help. Using this standard component we can provide ovs search help in our component.
This OVS Search help has four phases which you will be able to see from the case statement
declared in the code consisting of four phases if_wd_ovs=>co_phase_0 to
if_wd_ovs=>co_phase_3.
Phase 1 : if_wd_ovs=>co_phase_0.
It is a configuration phase. In this phase we set the lable for the subsearch, output table etc. For
this purpose, the event parameter OVS_CALLBACK_OBJECT provides the method
SET_CONFIGURATION.
This method is used to set the input structure for the subsearch.
The business logic for fetching the datas from the data base are written here. the values obtained
are set to the output table so that it can be displayed on the screen.
Page 408
When user has selected one value from the above table. It has to go and sit in the place from
where the F4 help is being triggered. This is done in this phase.
Refer to the SAP link for more details on the ovs search help
http://help.sap.com/saphelp_nw04s/helpdata/en/47/9ef8c99b5e3c5ce10000000a421937/content.h
tm
Lets take a look into an example of how to create a ovs search help.
Pre-requisites : Create a compnent with and input field.
Step 1:
Add the standard component WDR_OVS to the component framework ( HERE I have created a
component ZCSK_WD_OVS in which I am going to include OVS Search help ).
Page 409
Step 2:
Add the interface controller of the ovs component to the View in the properties tab so that we
will be able to access the Standard OVS component methods.
Page 410
Step 3:
Create the context node and add attributes to it. Set the input help mode of the attribute as Object
value selector. And select the OVS usage Component using F4 help.
Step 4:
Create an event handler method. And select the event as OVS using F4 help.
Step 5:
Page 411
In the method created for the ovs help. Write your processing logic.
5.1 Create a structure to specify the search criteria.
The Types declaration lty_stru_input generated by the code is for setting the subsearch in the
search help. Declare the input structure here which you want to set as an subsearch.
5.2 Create a structure to display the search result.
Page 412
The Types declaration lty_stru_list generated by the code is for setting the output table i.e the
column where the search result is being displayed in the search help popup.
5.3 Create label texts for the search criteria.
The internal table lt_label_text is used for setting the lable to the subsearch input fields.
5.4 Create label to be displayed for the search results.
Page 413
The internal table lt_column_texts is used for displaying the label for the output table.
5.5 Write the processing logic to fetch the data from the database.
5.6 Set the attributes to the context nodes.

When an user selects an value in the search, it has to be displayed in the input field from where
he triggers the f4 help. In order to do that the values which the user select in the screen will be
captured in the field-symbol <ls_selection> by the sap system. From the field symbol set the
selected value in the context attribute which we have binded to the input field, so that it will be
displayed on the screen.
Page 414
Output:
Press the F4 help button, you will get the below popup.
Enter the search criteria and press start search.
Page 415
Double click on the values or select the lead and click ok.
The selected value will sit on the appropriate fields.
Page 416
Codes on the OVS Event Handler Method.

Note : The highlighted part has to be modified by us, rest of the code is system generated when
you add the event OVS to the event handler method.
method OVS .
* declare data structures for the fields to be displayed and
* for the table columns of the selection list, if necessary
types:
begin of lty_stru_input,
* add fields for the display of your search input here
kunnr type kunnr,
name1 type name1_gp,
end of lty_stru_input.
types:
begin of lty_stru_list,
* add fields for the selection list here
Kunnr type kunnr,
Page 417
name1 type name1_gp,

end of lty_stru_list.
data: ls_search_input type lty_stru_input,
lt_select_list type standard table of lty_stru_list,
ls_text
type wdr_name_value,
lt_label_texts type wdr_name_value_list,
lt_column_texts type wdr_name_value_list,
lv_window_title type string,
lv_group_header type string,
lv_table_header type string.
field-symbols: <ls_query_params> type lty_stru_input,
<ls_selection> type lty_stru_list.
*
*
DATA : lv_kunnr TYPE kunnr,

lv_name TYPE string.
case ovs_callback_object->phase_indicator.
when if_wd_ovs=>co_phase_0. configuration phase, may be omitted
* in this phase you have the possibility to define the texts,
* if you do not want to use the defaults (DDIC-texts)
ls_text-name = `KUNNR`. must match a field name of search
ls_text-value = `Customer Number`. wd_assist->get_text( `001` ).
insert ls_text into table lt_label_texts.
ls_text-name = `NAME1`. must match a field name of search
ls_text-value = `Customer Name`. wd_assist->get_text( `001` ).
ls_text-name = `KUNNR`. must match a field in list structure
ls_text-value = `Customer Number`. wd_assist->get_text( `002` ).
insert ls_text into table lt_column_texts.
ls_text-name = `NAME1`. must match a field in list structure
ls_text-value = `Customer Name`. wd_assist->get_text( `002` ).
*
*
*
lv_window_title = wd_assist->get_text( `003` ).

lv_group_header = wd_assist->get_text( `004` ).
lv_table_header = wd_assist->get_text( `005` ).
ovs_callback_object->set_configuration(
label_texts = lt_label_texts
Page 418
column_texts = lt_column_texts
group_header = lv_group_header
window_title = lv_window_title
table_header = lv_table_header
col_count = 2
row_count = 20 ).
when if_wd_ovs=>co_phase_1. set search structure and defaults
* In this phase you can set the structure and default values
* of the search structure. If this phase is omitted, the search
* fields will not be displayed, but the selection table is
* displayed directly.
* Read values of the original context (not necessary, but you
* may set these as the defaults). A reference to the context
* element is available in the callback object.
ovs_callback_object->context_element->get_static_attributes(
importing static_attributes = ls_search_input ).
* pass the values to the OVS component
ovs_callback_object->set_input_structure(
input = ls_search_input ).
when if_wd_ovs=>co_phase_2.
* If phase 1 is implemented, use the field input for the
* selection of the table.
* If phase 1 is omitted, use values from your own context.
if ovs_callback_object->query_parameters is not bound.
******** TODO exception handling
endif.
assign ovs_callback_object->query_parameters->*
to <ls_query_params>.
if not <ls_query_params> is assigned.
endif.
*
*
call business logic for a table of possible values

lt_select_list = ???
select kunnr name1 from kna1 into table lt_select_list up to 10 rows.

ovs_callback_object->set_output_table( output = lt_select_list ).
* apply result
Page 419
if ovs_callback_object->selection is not bound.

endif.
assign ovs_callback_object->selection->* to <ls_selection>.
if <ls_selection> is assigned.
ovs_callback_object->context_element->set_attribute(
name = KUNNR
value = <ls_selection>-KUNNR ).
name = CUSTOMER_NAME
value = <ls_selection>-NAME1 ).
* or
*
ovs_callback_object->context_element->set_static_attributes(
*
static_attributes = <ls_selection> ).
endif.
endcase.
endmethod.
Page 420
Freely programmed search help

Webdynpro Framework allow us to create our own webdynpro component and use that
component to provide and input help to the field. This type of providing search help is called
freely programmed search help.
How to use the component as a search help component to an attribute?
One pre-requisite for the webdynpro component to be used as search help is that it should
implement the webdynpro component interface IWD_VALUE_HELP. By the time we are
implementing the interface an window will be created in our component with the name
WD_VALUE_HELP. We need to embed the View of our component to window
WD_VALUE_HELP so that our view will be displayed as search help when the user triggers the
F4. Later on this component created for providing search help can be added as a used component
and its component usage can be assigned to the attribute for which search help type is assigned
as freely programmed search help.
Where to write the processing logic to display the list of possible values?
The view which is embedded to the window WD_VALUE_HELP will be displayed when the
user triggers the F4 help. Hence we can design the layout and the processing logic to display
the data based on input can be implemented in the view itself.
The list of possible values will be displayed in the view that is embedded to the window
WD_VALUE_HELP. How to transport the user selected value back to the place from
where F4 help is called?
When the User selects a particular value and clicks on ok button the user selected value has to be
written in the input field from where the F4 help is called. The interface IWD_VALUE_HELP
consist of two key attributes called F4_CONTEXT_ELEMENT and F4_ATTRIBUTE_INFO.
This attribute F4_ATTRIBUTE_INFO consist of information on attribute from where the F4
help is triggered and the attribute F4_CONTEXT_ELEMENT consist element object reference
for the attribute from where the input help is triggered. Using these information in the attribute
we can transport the user selected value to the attribute from where the F4 help is called.
Will the values selected to an attribute using the freely programmed search help be
captured in the Context change log?
No, Just like in OVS Search help we need to write the record explicitly to the context change log
table.
Refer to the SAP Link for More information on freely programmed search help:
http://help.sap.com/saphelp_nw70/helpdata/en/47/9ef8cc9b5e3c5ce10000000a421937/frameset.
htm
Page 421
Let us see an simple scenario that implements the freely programmed search help.
Scenario: Provide the freely programmed search help to the attribute CARRID. Design a
webdynpro component that provides the list of possible airline ID and use that component to
provide search help for the attribute CARRID.
This tutorial is split into two parts.
1) Creating a freely programmed search help component
2) Using the component to provide the search help
Page 422
Select-Options Creating a selection field in

the screen
Step 1: Go to Tcode SE80 and Create a Webdynpro Component. Assign the component to the
package or save it in the local object.
Step 2 : To the main Component, Add the component WDR_SELECT_OPTIONS in the used
components tab. To use the functionality of the another webdynpro component it has to be added
to our Component used components list where as if it is a standard interface it has to be added to
the Implemented Interface.
Page 423
Step 3: Add the interface controller of WDR_SELECT_OPTIONS in the view controller in

which we need to use the select options. Doing so will create a method in the interface of the
view and this method will return the object reference for the interface of the select options using
which we can get the access to the select-option methods.
Click on the create controller usage button.
Page 424
From the popup choose the interface controller of the select-options component.
Page 425
Step 3: Go to Layout and insert View Container UI Element. This View Container UI Element is
used to display the View of the other component into our View. Whenever we call the select
options method and create a selection screen the output will be displayed in the view of the select
options component. To display the output here in our view we need the screen into our view. For
which we need view container to embed the view of the select options to our view.
Right click on the rootuielementcontainer and select insert element to insert a UI element in the
view.
Page 426
Provide the ID and Type for the UI element and press enter.
Page 427
Step 4: Go to Window controller. Expand the Window. Right click on the Select_options(UI
Container Created in previous step) and embed the view of the standard
component(WDR_SELECT_OPTIONS) to be displayed in our window.
Press F4 help on the View to be embedded to choose the view.

Page 428
Choose the view WND_SELECTION_SCREEN in which selection parameters will be

displayed.
Press Enter after choosing the View.

Page 429
You can see the view embedded to the view container.
Page 430
Step 5: Now we have to write the coding in the WDDOINIT method to initialize the selection
field on the screen. Go the method WDDOINIT of the View.Using Code Wizard generate the
coding as mentioned below.
Step 6: First we need to Instantiate the Used Component to check for the active component
usages. While adding the interface controller of the select option in the properties of the view
two methods will be created in the interface for the views.
A method will be created with the naming convention wd_cpuse_ followed by the component
name which we have given for select options. This method will return the object reference for
the component usage using which we will check whether the component usage is active or not.
In Code wizard, general tab choose the option Instantiate Used component and select the select
option which we added using the F4 Help.
Page 431
Choose the component select_options.
Page 432
Page 433
Page 434
Step 7: To access the method of another component we need the object reference to the interface
controller of the component. While adding the interface controller of the select options
component to the view controller, a method will be created with the naming convention
wd_cpifc followed by the component name which we provided for it. This method will returns
the object reference for the interface controller of the select option.
Using code wizard choose the radio button method call in used controller and provide the
component name using F4 help.
Page 435
Double click on the select options component.
Page 436
Now choose the method INIT_SELECTION_SCREEN which will return you the reference to
the select options interface if_wd_select_options.
Page 437
Select the method INIT_SELECTION_SCREEN.
Page 438
Page 439
Page 440
The reference variable lv_r_helper_class will contain the object reference to the select options
interface.
Step 8:
The interface if_wd_select_options contains a method called create_range_table which is used to
create a range for the select option field.Using the ABAP Object pattern call the method Create
table range from the interface we are using (IF_WD_SELECT_OPTIONS).
Page 441
Page 442
Page 443
Page 444
Replace me with object which refers to the interface IF_WD_SELECT_OPTIONS. Pass the Data
element in the place of the type name and create a range table of type ref to data same as the
receiving parameter RT_RANGE_TABLE.
Page 445
Call the Method add selection field using the same procedure as mentioned above to set the
selection field on the screen.
Page 446
Replace me with the object referring to the IF_WD_SELECT_OPTIONS. Pass the range table
which we received from the returning parameter in the previous step.
Page 447
Step 10 : Save and activate the component and create an application to test the component.
Page 448
Page 449
Output:
Page 450
We have some default buttons here in the screen to disable this button go back to the method
WDDOINIT do the following. Call the method set global options and set the buttons which you
dont need as ABAP_FALSE. Click on the pattern and choose abap object pattern, Enter the
interface IF_WD_SELECT_OPTIONS and choose the method SET_GLOBAL_OPTIONS.
Code wizard will generate the following code.
Page 451
Remove the comments and set the buttons you dont need as ABAP_FALSE.
Here I had disabled the buttons check and execute. The Output will look like.
Page 452
Codes in the WDDOINIT Method

* instantiate the used component.
data lo_cmp_usage type ref to if_wd_component_usage.
lo_cmp_usage = wd_this->wd_cpuse_select_options( ).
if lo_cmp_usage->has_active_component( ) is initial.
lo_cmp_usage->create_component( ).
endif.
* call the method in the used controller
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_select_options( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller->init_selection_screen(
).
*
* create the range table.
data rt_range_table type ref to data.
call method lv_r_helper_class->create_range_table
exporting
i_typename = ebeln
* i_length
=
Page 453
i_decimals =
receiving
rt_range_table = rt_range_table.
* add selection field
call method lv_r_helper_class->add_selection_field
exporting
i_id
= ebeln
* i_within_block
= mc_id_main_block
* i_description
=
* i_is_auto_description
= abap_true
it_result
= rt_range_table
i_obligatory
= abap_true
* i_complex_restrictions
=
* i_use_complex_restriction = abap_false
* i_no_complex_restrictions = abap_false
* i_value_help_type
= if_wd_value_help_handler=>co_prefix_none
* i_value_help_id
=
* i_value_help_mode
=
* i_value_help_structure
=
* i_value_help_structure_field =
* i_help_request_handler
=
* i_lower_case
=
* i_memory_id
=
* i_no_extension
= abap_false
* i_no_intervals
= abap_false
* i_as_checkbox
= abap_false
* i_as_dropdown
= abap_false
* it_value_set
=
i_read_only
= abap_false
* i_dont_care_value
=
* i_explanation
=
* i_tooltip
=
* i_is_nullable
= abap_true
* i_format_properties
=
* i_suggest_values
=
.
* set global options
call method lv_r_helper_class->set_global_options
exporting
i_display_btn_cancel = abap_true
i_display_btn_check = abap_false
i_display_btn_reset = abap_true
i_display_btn_execute = abap_false .
Page 454
Reading the values entered in select option

In the previous section, we studied about how to set the select option in the screens and what are
the various options that can be set using the select options.
Now, we will study about how to read the values that is entered in the select option into the
application.
We will read some values from the screen based on an action.
Let us create a button and a table UI element to display the records for the entered value in the
select options.
Step 1: Right click on the root container UI element and select insert UI element. Create a button
UI Element as shown below by providing the id and type for the UI element.
Enter the text for the Button UI element.
Page 455
Create an action for the Button UI Element as shown below.
Page 456
Page 457
Right click on the root container UI element and select insert UI element. Create a table UI
Element as shown below by providing the id and type for the UI element.
Step 2: In the context tab of component controller, create a context node and bind it to the table.
Enter the name and dictionary structure and select add attribute from structure.
Page 458
Choose the required attributes and press Enter.
Page 459
Page 460
Drag and drop the context tab to the view controller.
Page 461
Select the context button to choose the node.
Page 462
Choose the context node and press enter.
Page 463
By default the cell editor of the column will be text view. If not choose the column editor as text
view and press enter.
Page 464
Attributes of the context node will be binded to the table as shown below.
Step 3: Go to action ONSUBMIT and write the following code.

Instantiate the used component.
Page 465
Page 466
Call the method call in the current controller using the code wizard.
Page 467
Page 468
Call the method get range table of the select option interface if_wd_select_options.
Page 469
Code will be generated as below
Page 470

Replace the ME object reference with the object created earlier.
Pass the I_ID and Create a range table of type ref to data, because receiving parameter
rt_range_table is declared in the same way mentioned above.
Now write the below codings to get the value entered in the select option. RT_EBELN contains
the object reference and from that we need to get the value. Here we require a field symbol to do
the job. Declare a field symbol of type table and then assign the object reference to the field
symbol. The field symbol will now hold the data entered in the select options which you can see
it in the debugger.
Page 471
Now write the codings to fetch the data and set it in the context node.
Page 472
Save and activate. Test the application.

Output:
Page 473
OVS Search help for select option field

In this section we will study how to provide a OVS search help to the select options field. When
we are creating an input field we will bind it to the context attribute and the mode of input help
for the field depends upon the input help mode property of the context attribute binded. Here in
select option the scenario is different. We dont have a context attribute involved and how do we
set a ovs search help. By default the field assigned to select option will have a dictionary search
help and there may be a scenario where the field may not have a dictionary search help and you
want to provide search help for it. Or your requirement can be you need a user defined search
help instead of dictionary search help. Under such conditions we may have to set search help for
select options using OVS search help.
For more information of OVS search help refer to the link:
Scenario: Imagine we have created a input field for the PO number using select options
component and it contains the dictionary search help. Now let us see how to set a ovs search help
for the select option.
Page 474
Code in the method Doinit of the view controller for select options is as below:
lo_cmp_usage = wd_this->wd_cpuse_select( ).
endif.
DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_WDR_SELECT_OPTIONS .
lo_INTERFACECONTROLLER = wd_this->wd_cpifc_select( ).
DATA lv_r_helper_class TYPE ref to if_wd_select_options.
).
data : rt_ebeln TYPE REF TO data.
CALL METHOD lv_r_helper_class->CREATE_RANGE_TABLE
EXPORTING
I_TYPENAME = EBELN
* I_LENGTH
=
* I_DECIMALS =
Page 475
RECEIVING
RT_RANGE_TABLE = rt_ebeln
.
CALL METHOD lv_r_helper_class->ADD_SELECTION_FIELD
EXPORTING
I_ID
= EBELN
IT_RESULT
= rt_ebeln
* I_VALUE_HELP_TYPE
= IF_WD_VALUE_HELP_HANDLER=>CO_PREFIX_N
ONE
.
CALL METHOD lv_r_helper_class->SET_GLOBAL_OPTIONS
EXPORTING
I_DISPLAY_BTN_CANCEL = ABAP_FALSE
I_DISPLAY_BTN_CHECK = ABAP_FALSE
I_DISPLAY_BTN_RESET = ABAP_FALSE
I_DISPLAY_BTN_EXECUTE = ABAP_FALSE
.
Now let us see how to set an OVS search help for the select option.
Step 1: Go to the DOINIT method of the view controller where we have done the codings to set
the select options.
The code snippet for adding the select option field in the screen is as below.
I_VALUE_HELP_TYPE is an exporting parameter which determines the type of the input help
the select option field is supposed to have.
Uncomment the line and double click on the attribute for forward navigation to see for more
options available.
Page 476
Some options available in the interface are:
Pass the input help types as OVS.
Step 2: In the methods tab of the view controller, create an event handler method and assign it to
the event on_ovs of select options as shown below.
Assign this event handler method to the select option.

Page 477
Step 3: Double click on the method to write the coding inside this method.
Copy paste the codings that will be genereted by the system for OVS search help and we will
modify it accordingly.
Code genereated by system for OVS Search help:
* declare data structures for the fields to be displayed and
* for the table columns of the selection list, if necessary
types:
* add fields for the display of your search input here
field1 type string,
Page 478
types:
* add fields for the selection list here
column1 type string,
ls_text
case ovs_callback_object->phase_indicator.
when if_wd_ovs=>co_phase_0. configuration phase, may be omitted
* in this phase you have the possibility to define the texts,
* if you do not want to use the defaults (DDIC-texts)
ls_text-name = `FIELD1`. must match a field name of search
ls_text-value = `MYTEXT`. wd_assist->get_text( `001` ).
ls_text-name = `COLUMN1`. must match a field in list structure
ls_text-value = `MYTEXT2`. wd_assist->get_text( `002` ).
*
*
lv_window_title = wd_assist->get_text( `003` ).

lv_table_header = wd_assist->get_text( `004` ).
ovs_callback_object->set_configuration(
table_header = lv_table_header ).
when if_wd_ovs=>co_phase_1. set search structure and defaults
* In this phase you can set the structure and default values
* of the search structure. If this phase is omitted, the search
* fields will not be displayed, but the selection table is
* displayed directly.
Page 479
* Read values of the original context (not necessary, but you

* may set these as the defaults). A reference to the context
* element is available in the callback object.
ovs_callback_object->context_element->get_static_attributes(
importing static_attributes = ls_search_input ).
* pass the values to the OVS component
ovs_callback_object->set_input_structure(
input = ls_search_input ).
* If phase 1 is implemented, use the field input for the
* selection of the table.
* If phase 1 is omitted, use values from your own context.
if ovs_callback_object->query_parameters is not bound.
endif.
assign ovs_callback_object->query_parameters->*
to <ls_query_params>.
if not <ls_query_params> is assigned.
endif.
*
*
call business logic for a table of possible values

lt_select_list = ???
ovs_callback_object->set_output_table( output = lt_select_list ).

* apply result
if ovs_callback_object->selection is not bound.
endif.
assign ovs_callback_object->selection->* to <ls_selection>.
*
*
name = `COLUMN1`
*
value = <ls_selection>-column1 ).
* or
*
ovs_callback_object->context_element->set_static_attributes(
*
static_attributes = <ls_selection> ).
Page 480
endif.
endcase.
Modify the code as below:
Set the required structure for the sub-search and the output table.
Note: Ref to OVS Search help document.
If you compare the importing parameter for the event handler method for normal OVS and OVS
using search help.
Importing parameter for OVS Search help:
Importing parameter in the method for OVS Search help in select option.
Importing parameters will be different. In an normal ovs search help all the phases of the search
help will be called using the object OVS_CALLBACK_OBJECT referring to type IF_WD_OVS
but here in select option is the value of this call back object is stored in the structure
I_OVS_DATA.
Page 481
Double click on the associated type of I_OVS_DATA to see its structure.
Click on the direct type entry to see the structure.
The object reference required to call the phases of the OVS search help will be seen in the
structure of same type if_wd_ovs.
So replace all the occurrence of OVS_CALLBACK_OBJECT in the coding by I_OVS_DATAM_OVS_CALLBACK_OBJECT.
Page 482
Change the Phase 0 Coding as below:
As I dont require any subsearch field in the search help I have commented the codings in the
phase 1.
Write the business logic to populate the output table in the phase 2.
The usage of first three phase is similar to that of a normal ovs search help for an attribute where
as there is a lot of difference in the phase 3 where we bind the data back to the input field.
In a normal ovs search help for the input field created using attribute the system will generate the
coding to bind values to the attribute whereas when using select option we dont have the context
attribute. If you see in the structure for I_OVS_DATA there will be a component
mt_selected_values which will carry the data to the input field.
Page 483
Change the phase 3 coding as below.
Code:
TYPES:
BEGIN OF LTY_STRU_INPUT,
EBELN TYPE EBELN,
END OF LTY_STRU_INPUT.
TYPES:
BEGIN OF LTY_STRU_LIST,
EBELN TYPE EBELN,
END OF LTY_STRU_LIST.
DATA: LS_SEARCH_INPUT TYPE LTY_STRU_INPUT,
LT_SELECT_LIST TYPE STANDARD TABLE OF LTY_STRU_LIST,
LS_TEXT
TYPE WDR_NAME_VALUE,
LT_LABEL_TEXTS TYPE WDR_NAME_VALUE_LIST,
LT_COLUMN_TEXTS TYPE WDR_NAME_VALUE_LIST,
LV_WINDOW_TITLE TYPE STRING,
LV_TABLE_HEADER TYPE STRING.
FIELD-SYMBOLS: <LS_QUERY_PARAMS> TYPE LTY_STRU_INPUT,
<LS_SELECTION> TYPE LTY_STRU_LIST.
CASE I_OVS_DATA-M_OVS_CALLBACK_OBJECT->PHASE_INDICATOR.
WHEN IF_WD_OVS=>CO_PHASE_0.
LS_TEXT-NAME = ÈBELN`.
LS_TEXT-VALUE = `PO NUMBER`.
INSERT LS_TEXT INTO TABLE LT_LABEL_TEXTS.
LS_TEXT-NAME = ÈBELN`.
LS_TEXT-VALUE = `PO NUMBER`.
INSERT LS_TEXT INTO TABLE LT_COLUMN_TEXTS.
Page 484
I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SET_CONFIGURATION(
LABEL_TEXTS = LT_LABEL_TEXTS
COLUMN_TEXTS = LT_COLUMN_TEXTS
WINDOW_TITLE = LV_WINDOW_TITLE
TABLE_HEADER = LV_TABLE_HEADER ).
SELECT EBELN
FROM EKKO
INTO TABLE LT_SELECT_LIST.
I_OVS_DATA-M_OVS_CALLBACK_OBJECT>SET_OUTPUT_TABLE( OUTPUT = LT_SELECT_LIST ).
FIELD-SYMBOLS : <LT_SEL_OPT_RESULT> TYPE STANDARD TABLE.
ASSIGN I_OVS_DATA-M_OVS_CALLBACK_OBJECT->SELECTION>* TO <LS_SELECTION>.
IF <LS_SELECTION> IS ASSIGNED.
ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO <LT_SEL_OPT_RESULT>.
INSERT <LS_SELECTION>-EBELN INTO TABLE <LT_SEL_OPT_RESULT>.
ENDIF.
ENDCASE.
Save and activate the whole component. Test the application.
Output:
Page 485
Page 486
Page 487
OVS Search help for multiple fields in

Select options
In the previous section we have seen how to set an OVS Search help for a select option field. The
event handler method for event ovs will be called when the user presses the F4 help on the
screen. Now suppose if we have more than one selection field and if you want ovs search help
for all of them how do you do it and this is what is this section is all about.
Select options component only have one event ON_OVS for ovs search help and the event
handler method for this event will be called when the User presses the f4 help from any input
field created using the select options component. You cannot create a select options component
usage for each input field and it will be performance intensive.
Now let us see how to create an ovs search help for multiple fields in a select option.
Before going through this document I strongly recommend you to go through the section OVS
Search help for select options.
Assume that we have two fields on the screen PO document number and Vendor number and we
want to provide OVS Search help for them.
Set the search help mode for the select options field as ovs search as shown in the previous
section.
Below is the code in DOINIT method for setting select options field.

lo_cmp_usage = wd_this->wd_cpuse_select( ).
Page 488
endif.
DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_WDR_SELECT_OPTIONS .
lo_INTERFACECONTROLLER = wd_this->wd_cpifc_select( ).
DATA lv_r_helper_class TYPE ref to if_wd_select_options.
).
data : rt_ebeln TYPE REF TO data.
EXPORTING
I_TYPENAME = EBELN
* I_LENGTH
=
* I_DECIMALS =
RECEIVING
RT_RANGE_TABLE = rt_ebeln
.
EXPORTING
I_ID
= EBELN
IT_RESULT
= rt_ebeln
I_VALUE_HELP_TYPE
= IF_WD_VALUE_HELP_HANDLER=>CO_PREFIX_OVS
.
data : rt_lifnr TYPE REF TO data.
EXPORTING
I_TYPENAME = LIFNR
* I_LENGTH
=
* I_DECIMALS =
RECEIVING
RT_RANGE_TABLE = rt_lifnr
.
EXPORTING
I_ID
= LIFNR
IT_RESULT
= rt_lifnr
I_VALUE_HELP_TYPE
= IF_WD_VALUE_HELP_HANDLER=>CO_PREFIX_OVS
.
Page 489
CALL METHOD lv_r_helper_class->SET_GLOBAL_OPTIONS

EXPORTING
I_DISPLAY_BTN_CANCEL = ABAP_FALSE
I_DISPLAY_BTN_CHECK = ABAP_FALSE
I_DISPLAY_BTN_RESET = ABAP_FALSE
I_DISPLAY_BTN_EXECUTE = ABAP_FALSE
.
Step 1: Create an event handler method for the OVS Event of Select options.
In
the Event handler method for the OVS event of select option first identify the field from where
the F4 help for the select option is triggered.
If you see the structure of the importing parameter I_OVS_DATA it contains a field called
m_selection_field_id which will contain the field id from where the F4 help is triggered.
Now using this we will be able to identify the field from where the F4 help is triggered.
Therefore we will create an individual methods for each field with the importing paratmeter
I_OVS_DATA and call these method based on condition.
Page 490
Create a method for EBELN input field.
Create an Importing parameter for the method.
Write the Coding for OVS Search help in that method.

types:
ebeln type ebeln,
types:
ebeln type ebeln,
ls_text
Page 491

case I_OVS_DATA-M_OVS_CALLBACK_OBJECT->phase_indicator.
ls_text-name = ÈBELN`.
ls_text-value = `PO NUMBER`.
ls_text-name = ÈBELN`.
ls_text-value = `PO NUMBER`.
I_OVS_DATA-M_OVS_CALLBACK_OBJECT->set_configuration(
table_header = lv_table_header ).
select ebeln
from ekko
INTO TABLE lt_select_list.
I_OVS_DATA-M_OVS_CALLBACK_OBJECT->set_output_table( output = lt_select_list ).
FIELD-SYMBOLS : <LT_SEL_OPT_RESULT> TYPE STANDARD TABLE.
assign I_OVS_DATA-M_OVS_CALLBACK_OBJECT->selection->* to <ls_selection>.
ASSIGN I_OVS_DATA-MT_SELECTED_VALUES->* TO <LT_SEL_OPT_RESULT>.
INSERT <LS_SELECTION>-EBELN INTO TABLE <LT_SEL_OPT_RESULT>.
endif.
endcase.
Page 492
Similarly create a method for the LIFNR.

Step 2: In the event handler method for the OVS event of select options do the following.
Code:
if i_ovs_data-m_selection_field_id = EBELN.
WD_THIS->OVS_EBELN( I_OVS_DATA ).
ELSEIF i_ovs_data-m_selection_field_id = LIFNR.
WD_THIS->OVS_LIFNR( I_OVS_DATA ).
ENDIF.
Save and activate the whole component. Test the application.
Page 493
Business Graphics
Scenario : Let us create a table with some records in it. Based on the selected record, the data in
the selected row should be displayed in a Graphical format. The graphical format by default will
be Column type which we can change later.
Step 1: Create a webdynpro component as shown below
Step 2: Create a Context node EKPO with some attributes.
Page 494
Step 3: Insert a table UI element and bind the context node to the table.
Step 4 : Populate the context node in the WDDOINIT method.
Page 495
Step 5: Save and activate the whole component and test the application.
Output:
Step 6: Create a context node similar to that of the node EKPO to bind the values to the Graphics
UI element. You can create a node in a similar you created the EKPO or you can create a context
node by copying a similar node.
Page 496
Copy the context node from the view.
Select the node from the popup which you want to copy.
Page 497
Rename the context node and save it.
Page 498
Enter the name for the node.
Step 7 : In the layout tab of the view controller insert the Business graphics UI element.
Page 499
In the layout tab, Insert the business graphics UI element.
Page 500
For the X axis, Insert the category UI element in the Business graphics.
For Y axis, Insert Simple series UI element.
Page 501
Similiarly create series for all the Context attributes.
Bind the category X axis to the PO number.
Page 502
Similiarly bind the series1 and series2 to menge and netpr(Y Axis).
Page 503
Map the properties of the Business UI element to the series source property.
Select the UI element table and create an action for onlead.
Page 504
In the action onlead, read the row which is selected and set it back to the context node business
which is mapped to the business graphics UI element.
method ONACTIONONLEAD .
DATA LO_ND_EKPO TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_EKPO TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_EKPO TYPE WD_THIS->ELEMENT_EKPO.
* navigate from <CONTEXT> to <EKPO> via lead selection
LO_ND_EKPO = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_EKPO ).
* get element via lead selection
LO_EL_EKPO = LO_ND_EKPO->GET_ELEMENT( ).
* get all declared attributes
LO_EL_EKPO->GET_STATIC_ATTRIBUTES(
IMPORTING
STATIC_ATTRIBUTES = LS_EKPO ).
DATA LO_ND_BUSINESS TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_BUSINESS TYPE WD_THIS->ELEMENTS_BUSINESS.
* navigate from <CONTEXT> to <BUSINESS> via lead selection
LO_ND_BUSINESS = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_BUSINESS ).
append ls_ekpo to lt_business.
*
LO_ND_BUSINESS>BIND_TABLE( NEW_ITEMS = LT_BUSINESS SET_INITIAL_ELEMENTS = ABAP_TRU
E ).
endmethod.
Page 505
Step 8: Save and activate the whole application. Test the output.
Output :
Select the lead, you ll be able to see the graph for the lead selected values.
Page 506
Page 507
Progress Indicator and Timed trigger

UI element
The ProgressIndicator UI element shows how much progress an activity has made in the form of
a horizontal bar, along with the value that you have assigned to the percentValue property. You
can use the displayValue property to display a text in the ProgressIndicator on the left side of the
UI element. This makes it possible to provide descriptions with specific percentage values. You
can hide the DisplayValue value using the showValue property. You can display the
ProgessIndicator UI element in different colors using the barColor property. You can assign a
popup menu to a ProgressIndicator.
You can use the ProgressIndicator UI element to display, for example, a project status in percent.
Example of the Display
Step 1 : Create a webdynpro component as shown below.
Step 2 : Go to the view layout and insert a Progress indicator UI element.
Page 508
Page 509
Step 3 : In the context node declare the attribute count, and bind it to the progress indicator UI
element.
Enter the attribute name and type and press Enter.
Page 510
Page 511
Step 4 : Go to the layout and bind the context attribute to the Percent value property of the UI
element.
Page 512
Step 5 : Go to actions tab and Create a method and write the following code to increment the
count so that the percentage value of the progress indicator will increase.
Inside the method read the context attribute which we wants to increment using the code wizard.
Page 513
Page 514
Increment the count attribute and set it back to the context.
Setting the context attribute count.
Page 515
Page 516
Remove the declaration part which has been already declared, and set the attribute with an if
condition that you have to set only if it is less than or equal to 100 else the progress indicator bar
will return back once it reaches the hundred.
Codings in the method increment.

method ONACTIONINCREMENT .
* Read the context attribute Count.
DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
DATA LV_COUNT TYPE WD_THIS->ELEMENT_CONTEXT-COUNT.
Page 517

LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
* @TODO handle not set lead selection
IF LO_EL_CONTEXT IS INITIAL.
ENDIF.
* get single attribute
LO_EL_CONTEXT->GET_ATTRIBUTE(
EXPORTING
NAME = `COUNT`
IMPORTING
VALUE = LV_COUNT ).
* Increment the count
lv_count = lv_count + 10.
* Set the context attribute count.
if lv_count LE 100.
* set single attribute
LO_EL_CONTEXT->SET_ATTRIBUTE(
NAME = `COUNT`
VALUE = LV_COUNT ).
endif.
endmethod.
Step 6 : Now go to the layout and insert a timed trigger UI element, which is used to trigger an
event in a regular interval.
Timed trigger UI element.
The TimedTrigger UI element automatically and periodically triggers an event with a specified
delay. The TimedTrigger UI element is not displayed on the user interface. Therefore, it ignores
the tooltip and the visibiltyproperty. However, in specific layouts such as the matrix layout it
takes up space. To trigger an action, you must bind the onAction property to an action. You use
the delay property to specify the delay in seconds.
Page 518
In the property of timed trigger, add the onaction event as the method which we created
previously and and set the delay property as 1 sec so that the method will get called every one
second and our count will get increase and the view gets refreshed so that we can see the
progress bar moving.
Page 519
Save and activate the whole component. Create an application to test the component.
Note : timed trigger UI element will not be visible in the screen.
Create a webdynpro application.
Page 520
Output :
Page 521
Page 522
Page 523
Reading the application parameter from

the Portal
In this blog we will learn how to read the application parameter from the portal. Let us see how
to read a parameter from the URL in an already created component.
Lets see how to read the user who is logging into the portal and triggering the link for our
application.
Pre-requisites: The portal must be configured in a way to pass the parameter.
Step 1:
Go to the window of the component and select the method handle default. This is the first
method which is triggered when a component load, even before the DOINIT method.
Step 2:
In Handle default method create a importing parameter to get the value from the portal the
importing parameter must be created in a same name that the portal passes the parameter.
Page 524
Step 3:
Go to the application. In parameters tab add the variable declared in Handle default method using
F4 help.
Step 4:
Whatever the value that comes in the portal will be captured by the parameter we declared. It can
be used only within the windows, to use that variable in our view we have to move it to the
controller.
To move it to the controller, create a variable in the component controller as shown below.
Page 525
Step 5:
Now move the application parameter to the variable declared in the component controller.
Wd_component_controller is the object referring to the component controller.
Using that object access the attribute of the component controller and assign the importing
parameter of the handle default method to it. Now value is passed from window to the controller.
Page 526
Step 6:
Now we have to set the value in some variable so that the value can be used across any nos of
views.
Create a node in the component controller with an attribute to hold the value.
Step 7:
Handle default method is executed after the method wddoinit. Hence we can make use of method
wddomodifyview to set the value to the context node.
Page 527
Code:
method WDDOMODIFYVIEW .
data : lv_user type uname.
* Move the value from component controller attribute to the variable.
lv_user = wd_comp_controller->lv_user.
* set the value to the context node.
DATA lo_nd_uname TYPE REF TO if_wd_context_node.
DATA lo_el_uname TYPE REF TO if_wd_context_element.
DATA ls_uname TYPE wd_this->Element_uname.
lo_nd_uname = wd_context->get_child_node( name = wd_this->wdctx_uname ).
lo_el_uname = lo_nd_uname->get_element( ).
* set single attribute
lo_el_uname->set_attribute(
name = `LV_USER`
value = lv_user ).
endmethod.
Now Parameter has been set in the context node and can be accessed in any number of views.
Page 528
A Simple ALV Report


Step 2: In the main component, Add the component SALV_WD_TABLE to the used
components table and provide a component use name and press enter. You can now see the
component usage created for the component.
Page 529
Step 3: Go to the context tab of the component controller and create a context node and attributes
as shown below.
Enter the node properties as below and click on add attribute from the structure.
Page 530
Choose the required attributes and press enter.
Context node and its attributes will be created as below.
Page 531
Step 3: In the properties tab of the view controller create a controller usage for the used
component.
Double click on the interface controller to create a component usage with controller access.
Page 532
Controller usage will be created as below.
By doing so it will create two methods in the interface for the view controller.
The first method wd_cpifc_ followed by the name which we have provided for the component in
the used component list of the component framework will be created. This will get us the object
reference for the interface controller of the ALV component.
The second method wd_cpuse_ followed by the name which we have provided for the
component in the used component list of the component framework will be created. This will get
us the object reference component usage for the ALV component created in our controller. By
the above step you would now be able to see the component usage for the ALV component
created in our component which will not be earlier adding the interface controller to our view
controller.
Page 533
Step 4 : Go to the layout tab of the view controller and create a view container UI element as
shown below.
The purpose of this view container UI element is to hold the view of the another component or
another view of the same component. Since we are reusing the functionality of the standard
webdynpro component the result will be displayed in the view of that component. In order to
Page 534
display the result in our window we created a view container element and bring the view of the
ALV component in our window.
Step 5: Go the window tab of the window controller, to add the view of the ALV component to
the view container UI element which we have created earlier.
Right click on the view container and select embed view to add the view.
Select the view to be embedded as table from the pop up.
Page 535
Table view of component SALV_WD_TABLE will be embedded in the view container as
below.
Step 6: Go to the Interface controller usage of the component usage. Here you will see a context
node called data. This context node is of generic type and it is being binded with the ALV table.
If we map the data in our context node to this context node it will be displayed in the ALV table
which can be seen in our view container.
Page 536
Click on the controller usage button and choose component controller as the controller usage.
Drag and drop the context node EKPO of component controller to the DATA node of the ALV
table.
You can now see the binding created between these two nodes.
Page 537
Step 7: Go to the Do init method of the component controller and initialize some values to the
context node to be displayed in the table.
Note: I have removed the unwanted code.

Initialize some values as shown below.
Code:
DATA lo_nd_ekpo TYPE REF TO if_wd_context_node.
DATA lt_ekpo TYPE wd_this->Elements_ekpo.
Page 538
SELECT *
from ekpo
into CORRESPONDING FIELDS OF TABLE lt_ekpo
UP TO 5 ROWS.
Output:
Page 539
Changing the header of the Column

ALV Report
The Output of the ALV report which we created in the earlier section is as below.
Now let us see how to change the standard text for the header that comes from the dictionary.
Go to the doinit method of the view controller and set the properties for the ALV table. We can
also do it in the doinit method of the component controller by adding the alv controller usage to
the properties of the component controller.
Page 540
Step 1: Instantiate the used component.
Coding will be generated as
below.
This coding calls the method created for the component usage for ALV Component. It checks
for the active component usage and if there is no active component usage then it creates one.
Step 2: Method call in the used controller.
The ALV table has an interface method called get_model which will return the ALV
configuration model.
Page 541
Call the get model method of the ALV component using the code wizard method call in used
controller.
The object reference for the ALV configuration table class is now contained in the variable
LV_VALUE.
Page 542
This class now contains a number of interfaces which contains method for setting the different
properties of the ALV table.
In order to change the header text of the column, we will use the method get_column of the
interface if_salv_wd_column_settings. This method will return the object reference to the
column.
Page 543
Using pattern call the method get_column of the interface.
Modify the coding as below.
Now we have obtained the object reference for the column. Using the object reference for the
column get the object reference for the header of the column. Call the method get_header of the
Page 544
class to get the object reference of the header.

Change the coding as below.
Page 545
Now we have obtained the object reference of the header. Using the method set_text of the class
for header set the user defined text for the column.

Change the default binding value for the column as none as shown below.

CODE:
* Instantiate the used component.
DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE.
Page 546
LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ).
IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL.
LO_CMP_USAGE->CREATE_COMPONENT( ).
ENDIF.
* Method call in the used controller
DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ).
DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE.
LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL(
).
* Getting the object reference of the column.
DATA LO_EBELN TYPE REF TO CL_SALV_WD_COLUMN.
CALL METHOD LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN
EXPORTING
ID = EBELN
RECEIVING
VALUE = LO_EBELN.
* Getting the object reference for the header
DATA : LO_HEADER TYPE REF TO CL_SALV_WD_COLUMN_HEADER.
CALL METHOD LO_EBELN->GET_HEADER
RECEIVING
VALUE = LO_HEADER.
* Setting the user defined text
CALL METHOD LO_HEADER->SET_TEXT
EXPORTING
VALUE = PO Number.
LO_HEADER->SET_PROP_DDIC_BINDING_FIELD(
PROPERTY = IF_SALV_WD_C_DDIC_BINDING=>BIND_PROP_TEXT
VALUE = IF_SALV_WD_C_DDIC_BINDING=>DDIC_BIND_NONE ).
Output:
Page 547
Page 548
Coloring the column cell ALV
Now let us see how to change the color of the column.

below.
Page 549
This coding calls the method created for the component usage for ALV Component. It checks
for the active component usage and if there is no active component usage then it creates one.
controller.
LV_VALUE.
Page 550
In order to change column properties, we will use the method get_column of the interface
if_salv_wd_column_settings. This method will return the object reference to the column.
Page 551
Now we have obtained the object reference for the column.
Page 552
Using the method set cell design of the column change the background color of the cell.
Change the generated coding as
below.
activate the whole component. Test the application.
Save and
Code:
ENDIF.
Page 553

).
EXPORTING
ID = EBELN
RECEIVING
VALUE = LO_EBELN.
CALL METHOD LO_EBELN->SET_CELL_DESIGN
EXPORTING
VALUE = CL_WD_TABLE_COLUMN=>E_CELL_DESIGN-POSITIVE
.
Output:
Page 554
ALV With Link to Action
Now let us see how to create a link to action in the ALV table.
below.
This coding calls the
method created for the component usage mentioned earlier in the section. It checks for the active
component usage and if there is no active component usage then it creates one.
Page 555

controller.
LV_VALUE.
Page 556
In order to change column properties, we will use the method get_column of the interface
if_salv_wd_column_settings. This method will return the object reference to the column.
Page 557
Now we have obtained the object reference for the column using which we can set the cell editor
of the column using the method set_cell_editor of the class cl_salv_wd_column.
Page 558
This method requires an importing parameter with the generic type for the cell editor. We need
to create a object of type of cell editor required and pass it to this method so that the
corresponding type will be set as a cell editor to the column.
Every type of UI element has a class associated with it which begins with the name
cl_salv_wd_uie_* . Create an object for that class and pass it to the set cell editor method of the
class.
Call the method set text of the class for link to action to set the text for the hyper link.
Page 559
Call the set cell editor method and pass the object for link to action to that method.
Pass the object to it.

Page 560
Output:
Code:
ENDIF.
).
EXPORTING
ID = EBELN
RECEIVING
VALUE = LO_EBELN.
Page 561
* Creating an object of cell editor type required.

DATA : LO_LINK TYPE REF TO CL_SALV_WD_UIE_LINK_TO_ACTION.
CREATE OBJECT LO_LINK.
* Set the text for hyperlink
CALL METHOD LO_LINK->SET_TEXT_FIELDNAME
EXPORTING
VALUE = EBELN
.
* Setting the cell editor of the
CALL METHOD LO_EBELN->SET_CELL_EDITOR
EXPORTING
VALUE = LO_LINK.
To proceed with the action of what has to happen next on the click of link we need to know the
where exactly or what value the user has selected. Once we get to know that we can proceed with
the action we want. Be it display the item details on a separate table or whatever the requirement
is.
Now let me throw a message on what value the user has selected.
Go to the methods tab of the View controller and create an event handler method.
Assign the event handler method to the ON_CLICK event of the ALV component. Because this
is the event triggered by the system when the user click on the Cell in the ALV component. By
registering this event to our event handler method, our event handler method will be called when
Page 562
the user performs the action on the cell and what has to happen next can be controlled here.
Page 563
If you see the importing parameter of this event handler method there will be an importing
parameter call r_param which is a reference variable of some ALV Interface.
The attributes of this interface will provide us with the sufficient information which we need to
know like which row, particular column in the ALV table the user has performed.
Attributes of this interface is as below.
The attribute Value will gives us the value of the cell that the user has selected. This attribute is
of type data reference variable and we can get it in a field symbol.
Code as below in the event handler method:
Now the field symbol will be containing the value of the selected cell.
Display the message as shown below.
Page 564
Using code wizard generate the codes.
Modify the generated code as below.
Output:
Page 565
ALV Cell Editable

In the previous blog we have seen how to display a simple ALV report, In this blog we will see
how to make a column of an ALV Table as a Editable. We will proceed with the same
component which we created in the previous blog.
Go to the method WDDOINIT and at the end of the business logic we have written in this
method do the following.
Step 1 : Instantiate the used component to ensure that the component usage of the ALV is active.
Go to code wizard and select the radio button instantiate the used component and provide the
component using F4 help.
Page 566
From the F4 help choose the component which we need to instantiate.
Page 567
The following code will be generated as below.
Page 568
Whenever a component has been added to the interface controller of the view, a method will be
created in the interface of the view whose naming convention will be wd_cpuse_ followed by the
component name which we provided. You can see the interface created for the view in the
attributes tab, the name of the interface will be if_ followed by the view name. This method will
return the object reference for the component usage.
Using this object reference we are checking the method has active component which will return
x in case if the component is active and space in case there are no active components. If there is
no active component in that case we will create the component using create component method.
Step 2 : Call the method in the used controller.
Choose the radio button Method call in the used controller.
Page 569
Select the interface controller of the ALV.
Page 570
Choose the method get_model and press enter.
Page 571
Page 572
Following code will be generated.
Page 573
Similar to that of the method which returns the component usage object reference, a method with
naming convention wd_cpifc_ will be generated in the interface for the view which returns the
object reference for the interface of the ALV Component.
Using the interface object reference, calling the method get model will give the object reference
for the class CL_SALV_WD_CONFIG_TABLE.
CL_SALV_WD_CONFIG_TABLE : Is the class where the standard functionalites of the ALV
component can be modified.
In previous step we have created object to this class name lv_value.
Using this object now we can access the method of this class and modify the functionality.
Step 3:
Now to make the column editable we need to get the columns in the ALV table.
To access the columns do the following.
Page 574
Click on pattern, then choose the radio button abap object patterns and press enter.
Enter the class name CL_SALV_WD_CONFIG_TABLE.
Choose the get_columns method which belongs to an interface if_salv_wd_column_settings

using the F4 help.
Page 575
Following codes will be generated.
Page 576
Do the following modifications in the code. Replace the object reference me with the object that
was generated earlier to the configuration table class.
Replace the object reference me with the object lv_value we created for the class
cl_salv_wd_config_table.
Create a table similar to the receiving parameter of the method
IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS. You can see this by double clicking
on the method and seeing the associated type of the parameter value.This methods return the
values of type SALV_WD_T_COLUMN_REF which is a table type and
SALV_WD_S_COLUMN_REF is a line type for the same.
Create an internal table of this type and receive the values using the method.
* Call the method Get_coulms of Interface if_wd_table_column_settings
* to change the property of the columns.
data : lt_columns type SALV_WD_T_COLUMN_REF,
ls_columns type SALV_WD_S_COLUMN_REF.
Page 577
CALL METHOD LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMNS

RECEIVING
VALUE = lt_columns.
The received parameter line type consist of two fields.
The field ID stores the value of the Column ID which is nothing but the attribute names of the
context which we are binding say for Example BUKRS.
The second field R_COLUMN refers to the class CL_SALV_WD_COLUMN which actually
contains the methods related to the column of alv. This class CL_SALV_WD_COLUMN
contains a method call SET_CELL_EDITOR which is used to Set the type of UI element that
column should posses. This method require an object as an Importing parameter and that object
should point to a UI element class for ALV.
If you go to the Tcode SE24 and search with CL_SALV_WD_UIE* you will be able to find the
list of classes available for different UI element for ALV.
Create a reference variable for the class CL_SALV_WD_UIE_INPUT_FIELD.
data : lo_bukrs type ref to cl_salv_wd_uie_input_field.
loop at lt_columns into ls_columns.
case ls_columns-id.
when bukrs.
* Creating an object for the class passing the input parameter for the constructor of the class
create object lo_bukrs exporting value_fieldname = ls_columns-id.
* Passing the object to the set cell editor method.
Page 578
ls_columns-r_column->set_cell_editor( lo_bukrs ).
endcase.
endloop.
Still we will not be able to see the column as editable because the table read only property will
shade the input mode property which we have set for out column.
So we have to change the property of the ALV table using the interface
IF_SALV_WD_TABLE_SETTINGS. Call the method set_read_only and set the exporting
parameter value as ABAP_FALSE which would previously be ABAP_TRUE.
Page 579
Modify the code as shown below.
Now save and activate the component. Test the application.

Codings In WDDOINIT Method.
method wddoinit .
Page 580

select * from ekko into corresponding fields of table lt_ekko up to 5 rows.
lo_nd_ekko->bind_table( new_items = lt_ekko set_initial_elements = abap_true ).
* making and column editable.
* instantiate the used component alv.
lo_cmp_usage = wd_this->wd_cpuse_alv( ).
endif.
* call the method in the current controller
data lo_interfacecontroller type ref to iwci_salv_wd_table .
lo_interfacecontroller = wd_this->wd_cpifc_alv( ).
data lv_value type ref to cl_salv_wd_config_table.
lv_value = lo_interfacecontroller->get_model( ).
* call the method get_coulms of interface if_wd_table_column_settings
* to change the property of the columns.
data : lt_columns type salv_wd_t_column_ref,
ls_columns type salv_wd_s_column_ref.
call method lv_value->if_salv_wd_column_settings~get_columns
receiving
value = lt_columns.
data : lo_bukrs type ref to cl_salv_wd_uie_input_field.
loop at lt_columns into ls_columns.
case ls_columns-id.
when bukrs.
create object lo_bukrs exporting value_fieldname = ls_columns-id.
ls_columns-r_column->set_cell_editor( lo_bukrs ).
endcase.
Page 581
endloop.
call method lv_value->if_salv_wd_table_settings~set_read_only
exporting
value = abap_false.
endmethod.
Output:
In the output we can see the company code in Editable mode.
Page 582
Drop down by Index and Button in ALV

Introduction: In this topic we are going to discuss how to set a drop down and button in the
ALV report using Webdynpro ABAP.
SALV_WD_TABLE is a standard webdynpro component which can be reused in our component
to create a ALV report. This component by default will have the columns of the report as a text
view UI element. Now let us see how to access these column and convert it into a drop down UI
element.
Scenario : Like in the section drop down by index in table we will create a report which displays
the observation and set the status field as drop down containing values open and close.

Step 2: To reuse the functionality of the standard webdynpro component into our component
include the standard webdynpro component SALV_WD_TABLE in the used component of the
component framework.
Page 583
For the methods of the used external component to be accessed in our view add the interface
controller of the alv component to our component.
Actually, there are ways of using the external component.
1. Component usage with the controller access.
2. Component usage without the controller access.
Component usage without the controller access.
If we only wants to display the external component without modifying the data of its interface
controller or use its functions we can omit the declaration of the interface controller in our
controller.
Page 584
Component usage without the controller access.

If we wants to modify the data or use its function then we have to declare the interface controller
of the external component in the properties tab of our view.
Page 585
In our case as we are going to access the functionality of the external component we need the
interface controllers access.
Click on create controller usage.
Double click on the interface controller in the popup to add the interface controller of the ALV to
our view.
Page 586
Doing so will create a two methods in the interface created for the view at the time of creation of
component. You can see the view in the attributes tab of the view controller if_ followed by the
name of the view.
Page 587
The two methods are namely,
The first method wd_cpifc_ followed by the name which we have provided for the component in
the used component list of the component framework will be created. This will get us the object
reference for the interface controller of the ALV component.
Remember, three type of interface will be created at the time of creation of any component with
naming conventions namely.
If_ This type of interface is created in every controller followed by the controller name and the
methods in this interface can be accessed only within those controller.
IG_ this type of interface are created in the component controller and the methods in this
interface are accessible across the controller. This interface is used for the cross controller
communication within the component. These methods cannot be accessed via other components.
IWCI_ followed by the name of the component avoiding z in case of custom component will be
created at the time of creation of component. This interface is used for the cross component
communication.
The first method which I indicated earlier will provide me the object reference for the ALV
components interface controller using which component which we are creating now will
communicate with the ALV component and access the methods of the ALV component to use its
functionality.
Page 588
The second method wd_cpuse_ followed by the name which we have provided for the
component in the used component list of the component framework will be created. This will get
us the object reference component usage for the ALV component created in our controller. By
the above step you would now be able to see the component usage for the ALV component
created in our component which will not be earlier adding the interface controller to our view
controller.
Step 3 : Go to the layout tab of the view controller and create a view container UI element as
shown below.
Page 589
The purpose of this view container UI element is to hold the view of the another component or
another view of the same component. Since we are reusing the functionality of the standard
webdynpro component the result will be displayed in the view of that component. In order to
display the result in our window we created a view container element and bring the view of
the ALV component in our window.
Step 4 : Now go the window tab of the window controller, to add the view of the ALV
component to the view container UI element which we have inserted earlier.
Expand the view embedded in the window and right click on the view container UI element to
embed a view.
Select the view to be embedded using F4 help.
Page 590
Select the Table View of the ALV component.
Page 591
Now we have added the Table view of the ALV component which displays the output to the
view in our window. Now when the component executes it display the output and it will be
displayed in our window.
So far we have created the means to display the data in our window. Before that we have to pass
the data to the external component so that it will process the data and display it in the table view
of the component which can be viewed in our window.
To pass the data create a context node in the component controller of required structure. In this
scenario I am going to display the serial number, observation and status of which status will be a
drop down.
Step 5: Create the context node in the component controller as shown below.
Page 592
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the context node as shown below.
Page 593
Enter the attribute name and type of attribute and press enter.
Similarly create two other attributes observation and status of type string.
Page 594
Now go to the context tab of the view controller and drag and drop the context node of the
component controller in the view controller to be accessible by the view.
Now pass the data to the external component via component usage. If you see in the interface
controller usage which we created for the ALV component, it has a context node call data.
Mapping the context node observation which contains our data to the data node of the interface
controller will facilitate the data transport to external component. (Note : See binding concept for
more clarity on this).
Page 595
Click on the create controller usage.
Choose the component controller from the Pop-Up.
Page 596
Map the context node to the data context node.
You will now be able to see the change in the binding direction of the context node data.
Page 597
Step 6: In the doinit method of the view controller add some records to the context node to be
displayed in the ALV output table.
Set the node as table operation.
Note : I have removed the unwanted code.

Page 598

Step 7: Create an application and test the component.
Output:
Page 599
In this result let us make the status column to be drop down.

Step 8 : Go to the context tab of the component controller and add a attribute to the context node
to hold the values of the drop. The type of the attribute must be of a table type that holds n no of
records for the drop down list. SAP has provided with a standard table type for setting the drop
down. WDR_CONTEXT_ATTR_VALUE_LIST
This table type has the structure that contains fields.
Value field of the structure is the key indicator and the text field holds the value for the drop
down.
Create an attribute in the component controller as shown below.
Page 600
Update the context node in the view controller.
Page 601
Delete the external mapping to the data node of ALV component usage and redefine it again.
Redefine the mapping by dragging and dropping the context node of the component controller to
the data node of the alvs component usage as we did earlier.
Step 9 : Go to the doinit method of the view controller and do the following to change the
settings of the ALV component.
Instantiating the used component:
Page 602
Regardless of whether we are using the component usage with or without the controller access it
has to be instantiated to check whether the component usage is active or not.
In the general tab of the code wizard, select the radio button instantiate the used component and
select the component use using the F4 help and click on enter button.
This code get the object reference of the component usage using the method which was created
in the at the time of adding the interface controller access to the properties tab of my view.
Method call in the current controller:
To access the functions of the interface controller of the ALV component and to utilize these
functions I need the object reference to the interface controller of the ALV component.
In the general tab of the code wizard, click on the radio button method call in the current
controller and select the interface controller of the alv using the F4 help. Call the method get
model to get the object reference for the configuration class of ALV table.
Page 603
Using the object reference to the configuration call CL_SALV_WD_CONFIG_TABLE all these
below mentioned settings to the alv table can be configured.
Code from the code wizard will be generated as below.
This code gets the object reference of the alv interface controller using the method which was
created in the interface of the view which I mentioned earlier.
Using the object reference to the interface controller of the select option it access the method
get_model of the cross component interface IWCI_SALV_WD_TABLE which in turn returns
the object reference to the configuration class of the ALV table.
Now we got the access to the table, we need the object reference of the column in the table to
modify that column with the cell editor we want.
The table configuration class consist of a interface IF_SALV_WD_COLUMN_SETTINGS
which contains a method get_column which will return the object reference to the column.
Using pattern call the get column method of the class for the ALV table.
Page 604
Code will be generated as follows.
Replace the object reference me with object reference referring to the class and pass the attribute
of the context node which will be the ID of the column and get the object reference that the
method is returning by creating a variable of returning type.
Page 605
This will now contain the object reference for the column of type cl_slav_wd_column. Using the
methods of this class we can modify the settings of the column.
This class contains a method called set cell editor which determine the type of UI element the
column is supposed to have. By default it will be a text view. To change the cell editor of the
column we need to pass the object reference of class belonging to the UI element type to the
importing parameter of this method.
Let us create an object reference for the drop down UI element class.
In tcode SE24 for class builder, if you search with CL_SALV_WD_UIE* it will list you the list
of class for the cell editor available. Choose the class
CL_SALV_WD_UIE_DROPDOWN_BY_IDX for the drop down by index UI element.
The constructor method of the class for drop down has an importing parameter
selected_key_fieldname to which we need to pass the attribute of the field for which we are
going to set the drop down.
Page 606
Write the coding as below.
Now the object has been created, now we have to specify the valueset for the drop down. There
is a method SET_VALUESET_FIELDNAME in the class for the drop down which determines
which attribute of the context node contains the values for the drop down In our case it the
valueset attribute.
Let us set the valueset attribute to the SET_VALUESET_FIELDNAME so that it will pick the
drop down values what we populate in the valueset attribute and display it.
Then set the type of the drop down using the same class method set_type.
This will determine what kind of dropdown is to be displayed in the screen.

Now let us pass this object to the set cell editor method of the column and change the cell editor
to drop down.
Page 607
Using the object reference to the column we have now set the cell editor of the column. The
ALV table which was displayed by default will be an read only and it will overshade the drop
down UI element which was created so let us disable the read only property of the table.
The the object reference of the configuration class for the table set the read only property of the
table to be false.
Now put the value set for the drop down in the attribute valueset and bind it to the context node.
Load the drop down valueset in the internal table of type which we have provided for valueset
attribute and pass it to the valueset attribute and bind it.
Output :
Page 608
Codings in DOINIT method.

DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_OBSERVATION TYPE WD_THIS->ELEMENTS_OBSERVATION.
DATA LS_OBSERVATION TYPE WD_THIS->ELEMENT_OBSERVATION.
* Getting the object reference of the context node observation
LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_OBSERVATION ).
data : ls_valueset type WDR_CONTEXT_ATTR_VALUE,
lt_valueset type WDR_CONTEXT_ATTR_VALUE_LIST.
ls_valueset-VALUE = 01 .
ls_valueset-TEXT = OPEN.
append ls_valueset to lt_valueset.
clear ls_valueset.
ls_valueset-VALUE = 02 .
ls_valueset-TEXT = CLOSED.
append ls_valueset to lt_valueset.
clear ls_valueset.
* Populating some records in the context node.
ls_observation-sno = 1.
ls_observation-observation = Material not in shape.
ls_observation-status = .
ls_observation-valueset = lt_valueset.
Page 609
append ls_observation to lt_observation.

clear ls_observation.
ls_observation-sno = 2.
ls_observation-observation = Material finishing done.
ls_observation-status = .
ls_observation-valueset = lt_valueset.
append ls_observation to lt_observation.
clear ls_observation.
* Bind the datas to the context node.
LO_ND_OBSERVATION->BIND_TABLE( NEW_ITEMS = LT_OBSERVATION
SET_INITIAL_ELEMENTS = ABAP_TRUE ).
* ALV Settings.
* Instantiating the used component.
ENDIF.
* Method call in the current controller.
).
* Get the column address of the table whose cell editor we need to change as drop down.
data : lo_status type ref to CL_SALV_WD_COLUMN .
EXPORTING
ID = STATUS
RECEIVING
VALUE = lo_status.
* Creating an object for UI element.
data : lo_drop type ref to CL_SALV_WD_UIE_DROPDOWN_BY_IDX.
Page 610
create object lo_drop exporting selected_key_fieldname = STATUS.

* Set the valueset of the field name
CALL METHOD LO_DROP->SET_VALUESET_FIELDNAME
EXPORTING
VALUE = VALUESET.
* Set type
CALL METHOD LO_DROP->SET_TYPE
EXPORTING
VALUE = IF_SALV_WD_C_UIE_DRDN_BY_INDEX=>TYPE_KEY_VALUE.
* Making the cell as a drop down
CALL METHOD LO_status->SET_CELL_EDITOR
EXPORTING
VALUE = LO_DROP.
* Setting read only
CALL METHOD LV_VALUE->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY
EXPORTING
VALUE = ABAP_FALSE.
Now in the same applicaton let us introduce a column which contain a button UI element for
each row and based upon the selected drop down value it submits the data in the database table.
Go to the context tab of the component controller and add an attribute button of type string.
Page 611
Go to the view controller and update the mapping. Alse delete the external mapping in the
interface controller of the component usage and map it again.
Like in similar way we got the object reference of the status column, get the object reference of
the button column.
Create a object for the button UI element and set it to the cell editor of the column like we did
before.
CL_SALV_WD_UIE_BUTTON is the class for the button UI element and the constructor
method of this class does not have any importing parameters.
Page 612
Using the object reference for the button class set the lable and other property for the button
using the methods of the class for button UI element.
Using the object reference for the column set the cell editor of the column.
Now when a button is being click a certain action has to be triggered. We need an event handler
method associated with the button which is to be executed on the click of the button and we
execute our logic.
Page 613
Go to the methods tab of the view controller and create an event handler method as shown
below.
Now register this event handler method to the event of the ALV because we have place the
button in the alv table and when we click on the button it will be known only to the alv
component.
From the F4 help choose the event for the button click in the ALV.
Page 614
Now we have registered our method for the on_click event of the alv component. Whenever a
button has been clicked in the screen it will now call our event handler method.
If you double click on the event handler method and go inside the method you will see two
importing parameters for the method.
The importing parameter r_param is an object reference to the interface if_salv_wd_table_click

and this interface consist of the required attributes.
Page 615
The attribute of this interface provides various of information like the index where the button has
been clicked in the column, attribute id and so on.
To get to know the row item from the the button ui element has been triggered we can make use
of the index attribute.
Do the following to get the row item of the selected button.
Using code wizard read the node observation without table operation.
Page 616
Note : I have removed the unwanted codes.

Pass the index to the get element method to get the element object reference for the row which
has been selected.
Now by passing the index we got the element object reference for the selected index and by
accessing the method get static attributes using the element object reference we got the row item
for the selected index in the work area ls_observation.
Save and activate the whole application.Test the application, in debugger we will see the whether
we are getting the selected row item.
I am selecting the drop down of the second row as open and clicking on submit button.
Page 617
If you see the work area it will contains the values of the selected button row. The status field
will not contains the direct text open or close it will get the value which we have provided at the
time of binding like 01 for open. Passing that to the internal table containing the valueset will
give us the exact datas. With these information we can further proceed and process our data and
store it in the table.
Codings in the doint method for button.
* Get the object reference of the column button.
data : lo_button type ref to CL_SALV_WD_COLUMN .
EXPORTING
Page 618
ID = BUTTON
RECEIVING
VALUE = lo_button.
* Create a object for the button
data : lo_but TYPE REF TO CL_SALV_WD_UIE_BUTTON.
create object lo_but.
LO_BUT->SET_ENABLED( ABAP_TRUE ).
LO_BUT->SET_IMAGE_SOURCE( ICON_SUBMIT ).
LO_BUT->SET_TEXT( SUBMIT ).
* Setting the cell editor of the column as button.
CALL METHOD LO_BUTTON->SET_CELL_EDITOR
EXPORTING
VALUE = LO_BUT.
Codings in the onsubmit method.
DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_OBSERVATION TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_OBSERVATION TYPE WD_THIS->ELEMENT_OBSERVATION.
LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_OBSERVATION ).
LO_EL_OBSERVATION = LO_ND_OBSERVATION->GET_ELEMENT( R_PARAM>INDEX ).
LO_EL_OBSERVATION->GET_STATIC_ATTRIBUTES(
IMPORTING
STATIC_ATTRIBUTES = LS_OBSERVATION ).
There may be a scenario in which a particular user will wants the column to be visible and
invisible for certain users. Now let us see how to hide the columns.
The class for the column contains a method called set visible using which we can set the
visibility of the column.This method by default will have the visible property as visible which we
have to make none in order to make the column invisible. We have already obtained the object
reference to the column button using which I am going to hide the column.
Page 619
Using the object reference to the column call the method set visible and set the visible property
as none.
Test the output:
Page 620
Creating a Tcode for a

Webdynpro component
In this tutorial we will see how to create a tcode for a webdynpro application. The output of the
webdynpro application can not only viewed in the browser but also in the SAP GUI itself. We
can also create a tcode for opening the webdynpro application in the browser also by calling the
tcode.
In this tutorial I am going to create a Tcode for the webdynpro component

ZCSK_TABLE_LINK .
Step 1: Go to the Tcode SE93 and create the transaction code.
Enter the name for the Tcode and click on create button.
Enter the short description and choose the radio button transaction with parameters.
Page 621
Enter the default values for the transaction as WDYID and check the checkbox skip initial
screen.
Enter the default values for the screen field parameters as below.
Page 622
Save and assign the object to a package or a local object.

Press F8 to test the Tcode.
Output:
If you set the start mode as browser then calling the Tcode will display the output in the browser.
Possible parameter entries:
Page 623
Page 624
Context change log

In many applications it is necessary to capture the changes made by the user in the screen.
Imagine you have a number of UI elements in the screen and the user changes the value of only
one field and click on some action. We may not exactly which UI element he has made the
changes. We will read all contexts binded to the UI element and process the data. This may cause
a negative impact on the performance as you process the huge amount of data even though the
user has not done any actions on those data.
Imagine I have a table that displays the data in a editable mode and the user has the provision to
update the data in the table and update it back on the database table on the click on submit
button.
At this point of time we may not know which row he has exactly edited. We simply read all the
records in the table and process it in the loop and also update the records which are not modified
back in the database table.
Hence it is necessary to optimize the performance. Each context node has the provision to store
the information about itself. We dont have to process all the context nodes that are available in
the controller; instead there is a Webdynpro framework which provides which particular context
has been changed using change log function.
Within the controller all the information about the changes made to the context nodes of the
controller is stored in a single internal table. At runtime we can access this table and based on the
values in the table we can process the data.
It is like a recorder that records the user entries with relevant informations.
Note: This only captures the changes made by the user in the screen. It does not capture the
changes to context element made through programming.
Page 625
Context Changes are recorded only for the original nodes in that controller and not for the
mapped nodes.
In the case of OVS value helps and freely programmed value helps, the new value is not entered
automatically into the table but must be entered actively using method
ADD_CONTEXT_ATTRIBUTE_CHANGE of interface IF_WD_CONTEXT, provided an entry
is desired.
By default the change log function in any controller will be disabled. We need to activate the
change log function in order to use its functionality.
We activate it through the interface if_wd_context in any controller. This interface in contrast to
if_wd_context_node not only refers to the root context but also to the context as the whole.
Methods of the interface if_wd_context and its uses:
The internal table that contains the user defined types is of type
WDR_CONTEXT_CHANGE_LIST.
The component of internal table is as follows.
Page 626
Example program given by SAP: DEMO_CONTEXT_CHANGES.

Now let us see an example on how to use the change log function.
Step 1: Create a table that displays the data in the editable mode.
Create a table as in the link that displays the flight detail as below.
Output:
Code in the method doinit:
Page 627
Step 2: Create a context node with structure of the internal table

WDR_CONTEXT_CHANGE_LIST that the change log function returns the output.
Enter the name for the node and provide the dictionary structure as the line type
WDR_CONTEXT_CHANGE of the table type WDR_CONTEXT_CHANGE_LIST.
Page 628
Click on add attribute from structure and choose all the fields and press enter.
Change the type of attribute as string for node, old_value and new_value.
Page 629
Step 3: We will proceed from here. Go to the layout tab of the view controller and insert a button
UI element.
Provide ID and Type for the UI element.
Change the Text property of the Button UI element and create an action for the button UI
element.
Page 630
Step 4: Insert a table UI element. Right click on the table and select create binding.
Choose the context node as changes and press enter.
Step 5: As I mentioned earlier the change log function by default will be deactivated in the
controller. Lets activate the change log function to capture the changes made by the user.
Go to the doinit method of the view controller and activate the change log.
Page 631
We need the object reference to the interface if_wd_context to activate the change log. There is a
method called get_context in the interface if_wd_context_node which returns the reference
variable of type if_wd_context.
Using pattern call the method to get the interface of the context.
Page 632
Using the object for context call the method enable change log of the interface to activate the
change log function.

Now we have activated the change log function.

Step 6: Now there is a method called get_change_log which will return the changes in the user
entries in the form of the internal table specified. This method cannot be called inside a event
handler method. Hence we will create a method and call this method inside it to get the change
log.
Page 633
Go to the methods tab of the view controller and create a method get_log.
Inside the method get the data reference for the context as we did before in the doinit method and
call the method get_change_log of the interface to get the change log in the form of internal
table.
Page 634
Call the method get_change_log.

Page 635
Now the change log has been captured in the internal table. Export this internal table contents so
that these change log can be accessed inside an event handler method.
Code in the method GET_LOG:

DATA : LO_CONTEXT TYPE REF TO IF_WD_CONTEXT.
CALL METHOD WD_CONTEXT->GET_CONTEXT
RECEIVING
CONTEXT = LO_CONTEXT.
CALL METHOD LO_CONTEXT->GET_CONTEXT_CHANGE_LOG
RECEIVING
CHANGE_LIST = IT_CHANGES.
.
Step 7: Go to the event handler method created for the button and get these changes and bind it
on the context for the changes.

Get the changes in the event handler method as below.
Page 636
Set the internal table content to the node changes.
Modify the generated code as below.

Code in the event handler method is as below.
DATA : IT_CHANGES TYPE WDR_CONTEXT_CHANGE_LIST.

IT_CHANGES = WD_THIS->GET_LOG( ).
Page 637
DATA LO_ND_CHANGES TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LT_CHANGES TYPE WD_THIS->ELEMENTS_CHANGES.
DATA LS_CHANGES TYPE WD_THIS->ELEMENT_CHANGES.
DATA : WA_CHANGES LIKE LINE OF IT_CHANGES.
FIELD-SYMBOLS : <FS_VALUE> TYPE ANY.
FIELD-SYMBOLS : <FS_VALUE_NEW> TYPE ANY.
LO_ND_CHANGES = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_CHANGES ).
LOOP AT IT_CHANGES INTO WA_CHANGES.
LS_CHANGES-NODE_NAME = WA_CHANGES-NODE_NAME.
LS_CHANGES-SEQUENCE = WA_CHANGES-SEQUENCE.
LS_CHANGES-NODE_PATH = WA_CHANGES-NODE_PATH.
LS_CHANGES-CHANGE_KIND = WA_CHANGES-CHANGE_KIND.
LS_CHANGES-ELEMENT_INDEX = WA_CHANGES-ELEMENT_INDEX.
LS_CHANGES-ATTRIBUTE_NAME = WA_CHANGES-ATTRIBUTE_NAME.
ASSIGN WA_CHANGES-OLD_VALUE->* TO <FS_VALUE>.
LS_CHANGES-OLD_VALUE = <FS_VALUE>.
ASSIGN WA_CHANGES-NEW_VALUE->* TO <FS_VALUE_NEW>.
LS_CHANGES-NEW_VALUE = <FS_VALUE_NEW>.
APPEND LS_CHANGES TO LT_CHANGES.
CLEAR LS_CHANGES.
ENDLOOP.
LO_ND_CHANGES->BIND_TABLE( NEW_ITEMS = LT_CHANGES
SET_INITIAL_ELEMENTS = ABAP_TRUE ).
Note: Do not pass any value to the attribute node as it is a reference variable it will cause dump
as it of reference variable type.
I have converted the data reference variable old_value and new_value into string and binded to
the table.
Save and activate the whole component and test the output.
Page 638
Output:
Change some values in the table and click on get changes. I am changing the values of the first
record.
Page 639
Service Call
With the help of the service call function it is possible to call an existing function module from
within a Webdynpro component.
To simplify the creation process we have a wizard. Using the wizard automatically creates the
required context elements and the methods that call the function module with required
parameters in the controller we choose.
A Simple Example
You wish to read data from a database table and display it in a view with the help of an existing
function module. For this purpose, you have created a service call for the function module in
your Webdynpro component. The global controller that you have chosen or created during the
creation procedure now contains the required context nodes and attributes as well as a method
for calling the function module.
Now let us see a simple example of creating a service call.

Scenario: I have a remote enabled function module BAPI_FLIGHT_GETDETAIL which will
return me the availability of the seats for the airline given the inputs like airline id, connection id
and flight date. I want to make use of this function module in my webdynpro component. Lets
see how to create a service call for this function module.
The interface of the function module is as below. It gets the importing parameter airline id,
connection id and flight data and returns the availability of seats.
Page 640
Page 641

Step 2: Right click on the component and choose service call to start the wizard for service call.
Wizard for the service call will be opened. Click on continue it will ask for the controller.
Page 642
Choose the radio button use existing controller and select the component controller using f4 help.
This step is to choose the controller where you wanted the nodes and method to be created. If
you want you can create a new controller and assign the nodes and methods there.
Page 643
Select the service type as Function module as we wanted to get the functionality of the function
module. We can also create a service call for the methods of the class.
Page 644
Enter the name of the function module and click on continue. This step is to provide the name of
the function module for which you want the attributes nodes or method to be created. Provide the
destination name if this RFC is to be called from another server.
Page 645
Choose the object type as the context so that context node will be created in the controller. Do
the same for all importing parameter airline id, connection id and flight date and exporting
parameter availability.
Page 646
Specify the name for the method to be created and click on continue.
Page 647
Click on complete to complete the wizard.
Page 648
In the context tab of the component controller you will now be able to see the context nodes
created.
Page 649
In the methods tab of the component controller you will see the method created with the
functionality inside it. It will get the value of the importing context node and pass it to the
function module and get the result and bind it back to the exporting parameter.
Page 650
Step 3: Go to the context tab of the view controller and drag and drop the nodes generated in the
component controller to make the node accessible to the view controller.
Page 651
Step 4: Go to the layout tab of the view controller and create the UI elements to get the input and
display the output.
Click on the code wizard to generate the layout using the wizard.
Select the form and press enter to continue.
Page 652
Choose the node importing form the context and select the checkbox to create the UI element in
the new container and select the layout as matrix layout.
Page 653
Layout will be created as below.
Step 5: Create a button UI element and an action for the button UI element.
Page 654
Enter the text for the button and create an action for the button UI element.
Step 6: Choose the code wizard again to set the output table.
Page 655
Select the table and click on continue.
Choose the context node exporting and the cell editor as text view and press enter.
Page 656
Table will be created as below in the layout.
Step 7: Go to the action for the button UI element and call the method created in the service call
using the instance provided in the view controller to call the component controller objects.
Page 657

Step 8: Create an webdynpro application to test the component.
Page 658
Output:
Enter the input details and click on get details button to see the output.
Page 659
Page 660
Supply function with singleton concept

Supply Function:
Supply functions are assigned to the context node of the controller. This function is called by the
runtime when the context node is accessed. Supply functions are called when:
1. One or more elements of the context node are accessed.
2. Context node is not filled yet or Initial
3. Context node has been invalidated in previous step
Why should one go for supply function when they can even initialize the values for the node in
the DOINIT method of controller? DOINIT method is called only at the time of initialization of
the component where as supply function is called each and every time the element of the context
node is accessed. Say for example you have a parent node and a child node. If you wanted to
initialize the values of the child node based on the values of the parent node then you can use
supply function to do the job.
Supply function is especially useful in combination with singleton nodes. The values of child
node elements of the type Singleton depend on the element of the parent node to which the lead
selection is currently assigned. If the lead selection is changed by the user, the supply function
can access the new lead selection element and recalculate the values of the child node elements
accordingly.
Singleton Node:
Singleton node property specifies that the elements of the node are instantiated only for the
element that bears the lead selection. If the lead selection was initialized automatically then the
first element gets initialized automatically. For more information on singleton property and lead
selection refer to sap link:
http://help.sap.com/saphelp_nw70ehp2/helpdata/en/47/45641880f81962e10000000a114a6b/fram
eset.htm
Lets us create an example that explains the supply function and singleton property.
Page 661

Step 2: Go to the layout tab of the view controller and create a context node as shown below.
Page 662
Create a child node for the node as shown below.
Page 663
Enter the name, choose the cardinality for the node and provide the name for the supply function
and press enter.

Page 664
Create an attribute for the node TYPES of type string.
Page 665
Create a Sub node for the node TYPES as shown below.
Page 666
Enter the name, cardinality and name for the supply function.
Create an attribute to the sub node of type string.
Page 667
Your context node structure will now look like.
Step 3: Go to the layout tab of the view controller and insert a tree UI element.
Page 668
Bind the data source property of the Tree UI element to the Node NODE.
Page 669
Fill the properties of the Tree UI element as shown below.
Right click on the tree UI element and choose insert node type.
Page 670
Provide the ID and type.
Bind the data source property to the node TYPES and text property to the text attribute of the
node TYPES.
Page 671
Again right click on tree UI element and select insert node type.
Page 672
Provide ID and type. This time choose the node type as Item to be displayed as the subtype.
Bind the data source property to the node SUBTYPE and text property to the text attribute of
the node SUBTYPE.
Page 673
Step 4: Go to the methods tab of the view controller. Write the following code in the supply
created for the node TYPES.
Page 674
The importing parameter node will contain the object reference for that node.
Code:
DATA ls_types TYPE wd_this->Element_types.
DATA lt_types TYPE wd_this->Elements_types.
ls_types-text = Type1 .
append ls_types to lt_types.
clear ls_types.
clear ls_types.
Page 675
clear ls_types.
node->bind_table( new_items = lt_types set_initial_elements = abap_true ).
In the supply function method created for the node SUBTYPE Write the following code.
Code:
DATA ls_subtype TYPE wd_this->Element_subtype.
DATA lt_subtype TYPE wd_this->Elements_subtype.
ls_subtype-text = Sub Type1 .
append ls_subtype to lt_subtype.
clear ls_subtype.
Page 676

clear ls_subtype.
clear ls_subtype.
node->bind_table( new_items = lt_subtype set_initial_elements = abap_true ).
Step 5: Create an application for the component and test the component.
Output:
Set the break point on the both the supply function methods and check when the methods are
being called.
Page 677
By the time of executing the component the supply function for the type will be called once and
the subtype will be called thrice as we have three elements (Three records) in the TYPE node.
Expand the nodes. You can see all the nodes filled with values.
Page 678
Now go to the context tab of the view controller and set the singleton property for the child node
subtype and check the output.
Check in the debugger you can see the supply function for the subtype is called only once i.e for
the first element for which the lead is initialized.
Page 679
Supply function
Summary:
This document will help in learning the Supply Function Method usage in Web Dynpro
Application. This will explain its usage with one simple application in easy steps
Steps:
1) Go to transaction SE80 and create the new WebDynpro Application by selecting it in the drop
down list.
Page 680
2) Double click on the COMPONENT CONTROLLER, to create context nodes/attributes, which

are used in anywhere in the WebDynpro Application.
3) Create a node/attribute as shown below.
4) A pop up will display on the screen, fill the attribute name (VKORG), type and then click on
Additional Attribute to add another attribute AUART. These two attributes will be used as
Page 681
inputs provided by the user.
5) In a similar way, create the node HEADER and fill the dictionary name and other properties.
Click on the Add Attribute from Structure.
Page 682
6) Select few fields from VBAK structure, which are attributes of the node HEADER.
Page 683
7) Create a node ITEM under node HEADER as shown below where the HEADER is the source
of supply for the node ITEM.
8) Fill the details for node ITEM and choose few fields from the VBAP structure similarly as we
did for node.In our case, the supply function method is get_itemdata.
Page 684
After that screen looks like as below.
9) The next step is to create a view. In our case we make use of default MAIN view. Go to the
context tab.
10) In this step context mapping happens. Map the specific context nodes from COMPONENT
CONTROLLER with the view context. Just drag and drop from the right side to the left side
Page 685
view context or right click on the view context and choose Copy Nodes of Different Context.
11) In the pop up display, choose controller name using F4 help and set the context elements to
be copied as shown below.
Page 686
12) Go to the LAYOUT tab and right click on the ROOTELEMENTCONTAINER and click
insert element.
13) A pop up will appear, fill the details for first input field VKORG.
14) Create on the similar line the second input field AUART and captions for both these input
fields.
Page 687
15) Then create a button for action and in the properties of the button, type on the TEXT
property to get caption.
In the properties, click on the create button of the EVENT property. Fill the details in the pop up
display.
Page 688
16) Create the element for HEADER with type as TABLE.
Create the binding for the fields in the HEADER table with context node HEADER.
Page 689
17) Similarly repeat the steps for binding the ITEM node with the view.
Page 690
18) After saving the MAIN view, click on the component name and add the ALV component
ALV_TAB as shown.
19) Now go to the CONTROLLER USUAGE and then

INTERFACECONTROLLER_USUAGE.
Page 691
20) Click on the CONTROLLER USUAGE button and drag & drop the HEADER node into the
DATA node to create mapping with ALV component added.
21) Now click on the WINDOWS and here the step is to embed the Table view of the
ALV_TABLE over the View.
Page 692
22) Then choose the ALV_TAB component after clicking on the F4 help for View TO BE
Embedded.
Page 693
23) After saving, create the application and enter the details as shown below.
Page 694
24) Coding for the methods, which are created.
Page 695
Code for Supply function method.
The parent_element is a reference to the lead selection element of the parent node. When user
selects any different element , the value of the parent_element changes . The Supply function is
called to fill new elements into the table Item based on the selected element from the Header
table.
25) Activate the whole application if there are no errors. Check the output below for the input
given.The Header table is bounded to context node HEADER, and item table to the node
ITEM.When the user inputs and clicks on Fetchdata, the method Onactiongetdata fills the
header node from the VBAK table. The lead selection of the context node has been created on
the first element of the node. All the line items for the Sales Document selected are populated on
Page 696
the second table Item from the table VBAP.This is done by the Supply function get_itemdata.
When the user selects another record from the HEADER table. The content of the Item table
changes automatically.
Page 697
Contextual Panel
Contextual panel UI element belongs to the layout category. This UI element is used to structure
the layout of the webdynpro screen.
This contextual panel provides navigation with view switch. The navigation can be included in
more than three levels.
Below is the sample visual of how contextual panel looks on screen.
Page 698
How it works?
The view switch is not automatically toggled. There is an INDEX parameter containing the index
of the selected view switch (counting from 1 upwards).
When you click on a link in the navigation list, the ON_SELECT event is triggered. You can
find the link you clicked on in the event parameter WDEVENT. This object refers to a class
which contains an internal table parameters which will contain the event at runtime. Pass the
value CONTEXT_ELEMENT to the internal table and read the element object reference which
is of type IF_WD_CONTEXT_ELEMENT. Using the object reference you can access the
navigation list selected.
There are three types of elements which can be embedded inside the contextual panel they are.
1. Free contextual Area
2. Navigation list
3. View Switch
Free Contextual Area:

Any UI element can be placed inside the free contextual area.
Example display of Free contextual area:
Navigation List:
Navigation list provides the navigation area and is used inside the contextual panel. The data
source property of the navigation list is to be binded to the recursive node.
Example display of navigation list.
Page 699
View switch:
View switch is used to toggle between views in the contextual panel.
Example display of view switch:
Page 700
Navigation List in contextual panel

Navigation list provides the navigation area and is used inside the contextual panel. The data
source property of the navigation list is to be binded to the recursive node.
Example display of navigation list:
Exercise: Let us see an simple example that demonstrates how to use the contextual panel with
navigation list.
Scenario: Display a navigation list and on select of navigation list throw a message of which
navigation link was selected.
Step 1: Go to the Tcode SE80 and create a Webdynpro component.
Page 701

Step 2: As mentioned earlier, Navigation list must be binded to the recursive context node.
Create a recursive context node as shown below.
Create a context node with cardinality 0..N.
Create a recursive node for the context node created as shown below.
Page 702
Enter the name for the recursive node and click on select.
Choose the context node as the recursive node from the list.
Page 703
Create an attribute for the context node Navigation to store the list of the navigation values.
Page 704
Step 3: Go to the layout tab of the view controller and insert the contextual panel UI element.
Right click on the contextual panel UI element and select insert element.
Enter the id and type for the element.

Page 705
Bind the item source property to the Context node Navigation and item text property to the
context attribute list.
Create an action for the event onselect of the navigation panel with transfer UI parmeters.
Right click on the navigation panel and select insert header.
Page 706
Enter the title for the navigation.
Step 4: Go to doinit method of the view controller and initalize some value for the context node
as shown below.
Page 707
Code:
DATA LO_ND_NAVIGATION TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_NAVIGATION TYPE WD_THIS->ELEMENTS_NAVIGATION.
DATA LS_NAVIGATION TYPE WD_THIS->ELEMENT_NAVIGATION.
LO_ND_NAVIGATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_NAVIGATION ).
LS_NAVIGATION-LIST = LIST 1 .
APPEND LS_NAVIGATION TO LT_NAVIGATION.
CLEAR LS_NAVIGATION.
LO_ND_NAVIGATION>BIND_TABLE( NEW_ITEMS = LT_NAVIGATION SET_INITIAL_ELEMENTS = ABAP_T
RUE ).
Step 5: Go to the event handler method for the onaction and do the following to display a
message on the link selected.
Page 708
The event handler method contains a importing parameter context_element which contains the
object reference for the navigation link selected. Using get static attribute method of interface
if_wd_context_element get the value selected.
Now the component ls_navigation-list will contain the value of the naviagtion link select.
Concatenate it with a string variable and display the message.
Page 709
Code:
DATA : LV_STRING TYPE STRING.
CONCATENATE You have selected the link LS_NAVIGATION-LIST INTO LV_STRING.
DATA LO_API_CONTROLLER TYPE REF TO IF_WD_CONTROLLER.
DATA LO_MESSAGE_MANAGER TYPE REF TO IF_WD_MESSAGE_MANAGER.
LO_API_CONTROLLER ?= WD_THIS->WD_GET_API( ).
CALL METHOD LO_API_CONTROLLER->GET_MESSAGE_MANAGER
RECEIVING
MESSAGE_MANAGER = LO_MESSAGE_MANAGER.
CALL METHOD LO_MESSAGE_MANAGER->REPORT_MESSAGE
EXPORTING
MESSAGE_TEXT = LV_STRING.
Save and activate the whole component. Create an application and test the output.
Ouput:
Page 710
View switch in contextual panel

View switch is used to toggle between views in the contextual panel.
Example display of view switch:
The procedure for the veiw switch is no way different from the navigation list in the contextual
panel except that the provide the index as importing paramter instead of context_element.
Step 1: In the layout tab of the view controller swap the navigation element into view switch
element as shown below.
Provide the type as the view switch UI element.
Page 711
Step 2: Go to the Actions tab and synchronize the UI parameters transferred from the browser.
For the action on select, select the parameter from the UI select the index and press enter. This
parameter will be added as an importing parameter to the event handler method. This parameter
will provide the index selected based on which we can trigger the outbound plug of the veiws.
Modify the code in the method as below.

DATA : LV_STRING TYPE STRING.
LV_STRING = INDEX.
CONCATENATE You have selected the index LV_STRING into lv_string.
RECEIVING
Page 712
MESSAGE_MANAGER = LO_MESSAGE_MANAGER
.
EXPORTING
MESSAGE_TEXT
= lv_string.
Output:
This example is only for you to know how to use view switch in contextual panel and which
index in the view switch have been selected.
Page 713
Dynamically creating the UI element

Each UI element in the Webdynpro ABAP consists of a class using which we can place the UI
elements dynamically on the screen.
Now lets see how to create these UI element dynamically.
Step 1: Go the Tcode SE80( Object Navigator ) and create a webdynpro component.
Assign the component to the package or save it in the loacl object.

Step 2: Go to the context tab of the view controller and create the context node as below.
Page 714
Create an attribute in the context node as shown below.

Page 715
Node and attribute is now created.

Step 3: Go to wddomodifyview method of the view controller.
Page 716
In the method, check the importing variable first_time to avoid repeated calling of the codings
and creating UI elements each time the method is called. The codings written within the
condition will be executed only for the first time the method domodify view is called.
Step 4: Get the object reference for the root ui element container.
Page 717
There is an importing parameter in the method do modify view called view referring to the
interface of type if_wd_view. Calling the method get_element of this interface will provide
the Specific elements of the view.
Also we have a class for the root container ui element cl_wd_uielement_container.

Create a reference variable of that type obtain the reference for the root container UI element.
The method get_element is returning the object reference of type if_wd_view_element.
In the below diagram, you will be able to see the interface if_wd_view_element being
implemented by the class cl_wd_uielement_container which indirectly makes the interface as the
super class and the implementing class as the subclass.
Page 718
Since we are assigning a object of type more genric(Superclass) to the target variable of type
specific (Subclass). Hence we must assign the object using the widening cast.
Write the codings as below.
Thus now we have got the controller of the root container UI element in the reference variable
lo_container using which we can add UI elements.
Step 5 : Before adding an UI element to the root container UI element we need to create it. Now
let us create an Input field UI element using the class of the input field cl_wd_input_field.
There is a public static method call new input field in the class cl_wd_input_field using which
we will be able to create an input field. This method will also return the control to the input field
created.
Page 719
Create the input field as below.
Using the object reference in lo_input we can now control the properties of the input field
created.
Step 6: Set the layout property of the input field.
There is a method call set_layout_data in the class for the input field cl_wd_input_field. This
method will help you to set the layout of the input field.
Set the layout property of the root container ui element as matrix layout.
Page 720
Create an object of type matrix layout and pass it to the set layout data method of the input field.
Page 721
Step 7: Add the input field to the UI Element container as shown below.
Codings in the wddomodifyview

if first_time = ABAP_TRUE.
** Step1: Get the object reference of the ROOTUIELEMENTCONTAINER.
** Create a reference variable to the type of class cl_wd_uielement_container.
data : lo_container type ref to cl_wd_uielement_container.
* Getting the element reference for the root container UI element.
* since the class cl_wd_uielement_container has implemented the interface
IF_WD_VIEW_ELEMENT
* which makes the interface like a super class and cl_wd_uielement_container as its subclass.
* Hence assigning the object from the more general view to variable of less specific view
* we are going for widending cast. (According to version less than 7.0)
lo_container ?= view->get_element( ROOTUIELEMENTCONTAINER ).
*** Step 2: Setting an input field on the view
** There is a class for input field called CL_WD_INPUT_FIELD which contains a public static
method
* called new_input_field which creates an input field and return the control of the input field UI
* element in a reference variable of the type CL_WD_INPUT_FIELD with which we will be
able to contol
* all the attributes of the input field.
Page 722
data : lo_input type ref to cl_wd_input_field.

CALL METHOD CL_WD_INPUT_FIELD=>NEW_INPUT_FIELD
EXPORTING
BIND_VALUE = NODE.ATTRIBUTE
ID = INPUT1
RECEIVING
CONTROL = lo_input
.
** Step 3: setting the layout for the input field.
**If we dont set a layout for the input field we will get a dump stating that the no layout exists
* for the following UI element.
* To set a layout to the input field there is a method called set_layout_data which sets the layout
* data for the input field. This method require a control for the type of layout which is of the type
* CL_WD_LAYOUT_DATA
* There exists a different class for the layouts and there will be method which will return the
control
* of the required type.
* Getting the control of the required type using the class for matrix head data.
data : lo_matrix type ref to cl_wd_matrix_head_data.
CALL METHOD CL_WD_MATRIX_HEAD_DATA=>NEW_MATRIX_HEAD_DATA
EXPORTING
ELEMENT = lo_input
RECEIVING
CONTROL = lo_matrix
.
* Set the layout data for the input field.
CALL METHOD lo_input->SET_LAYOUT_DATA
EXPORTING
THE_LAYOUT_DATA = lo_matrix
.
** Step 4: Adding the input field to the UI Element contanier
*-
Page 723
* Using the control of the root contanier ui element add the input field to the root container UI
* element passing the control of the input field.
CALL METHOD lo_container->ADD_CHILD
EXPORTING
index = 1
THE_CHILD = lo_input
.
endif.
Save and activate the whole component. Create an application and test the component.
Output:
Page 724
Enhancement in Webdynpro ABAP

In many cases, it will be necessary to modify the standard application components which are
being delivered by the SAP. Any unstructured changes in the source code or layout of the
Webdynpro component are called Modifications. Modifications may cause conflicts during the
upgrade and to avoid such conflicts we can create Enhancements.
These enhancement implementations are individual objects and can be managed separately.
These enhancements are integrated in ABAP Workbench from release SAP AS 7.0.
Enhancement implementation for Webdynpro ABAP:
ABAP Webdynpro components cannot be implemented using BADI. SAP has provided the
explicit anchor points called Enhancement Options are implemented in the source code at
suitable points during the development of the Webdynpro components.
Using these enhancement options we can insert a separately developed BADI into the flow of the
program and therefore each BADI is an explicit enhancement.
In addition to source code we can add.
1. Enhancements in a View
2. Enhancements in a Controller
3. Enhancements in a Component and Window
Note: Several Enhancement implementations can be created for the Webdynpro component and
all are independent of one another.
Page 725
Implementing an Enhancement in a View

Implementing an Enhancement in a view is nothing but the modifying the layout of the view or
changing the properties of the existing UI elements. Take any standard component and if you go
to the layout tab of any view you can see the list of UI elements available in those views and the
way they are formatted in the layout. You cannot edit any of these and hence to modify you need
an enhancement.
Is enhancing a Webdynpro component is a big deal? Does it require a lot of efforts? The answer
is no, you just create an enhancement object and start doing whatever you want just like the way
you work on with the component you created. All the modifications which you are doing will be
recorded in the independent object developed for the Enhancement.
What kind of enhancement we can do in the view is as below.
1. Creating a new UI element
2. Suppressing existing UI element
3. Add Actions, Inbound Plugs and Outbound Plugs.
Creating a UI element:
You can create new UI elements and the procedure is no different. You can simply insert a new
UI element in the layout and process it as usual.
Suppressing Existing UI element:
We cannot remove the existing UI element from the hierarchy. Instead if we dont want the UI
element to be displayed we can suppress its visibility. Choose the UI element you want to hide,
right click on the UI element and select remove UI element. The UI element will not disappear in
the hierarchy instead in the property of the UI element a new line gets added with the following
information.
Page 726
The properties of the UI element before removing it from the hierarchy.
The properties of the UI element after removing it from the hierarchy.
Page 727
Actions, Inbound and Outbound plugs:

For each view we can additionally create plugs and an action for the UI elements.
Now let us see an example program on how to enhance a view.
Let us take a standard component demotree and enhance it. The output of the component is as
below.
Page 728
Lets hide the subtype of petrol and add a button UI element create an action for it and on click on
the button we will display a message that view has been enhanced.
Step 1: Go to the Tcode SE80 and Choose the component DEMOTREE.
Go to the layout tab of the view controller and click on the enhance button in the application tool
bar to create the enhancement.
System will prompt for enhancement name and description. Enter the name and description for
the enhancement and provide the name for composite enhancement framework and click on
Page 729
create. Else provide the name for composite enhancement and click on enter.
Enter the description for the composite enhancement framework and press enter.
After the composite enhancement implementation is created press enter again for the
enhancement implementation for the Webdynpro component to be created. After creating the
enhancement you can see the status of the view changed as below.
Page 730
Now to remove the subtype, right click on the node of the tree UI element type and choose
remove node element.
Once you have done that you will be now able to see the properties of the node type changed as
below. However these elements do not disappears in the UI elements hierarchy as I explained
above in the section.
Page 731
Right click on the root UI element container and select insert element to add the button UI
element.
Create an action for the button UI element.
In the event handler method for the button write the coding to display the message.
RECEIVING
MESSAGE_MANAGER = LO_MESSAGE_MANAGER
.
* report message
EXPORTING
Page 732
MESSAGE_TEXT
.
= View Have been enhanced
Save and activate the component and test the application for output.
Output:
You can see the subtype for petrol and diesel now been hidden.
Click on display.
Page 733
Enhancing a controller
Controller parts created in the original component cannot be changed or deleted using the
enhancement implementation.
Controller parts include the nodes, controller attributes and the methods.
Context node and Attributes:
For each existing context, Context node and attributes can be added to the component. If you
wish to add an attribute to the existing node then there arise a two kind of situations.
1. If the context node is without a dictionary structure then the attributes can be added to the
node without any restrictions.
2. If the context node is with dictionary structure you can only add attributes from the dictionary
structure.
The nodes and attributes will be created with an additional property enhancement
implementation.
Methods:
It is possible to create and implement a new method in the enhancement. In addition to that we
can also modify the functionality of the existing method in the following three ways.
1. Pre-Exit
2. Section-Exit
3. Overwrite-Exit
Page 734
Technically, here we do not modify the source code of the existing method. Instead when we opt
for the exit method a new method will be created and its just the sequence in which they are
executed differs.
However the new method created will have the same interface as the existing method.
(Importing, returning and exporting parameters etc.)
Pre-Exit:
This method will be called before the execution of the existing method. This method will first
called by the controller using wd_this reference and later on original method of the controller
will be called after the execution of pre-exit method using me object reference.
Section-Exit:
In contrast to the pre-exit, the section exit method will be called after the execution of the
original method.
Overwrite Exit:
The overwrite exit method replaces the execution of original method by itself. In the previous
two types of exit the original method gets executed either before or after the exit method whereas
in overwrite exit execution of original method is replaced by the method created and controller
will not call the existing method.
Attribute:
In addition to the methods and context nodes, controller attributes can also be created and used
within the methods.
Now let us see a simple example on enhancing a controller.
Page 735
In the previous section enhancing a view we gone through how to enhance a view, now lets see
an example of how to enhance a controller of the same component demotree.
Scenario: We have a supply function method in the controller supply_motor_kind which

provides the value for the context node kind. Lets create an exit method to add our own values
to the context node.
Step 1: We will proceed with the same component in the section enhancing a view and
modification will be done on same enhancement project. If not create a new enhancement
implementation and proceed.
Step 2: Go to the methods tab of the view controller and click on overwrite exit method.
Page 736
A overwrite method of an existing method will be created with the same interface as the original
method.
Write the coding to fill in the context node.
Code:
DATA LT_MOTOR_KIND TYPE WD_THIS->ELEMENTS_MOTOR_KIND.
DATA LS_MOTOR_KIND LIKE LINE OF LT_MOTOR_KIND.
LS_MOTOR_KIND-NAME = CAR.
LS_MOTOR_KIND-VALUE = CAR.
APPEND LS_MOTOR_KIND TO LT_MOTOR_KIND.
CLEAR LS_MOTOR_KIND.
LS_MOTOR_KIND-NAME = BIKE.
LS_MOTOR_KIND-VALUE = BIKE.
Page 737
APPEND LS_MOTOR_KIND TO LT_MOTOR_KIND.

CLEAR LS_MOTOR_KIND.
NODE>BIND_TABLE( NEW_ITEMS = LT_MOTOR_KIND SET_INITIAL_ELEMENTS = ABAP_
TRUE ).
Save and activate the component and test the application.
Output:
In a similar way try to create pre-exit and section exit method and add some values to the context
node.
I think these two documents (Enhancement for view and controller) will suffice to understand the
concept of implementing enhancement.
You can now try to create a node and bind it to the UI elements created as the part of
enhancement and create action for UI element and process the nodes in it.
Page 738
Enhancing a component and window

Enhancing a component:
In the previous two sections enhancement for view and controller we studied what are the
options can be done by enhancing a view and a controller. If you see the first two examples the
modifications can only done in that view.
In order to create a new view or window we need to enhance a component. We can also add
component usage to the component by enhancing a component.
Enhancing a Window:
Enhancing a window includes adding a view in the window. Creating a new navigation link and
suppressing the existing link are the part of the enhancement in window.
Note: Creating a window comes under the enhancement of component.
Now lets see an example which will demonstrates how to enhance a component and a window.
Scenario: We will create a view and embed it in the view by creating a view container UI
element in the window.
In this section also we will use the same component.
Page 739
Step 1: Go to the Tcode SE80 and select the root of the component demotree and click on
enhance button.
Since we have already created an enhancement for the component, we will use the same
enhancement.
Note: Enhancement is just an individual object in which we put the modifications we do in the
component it is not that necessary that the we need to enhance view in a different enhancement
object and component in a different enhancement object. The benefits of putting every kind of
enhancement in a separate enhancement object will be when you want to reverse the
enhancement you cannot deactivate it instead you have to delete the enhancement. When kept
separately that particular enhancement alone can be deleted.
Once you have enhanced the component then you can start working on the component just like
the custom one you have developed.
Page 740
Step 2: Right click on the view controller and create the view as enhancement.
Choose the enhancement and press enter.
Provide the name and description for the view and press enter.
Page 741
You can see the view created in the enhancement and not in the component itself.
Insert text view UI element and add the text property as enhanced view.
Step 3: Go to the view controller and add a view container UI element by clicking on enhance
button.
Page 742
Step 4: Go the window controller and click on enhance button. Assign the enhancement project
we develop and press enter.Right click on the view container and press embed view.
Add the view to be embedded as view2 which we created as the part of the enhancement. Make
you activate you enhancement project before doing this step otherwise your view will not be
displayed.
Output:
Recap:
View enhancement:
Page 743
Hiding or adding UI element, Creating action for UI element, Inbound plug and outbound plug.
Controller Enhancement:
Methods, Attributes and context.
Component enhancement:
Adding a view, window and component usage
Window enhancement:
Embedding a view in a window, Creating the navigation link or suppressing the existing one.
Practice the following scenario which includes the all the enhancement types.
Take the standard component WDT_FLIGHTLIST. The output of the component is as below.
1. Add the flight date as the Input criteria and modify the method for the search accordingly.
2. Make the column airline as link to action and on the click of the link the details of the airline
must be displayed in the popup.

Page 744
Introduction to floor plan manager

Before starting Floor plan manager let us have a little recall on what exactly a webdynpro
application as it got something to do with the floor plan manager.
Webdynpro Application:
A webdynpro application is an application that can be called by the user from the browser
using the URL generated for a webdynpro application. It is an independent program that
connects the URL which can be accessed by the user to the Window of the webdynpro
component.
Technically the webdynpro application is connected to the interface view of the window
by an inbound plug and it does not contain any corresponding information about any
elements of the corresponding component. It just act as the carrier of the webdynpro
component and triggers the execution of the component when the URL is being called.
Note: Inbound plug of the window has to be of type start up plug.
Coming to the topic what a floor plan manager is and how it is related to an webdynpro
application as mentioned earlier, the explanation is as below.
Floor Plan Manager:
Floor plan manager is an framework using which we can create and configure the webdynpro
applications of the webdynpro abap.
Using the configuration editor of the floor plan manager we can combine different
application specific view of the different component into a single new floor plan manager
application. This floor plan manager application can be integrated into the portal for
accessing this component.
This is something similar to view where in view we have our application data distributed
across different tables and we combine it in a view where as here different components
which are required to do a particular functionality are assembled using a FPM application.
Advantages of Floor plan manager:
1. This design follows the SAP UI guidelines.
2. User of this application benefits by quicky and easily familarize themselves with the new
applications.
Page 745
3. The integration of Floor plan and GUIBB in the FPM accelerates the creation of UI and
ensure that all the UI element behave in a same way.
4. Time consuming user interface programming is greatly reduced by application
programming.
5. Simple applications are adjusted by configuring the FPM instead of modifying the
webdynpro component. (Reduced development effort). [E.g hiding a view of container in the
view.]
6. Any such adjustment made to the application using the configuration editor of the FPM are
called modification free changes.
7. FPM Uses the webdynpro adjustment concept.
8. Integration of different webdynpro components in one FPM application.
SAP UI guidelines says the use of FPM is preferred instead of Webdynpro application as it
increases the consistency of UI elements.
Adjustment concept is nothing but fitting the webdynpro application according to your needs
which again classified into implicit and explicit configurations.
Role of Floor plan manager:
Floor plans are nothing but a design template for the application that represent the certain
task or process where as floor plan manager implements this floor plan to maintain the
uniformity across the applications.
Some of the Available floor plans for creating and confguring the Applications are:
1. Object instance floorplan(OIF)
2. Guided activity floor plan(GAF)
3. Quick activity floor plan(QAF)
4. Overview page floor plan(OVP)
The floor plan manager automatically implements the following areas of the floor plan.
1. Identification area
2. Navigation region
3. Message area
4. Content area
Page 746
Content area:
Content area is the areas of FPM where the system displays the application specific view.
We can call and change these areas directly using the configuration editor whereas floor plan
manager checks whether these changes are leading to any technical errors.
Floor plan manager also supports in creating and configuring the application specific view
using UIBB. (User interface building blocks).
Some UIBBs are:
1. Form component
2. List component
3. Tabbed component
4. Search component
5. Hierarchical list component
We have a special configuration editor for configuring these UIBBs. An this configuration
editor can be started from the FPM configuration editor.
Pre-requisites:
Some pre-requisites that the webdynpro application and component should posses in order to
be configured by the floor plan manager are as below.
1. The webdynpro application must be assigned to the component of the floor plan or you can
directly go and create an application to any one of these components.
Some standard floor plan components:
1. FPM_OIF_COMPONENT Object instance floor plan
2. FPM_GAF_COMPONENT Guided activity floor plan
3. FPM_OVP_COMPONENT Overview page floor plan
Note: When assigning the webdynpro application to one of the first two components the
webdynpro application is also automatically assigned to the FPM_IDR_COMPONENT using
which we can configure the identification area of the floor plan.
2. The webdynpro component must have implemented the interface
IF_FPM_UI_BUILDING_BLOCK.
Configuration editor of floor plan manager:
Page 747
We can use FPM configuration editor to enhance application to fit the user needs.
Navigation region:
The navigation region is divided into two regions.
1. Control region
2. Hierarchy
Control region:
In this area we select which screen of the webdynpro application you would like to configure.
Hierarchy:
This area gives the hierarchical display of elements we can configure.
Preview:
The preview function shows you the user interface of the application. You can use the
preview function to navigate within the user interface. However, not every element can be
accessed. A selected element is highlighted in color in the hierarchy view and its attributes
displayed in the attribute view.
Page 748
Action area
The action area contains links to all the actions you can execute for the selected application
user interface. The actions that can be selected depend on the concrete configuration of the
application. This means that selection of actions can differ within a configuration.
Attribute view
When you select a configurable user interface element either in the preview or in the
hierarchy, the attributes of these user interface elements are displayed in the attribute view.
You can change these attributes here. The attributes you can change depend on the user
interface element you selected. You can immediately see any changes made in the preview.
Message area
In this area, potential conflicts in the configuration, such as tabs with the same name, are
immediately displayed.
Floor plan manager application:
A floor plan manager application is an application that calls one of the floor plan. We can use
explicit configuration to assign additional webdynpro components as user specific views
using UIBBs.
Some generic webdynpro components are:
FPM_LIST_UIBB List component
FPM_FORM_UIBB Form component
FPM_TABBED_UIBB Tabbed component
So far we have studied what is the floor plan manager, what are its roles and what is floor
plan manager application.
Page 749
FPM using Object instance floor plan

The following section explains the creation of simple floor plan manager application using OIF
(Object instance floor plan).
Scenario: Executing a component using the Floor plan manager application. We will create a
webdynpro component with two view and two windows with each view assigned to one window
and we will display it using the OIF floor plan.
Standard component for OIF: FPM_OIF_COMPONENT.
Any floor plan manager application usually consists of two different components.
1. Floor plan specific component (FPM_OIF_COMPONENT or FPM_GAF_COMPONENT).
2. Component for header area. (FPM_IDR_COMPONENT) [Not available for OVP]
Step 1: Go to the Tcode SE80 and create the webdynpro component as shown below.

Step 2: In the implemented interfaces tab of the webdynpro component implement the interface
(IF_FPM_UI_BUILDING_BLOCK) for the fpm which is essential for the component to
participate in the FPM event.
Enter the interface name and press enter.
Page 750
Click on the Re-implement button to implement the interface.

Once the interface has been implemented you can see the indicator turning into green. The
methods of the interface can now be found in the methods tab of the component controller.
In this example we are just going to display the view using FPM configuration and hence there is
no need to code in the methods. We will see how to use those methods in the later sections.
Step 3: Go to the layout tab of the view controller and Insert a text view UI element as shown
below.
Page 751
Enter the Text First View in the text property of the Text View UI element.
Step 4: By default the view created at the time of creation of component will be embedded in the
window created at the time of component. Now let us create one more view and embed it in a
new window.
Right click on the view controller and choose create.
Page 752
Provide the name and description for the view and press Enter.
In the layout tab of the view created add a text view UI element as done before in the first view.
Add the Text property of the text view as Second View.
Page 753
Step 5: Create a window and embed the second view into that embed. Right click on the window
and choose create.
Provide the name and description for the window and press enter.
Page 754
Right click on the window and select embed view to add the view to the window.
Choose the view to be embedded as the second view and press enter.

Step 6: Create an application and assign it to the component for the floor plan or directly create
an application for the floor plan component FPM_OIF_COMPONENT.
Page 755
Provide the component, interface view and plug name as shown below.
Step 7: Go to the Component FPM_OIF_COMPONENT and expand the application and select
the application you have created.
Page 756
Browser will open for the configuration editor of the floor plan.
Enter the configuration name for the FPM and click on create.
Page 757
Assign the configuration to the package or save it in the local object.
Configuration for OIF will be created successfully. And as mentioned in the top we can see any
FPM application will consist of two application specific components. Not applicable for OVP.
Enter the name for the configuration of component FPM_OIF_COMPONENT and press enter
you will see the go to component configuration button becomes enabled.
You will get an error configuration does not exists. Click on the create button.
Assign this configuration to the package or save it in the local object.

Component configuration will be created. Expand the node main view on the left hand side in the
navigation bar and choose the UIBB.
Page 758
Select add main view in the right hand side tool bar.
In a same way as above expand the node main view2 and add the component and second view.
If you want to change the name of the main view you can change it using the attributes.
Page 759
Save the configuration and test the configuration. You may get some default button of the FPM
which we can disable it or delete it later. Now lets test the configuration.
Output:
Main view 1
Page 760
Main view 2
Page 761
FPM Using GAF(Guided Activity Floor plan)

In the previous section we saw how to create an application using OIF for the component
ZCSK_FPM_OIF. In this section we will study how to create the application using GAF for the
same component.
Step 1: Go to the Tcode SE80 and open the standard component FPM_GAF_COMPONENT.
Right click on the component and create the webdynpro application for the component. In the
previous section we created the application in the component we created and mapped it to the
floor plan manager component. Anyway both are one and the same.
Page 762
Enter the name and description for the application and press enter.
Save the application.
Page 763
Step 2: Right click on the application and select create/change configuration. It will open the
application configuration editor for the FPM.
Provide the configuration ID and click on create to create the configuration.
Page 764
Assign the configuration to the package or save it in the local object. Enter the configuration
name and click enter. Go to component configuration button will be enabled. Click on go to
configuration button to Open the FLUID(Configuration editor for FPM).
The system will throw an error message as configuration does not exists. Click on create to
create the configuration.
Assign the configuration to the package or save it in the local object.
Page 765
Step 3: Expand the node main step and choose the UIBB.
Enter the component name and choose the view. Here I have chosen the component which we
have created in the previous section for OIF Application.
In the right hand side you will be able to see a tool bar. Click on add main step to add the second
window.
Page 766
Main step will be added as below.
Now expand the node for the main step 2 and choose the UIBB to add the component and view.
I have added the second window of the component ZCSK_FPM_OIF.
Page 767
We can change the name of the mainstep using the attributes of the main step. Explore the
configuration editor for more options.
Save the configuration. Go back to the application configuration using the breadcrumb available
in the top and test the application.
Page 768
Test the application configuration.
Output:
Page 769
Click on next to move on to the next view.
Some standard buttons come along with the application with actions for it. We can hide or
disable them as well as we can add toolbar elements and handle them using the events of the
interface if_fpm_ui_building_block. We will see the usage of these events in the upcoming
sections.
Page 770
A Simple Adobe Form

In the following section we will see how to create a simple form Using an Adobe Form.
Layout of the Form we are going to create:
Pre-requisites: Adobe life cycle designer.

Step 1: Go to the Transaction SFP and create an Interface.
An interface is mandatory for every form. The purpose of interface is to include the data in the
form which was unknown at the time the form was created.
These datas can be:
1. Data from database tables
2. Data from SAP system like date.
3. Data that have been calculated or implemented.
Page 771
Enter the name for the interface and click on create.
Enter the description for the interface and press enter.
Assign the interface to a package or save it in a local object.

Step 2: Now let us create the importing parameter to get the details from the user to be displayed
in the form.
Page 772
In the import tab of the form interface, click on the create to add an importing parameter.
Add an importing parameter as shown below.
Save and activate the form Interface. A function module will be generated in the background
which will pass the parameter values to the form.
Step 3: Go back to the Tcode SFP (Form Builder) to create the form.
Page 773
Enter the name for the form and click on create.
Enter the description and interface for the form and press enter.
Save the form in package or assign it to the local object.
Step 4: Drag and drop the importing parameters of the interface to the form as shown below.
This is where the datas obtained from the user in the interface are passed to the form through
Page 774
context attributes.
Step 5: Design the layout for the form and bind these datas in the form.
Page 775
Click on the layout button to open the form designer in the full screen mode.
Page 776
Step 6: Go to the palettes->object library to view the list of elements available.
You will get a small pop up toolbar which contains all the elements that can be placed in the
layout.
Page 777
Choose the Text element and place it on the layout.

Place the text element in the required position on the page. Double click on the Text to add the
user defined text.
Page 778
Similarly place the text field UI element.
Double click on the text field and change the caption of the text field as name.
Page 779
In the value tab change the type as read only.
Go to the binding tab and bind the attribute of the form to the text field so that the value in the
context attribute will be displayed in the text field at execution.
Page 780
Bind the text field to the attribute name so that value passed to the name will be displayed here.
Page 781
In
a similar way create a text field element for address and bind it to the respective attributes.
Page 782
Click on preview pdf to preview the look of the form.
Save and activate the whole form and execute the form.
Output:
Enter the input parameters and click on execute.
Provide the printer name LP01(Dummy Printer) and click on print preview.
Page 783
Page 784
Microsoft silverlight integration in

Webdynpro ABAP
The Webdynpro UI elements like table, radio button etc are some of the Graphical User interface
elements provided by the SAP for developing Webdynpro applications. Developers assemble
these prescribed UI elements in their layout according to the requirement.
Right now in Webdynpro ABAP there is no infrastructure like creating a customer specific UI
element. In order to enable the scope of integration of different technologies and Customer
specific UI blocks sap has provided the following.
1. Microsoft Silverlight
2. Adobe FlashIsland
We will study about the Adobe flash Island in the upcoming sections.
Microsoft Silverlight:
Microsoft Silverlight is a technology for developing Rich Internet Applications (RIA). The
developed RIAs can be run on all common browser platforms and operating systems. These
applications are executed within the browser with the Aid of Silverlight plug-in. To use your
own Microsoft Silverlight component within Webdynpro, it must integrate the library provided
by NetWeaver. This enables communication between the Microsoft Silverlight application and
the Webdynpro framework.
In Webdynpro the Silverlight UI element is generated in a View. Then this UI elements source is
assigned with a Microsoft Silverlight application of format (.XAP). Also for the component to
access it this Silverlight application must be added to the mime repository of the component.
How to create a Microsoft Silverlight Application?
The Microsoft Silverlight Application can be developed in a Microsoft Visual Studio
Development environment. This project consists of three parts:
1. The Microsoft Silverlight library provided by SAP NetWeaver, and necessary for communication
between the Microsoft Silverlight application and the Web Dynpro Framework.
2. Your own Microsoft Silverlight component
3. Application developers must call their self-developed Microsoft Silverlight components in the
SilverlightIsland wrapper. The SilverlightIsland component provides methods to access data of
the UI element and trigger events.
Prerequisites
Page 785
To implement Microsoft Silverlight Island applications for Web Dynpro ABAP, you require the
following:
Microsoft Visual Studio and the Silverlight Add-on (development environment)
Silverlight browser plug-in (for using Microsoft Silverlight Islands on the client)
The Microsoft Silverlight library provided by SAP NetWeaver:
o This library is stored in the MIME Repository under:
o SAP/PUBLIC/BC/UR/nw7/SilverlightIslands
o The Microsoft Silverlight application provided by the customer as an XAP file
Being an ABAP developer you dont have to be worried about developing a Microsoft
Silverlight component. Concerned person in the organization will take care of this. Just get to
know how to use this Silverlight in a Webdynpro application.
Now let us develop a simple Webdynpro application that demonstrates the Use of the Silverlight
UI element.
Step 1: For developing a Silverlight UI element we need a Microsoft Silverlight component. As
we dont have the silver light component lets take one of the Silverlight component developed
by the SAP.
Go to the Tcode SE80 and open the Webdynpro component WDR_TEST_SILVERLIGHT
developed by SAP. In the mime repository of the component you will be able to see the
Silverlight component used by the SAP for that component.
Page 786
Right click n the Silverlight simple.xap and choose download.
A pop up will trigger. Choose the file location and click on save.
Page 787
Step 2: Go to Tcode SE80 and create a Webdynpro component.

Step 3: Import the Microsoft Silverlight component in the Webdynpro component as shown
below.
Page 788
Choose the silver light component and select open.
Page 789
System will prompt for creating a mime type. Press save.
Now you can see the Silverlight component in the mime repository of your component.
Step 4: Go to the layout tab of the view controller and insert a view container UI element.
Page 790
The purpose of this view container is to hold the silver light UI element. Remember I mentioned
above in the section Silverlight UI element is generated in a view and this view container is
required for us to hold that view.
Step 5: To create a Silverlight UI element. Right click on the view controller and create a view.
Enter the view name and description and press enter.
Page 791
Whenever the View is created the root of all the UI elements

ROOTUIELEMENTCONTAINER will be of an UI element type transparent
container.
For a view to be used as a Silverlight UI element we need to convert the Root UI element
container to the type of Silverlight Island. To convert it, right click on the root UI element
Container and Select Swap root element.
Page 792
Provide the type as Silverlight Island and press enter.
As I mentioned earlier on the top of the section, the Silverlight UI element must be assigned to
the Microsoft silver light component. Now assign the Silverlight component which we imported
in the mime repository to the source property of the Silverlight island UI element.
Page 793
Source, Height and Width are the important properties to be specified to the Silverlight Island.
Step 6: Go to the window controller and embed the Silverlight view in the view container we
have created in the main view.
Provide the view to be embedded as the Silverlight and press enter.

Step 7: Create a Webdynpro application to test the component.
Page 794
Output:
Page 795
Page 796
We can also pass the

data to the Silverlight using it data source properties, create event for the Silverlight UI
element. We will more of this like how to pass the data and handle events in the Upcoming
sections
Note: Ref to standard Webdynpro demo components for more information on this.
Component Names:
DEMO_SILVERLIGHT_SEATS
WDR_TEST_SILVERLIGHT
Page 797
Adobe FlashIsland in Webdynpro ABAP

Pre-requisites: Read the document Microsoft Silverlight Island introduction part.
Adobe Flash Island:
Adobe Flash Island is based upon the Adobe flex. Similar to Microsoft Silverlight, Adobe flex is
also used for developing rich internet applications.
We can create new UI block as like we did in the Microsoft Silverlight in the form of view and
embed it in the Webdynpro application. The usage of both the Silverlight and Adobe island in
Webdynpro for ABAP is similar. The different is just the UI block component is created either
with Microsoft visual component or Adobe flex.
To integrate the flex-based or flash based application the application parameter wdlightspeed
must be active.
Flash Island UI element:
Flash is a technology for the development of multimedia content. Adobe flash films are created
with the Adobe Creative Suite development environment. Adobe Flex is a platform for Rich
Internet Applications (RIAs). Adobe Flash and Flex applications are compiled as ShockWave
Flash (SWF) files that can be executed with the Adobe FlashPlayer. The Adobe FlashPlayer is
available as a Web browser plug-in for various browser versions and platforms.
Note : In order to debug store the corresponding version of flash file with suffix debug along
with it in the mime repository of the component.
Eg: Myflashapplication.swf Flash file
Myflashapplication debug For debugging.
Prerequisites
To implement Adobe Flash Islands applications for Web Dynpro ABAP, you require the
following:
Adobe Flex Builder 2 or 3 (development environment)
Adobe Flash Player (to use Adobe Flash Islands on the client)
Adobe Flex Library provided by SAP NetWeaver
This library is stored in the MIME repository under SAP/PUBLIC/BC/UR/nw7/FlashIslands

Adobe Flash application provided by the customer in the form of a SWF file (together with
associated Debug-SWF file)
Page 798
The overall process of creation of the UI element using Flash Island is similar to that of the
Microsoft Silverlight.
Step 1: In order to create a flash island UI element we need a SWF file to be included in the
mime repository of the component. This type of files will be developed in the Adobe flex and as
we dont have any knowledge or provision for that let us download one of the flash file created
and embedded by SAP in a demo component. The purpose of flash file which we are going to
download is to display the data in the barchart format.
Go to the Tcode SE80 and enter the name of the Webdynpro component as
DEMO_FLASH_PROFIT.
Page 799
Right click on the file MyflexProj.swf and choose download to download that file to your PC.
Page 800
System will prompt for file save location. Specify the required location and save the file.
The flash file has been saved in your computer.

Now let us create the component that demonstrates how to create a Flash Island UI element.
Step 2: Go to the Tcode SE80 and create a Webdynpro component.
Page 801
Step 3: For a view to be created as a Flash island UI element we need to have the required flash
file in mime repository of the component so that it can be assigned to that view later. Hence
Upload the flash file which we downloaded earlier in our new Webdynpro component.
System will prompt for file directory choose the file location and click on open.
Page 802
System will now prompt for creating a new mime type. Click on save.
Flash object will now be imported in the mime repository of the component as below.
Page 803
Step 4: Go to the context tab of component controller and create a context node as shown below.
Create three Attributes Company, Revenue, and Profit to the context node of type string under
the node.
Page 804
Step 5: Go to the context tab of the view controller and drag and drop the context node in the
view controller.
Step 6: Go to the layout tab of the view controller and Insert a table UI element and bind the
table UI element to the context node.
Page 805
In the layout tab insert a view container UI element to hold the Flash Island UI element.
Step 7: Right click on the view controller and create a view.
Enter the name and description for the view and press enter.
Step 8: In order to create the flash island UI element the type of the Root UI element container
must be of type Flash Island. Right click on the root UI element and select swap root element to
Page 806
change the type.
Choose the type as flashisland and press enter.
Height, SWF File and Width are the important properties of the flash island UI element.
Page 807
Right click on the flash island UI element and select insert data source to bind it to the context
data. Before doing so drag and drop the context node created in the component controller in our
view.
Page 808
Provide the name for the data source and Bind the data source property to the context node.
Note: Enter the name in the same case letter provided by me.
Page 809
Right click on the data source and choose insert property.
Provide the name and bind the value property to attribute company.
Page 810
Similarly create two more properties and bind the attribute revenue and profit.
Page 811
Step 9: Go to the window controller and embed the view for flash island in the view container of
the main view.

Choose the view to be embedded as flash island view.
Page 812
Step 10: Let us populate some value in the context nodes. Go to doinit method of the view
controller and initialize the values as shown below.
Code in the method:

DATA LO_ND_CHART TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_CHART TYPE WD_THIS->ELEMENTS_CHART.
DATA LS_CHART LIKE LINE OF LT_CHART.
LO_ND_CHART = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_CHART ).
LS_CHART-COMPANY = Lava Technologies.
LS_CHART-REVENUE = 250 .
LS_CHART-PROFIT = 44 .
APPEND LS_CHART TO LT_CHART.
CLEAR LS_CHART.
LS_CHART-COMPANY = Batman Enterprises.
LS_CHART-REVENUE = 226 .
LS_CHART-PROFIT = 21 .
APPEND LS_CHART TO LT_CHART.
CLEAR LS_CHART.
LO_ND_CHART>BIND_TABLE( NEW_ITEMS = LT_CHART SET_INITIAL_ELEMENTS = ABAP_TRUE ).
Page 813
Step 11: Create an Webdynpro application and test the component.
Output:
Select the lead and you can see the way the Flash UI element will be loaded on the screen.
Page 814
Closing a web browser through action

There may be a requirement where you may display certain datas in the pop up and by
performing some action in the pop up the action has to be completed and the web browser has to
be closed automatically.
In the following section we are going to see how to close the web browser by the action on the
window.
Take any component which was previously developed by you and we will proceed from there.
Step 1: In order to close the browser the application parameter close_window of the Webdynpro
application has to be set to X. Go to the application created for your component and in
parameters tab include the parameter close_window.
When the value of this parameter close_window is set to X the system will close the browser.
Step 2: Go to the layout tab of the view controller and insert a UI element.
Page 815
Provide the text and create an action for the UI element.
Step 3: Go to the window controller and created an outbound plug of type exit plug.
Step 4: In the event handler for the method do the following.

1. Get the reference of the view controller
2. Get the reference of the window in which the view is contained.
3. Set the parameter of the close_window as x and specify the outbound plug to be triggered.
Getting the reference variable of the view controller.

Using code wizard generate the code for getting the getting the reference of the view controller.
Call the wd_get_api method of the current controller to get the reference of the current
controller.
Page 816
Now the reference of the view V_MAIN will be in the variable lo_api_v_main.
In the interface type of the reference variable there is a method called
GET_EMBEDDING_WINDOW_CTLR which will return the reference of the window in which
the current view has been embedded.
Call this method using pattern to generate the codes.
Page 817

Now using the reference of the window controllers set the application parameter and pass the
plug to be triggered as shown below.
Using the method fire_plug of the interface for window pass the application parameter value and
the plug to be triggered.
Check the parameters of the method for better understanding of below code. This method
contains two importing parameters.
If you check the table type wdr_event_parameter_list the value of the parameters is passed as the
data reference variable. Hence format the data to be passed to the importing parameters
PARAMETERS and pass it to the method.
Populating an internal table to be passed to import parameter PARAMETER.
Page 818
Pass the data to the method as below.

Page 819

Code in the method:
DATA LO_API_V_MAIN TYPE REF TO IF_WD_VIEW_CONTROLLER.
LO_API_V_MAIN = WD_THIS->WD_GET_API( ).
DATA : LO_WINDOW TYPE REF TO IF_WD_WINDOW_CONTROLLER.
CALL METHOD LO_API_V_MAIN->GET_EMBEDDING_WINDOW_CTLR
RECEIVING
RESULT = LO_WINDOW.
DATA : IT_PARAMETERS TYPE wdr_event_parameter_list,
WA_PARAMETERS TYPE wdr_event_parameter,
LV_DATA
TYPE REF TO DATA.
FIELD-SYMBOLS : <FS_PARA> TYPE ANY.
CREATE DATA LV_DATA TYPE C.
ASSIGN LV_DATA->* TO <FS_PARA>.
<FS_PARA> = X.
WA_PARAMETERS-NAME = CLOSE_WINDOW.
WA_PARAMETERS-VALUE = LV_DATA.
INSERT WA_PARAMETERS INTO TABLE IT_PARAMETERS.
CLEAR WA_PARAMETERS.
CALL METHOD LO_WINDOW->IF_WD_VIEW_CONTROLLER~FIRE_PLUG
EXPORTING
PARAMETERS = IT_PARAMETERS
PLUG_NAME = EXIT_PLUG
.
Save and activate the whole component test the application.
Page 820
Output:
Click on the close link your browser will be closed.
Page 821
Page builder
Webdynpro ABAP page builder is a framework that enables administrator to put together
webdynpro applications without any programming required.
Example display:
Typically, you use the Page Builder to design home pages that enable users to access their main
tasks and that provide the option to adapt the page, for instance by adding CHIPs to it in which
their favorite Web pages are embedded.
Page builder Concepts:

Page builder are based on the webdynpro application configurations of the webdynpro
component WDR_CHIP_PAGE. Creating configuration for the application of components allow
us to add CHIP to these applications. The CHIP that are available to be configured in the
application can be found in the Chip Catalog.
Steps to build a page using page builder:
1. Creating a page with page builder
2. Implementing side panel
3. Creating webdynpro chips
Page 822
CHIP in webdynpro ABAP

CHIP stands for Collaborative human interface part and is introduced as a part of Netweaver 7
enhancement package 2.
A CHIP is an encapsulated, stateful piece of software application that provides a functionality
which can be used in collaboration with Page Builder page or Side Panel.
All the available CHIPs are registered in the CHIP Catalog.
CHIP Model:
The chip model describes the capability of the CHIP. Technically a chip is nothing but a
webdynpro component that implements a webdynpro component interface.
Chip consists of:
1. Port
2. Wiring
3. Tags
Port: Communication with the chip is implemented through special interface called Ports.
There are two kinds of Ports available in a CHIP.
1. Inports
2. Outports
Inports:
Inports are used to receive information from other chips. Here you specify an importing
parameter in which you get the data from the other chips or page builder or side panel. Typically
inports are nothing interface method with importing parameters.
Page 823
Outport:
Outport is used to expose the internal status of the CHIP. Basically Outports are nothing but the
interface event of the component.
Wiring:
Using wiring we can connect CHIPs so that they can interact with each other. Wiring between
the two CHIPs is established via Outport of the sending chip and inport of the Receiving CHIP.
Tags:
Tags can be assigned to the port and parameters of the port. Basically a tag is a string. If a same
tag is available in the application and the CHIP then they are automatically connected through
wiring and data is transported between them.
Page 824
Creating a Webdynpro CHIP component

Requirement: Create a chip that provides information about the Airplanes.
The information about the airline carrier is available in the table SCARR. We need to create a
webdynpro component that supply the information about the carrier and create a CHIP for it.
Procedure:

Step 2: Go to the context tab of the component controller and create a context node for the table
structure scarr.
Enter the name for the node and provide the dictionary structure as scarr and click on add
attributes from the structure to add attributes.
Page 825
Select all the attributes and press enter.
Page 826
Step 3: Go to the methods tab of the component controller and create a method to fill the context
node. Note : Method has to be an Interface method
Create an importing parameter for the method.
Write the following code inside the method.
Page 827
Code:
DATA LO_ND_CARRIER TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LO_EL_C
ARRIER TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_CARRIER TYPE WD_THIS->ELEMENT_CARRIER.
LO_ND_CARRIER = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_CARRIER ).
LO_EL_CARRIER = LO_ND_CARRIER->GET_ELEMENT( ).
SELECT SINGLE * INTO LS_CARRIER
FROM SCARR
WHERE CARRID = IS_CARRIERS-CARRID.
LO_EL_CARRIER->SET_STATIC_ATTRIBUTES(
STATIC_ATTRIBUTES = LS_CARRIER ).
Step 4: Go to the layout tab of the view controller and create the layout to display the airline
details.
In the context tab of the view controller Drag and drop the context node from the component
controller to view controllers context.
Page 828
In the layout tab use the code wizard to create the form. Select the form and click on continue.
Specify the context node and press enter.
Page 829
Arrange the layout and activate the whole component.
Step 5: Right click on the component and create a webdynpro chip for the component.
Page 830
Usually we used to create an webdynpro application to run the component, instead of creating
the webdynpro application we are creating the webdynpro chip which can be integrated in other
application using page builder of side panel.
Enter the name for the chip and press enter.
Enter the display name and description for the chip. Remember the display name of the chip.
This will be required while adding the chip to side panel.
Page 831
Create a inport for the webdynpro component.
Select the interface method created and click on enter.
Page 832
Port will be created as below.
Click on create parameter to create a parameter to the port.
Page 833
Select the field carrid and press enter.
Click on show tag button to add a tag to the parameter and click on create to create the tag.
Page 834
Enter the name of the tag as carrid.
Page 835
Save the webdynpro CHIP.

We have now created the webdynpro chip.
Page 836
Using a chip in side panel

In the previous section we have see how to create the CHIP. In the following section let us see
how to use the CHIP.
In the following example I am going to use the chip to be displayed in the side panel.
Step 1: Go to the Tcode SE80 and create the webdynpro component.

Step 2: In the context tab of the view controller create a Context node for the table SFLIGHT of
cardinality 0..N.
Step 3: In the layout tab of the view controller insert the page header UI element.
Page 837
Note: The name of the page header UI element should be PAGE_HEADER.
For more information on page header refer to the following link.

http://help.sap.com/saphelp_nw70ehp1/helpdata/en/13/a0af4241d4b911e10000000a1550b0/cont
ent.htm
Step 4: Right click on the page header UI element and select insert title content.
Provide the ID, and type of the UI element as transparent container.
Page 838
Step 5: In the layout tab of the view controller, create a table UI element and bind the context
node to the table.
Step 6: Create an object reference variable for the side panel in the attributes tab of the view
controller. Here we get the reference of the side panel and store it in this attribute and use it
across different methods in the view controller.
Step 7: Go to the do init method of the view controller and do the following.
Page 839
Initialize the values for the Context node:
Initialize the side panel.
Step 8: In the previous step we are initializing the side panel with action
OPEN_SIDE_PANEL. This event handler method will be called when event occur in the side
panel. Create an event handler method with the name OPEN_SIDE_PANEL and do the
following.
Write the coding to open the side panel.

Page 840
Step 9: Save and activate the whole component. Create the webdynpro application to test the
component.
Output:
Page 841
Thus far, we have created a webdynpro component with page builder and side panel. The output
of the application will be displayed as above. We now need to configure the side panel to add the
webdynpro chip in it.
Configuration Part:
There are two options to open the side panel configuration tool.
1. Append to the URL: &sap-config-mode=X
This is for the administrator, a client dependent customizing mode
2. Append to the URL: &sap-config-mode=config
This is for the programmer, a client independent customizing mode
Now in this example let us open the side panel configuration in admin mode.
In the URL of the application, add &sap-config=X and load the application.
You will now be able to see a link on the page header with the name set additional information.
Page 842
Click on the link. An configuration panel will be opened on the right hand side. Enter the name
for the configuration and click on create/edit.
Side panel customizing window will be opened. Enter the description and select the link chip
catalog on the right hand side of the window.
In the chip catalog, choose the chip which we have created. Drag and drop the chip in the side
panel.
Page 843
Note: Display name we provided at the time of creation of chip will be displayed.
You will able to see the view of the chip component loaded in the panel.
Save the configuration and close the window.

Also save the additional information to open the side panel as soon as the application is started.
Page 844
Now we do wanted our chip in the side panel to respond to the changes in the application.
Our next step will be wiring. Wiring in simple is nothing but transferring the data from the
application component to the CHIP. When the tag name on both the side is same wiring will be
done automatically by the system.
In the previous section while creating the chip component we created the tag for the inport
parameter with the name carrid. If we create a tag with the same name in the webdynpro
application then the data from the application to the chip component will be transferred
automatically.
To configure the tag in the webdynpro application, open the webdynpro application in the &sapconfig-mode=X and do the following.
Right click on the field which is to be transported and select manage tags.
Add the tag with the same name carrid to enable the auto transport.
Page 845
Close the window and open the webdynpro application in normal mode to test the application.
Output:
Page 846

SAP Webdynpro ABAP Guide

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

SAP Webdynpro ABAP Guide

Enviado por

Direitos autorais:

Formatos disponíveis

Introduction to webdynpro ABAP

Different controllers of Webdynpro

Context in Webdynpro ABAP

Structure of a Context node:

Each node consists of data can be one of the two ways:

A Simple webdynpro Application

Save it in a package or assign the component to the local object.

Enter the node name and press enter.

Create an attribute for the node as shown below.

After creating your screen will appear like below.

Insert a label UI element.

Now save and activate the whole application.

Part 2: Creating a webdynpro Application.

Save the application.

Test the application.

Reading the user input and setting

Enter the description in the text property of the Button UI element.

In the properties you will be able to see the method.

Right click on the context node and update the mapping.

System will prompt you to match the node. Select Yes.

Now we can see the attributes reflected in the view controller.

In the layout of the view controller insert a textview UI element.

Code will be generated as below.

Codes will be generated as below.

Final coding to be in the method submit.

LO_ND_NODE = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS>WDCTX_NODE ).

Enter the name and click on submit.

Navigation between views.

Assign the component to the package or save it in the local object.

Create an attribute for the node as shown below.

Enter the attribute name, choose a type and press enter.

Provide the ID and type of UI element.

Step 5 : In a similar way insert a input field UI element.

Create an event handler for the UI element.

Enter the name for the view and press enter.

Properties of the lable.

Assign the label for property to the text view.

In outbound plug tab of the second view create an outbound plug.

Right click on the outbound plug to create the navigation link.

Create a navigation link from second view to the first view.

Choose the first view as destination.

Code will be generated as below.

Note : I have removed the unwanted and dead codes.

Codes will be generated as below.

Create an event handler method for the button UI element.

Step 13: Save and activate the whole component.

Step 14 : Create an application and test the component.

Enter the name and press submit.

Passing data between the views using plugs

Assign the component to the package or save it in the local object.

In a similar way insert a input field UI element.

Create an action on enter for the input field UI element.

Step 4: Right click on the view controller and create a view.

Bind the property of text view to the attribute created.

Create an action for the button UI element.

Choose the view to be embedded as second view and press enter.

Coding will be generated as below.

Coding will be generated as below.

Pass the value to the parameter of the outbound plug.

Coding will be generated as below.

Note: I have removed the unwanted codes.

Code in this method:

Coding will be generated as below.

Save and activate the whole component.