Step by step procedure to create Web dynpro application using ABAP

[Former Member]

Web Dynpro ABAP is the SAP standard UI technology for developing Web applications in the ABAP environment. It consists of a runtime environment and a graphical development environment with special Web Dynpro tools that are integrated in the ABAP Workbench (SE80).

Web Dynpro offers the following advantages for application developers:

• The use of declarative and graphical tools significantly reduces the implementation effort
  
• Web Dynpro supports a structured design process
  
• Strict separation between layout and business data
  
• Reuse and better maintainability by using components
  
• The layout and navigation is easily changed using the Web Dynpro tools
  
• Stateful applications are supported - that is, if the page is changed, the data that is required remains intact so that you can re-access the data in the entire application context.
  
• Automatic data transport using data binding
  
• Automatic input check
  
• Automatic operation of the Web Dynpro application using the keyboard
  
• User interface accessibility is supported
  
• Full integration in the reliable ABAP development environment
  
  
  

Creating Web dynpro using ABAP
Step 1: Creating a Component
Go to transaction code SE80 and select Web Dynpro Comp./ Intf. and give the component name ZFLIGHT_SEARCH_COMPONENT and press enter.

It will ask for creating object. Click ‘Yes’. Select the Package name and click on Save button or click on Local Object button for saving the component in $TMP.

• Now the screen looks as shown below
  
  
  
  
  

• Now double-click on the ComponentController object of your new component. The Context tab page of the controller is automatically displayed, and you now have the option of defining a context. Make sure that the Workbench is in change mode.
• Open the context menu of the CONTEXT root node and choose Create->Nodes.
• Enter a name for the new node as 'NODE_DESTFROM' and confirm the dialog without worrying about the other criteria.
• The new node automatically appears below the root node, and you can now create an attribute for this node.
• To do this, open the context menu of the new Context node and choose Create Using Wizard -> Attributes from components of structure.
• Enter structure name for the attribute as 'BAPISFLDST' and continue.
• Select all the fields in the following dialog and continue
• Now the screen looks as shown below.
  
  
  
  
• Create one more node by name 'NODE_DESTTO' and add the attribute for the node with structure 'BAPISFLDST' similarly as the above steps.
• Now the screen looks as below.
  
  
  
  
• Open the context menu of your component and choose Create -> View.
• Give the first view name as 'SEARCH_VIEW' and confirm the window.
• As soon as you have saved your work, the Views node is inserted in the hierarchy of the object list below the component, and the SEARCH_VIEW you have just created is stored there.
• Open the context menu of the Views node and choose Create to add a second view as RESULT_VIEW and confirm the process and save the changes.
  
  

Step 2: Designing the Search View

• Double-click on the Search view in the view node of the object list. This takes you automatically to the Layout tab page of your view. Make sure that the Workbench is in change mode.
• Open the context menu of the ROOTUIELEMENTECONTAINER and choose Insert Element....
• First, an element of the type label is to be inserted. Enter a suitable name for the element as 'DESTFROM_LABEL' and choose Label from the input help for the type line. Confirm the dialog box.
• Open the context menu of the ROOTUIELEMENTECONTAINER again and choose Insert Element....
• The next element is to be an input field, so enter a suitable name as DESTFROM_INPUT and choose InputField from the list of element types. Confirm the dialog box.
• Now select the element of the type Label in the element list below the ROOTUIELEMENTECONTAINER. Go to properties of the label and select 'DESTFROM_INPUT' for labelFor and enter 'Destination From' for text.
• Similar to the above steps create another label with name DESTTO_LABEL and an inputfield with name DESTTO_INPUT and select DESTTO_INPUT in the labelfor properties of DESTTO_LABEL.
• Open the context menu of the ROOTUIELEMENTECONTAINER, create a button with name as SEARCH_BUTTON and save your work.
• Switch to the Outbound Plugs tab page and enter the name of the new plug as 'SEARCH_OUT' in the table and save your changes.
• Now switch to the Inbound Plugs tab page and enter the name of the new plug as 'SEARCH_IN' in the table and save your work again.
• Switch back to the Layout tab page and select the SEARCH_BUTTON entry in the element hierarchy below the ROOTUIELEMENTECONTAINER. In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.
• First choose the text property and enter a suitable text as Search in the Value column. This text will be displayed on the button later.
• Below the Events header, choose the OnAction row. You must now create an action for this event, which calls the outbound plug of the view. Pressing the button on the far right-hand side of this row starts a create dialog for such an action. Enter a name for the new action as FLIGHT_SEARCH and then select the outbound plug via which the view should be exited when you press the SEARCH_BUTTON button. Save your changes.
• This automatically creates an ONACTIONFLIGHT_SEARCH method for your new action, which is later called when the SEARCH_BUTTON button is pressed. Double-click the action you created in the table to be taken to an editor. The development environment has already generated the call of the outbound plug in the corresponding method, so you do not have to program it yourself here.
  
  method ONACTIONFLIGHT_SEARCH.   wd_this->fire_search_out_plg(). endmethod.
  
• Save your changes.
  
  

Step 3: Context Mapping of the Search View

• Switch to the Context tab page. The context of the SEARCH_VIEW that is still empty is displayed on the left-hand side of the page. The context of the component controller that you have just edited to define mapping is available on the right-hand side.
• Open the context menu of the root node of the view context and create 2 new nodes by name NODE_DESTFROM and NODE_DESTTO.
• Now open the context menu of NODE_DESTFROM node and choose Define Mapping.
• A new window now lists all nodes of the component controller context that are available.
• Select NODE_DESTFROM node by double-clicking on it. Confirm the dialog box that follows once you have read it.
• Similarly map NODE_DESTTO node.
• Now the screen looks as shown below.
  
  
  
  
  

Step 4: Binding the attribute

• Switch to the Layout tab page and ensure that the Workbench is in change mode.
• Select the DESTFROM_INPUT element in the hierarchy below the ROOTUIELEMENTECONTAINER.
• Find the value entry in the properties table and click on the corresponding button in the Binding column on the right-hand side of the table.
• The context hierarchy of the view is now displayed in a separate window. Double-click on the CITY attribute of NODE_DESTFROM node.
• The Value column of the table now contains the SEARCH_VIEW.NODE_DESTFROM.CITY attribute.
• Similarly bind SEARCH_VIEW.NODE_DESTTO.CITY attribute to DESTTO_INPUT element.
• Now the screen looks as shown below.
  
  
  
  
• Save your changes.
  
  

Step 5: Designing the Result View

• Double-click on Result_View in the view node of the object list. The Layout tab page of your view is displayed automatically again. Make sure that the Workbench is in change mode.
• Open the context menu of the ROOTUIELEMENTCONTAINER and choose Insert Element. Give the name as FLIGHT_TAB and select the typ as TABLE and confirm the dialog box.
• Open the context menu of the ROOTUIELEMENTECONTAINER again and create a button with a suitable name as BACK_BUTTON in the same way.
• Switch to the Outbound Plugs tab page and enter the name of the new plug as RESULT_OUT in the table.
• Now switch to the Inbound Plugs tab page and enter the name of the new plug as RESULT_IN in the table. Save your changes.
• Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BACK_BUTTON button and the RESULT_OUT outbound plug.
• Switch back to the Layout tab page and select the BACK_BUTTON entry in the element hierarchy below the ROOTUIELEMENTECONTAINER. In the table below the hierarchy, once again you have the option of maintaining the properties and linking the selected element.
• First choose the text property and enter a suitable text as Back in the Value column.
• Below the Events header, choose the OnAction row. You have to create another action for the OnAction event here, which calls the outbound plug of the view when the BACK_BUTTON button is clicked. Enter a name for the action in the dialog box as GOBACK, select the only available outbound plug, and confirm your entries.
• Save your changes.
  
  

Step 6: Maintaining the context of the Result view

• Switch to the Context tab page. The context of the RESULTVIEW that is still empty is displayed on the left-hand side of the page. The context of the component controller that you have just edited to define mapping is available on the right-hand side.
• Open the context menu of the root node of the view context and create 2 new nodes by names NODE_DESTFROM and NODE_DESTTO.
• Now open the context menu of the NODE_DESTFROM and choose Define Mapping and select NODE_DESTFROM and confirm the dialog box.
• Similarly map NODE_DESTTO node.
• Create one more node with name NODE_RESULT with cardinality – 0..n.
• Select the context of NODE_RESULT and choose Create Using Wizard -> Attributes from components of structure.
• Enter structure name for the attribute as BAPISFLDAT and continue.
• Select all the fields and confirm the dialog.
• Switch to the Layout tab page.
• Select FLIGHT_TAB->CAPTION element in the hierarchy below the ROOTUIELEMENTCONTAINER and enter List of Flights in the text property row.
• Select FLIGHT_TAB element in the hierarchy and bind NODE_RESULT to the dataSource property.
• Select the context of FLIGHT_TAB and select Create Binding.
• Enter Standard cell editor as TEXTVIEW and activate all bindings and confirm the dialog box.
• Save your changes.
  
  

Step 7: Embedding the views in a window

• Open the Windows node in the object list hierarchy on the right-hand side of the Workbench.
• Double-click on the ZFLIGHT_SEARCH_COMPONENT window there, which was created automatically.
• The structure of your window is now displayed in the Editor on the right-hand side. It is still empty since you have not yet embedded any views.
• In the structure of the window, open the context menu for the ZFLIGHT_SEARCH_COMPONENT node and choose Embed View. Make sure that the Workbench is in change mode.
• In the following window, specify the name of the view that should be embedded. The input help for the corresponding field displays all views for the current component.
• Select the SEARCH_VIEW by double-clicking on it and confirm the window.
• Repeat the process to embed the RESULT_VIEW in the window.
• In the structure of the window, open the context menu for the SEARCH_VIEW node and choose Set as Default.
• Save your changes.
  
  

Step 8: Define the navigation

• Open the SEARCH_VIEW node in the structure of your window.
• Open the context menu of the SEARCH_OUT outbound plug and choose Create Navigation Link.
• Select the RESULT_VIEW and confirm the dialog.
• After you have selected the target view, the only inbound plug RESULT_IN that is available for this view was automatically selected for the navigation. If a view has several inbound plugs, you will have to make another decision again here.
• Save your changes.
• The navigation you have just created appears in the structure of the window as an additional sub node below the node of the SEARCH_OUT outbound plug of the SEARCH_VIEW.
• Now open the RESULT_VIEW node and repeat the whole operation to create a navigation link from the RESULT_OUT outbound plug of the second view to the SEARCH_IN inbound plug of the search view.
• Now the screen looks as shown below.
  
  
  
  
  

Step 9: Populating the data

• Go to Context tab of RESULT_VIEW.
• Go to the properties of RESULT_VIEW and enter GET_FLIGHTLIST in SUPPLY FUNCTION property so that a method by name GET_FLIGHTLIST get created automatically.
• Go to Methods tab and double click on method GET_FLIGHTLIST to go to the code editor.
• Write the below code in GET_FLIGHTLIST method
  
  DATA: tab_flightlist    TYPE STANDARD TABLE OF bapisfldat,       dest_from         TYPE bapisfldst,       dest_to           TYPE bapisfldst. DATA : dest_node  TYPE REF TO if_wd_context_node. dest_node = wd_context->get_child_node( name = 'NODE_DESTFROM' ). dest_node->get_attribute( EXPORTING name = 'CITY' IMPORTING value =   dest_from-city  ).  dest_node = wd_context->get_child_node( name = 'NODE_DESTTO' ).  dest_node->get_attribute( EXPORTING name = 'CITY' IMPORTING value = dest_to-city ).  CALL FUNCTION 'BAPI_FLIGHT_GETLIST'    EXPORTING      destination_from = dest_from      destination_to   = dest_to    TABLES      flight_list      = tab_flightlist.  node->bind_elements( tab_flightlist ).
  
• Go to HANDLERESULT_IN method and insert the below code
  
  DATA : node TYPE REF TO if_wd_context_node,        ele  TYPE REF TO if_wd_context_element.  node = wd_context->get_child_node( name = 'NODE_RESULT' ).  ele  = node->get_element( ).  get_flightlist( node = node parent_element = ele ).
  
  
  

Step 10: Creating and testing the application

• Open the context menu for your Web Dynpro component in the object list hierarchy and choose Create -> Web Dynpro Application.
• Give your application an appropriate name as ZFLIGHT_SEARCH_APP and confirm the dialog.
• Save your changes.
• Activate all parts of your component by choosing the corresponding entry in the context menu of the ZFLIGHT_SEARCH_COMPONENT component.
• Then open the context menu of the Web Dynpro application you have just created and choose Test.
• The Workbench ensures that a browser is started and that the URL that was generated for your application is called. You may need to log on to your system again using the browser.
• Give the destination from and destination to and click on Search button to view the list of flights available for the given destinations. Click the Back button to change your selection criteria.
  
  
  
  
  Note: The screen shots are taken from ECC 6.0.