Author: Pritam Ghosh
Submitted: 02 March,2009
This tutorial shows how to change properties of UI Elements during runtime in WEB DYNPRO ABAP.
1. Go to transaction SE80 and select "WebDynpro Comp.
2. Create a new WebDynpro component by the name ZZ_EXAMPLE (as shown below), give window name as MAIN_WINDOW and view as FIRST_VIEW. Save the Web Dynpro Application as local object as shown below:
3. Now go to the Component Controller Context tab and create two nodes as shown below with the name 'RADIO_NODE1' and 'RADIO_NODE2' with Cardinality '0..n' and Selection '0..1'.
4. And now create one attributes under each node, here with the name RADIO_1 and RADIO_2, both type as CHAR10:
5. Now go to view context and map the attributes which you want to use in your application under the view context from Component Controller Context by drag and drop as shown below:
6. Now create the attributes which you want to use in your application under the view context, create an attribute name FIRST_NAME_1 type CHAR20 as shown below:
7. Repeat the same and create LAST_NAME_1, FIRST_NAME_2 and LAST_NAME_2, all of type CHAR20.
8. Now go to the layout of the main view, change the Layout as MatrixLayout in ROOTUIELEMENTCONTAINER and right click on it, go for Insert Element and create RADIO_GROUP1 as type RadioButtonGroupByIndex as shown below:
9. Change the property Layout Data in RADIO_GROUP1 as MatrixHeadData and bind the text property of it with context element RADIO_1 as shown below:
10. Create element FIRST_NAME_LABEL type Label and FIRST_NAME type InputField under ROOTUIELEMENTCONTAINER, change the property LayoutData as MatrixHeadData, LabelFor as FIRST_NAME and text as 'First Name' in element FIRST_NAME_LABEL and change the property LayoutData as MatrixData in element FIRST_NAME.
11. Now bind the value of Input field FIRST_NAME with context element FIRST_NAME_1 as show below:
12. Now bind visible property of FIRST_NAME with context element FIRST_NAME_1, select the radio button 'Bind to the Property of the Selected Attribute Property' as 'Visible' and press 'enter' as shown below:
13. Now repeat the same thing from step 10 and create LAST_NAME_LABEL type Label and LAST_NAME type InputField, change the property LayoutData as MatrixHeadData, LabelFor as LAST_NAME and text as 'Last Name' in element LAST_NAME_LABEL and change the property LayoutData as MatrixData in element LAST_NAME.
Bind the value of Input field LAST_NAME with context element LAST_NAME_1 and same for visible, here also select the radio button 'Bind to
the Property of the Selected Attribute Property' as 'Visible'.
14. Now create another Radio Button Group RADIO_GROUP2 type RadioButtonGroupByIndex, change its layout as MatrixHeadData and bind its text with context element RADIO_2 as shown below:
15. Now copy the element FIRST_NAME_LABEL by right clicking on it and select Copy Element, then right click on ROOTUIELEMENTCONTAINER and click Insert Copied Element as shown below:
16. Repeat the same with input field FIRST_NAME then with label LAST_NAME_LABEL and input field LAST_NAME. Change the layout of FIRST_NAME_LABEL_CP as MatrixHeadData and select labelFor as FIRST_NAME_CP, do the same with LAST_NAME_LABEL _CP change layout to MatrixHeadData and select LabelFor as LAST_NAME_CP.
17. Change the binding for value of input field FIRST_NAME_CP with context element FIRST_NAME_2 and bind property enabled with FIRST_NAME_2 and select the radio button 'Bind to the Property of the Selected Attribute Property' as 'Enabled', also select and change property visible to 'Visible' as shown below:
18. Repeat the same with LAST_NAME_CP, bind value with LAST_NAME_2, property enabled with LAST_NAME_2 and select the radio button 'Bind to the Property of the Selected Attribute Property' as 'Enabled', also select and change property visible to 'Visible'.
19. Now go to the Methods tab and double click on initialization method that is WDDOINIT:
Now write the below piece of code in it:
20. Now go back to the Layout tab of your main view, click on RADIO_GROUP1 and create an event as SHOW_HIDE as shown below:
21. Double Click on SHOW_HIDE event, add a Importing Parameter as INDEX type 'I'
and write the below piece of code in ONACTIONSHOW_HIDE.
22. Now again go back to the Layout tab of your main view, click on RADIO_GROUP2 and create an event as ENABLE_DISABLE and add a Importing Parameter as INDEX type 'I' and write the below piece of code inONACTIONSHOW_HIDE.
23. Now create a Web Dynpro Application as shown below:
24. Now SAVE and Activate your Application. Test your Application after creating a web dynpro application.
Click on "HIDE" radio-button.
Click on "DISABLE" radio-button.