Using table UI element in webdynpro ABAP

Requirement : Develop a web dynpro component to display list of vendors .
UI elements to be used in this requirement are INPUT FIELD,LABEL, BUTTON and TABLE .
Step1 : Create context for storing table data.Step2: Insert TABLE UI element .Step3: Create data binding for table.Step4: Add logic to get data.Step1: Go to Context and Create a node.Go to SE80, create a web dynpro component ZSAPN_TABLE, save it in a local object.

Go to context of main view, click on change mode, right click on context -> create -> node.



A popup will open, provide node name as LFA1, data dictionary structure as LFA1, click on add attributes from structure button.

Select required attributes, enter.

Step2: Go to layout and insert table UI element.Go to view layout, right click on ROOTUIELEMENTCONTAINER, insert element, provide a id and select table, enter.

Step3:Create data binding for table.Right click on table, click on create binding, click on context.

Select LFA1.

Step4: Add logic to get data.Go to METHODS tab, double click on WDDOINIT add below code.DATA LO_ND_LFA1 TYPE REF TO IF_WD_CONTEXT_NODE.

DATA LT_LFA1 TYPE WD_THIS->ELEMENTS_LFA1.

* navigate from to via lead selection
LO_ND_LFA1 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_LFA1 ).

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

* * @TODO compute values
* * e.g. call a model function
*
SELECT LIFNR NAME1 LAND1 ORT01 FROM LFA1 INTO TABLE LT_LFA1 UP TO 50 ROWS.
LO_ND_LFA1->BIND_TABLE( NEW_ITEMS = LT_LFA1 SET_INITIAL_ELEMENTS = ABAP_TRUE ).Step5: Right click on component, create application and test.