Hi all,
Here is an example webdynpro application where we can enable a textbox also hide a text box based on the radio button selection action.
This is what we are learning to do in this blog post.
On Selecting the first radio button, the first textview which is associated with that is visible. On selecting the second radio button the second textbox is visible and enabled. Same on the choosing the third and the fourth radio buttons. This might appear like the same textbox is appearing with the label changed. Here is the webdynpro layout associated with this view.
The code that helped achieve visibility is this
data: lo_nd_ui_control TYPE REF TO if_wd_context_node,
lo_el_ui_control TYPE REF TO if_wd_context_element.
lo_nd_ui_control = wd_context->get_child_node( name = wd_this->wdctx_ui_control ).
lo_el_ui_control = lo_nd_ui_control->get_element( ).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'FIRST_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = 'X' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'SEC_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
If you are trying to achieve a similar use case and want to know in detail how it is done, continue reading. I have seen many posts where I have to scroll through the entire blog post to determine if this is what I am looking for; that is why I have changed the presentation. I have provided a summary of what is done in the beginning and now I will provide a detailed procedure on what is to be done.
First create a webdynpro application. Choose the Object Navigator transaction (se80) and in the dropdown choose "Web Dynpro Comp. / Intf. " and in the textbox below give a pogram name of your choice. I provided "ZWDC_VISIBLE". Click enter when asked to create and provide a short description. Once created, activate the webcynpro application. This will ensure that the basic layout is created and ready. Now we can begin with our programming.
In the Views, choose MAIN view and in the context, let us create the data elements so we can bind with the UI elements.
Rt. Click on context and choose create Node. Name the node as "DOCS" with cardinality " 0..n " and selection as " 0..1 " . Now rt. click on the Docs node and choose create attribute; choose the attribute name as "DOC_NAME" with type as "String". Let us create the "VALUES" node. Choose context, Right click and say create node named "VALUES" with cardinality "1..1" and selection "0..1". Right click on the values node and create 4 attributes all of the type string.
Now we need some attributes that will help us control the UI elements and hence I have created the node "UI_CONTROL". It has 4 Attributes all of type Boolean.
Now let us create the Layout and bind them with the context elements. Choose the Root UI Container, right click and say insert element. Choose the type as "RadioButtonGroupByIndex", I gave the ID as "RBGI". In the properties tab, bind the texts property with the context element Doc_name in the node Docs.
Create a "Select" action method in the Events tab, onSelect event for the radio button.
Now select the RootUIElementContainer and change its Layout property as MatrixLayout. Right Click on root and choose Insert Element. Choose LayoutContainer and I have named is as Rt_side.
Choose the Layout as MatrixLayout for the Rt_side layout. Now let us add four labels and textviews for our usecase. Right click on Rt_side and choose Insert Element. Choose Label and I have named it as L_first. Right click on the rt_side and choose InputField; I have named it as INP_First. Now Choose the Label and set its properties.
For the label field, choose the enable property and click on binding. Choose the First_control in the UI_control and select the radio button "Bind the property of the Selected Attribute Property" to enabled. In the visible property, choose binding, choose first control and select the second radio button and choose the property to "visible". Choose the Layout property as MatrixHeadData.
For the input field, choose the Layout Data as MatrixData and set 3 context bindings. First for enabled property, bind the same way as we bound for the label. Second is for Visible property, bind the same was we bound for Label. Third is Value property, choose the v_1 property from value table.
Repeat the steps of creating labels and Inputfields inside the Rt_side layout and bind the properties to the second, third and fourth UI_control elements. Choose the labels to have matrixheaddata as the layout and the input fields as matrixdata so they appear in the right order.
Now that our Layout and Context are ready, we can start with the methods. We need to bind the radiobutton group with elements. Let us do it in the INIT method.
METHOD wddoinit .
DATA: lo_nd_documents TYPE REF TO if_wd_context_node,
lt_documents TYPE wd_this->elements_docs,
ls_documents LIKE LINE OF lt_documents,
lo_nd_ui_control TYPE REF TO if_wd_context_node,
lo_el_ui_control TYPE REF TO if_wd_context_element.
ls_documents-doc_name = 'first'.
APPEND ls_documents TO lt_documents.
ls_documents-doc_name = 'second'.
APPEND ls_documents TO lt_documents.
ls_documents-doc_name = 'third'.
APPEND ls_documents TO lt_documents.
ls_documents-doc_name = 'fourth'.
APPEND ls_documents TO lt_documents.
DATA lo_nd_docs TYPE REF TO if_wd_context_node.
lo_nd_docs = wd_context->get_child_node( name = wd_this->wdctx_docs ).
lo_nd_docs->bind_table( new_items = lt_documents set_initial_elements = abap_true ).
* navigate from <CONTEXT> to <UI_CONTROL> via lead selection
lo_nd_ui_control = wd_context->get_child_node( name = wd_this->wdctx_ui_control ).
lo_el_ui_control = lo_nd_ui_control->get_element( ).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'FIRST_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-enable " Property (See E_PROPERTY-*)
value = 'X' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'SEC_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-enable " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'THIRD_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-enable " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'FOURTH_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-enable " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'FIRST_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = 'X' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'SEC_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'THIRD_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
lo_el_ui_control->set_attribute_property(
EXPORTING
attribute_name = 'FOURTH_CONTROL' " Attribute Name
property = lo_el_ui_control->e_property-visible " Property (See E_PROPERTY-*)
value = '' " Replacement for Real Boolean Type: 'X' == True '' == False
).
ENDMETHOD.
In our init method we have set the first radio button as lead selected and we have set the enabled and visible property programatically for the first label and the first inputfield. By setting it as 'X' we can enable it and by setting it as '' (space) we can diable it. So we have enabled the first label and disabled second, third and fourth labels and input fields.
In the action method of radio button select, set the enable and visible properties based on the selection index of the radio. You can fetch the index with the help of this call.
DATA: lv_index TYPE i.
wdevent->get_data(
EXPORTING name = 'INDEX' IMPORTING value = lv_index ).
CASE lv_index.
WHEN 1.
WHEN 2.
WHEN 3.
WHEN 4.
ENDCASE.Just call the same control methods in each of the case when clauses. Then you can activate the application, create a test application and launch it. You will be able to see the results as shown in the top of this blog post.
Hope I have helped you achieve the enable / visible feature for the input fields.
Thanks for reading.