Scenario: Suppose the Web dynpro UI contains Some Buttons. Selecting some button should enable or disable/hide some other buttons. For this case we have taken three buttons, SAVE, EDIT & CANCEL. The Edit button should appear first and any user interaction on the Edit button should Enable Save and Cancel button and hide the Edit button. Again any user action on Either Save or Cancel button should hide the Save and Cancel button and Enable the Edit button.
Step1: In SE80, create a web dynpro component.
Step2. Provide the description and click on continue button.
Step3. Save in Local Object.
Step4. Now active the Web dynpro Component and Double click on the View 'MAIN'.
Step5. Create a button 'BTN_SAVE', provide text as 'Save' and click on the Create button against 'onAction'.
Step6. Provide Action 'ONSAVE' and Click on Continue button.
Step7. Create a button 'BTN_EDIT', provide text as 'Edit' and click on the Create button against 'onAction'.
Step8. Provide Action 'ONEDIT' and Click on Continue button.
Step9. Create a button 'BTN_CANCEL', provide text as 'Cancel' and click on the Create button against 'onAction'.
Step10. Provide Action 'ONCANCEL' and Click on Continue button.
Step11. The view is designed. Create a Application by navigating along the highlighted path.
Step12. Provide the Application Name & description. click on Continue button.
Step13. Save it and click on the Test button.
Step14. The Application is launched and all button appears in the window.
Step15. Our task is to make visible and invisible some button. Web Dynpro provides a data type 'WDUI_VISIBILITY' .
Step16. Go to the Domain and there are Two Domain Fixed values.
Step17. Now go the view main. In the Context, right click and create an attribute.
Step18. Provide the name and data type and click on the Continue button.
Step19. Again In the Context, right click and create an attribute. Provide the name and data type and click on the Continue button.
Step20. Again In the Context, right click and create an attribute. Provide the name and data type and click on the Continue button.
Step21. Now we have created three Attributes.
Step22. Now go to the view Layout and double click on the first button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step23. From the appearing Context screen, select the Attribute 'VIS_SAVE' and selected the highlighted Radio Button and click on the Continue button.
Step24. The button 'BTN_SAVE' visibility is mapped to the Context attribute.
Step25. Double click on the SECOND button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step26. From the appearing Context screen, select the Attribute 'VIS_EDIT' and selected the highlighted Radio Button and click on the Continue button.
Step27. The button 'BTN_EDIT' visibility is mapped to the Context attribute.
Step28. Double click on the THIRD button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step29. From the appearing Context screen, select the Attribute 'VIS_CANCEL' and selected the highlighted Radio Button and click on the Continue button.
Step30. The button 'BTN_CANCEL' visibility is mapped to the Context attribute.
Step31. Activate the Component. Again test it.
Step32. None of the button appears in the Window. By default all buttons are invisible.
Step33. To Enable EDIT button, lets go to the method 'WDDOINIT' method.
Step34. Under the attribute tab, we have a reference variable, 'WD_CONTEXT' that points to the Context node.
Step35. By default all three buttons are Invisible, Put the below code and make visible to the EDIT button.
Step36. Test the application. Now the Edit button is visible.
Step37. Now the next task is, upon Clicking on the Edit button, Save and Cancel button should visible and Edit button is invisible. So go to the Method, ONACTIONEDIT.
Step38. Provide below code and test the application.
Step39. Edit button appears first. Upon clicking on Edit button, Save and Cancel button appears and Edit button dis appears.
Step40. The next task is Upon Clicking on the Save or Cancel Button Edit button should appears and all other two buttons should dis appears. So double click on the Method 'ONMETHODSAVE'.
Step41. Provide the below code. Activate it and test the application.
Step42. The effect can be seen below.
Step43. Same we need for the Cancel Button. Upon clicking the Cancel button, the Edit button should appear and all other should dis appear.
Step44. Provide the below code in the action handler method 'ONACTIONONCANCEL'. Activate it and test the application
Step45. The effect appears on the UI.
__________________________________________________________________
Step1: In SE80, create a web dynpro component.
Step2. Provide the description and click on continue button.
Step3. Save in Local Object.
Step4. Now active the Web dynpro Component and Double click on the View 'MAIN'.
Step5. Create a button 'BTN_SAVE', provide text as 'Save' and click on the Create button against 'onAction'.
Step6. Provide Action 'ONSAVE' and Click on Continue button.
Step7. Create a button 'BTN_EDIT', provide text as 'Edit' and click on the Create button against 'onAction'.
Step8. Provide Action 'ONEDIT' and Click on Continue button.
Step9. Create a button 'BTN_CANCEL', provide text as 'Cancel' and click on the Create button against 'onAction'.
Step10. Provide Action 'ONCANCEL' and Click on Continue button.
Step11. The view is designed. Create a Application by navigating along the highlighted path.
Step12. Provide the Application Name & description. click on Continue button.
Step13. Save it and click on the Test button.
Step14. The Application is launched and all button appears in the window.
Step15. Our task is to make visible and invisible some button. Web Dynpro provides a data type 'WDUI_VISIBILITY' .
Step16. Go to the Domain and there are Two Domain Fixed values.
Step17. Now go the view main. In the Context, right click and create an attribute.
Step18. Provide the name and data type and click on the Continue button.
Step19. Again In the Context, right click and create an attribute. Provide the name and data type and click on the Continue button.
Step20. Again In the Context, right click and create an attribute. Provide the name and data type and click on the Continue button.
Step21. Now we have created three Attributes.
Step22. Now go to the view Layout and double click on the first button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step23. From the appearing Context screen, select the Attribute 'VIS_SAVE' and selected the highlighted Radio Button and click on the Continue button.
Step24. The button 'BTN_SAVE' visibility is mapped to the Context attribute.
Step25. Double click on the SECOND button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step26. From the appearing Context screen, select the Attribute 'VIS_EDIT' and selected the highlighted Radio Button and click on the Continue button.
Step27. The button 'BTN_EDIT' visibility is mapped to the Context attribute.
Step28. Double click on the THIRD button. In the Properties section, there is a Visible tab. click on the button under the Binding section of the Visibility option.
Step29. From the appearing Context screen, select the Attribute 'VIS_CANCEL' and selected the highlighted Radio Button and click on the Continue button.
Step30. The button 'BTN_CANCEL' visibility is mapped to the Context attribute.
Step31. Activate the Component. Again test it.
Step32. None of the button appears in the Window. By default all buttons are invisible.
Step33. To Enable EDIT button, lets go to the method 'WDDOINIT' method.
Step34. Under the attribute tab, we have a reference variable, 'WD_CONTEXT' that points to the Context node.
Step35. By default all three buttons are Invisible, Put the below code and make visible to the EDIT button.
Step36. Test the application. Now the Edit button is visible.
Step37. Now the next task is, upon Clicking on the Edit button, Save and Cancel button should visible and Edit button is invisible. So go to the Method, ONACTIONEDIT.
Step38. Provide below code and test the application.
Step39. Edit button appears first. Upon clicking on Edit button, Save and Cancel button appears and Edit button dis appears.
Step40. The next task is Upon Clicking on the Save or Cancel Button Edit button should appears and all other two buttons should dis appears. So double click on the Method 'ONMETHODSAVE'.
Step41. Provide the below code. Activate it and test the application.
Step42. The effect can be seen below.
Step43. Same we need for the Cancel Button. Upon clicking the Cancel button, the Edit button should appear and all other should dis appear.
Step44. Provide the below code in the action handler method 'ONACTIONONCANCEL'. Activate it and test the application
Step45. The effect appears on the UI.
__________________________________________________________________
No comments:
Post a Comment