1. To Create a component.
Enter Tcode bsp_wd_cmpwb
In the component screen enter a name and click on create.
Click on OK
And then press enter until we get this screen

2. Right click on view and select create following screen appear

3. Click on continue

4. Enter a name for the view and click continue

5. Enter continue
Now this screen appears

6. Enter a value node name and click continue
This screen appears click continue

7. This screen appears

8. Click on add button this screen appears

9. Select the table u want to use for this context node
Select the field u want to use and click ok then this screen appears

10. Click on continue this screen appears

11. This screen appears

12. Select empty view and click continue this screen appears

13. Click on complete this screen appears

14. Click on enter
Now click on view this screen appears

15. Click on the HTML part
And paste this code
<%@page language="abap" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%
data: lv_xml type string.
lv_xml = controller->CONFIGURATION_DESCR->GET_CONFIG_DATA( ).
%>
<chtmlb:config xml = "<%= lv_xml %>"
mode = "RUNTIME" />
Save it check it activate it.
Now double click on the view this screen appears

16. Note the page preview tab is changed to configuration
Now again go on view and right click and select create overview page this page appears

17. Enter a name and then click ok this page appears (below)

18. Click on enter until this page appears

19. Goto runtime repository editor
Right Click on viewsets and choose add view set.

20. Select the overview page and click ok this screen appears

21. Now right click the view set and add View area this screen appears

22. Now enter this hardcoded value OverviewPage this screen appears

23. Now right click on view area overview page and select add view like this

24. This screen appears select the view and click ox

25. Now right click on window and select add view like this

26. Now add the overview page and click ok like this

27. Save and Check
Now click on the view and configuration tab, this screen appears

28. Select show available fields this screen appears

29. Now select the field u want to add and click on add button the screen will appear like this

30. Now save it
Now go to overview page inside the window and configuration tab, this screen appears

31. Click on continue this screen appears

32. Add to displayed assignment blocks it will appear like this and click on save

33. Now select the load option as you wish and save it.
Now component is created with a view and overview page and a window is assigned.

34. How to make LOV
Now if u want to make any field as drop down then go to browser component structure
Select any attribute like I m selecting zgender this screen appears
Double Click on get_v_zgender and create the object like this

35. Now paste this code
DATA : lt_ddlb TYPE bsp_wd_dropdown_table,
wa_ddlb like line of lt_ddlb.
wa_ddlb-key = 'M'.
wa_ddlb-value = 'MALE'.
append wa_ddlb to lt_ddlb.
wa_ddlb-key = 'F'.
wa_ddlb-value = 'FEMALE'.
append wa_ddlb to lt_ddlb.
IF gr_ddlb is not bound.
CREATE OBJECT gr_ddlb EXPORTING iv_source_type = 'T'.
endif.

36. IF gr_ddlb is bound.
gr_ddlb->set_selection_table( it_selection_table = lt_ddlb ).
ENDIF.
rv_valuehelp_descriptor = gr_ddlb.
Save it.
Goto the node class and in the attribute tab enter
GR_DDLB Instance Attribute Public Type Ref To CL_CRM_UIU_DDLB
And the activateget_v_zgender
Double Click on get_p_zgender and create similarly as get_v_zgender
Now paste this code and save and activate it.

37. CASE iv_property.
WHEN if_bsp_wd_model_setter_getter~fp_fieldtype.
rv_value = cl_bsp_dlc_view_descriptor=>field_type_picklist.
WHEN if_bsp_wd_model_setter_getter=>fp_server_event.
rv_value = 'DUMMY'.
ENDCASE.
How to disable & enable a field
To disable a field go to get_i_field comment the whole code and paste
rv_disabled = 'TRUE'.
Save it and activate it.
To change any property of the attributes go to run time repository and select field and click on
show field properties change and click apply as shown below and then save.
To run first click on test .