http://careerabap.blogspot.in/2011/02/steps-for-creating-web-dynprocomponent.

html
Steps for creating a Web Dynpro Component for Adobe interactive Forms using the Enumerated Drop Down Box
Email ThisBlogThis!Share to TwitterShare to Facebook
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 .

11. 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 .

18. 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. Dont 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.