Getting Started with Web Dynpro for ABAP

The purpose of this article is to provide the basic idea and framework on Web Dynpro ABAP developments, for the people who want to excel in this field. This is particularly useful for the people who had working experience in ABAP OOPs and want to learn Web Dynpro ABAP. This is the first article in this series, where extracting the data form a table has been explained in detail. The development involves two steps. 1) Creation of a table YMOVIE to store the data. 2) Developing a web dynpro application in order to extract the data form the table and display it in the browser. I presume that the reader has good knowledge on ABAP data dictionary, so I will not go into the details of the table creation. The table name is YMOVIE and has 7 fields, which are

MANDT client YYEAR Year CATEGORY Category ( The domain for this field has fixed values PIC, ACT and ACR ) WINNER Winner NOMINEE1 nominee 1 NOMINEE2 nominee 2 NOMINEE3 nominee 3

The table basically stores the oscar award data for different years and categories.

The domain ZZCAT is shown below:

Now coming to the second and important part of the development, the ABAP workbench ( SE80 ) is used to develop the web dynpro component / interface.

Enter the name of the web dynpro component and click on Display button. It will ask whether to create the new component or not. Click on yes and enter the description for the new webdynpro component.

The window name by default is same as name of the web dynpro component, but you can change it ( In this example it was changed to MAIN ). Save the object as local object.

When you first create a component you will see that some things are automatically generated by the system. Let us discuss about them in detail. Component Controller The component controller is a central location for data exchange between different views of one component. Each Web Dynpro component contains exactly one component controller. This controller is automatically created during the component creation and contains a context, events, and methods. the controllers of different component views can access context elements or methods of the component controller. The component controller has several tabs like context, attributes, methods and events etc.

The attribute WD_CONTEXT is a reference variable of type IF_WD_CONTEXT_NODE. This attribute technically refers to the root node of the context of the controller. There are several methods available in this interface, which are used to edit the data held by context nodes. For example:

GET_CHILD_NODE this method retrieves a specific child node. GET_ATTRIBUTE this method retrieves the value of a context attribute. BIND_TABLE This method binds an internal table to a context node.

Each controller contains a local interface which can be accessed in the controller. The controller attribute WD_THIS is a reference to this local interface. The methods and attribute of the local controller interfaces can be accessed using these reference variables.

Component Interface Each component has an interface in order to enable communication between Web Dynpro components and to enable a component to be called up by a user. This interface consists of two parts: Interface View of a Window Contained in a Component The interface view of a Web Dynpro window is used to link a window with a Web Dynpro application that can be called by the user. The interface view contains inbound and outbound plugs. When you create the component, system automatically creates a inbound plug with the name DEFAULT as a startup plug.

Interface Controller of a Component As well as the visual part, the interface of a Web Dynpro component also has a programmatic part, the interface controller. This is visible inside and outside of the component, and performs the program side of the exchange of business data. The interface controller, like the interface view, is not an independently implemented object. Instead, the visibility of methods and events of the component controller can be extended beyond the limitations of the component in question.

A window is used to combine several views. Each window has a uniquely assigned interface view. This interface view represents the outward view of the window. The interface view is linked with a Web Dynpro application so that the window can be called using a URL. The window consists of several tabs like inbound and outbound plugs used for navigating between different windows and its own context, attributes and methods.

To create a view right click on the component and select createview

Enter the name and description for the view.

To create elements under the root node, right click and select Insert element.

In the drop down, there are several options like label, button, input field etc.

We will create two labels and two input fields for year and category . We will also create a button with the name search. A table which will display the results based on the year and category provided in the input fields. In the property panel of the each element (button, label etc.,), the value entered in the text field appears as the label on the element.

After the creation of all the above said elements the layout of the view looks something like this (observe the message in the table element table does not contain visible columns)

Till now we have designed the layout of the view, which is the users view in the browser. We did not link the fields with any elements of the context, neither we have written any application logic to fill the table with the data. There are two types of context, one is context of the component and the other context of the view. The first one is global to the component and the elements in this context can be accessed from any of the view. On the other hand the view context is local to the view. We need to create and link the context elements for the two input fields and the table. To do this go to the context tab of the COMPONENTCONTROLLER and right click on context, go to create Attribute.

In the subsequent screen enter the values as shown below

Similarly create attribute for category field. And for the table we need to create a node instead of attribute as table contains multiple fields. For the table node movie enter the YMOVIE in the Dictionary structure field and click on add attribute from the structure.

Select the required fields and click on continue.

The context of the COMPONENTCONTROLLER now looks as shown below

Now as we built the context we need to link this attributes and nodes to the corresponding layout elements. Before this we need to copy this context to the view context. To do this click on the view VIEW1 and go to the context tab. Right click on the context and select copy nodes of different context.

In the next screen , in the field view/controller names enter the COMPONENTCONTROLLER ( you can do it by hitting F4 button also ) and select the radio button Do not copy node itself, but attributes and sub nodes only. Select the context in the next screen and select continue.

The view context after copying the nodes from the COMPONENTCONTROLLER looks like this

Now as we built the context of the view it is time to link the context elements with the layout elements.
In the property panel of the I/O field YEAR_I, there is a row with the name value and beside that you will find the button for binding the field with the context element.

When you click on the binding button a new window opens where all the context elements are listed. For our program purpose we will choose YEAR. Similarly for CATEGORY_I fields we choose category, for table element we choose the node MOVIE.

In case of table we need to further binding between the attributes of the MOVIE node and the columns of the table. To do this right click on MOVIE table element and select create binding.

In the next screen select the InputField in the cell editor of table column dropdown and value in the name of property to be found dropdown.

After finishing the binding the message table does not contain visible columns disappears from the table elements. If you expand the table node you will find different columns and captions created automatically. Select the captions for each column and enter the description in the text row.

The layout now appears something like this:

As we completed the binding part we will move onto building the application logic for extracting the data from the YMOVIE table based on the selection criteria given. In order to do that we need to assign an eventhandler method to the button SEARCH. Click on the button to create an eventhandler method.

Enter the name for action and description to create the evenhandler method.

Now double click on the ONCLICK action in the property panel of the button to enter the ABAP editor of the method ONACTIONONCLICK ( the system automatically adds ONACTION before the name of the action given by the user ).

In order to fetch the records from the table YMOVIE we need to retrieve the values entered in the fields year and category. The code for this can be generated automatically by the system using Web dynpro code Wizard (at the top of the screen). The code wizard can be used for several purposes like getting the

value from a node or attribute, to call methods etc. In our case we will use this for extracting the values from the attributes year and category. In the wizard window select read context radio button and using F4 button select YEAR. Do similarly for category. When we use the code wizard for category attribute some data declaration code generated is redundant ( declarations of Elem_Context and Stru_Context ). So, we need to comment them in order to pass the syntax check. The variables Item_Category and Item_year are used to store the values extracted from the context attributes YEAR and CATEGORY. In order to access the data from the YMOVIE table we will write a select statement as shown below:
select * from ymovie into corresponding fields of table itab_movie where yyear = Item_year and category = Item_Category.

Itab_movie is an internal table of type movie_data, where movie_data is a custom defined structure.
types: begin of movie_data, yyear type ymovie-yyear, category type ymovie-category, winner type ymovie-winner, nominee1 type ymovie-nominee1, nominee2 type ymovie-nominee2, nominee3 type ymovie-nominee3, end of movie_data.

After getting the values into internal table itab_movie we need to pass these values to the context node MOVIE in order to display it in the browser. We achieve this in two steps

- Use GET_CHILD_NODE method of the attribute WD_CONTEXT to instantiate MOVIE node. We store this reference in TABLE_NODE variable. - Using the BIND_ELEMENTS method we bind the internal table itab_movie with the context node MOVIE.

The code which dos the above said two steps is:
TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). TABLE_NODE->BIND_ELEMENTS( itab_movie ).

Save the code and activate the whole component. The view VIEW1 must be embedded into the window MAIN. Right click on the window and select Embed View.

Enter view VIEW1 in the next window by using F4. Save and activate the window.

The final step it to create a web dynpro application for accessing this component through web. This is something similar to the creation of transaction for a module pool program in classical ABAP. To create a web dynpro application right click on webdynpro component create web dynpro application. Enter the description and continue.

In the properties tab of the web dynpro application a URL is automatically generated by the system. This URL is used to access the webdynpro application from the web. To run the application either paste the URL in the IE or right click on web dynpro application and select test. This will open the application in a browser.

The result as it appears in the IE is shown below.

The complete code snippet of the method ONACTIONONCLICK is given below:

method ONACTIONCLICK . types: begin of movie_data, yyear type ymovie-yyear, category type ymovie-category, winner type ymovie-winner, nominee1 type ymovie-nominee1, nominee2 type ymovie-nominee2, nominee3 type ymovie-nominee3, end of movie_data. data: itab_movie type table of movie_data. /* Begin of the code generated by Webdynpro code Wizard */ data: Elem_Context type ref to If_Wd_Context_Element, Stru_Context type Wd_This->Element_Context , Item_CATEGORY like Stru_Context-CATEGORY. * get element via lead selection Elem_Context = wd_Context->get_Element( ).

* get single attribute Elem_Context->get_Attribute( exporting Name = `CATEGORY` importing Value = Item_Category ). data: * Elem_Context type ref to If_Wd_Context_Element, * Stru_Context type Wd_This->Element_Context , TABLE_NODE type ref to IF_WD_CONTEXT_NODE, Item_YEAR like Stru_Context-YEAR. * get element via lead selection Elem_Context = wd_Context->get_Element( ). * get single attribute Elem_Context->get_Attribute( exporting Name = `YEAR` importing Value = Item_Year ). /* End of the code generated by Webdynpro code Wizard */ select * from ymovie into corresponding fields of table itab_movie where yyear = Item_Year and category = Item_Category. TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). TABLE_NODE->BIND_ELEMENTS( itab_movie ). endmethod.

Getting Started with Web Dynpro for ABAP Part II

In the first part, we created a webdynpro application which consists of one window and one view. In this part of the series, we will concentrate on how to build an application having more than one view and achieve the navigation between different views. Before going into the details of the development let us first understand some of the concepts used in creating the navigation. Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. While inbound plugs define the possible starting points of a view, the outbound plugs of a view can be used to call a subsequent view. Plugs are part of the controller of a view. They are always assigned to exactly one view.

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. Note: A view can have multiple inbound and outbound plugs. In technical terms creation of each inbound plus for a view creates an eventhandler method, so that the entering of a view using an inbound plug always causes an event handler method to be called Now coming to the development, the below schematic diagram depicts the navigation between different views in the application.

The application will have one window MAIN and three views VIEW1, VIEW2 and VIEW3. The view1 will have two inbound plugs ( in_1_view1 and in_2_view1 ) and two outbound plugs ( out_1_view1 and out_2_view1 ).

As soon as we create an inbound plug an event handler method with the name HANDLE will be created in the methods tab of the view.

Similarly the views view2 and view3 have one inbound and one outbound plug each. After the creation of all the plugs, we need to embed the views in the MAIN window.

In the subsequent window select the view to be embedded by choosing F4. In the similar way add view2 and view3 also.

After embedding all the views, the window looks something as shown below

Now we need to create the navigation links between the inbound and outbound plugs. To create a navigation link right click on the outbound plug of view1 and select create navigation link

In the subsequent window select the inbound plug of the view2

Similarly for the second outbound plug of the view1 assign the inbound plug of the view3. Also, connect the outbound plug of the view2 with the first inbound plug of the view1 and outbound plug of the view3 with the second inbound plug of view1. After creating the navigation links for the plugs the window looks as shown below Note: The symbol represents the navigation link between the inbound and outbound plugs.

We will now move to the creation of the context for componentcontroller and view controllers. As the creation of the context nodes had been explained in detail in the first part of this series , it is not explained here in detail. The component controller has two nodes MOVIE and SEL_OPT

Controller of view1 contains two nodes MOVIE and SEL_OPT. These nodes are copied from the context of the componentcontroller using the wizard. The layout of the view1 is shown below

An event with the name onclick is assigned to the button search. The code for the corresponding eventhandler method is given below.
method ONACTIONONCLICK . types: begin of movie_data, yyear type ymovie-yyear, category type ymovie-category, winner type ymovie-winner, nominee1 type ymovie-nominee1, nominee2 type ymovie-nominee2, nominee3 type ymovie-nominee3, end of movie_data.

data: itab_movie type table of movie_data, TABLE_NODE type ref to IF_WD_CONTEXT_NODE. data: Node_Sel_Opt type ref to If_Wd_Context_Node, Elem_Sel_Opt type ref to If_Wd_Context_Element, Stru_Sel_Opt type Wd_This->Element_Sel_Opt , Item_YYEAR like Stru_Sel_Opt-YYEAR. * navigate from to via lead selection Node_Sel_Opt = wd_Context->get_Child_Node( Name = wd_This->wdctx_Sel_Opt ). * get element via lead selection Elem_Sel_Opt = Node_Sel_Opt->get_Element( ). * get single attribute Elem_Sel_Opt->get_Attribute( exporting Name = `YYEAR` importing Value = Item_Yyear ). data: * Node_Sel_Opt type ref to If_Wd_Context_Node, * Elem_Sel_Opt type ref to If_Wd_Context_Element, * Stru_Sel_Opt type Wd_This->Element_Sel_Opt , Item_CATEGORY like Stru_Sel_Opt-CATEGORY. * navigate from to via lead selection Node_Sel_Opt = wd_Context->get_Child_Node( Name = wd_This->wdctx_Sel_Opt ). * get element via lead selection Elem_Sel_Opt = Node_Sel_Opt->get_Element( ). * get single attribute Elem_Sel_Opt->get_Attribute( exporting Name = `CATEGORY` importing Value = Item_Category ). select * from ymovie into corresponding fields of table itab_movie where yyear = Item_Yyear and category = Item_Category. if sy-subrc eq 0. TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). TABLE_NODE->BIND_ELEMENTS( itab_movie ).

wd_This->Fire_Out_1_View1_Plg( ). else. wd_This->Fire_Out_2_View1_Plg( ). endif. endmethod.

To generate the code (highlighted in blue color) which actually carries out the navigation between different views, we use the code wizard again as shown below.

The context of the view2 contains the MOVIE node copied from the context of the componentcontroller.

The layout of the view2 is shown below

View2 has a button with the name view2->view1 which will trigger the action view2_to_view1. The final output in the web page looks like this:

The result screen for the 2006 year in PIC category is shown below:

The button view2->view1 takes you to the first screen. If we enter the year and category combination, which does not exist in the table YMOVIE the message appears in the different screen and the navigation from this screen is achieved by the button view3->view1.

Getting Started with Web Dynpro for ABAP Part III

In the first and the second part of this series we learned how to build a web dynpro component and navigate between different views with in the component. In this part of the series we will move on to learn more complicated scenarios where one component is embedded into another component. The example consists of developing two web dynpro components Y_MOVIE_COMPOUSAGE (say this as component A) and Y_WDA_EXAMPLE_3 (say this as component B). Before dwelling into the creation of the actual application lets get into some theory. Cross-component programming: Web dynpro components are reusable modules. From with in a component, an interface enables you to use the data and functions of another component. Interface controller of a component: Events, methods and context nodes of the component controller can be made visible for other components, to do this mark the Interface checkbox to assign them to the component interface. Interface node property checkbox for the node in the context:

Interface checkbox for the controller method:

When we mark the checkbox the corresponding nodes and methods will become a part of the interface controller of the component and available for other components to access. Now coming to the development, we will first develop a component with the name Y_MOVIE_COMPUSAGE. As we have already well versed with the creation of the component, I am not going into the details of the creation of the component. The component contains one view with the name MAIN and a user defined method GET_RECORDS which is marked as Interface method by checking the INTERFACE checkbox. The component controller consists of a node with the name MOVIE having four attributes WINNER, NOMINEE1, NOMINEE2 and NOMINEE3

The layout of the view MAIN contains a table element DETAILS which is bound to the context node MOVIE. The layout looks like shown below:

The methods tab of the component controller contains a user defined method GET_RECORDS with two import parameters P_YYEAR and P_CATEGORY

The method retrieves the data from the table YMOVIE for the given P_YEAR and P_CATEGORY. The complete coding of the method is given below:

method GET_RECORDS. types: begin of result, winner type ymovie-winner, nominee1 type ymovie-nominee1, nominee2 type ymovie-nominee2, nominee3 type ymovie-nominee3, end of result. data: result_data type table of result. data: TABLE_NODE type ref to IF_WD_CONTEXT_NODE. select * from ymovie into corresponding fields of table result_data where yyear = p_year and category = p_category. TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). TABLE_NODE->BIND_ELEMENTS( result_data ). endmethod.

Now we built another component Y_WDA_EXAMPLE_3 which uses the component Y_MOVIE_COMPUSAGE. This component has one view with the name VIEW1. This component usage has to be defined at componetcontroller level and at individual view level. At the component controller level

The usage is created by clicking on the create interface controller. At the individual view level ( VIEW1 ):

button and selecting the appropriate component and its

By declaring this we are granting the access for Y_WDA_EXAMPLE_3 component to the component Y_MOVIE_COMPUSAGE and all the interface methods and nodes. The context of the component controller consists of node SEL_OPT which has two attributes YYEAR and CATEGORY.

This node has supply function with the name SELOPTIONS

Supply functions are methods which are used to fill the context nodes with the data. These methods are called when the elements of the associated nodes are accessed by the application. The layout of the VIEW1 contains a table and a ViewcontainerUIElement to embed the view MAIN of the used component Y_MOVIE_COMPUSAGE. The table UI element is bound to the node SEL_OPT of the component.

The layout looks as shown below:

The coding of the supply function is shown below:

method SELOPTIONS. * General Notes * ============= * A common scenario for a supply method is to aquire key * informations from the parameter and then * to invoke a data provider. * A free navigation thru the context, especially to nodes on * the same or deeper hierachical level is strongly discouraged, * because such a strategy may easily lead to unresolvable * situations!! * if necessary, get static attributes of parent element * DATA ls_parent_attributes TYPE wd_this->element_context. * parent_element->get_static_attributes( * IMPORTING * static_attributes = ls_parent_attributes ). * ** data declaration * DATA ls_sel_opt TYPE wd_this->Element_sel_opt. ** @TODO compute values ** e.g. call a data providing FuBa ** ls_sel_opt-YYEAR = 1. " sample only ! ** ls_sel_opt-CATEGORY = 1. " sample only ! ** bind a single element * node->bind_structure( * new_item = ls_sel_opt * set_initial_elements = abap_true ). *

types: begin of sel_cri, yyear type ymovie-yyear, category type ymovie-category, end of sel_cri. data: itab_sel type table of sel_cri. data: TAB_NODE type ref to IF_WD_CONTEXT_NODE. * The year and category data is extracted from the table ymovie * And stored in the internal table itab_sel, which inturn is binded * To the context node SEL_OPT select * from ymovie into corresponding fields of table itab_sel where yyear <> space. TAB_NODE = WD_CONTEXT->GET_CHILD_NODE( 'SEL_OPT' ). TAB_NODE->BIND_ELEMENTS( itab_sel ). endmethod.

Every UI element in the view will have some events associated with it and we can define the events and implement the corresponding evenhandler method. For the table element SELOPT we will define the event ONSELECT for onLeadSelect event.

The corresponding eventhandler method with the name ONACTIONONSELECT will be added to the methods tab automatically by the system. The complete coding is shown below:
method ONACTIONONSELECT. data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_comp_use1( ). if lo_cmp_usage->has_active_component( ) is initial.

lo_cmp_usage->create_component( ). endif. DATA lo_nd_sel_opt TYPE REF TO if_wd_context_node. DATA lo_el_sel_opt TYPE REF TO if_wd_context_element. DATA ls_sel_opt TYPE wd_this->element_sel_opt. DATA lv_yyear LIKE ls_sel_opt-yyear. * navigate from to via lead selection lo_nd_sel_opt = wd_context->get_child_node( name = wd_this->wdctx_sel_opt ). * get element via lead selection lo_el_sel_opt = lo_nd_sel_opt->get_element( ). * get single attribute lo_el_sel_opt->get_attribute( EXPORTING name = `YYEAR` IMPORTING value = lv_yyear ). * DATA lo_nd_sel_opt TYPE REF TO if_wd_context_node. * DATA lo_el_sel_opt TYPE REF TO if_wd_context_element. * DATA ls_sel_opt TYPE wd_this->element_sel_opt. DATA lv_category LIKE ls_sel_opt-category. * navigate from to via lead selection lo_nd_sel_opt = wd_context->get_child_node( name = wd_this->wdctx_sel_opt ). * get element via lead selection lo_el_sel_opt = lo_nd_sel_opt->get_element( ). * get single attribute lo_el_sel_opt->get_attribute( EXPORTING name = `CATEGORY` IMPORTING value = lv_category ). DATA lo_INTERFACECONTROLLER TYPE REF TO YIWCI__MOVIE_COMPUSAGE . lo_INTERFACECONTROLLER = wd_this->wd_cpifc_comp_use1( ). lo_interfacecontroller->get_records( p_category = lv_category " ymovie-category p_year = lv_yyear " ymovie-yyear ). endmethod.

In the above coding the calling of the method get_records which is the method of the used component Y_MOVIE_COMPUSAGE is called using the webdynpro code wizard as shown below:

After creating the web dynpro application for the component activate the whole component . The result is shown below:

For the year 2004 and category ACT the result is shown in the second table. If we select different row in the first table the result changes in the second table.

Sankar Rao Bhatta is an SAP NetWeaver Consultant with Intel , India. After completing M.Tech from IIT Bombay, he worked with IBM as SAP Consultant before joining Intel. Other areas of his expertise include SAP SRM and ABAP.

http://www.riyaz.net/blog/getting-started-with-web-dynpro-for-abap-part-iii/technology/sap/523/