This action might not be possible to undo. Are you sure you want to continue?
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:
Enter the name of the web dynpro component and click on “Display” button.Now coming to the second and important part of the development. the ABAP workbench ( SE80 ) is used to develop the web dynpro component / interface. It will ask whether to create the new component or not. The window name by default is same as name of the web dynpro component. Save the object as local object. Click on yes and enter the description for the new webdynpro component. but you can change it ( In this example it was changed to MAIN ). .
events. There are several methods available in this interface. Each Web Dynpro component contains exactly one component controller. and methods. BIND_TABLE – This method binds an internal table to a context node. 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. which are used to edit the data held by context nodes. The controller attribute WD_THIS is a reference to this local interface. Component Controller The component controller is a central location for data exchange between different views of one component. attributes.When you first create a component you will see that some things are automatically generated by the system. GET_ATTRIBUTE – this method retrieves the value of a context attribute. This controller is automatically created during the component creation and contains a context. Let us discuss about them in detail. methods and events etc. . The methods and attribute of the local controller interfaces can be accessed using these reference variables. The component controller has several tabs like context. the controllers of different component views can access context elements or methods of the component controller. Each controller contains a local interface which can be accessed in the controller. For example: GET_CHILD_NODE – this method retrieves a specific child node.
The interface controller. the interface of a Web Dynpro component also has a programmatic part. This interface view represents the outward view of the window. is not an independently implemented object. attributes and methods. A window is used to combine several views. Each window has a uniquely assigned interface view. The interface view is linked with a Web Dynpro application so that the window can be called using a URL. and performs the program side of the exchange of business data. Instead. This is visible inside and outside of the component. system automatically creates a inbound plug with the name DEFAULT as a startup plug. like the interface view.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. the interface controller. the visibility of methods and events of the component controller can be extended beyond the limitations of the component in question. When you create the component. 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. Interface Controller of a Component As well as the visual part. The window consists of several tabs like inbound and outbound plugs used for navigating between different windows and its own context. . The interface view contains inbound and outbound plugs.
right click and select “Insert element”.To create a view right click on the component and select create→view Enter the name and description for the view. To create elements under the root node. .
label etc.In the drop down. We will also create a button with the name search.). 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”) . the value entered in the “text” field appears as the label on the element. input field etc. A table which will display the results based on the year and category provided in the input fields. We will create two labels and two input fields for year and category .. there are several options like label. button. In the property panel of the each element (button.
On the other hand the view context is local to the view. The first one is global to the component and the elements in this context can be accessed from any of the view. go to create → Attribute. which is the user’s view in the browser. neither we have written any application logic to fill the table with the data. We need to create and link the context elements for the two input fields and the table. one is context of the component and the other context of the view. In the subsequent screen enter the values as shown below . There are two types of context.Till now we have designed the layout of the view. We did not link the fields with any elements of the context. To do this go to the context tab of the COMPONENTCONTROLLER and right click on context.
For the table node “movie” enter the YMOVIE in the Dictionary structure field and click on “add attribute from the structure”. And for the table we need to create a node instead of attribute as table contains multiple fields. Select the required fields and click on continue. .Similarly create attribute for category field.
To do this click on the view “VIEW1″ and go to the “context” tab.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. Right click on the context and select “copy nodes of different context”. Before this we need to copy this context to the view context. .
In the next screen . In the property panel of the I/O field YEAR_I. 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. Select the context in the next screen and select continue. . but attributes and sub nodes only”. there is a row with the name “value” and beside that you will find the button for binding the field with the context element. 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.
Similarly for CATEGORY_I fields we choose category. For our program purpose we will choose YEAR. 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”.When you click on the binding button a new window opens where all the context elements are listed. for table element we choose the node MOVIE. .
Select the captions for each column and enter the description in the “text” row. .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. If you expand the table node you will find different columns and captions created automatically. After finishing the binding the message “table does not contain visible columns” disappears from the table elements.
In order to do that we need to assign an eventhandler method to the button SEARCH. to . Click on the button create an eventhandler method.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.
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 ).Enter the name for action and description to create the evenhandler method. 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 .
Do similarly for category. where movie_data is a custom defined structure. nominee3 type ymovie-nominee3. . TABLE_NODE->BIND_ELEMENTS( itab_movie ). Itab_movie is an internal table of type movie_data. yyear type ymovie-yyear. In the wizard window select “read context” radio button and using F4 button select YEAR. 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. types: begin of movie_data. Right click on the window and select “Embed View”. We achieve this in two steps . The variables Item_Category and Item_year are used to store the values extracted from the context attributes YEAR and CATEGORY.for several purposes like getting the value from a node or attribute. nominee2 type ymovie-nominee2. The code which dos the above said two steps is: TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). 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. .Using the BIND_ELEMENTS method we bind the internal table “itab_movie” with the context node MOVIE. We store this reference in TABLE_NODE variable. So. Save the code and activate the whole component.Use GET_CHILD_NODE method of the attribute WD_CONTEXT to instantiate MOVIE node. In our case we will use this for extracting the values from the attributes year and category. winner type ymovie-winner. we need to comment them in order to pass the syntax check. category type ymovie-category. nominee1 type ymovie-nominee1. to call methods etc. When we use the code wizard for category attribute some data declaration code generated is redundant ( declarations of Elem_Context and Stru_Context ). The view VIEW1 must be embedded into the window MAIN.
This is something similar to the creation of transaction for a module pool program in classical ABAP. The final step it to create a web dynpro application for accessing this component through web. Save and activate the window. Enter the description and continue. To create a web dynpro application right click on webdynpro component create → web dynpro application. 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.Enter view VIEW1 in the next window by using F4. 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 complete code snippet of the method ONACTIONONCLICK is given below: method ONACTIONCLICK . * get element via lead selection Elem_Context = wd_Context->get_Element( ). /* Begin of the code generated by Webdynpro code Wizard */ data: Elem_Context type ref to If_Wd_Context_Element.The result as it appears in the IE is shown below. Stru_Context type Wd_This->Element_Context . . data: itab_movie type table of movie_data. category type ymovie-category. Item_CATEGORY like Stru_Context-CATEGORY. end of movie_data. types: begin of movie_data. nominee3 type ymovie-nominee3. nominee1 type ymovie-nominee1. winner type ymovie-winner. yyear type ymovie-yyear. nominee2 type ymovie-nominee2.
* get single attribute Elem_Context->get_Attribute( exporting Name = `YEAR` importing Value = Item_Year ). data: * Elem_Context type ref to If_Wd_Context_Element. TABLE_NODE type ref to IF_WD_CONTEXT_NODE. /* 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. endmethod. TABLE_NODE = WD_CONTEXT->GET_CHILD_NODE( 'MOVIE' ). * Stru_Context type Wd_This->Element_Context . . * 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 ). Item_YEAR like Stru_Context-YEAR. TABLE_NODE->BIND_ELEMENTS( itab_movie ).