Scenario: Generally Web dynpro windows are accessible In the browser via the Web dynpro application. Component Configuration provides a way of enabling and disabling the UI elements by just selecting some appropriate buttons without coding. Each Component configuration is assigned to the Application Configuration . In this way we can achieve different look of the same web dynpro application without doing much coding. The below post describes how we can use this configuration technique.
Step1. Go to transaction - SE80.
Step2. Provide a web dynpro component name and from the pop up click Yes to create.
Step3. Provide a component description and click on Continue button
Step4. Activate the Component and expand the View 'Main'.
Step5. Create a Text View Element and provide some text.
Step6. Create another text view element and provide some text
Step7. Activate the component and now create a web dynpro application along the highlighted path.
Step8. Provide the application name, description and click on Enter button
Step9. Save it and click on the Test button.
Step10. The output appears as below.
Step11. As per the task, lets create two web dynpro Application Configuration for the single Web dynpro Application. Each Application Configuration is associated with one component configuration.
First Application Configuration: We will follow top down approach. First we will create application configuration and then Component Configuration.
Second Application Configuration: We will bottom up approach. First we will create component configuration and then Application Configuration.
First Application Configuration:
Right click on the Web dynpro application and click on the create Configuration option.
Step12. The below screen appears. We have to provide a Application Configuration ID name and then click on Create button
Step13. Provide a Application Configuration ID name and click on the Create button.
Step14. Provide the description, then click on the Button Local object and then click on OK button.
Step15. The below screen appears. up to this point Application Configuration is created. Now we have to create Component Configuration.
Step16. Under the Configuration column, provide a component configuration name and hit the Enter button. The Go to Component Configuration button is active. Click on the button.
Step17. Click on Yes button.
Step18. Click on create button.
Step19. Provide the description. Click on local object button and at last click on OK button.
Step20. The below screen appears. In this case we will hide the item text and will show the Header Text. In the Main view, expand the node 'MAIN'.
Step21. click on the Element 'TV_HDR'. Save it.
Step22. Click on the view Element 'TV_ITEM' and select the invisible button and save it.
Step23. Close the Explorer screen. Refresh the Webdynpro component. U can find the Application configuration and component configuration under appropriate places.
Step24. Lets create another Application configuration but this time follow bottom up approach . First creating the component configuration and then creating the application configuration.
Right click on the web dynpro component name and click on the Create/change Configuration option.
Step25. Provide the component configuration name and click on the Create button.
Step26. Provide short description, save in local object by clicking on the Local Object button and at last click on the Ok button.
Step27. Expand the View Elements.
Step28. click on the element 'TV_HDR', mark the invisible radio button and save it.
Step29. click on the element 'TV_ITEM' & save it.
Step30. The second component configuration is over. Close the browser screen and come back to the web dynbpro component. Refresh it . The second component configuration appears under appropriate section.
Step31. To create Second application configuration, right click on the Previously Created Web dynpro Application name and select the option 'Create/change Configuration '.
Step32. Provide a Application Configuration ID name and click on the Create button.
Step33. Provide the description, Select the button Local Object and then click on Ok button.
Step34. Now the Application configuration needs a component configuration name. in the previous step we have already created a component configuration.
Step35. Provide the Second component configuration name and hit the Enter button. The Go To Component Configuration button is active. Click on it.
Step36. The component configuration details appears that we have created in the previous step.
Step37. Close the Browser. Refresh the Web dynrpo component. Now we have a web dynrpo application and two different Application configuration in which each application configuration refers to a component configuration.
Step38. Lets run the Web dynrpo application.
Step39. It shows the two UI elements.
Step40. Lets run the First Application Configuration. Here the Component configuration of the First application configuration : Hides the item element and shows the header element.
Step41. The output only displays the Header UI Element.
Step42. Run the second Application Configuration.
Step43. As per the second component configuration of the application configuration, the Header UI element is invisible and the Item Element is visible.
____________________________________________________________________
No comments:
Post a Comment