Saturday, December 18, 2010

Steps for creating a Web Dynpro Component for Adobe interactive Forms using the Enumerated Drop Down Box

1. Go to transaction SE80 and create a web Dynpro component.

2. Enter the View Name , ‘Main_View’ in the pop up window and press ‘Enter’ .

3. Assign a package and save it.

4. Go to context tab of the Main view and create an empty node.

5. Give the name ‘ROOT_NODE’ to the node and press ‘Enter’ .

6. Create Attribute ‘ZUSER” under node ‘ROOT_NODE’ .

7. Create an attribute under the “Root_Node”.

8. Give the Attribute name as ‘PDF_SOURCE’ and Type as ‘XSTRING’ .

At the time of form submit, the form is stored in PdfSource in Binary mode.

So, when once user fills the form and submits it, the same form will be generated with data.

9. Create an attribute under the “Root_Node”.

10. Give the name ‘ZUSERNAME’ to the node and press ‘Enter’ .



Save and Activate the web Dynpro component.

12. Go to Layout tab of MAIN_VIEW and right click on ‘ROOTUIELEMENTCONTAINER’ to insert element.

13. Enter the details in the pop up window. Give the name of the element , ‘zuser_element' and select the Type as ‘Interactive Form’.

14. ‘Enabled’ field is a required entry for an Interactive form.

15. Click the button in the property list for the property ‘dataSource’ and select the node ‘ZROOTNODE’ from the context window .

16. Click the button in the property list for the property ‘pdfSource’ and select the node PDF_SOURCE from the context window.

Click the button in the property list for the property ‘pdfSource’ and select the node PDF_SOURCE from the context window.

17. For the property ‘templateSource’ give the name of the adobe form ‘ZDDLB_DEMO_FORM in the value tab . Double click on the adobe form name.

Enter the Interface name ‘ZDDLB_DEMO_INF ’ and click on context button to create interface from context node .



Select the node ‘ROOT_NODE’ from the context window and press ‘Enter’ .

19. Save the Form and Interface .

20. Save the Main_View.

21. The elements in form context can be seen in the Data view of the form Layout .

22. Drag and drop the ‘Enumerated Drop Down List’ button from WebDynpro Native category under Library palette.Drag and drop the ‘ZUSER’ node on the list box. Don’t Update any related Properties.

23. Drag and drop the ‘Submit’ button from WebDynpro Native category under Library palette.

24. Select the event ‘click*’ and language ‘JavaScript’ .

25. Change the form layout type to ‘ZCI layout’ in the properties tab of the form builder.



26. Insert the Webdynpro Script.

27. Drag and drop the ‘Text Box’ from WebDynpro Native category under Library palette.

28. Bind the Text Box with the element ‘ZuserSelected’.

29. Save and activate both form and interface

30. In the property list under Events, click on the create button for the event ‘onSubmit’ and create an action ‘CLICKME’

31. Go to the ‘Actions’ tab of MAIN_VIEW. Action ‘CLICKME’ will appear.

32. Copy Paste the code in the method ‘ONACTIONCLICKME’.

data lo_nd_root_node type ref to if_wd_context_node.
data lo_el_root_node type ref to if_wd_context_element.
data ls_root_node type wd_this->element_root_node.
data lv_zuser type wd_this->element_root_node-zuser.

DATA:
NODE_INFO TYPE REF TO IF_WD_CONTEXT_NODE_INFO,
it_dropdown TYPE WDR_CONTEXT_ATTR_VALUE_LIST,
WA type WDR_CONTEXT_ATTR_VALUE,
* wa_zpsfins02 type zpsfins02,
IT_ZPSCAT type STANDARD TABLE OF USER_ADDR ,
WA_ZPSCAT type USER_ADDR .

* navigate from to via lead selection
lo_nd_root_node = wd_context->get_child_node( name = wd_this->wdctx_root_node ).

* @TODO handle non existant child
* IF lo_nd_root_node IS INITIAL.
* ENDIF.

* get element via lead selection
lo_el_root_node = lo_nd_root_node->get_element( ).
* @TODO handle not set lead selection
if lo_el_root_node is initial.
endif.

select * from USER_ADDR
into table it_zpscat up to 10 rows.
*
LOOP AT it_zpscat INTO WA_zpscat.

WA-text = SY-tabix.
CONCATENATE WA-text WA_zpscat-bname inTO WA-text.
move WA_zpscat-bname TO WA-VALUE.
insert WA inTO table it_dropdown.
*append WA TO it_dropdown.
clear WA_zpscat.
clear wa.

ENDLOOP.

NODE_INFO = lo_nd_root_node->GET_NODE_INFO( ).

* Set Value_sets to node_info
NODE_INFO->SET_ATTRIBUTE_VALUE_SET( NAME = 'ZUSER' VALUE_SET = it_dropdown ).

33. Double Click on the WDDOINIT method to add the Code.

34. Click on the Code Wizard.

method ONACTIONCLICKME .
data lo_nd_root_node type ref to if_wd_context_node.

data lo_el_root_node type ref to if_wd_context_element.
data ls_root_node type wd_this->element_root_node.
data lv_zuser type wd_this->element_root_node-zuser.
data lv_zusername type wd_this->element_root_node-zuser.
* navigate from to via lead selection
lo_nd_root_node = wd_context->get_child_node( name = wd_this->wdctx_root_node ).

* @TODO handle non existant child
* IF lo_nd_root_node IS INITIAL.
* ENDIF.

* get element via lead selection
lo_el_root_node = lo_nd_root_node->get_element( ).
* @TODO handle not set lead selection
if lo_el_root_node is initial.
endif.

* get single attribute
lo_el_root_node->get_attribute(
exporting
name = `ZUSER`
importing
value = lv_zuser ).

select single NAME_TEXTC from USER_ADDR
into lv_zusername where bname = lv_zuser.

* set single attribute
lo_el_root_node->set_attribute(
name = `ZUSERNAME`
value = lv_zusername ).

endmethod.

35. Right click on the Web Dynpro component and select Create Web Dynpro Application.

36. Enter the application name and save the application.

37. Save the Application .

38. Right click on the Web Dynpro application that we created and select ‘Test’ .

39. Browser opens with the form. The Form Displays the Data fetched from the database.

Select the USER and Click on the Submit button.

40. The User Selected is fetched from Database Populated.

No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites