Enable/Disable & Show/Hide UI Elements in Web Dynpro Java

By Sharma KVBK 

Scenario: Enabling/Disabling and Showing/Hiding the UI elements during runtime (as shown below).

 

Step 1. Creating a Web dynpro project. 

Navigation:

Open NWDS Open Web Dynpro explorer. File->New->Web Dynpro project Give the name of the project as ‘Enable_Disable_Show_Hide_UI_Elements’.

 

Step 2. Creating a Web Dynpro Component. 

Create a Web Dynpro component in a package.  

 

 

Confirm by choosing finish.

Save the changes by clicking on save all metadata on the application tool bar. 

Step 3. Creating Context Elements. 

Edit the context of the view ‘MainView’.

Create the following attributes in the context of the view ‘MainView‘:

First Name Last Name Date of Birth Date of Joining Enablekey

Showkey Booleankey Visibilitykey

Booleankey should be of Data Type Boolean, Visibilitykey of type UI Element data type Visible. 

 

Confirm by choosing finish.

Select the context attribute and switch to the properties tab of it. 

 

 

 

Choose Visibility property for visibility attribute as shown above.

Press OK to continue.

Save the changes by clicking on save all metadata on the application tool bar. 

Step 4. Data Binding on the Main view 

Choose the layout tab of the view ‘MainView’.

By right Clicking on RootUIElementContainer select Insert Child and Create two groups one for the Enable/disable UIelements and the other for Show/Hide the UI Elements. 

Create two Radio Buttons by Inserting Child in Each Group.

Each of The Group is separated by Bread Crumb.

Right Click on Group and click Apply template.

Choose form. 

 

 

Choose DateofBirth, DateofJoining, FirstName, LastName and Click next. 

 

Confirm by choosing finish.

Finally the View Will be as shown below:  

Step 5. Assigning Properties for the Input Fields of Main view in Property Tab 

For Enable or Disable Fields group select the Input Fields and Make the following changes in the Property tab.

For Input Fields in the enabled make it as Booleankey of the context attribute. 

For Radio Buttons Enable and Disable in Property tab give keyToSelect as ‘E’ & ‘D’ Respectively and Selected key as ‘ Enablekey’ of the Context Attribute. 

For Enable Radio button, create an Event ‘Enable’ on Select in Property tab. 

 

 

For Disable Radio button, create an Event ‘Disable’ on Select in Property tab. 

 

For Show or Hide Group also make changes in the Property tab for all Input Fields make the Visible as VisibilityKey of The context Tab. 

 

For Show or Hide Radio Buttons Disable in Property tab give keyToSelect as ‘S’ & ‘H’ Respectively and Selected key as ‘ Show’ of the Context Attribute. 

For Show Radio button, create an Event ‘Show’ on Select in Property tab. 

 

For Hide Radio Button Create an Event ‘Hide’ on Select in Property tab. 

 

Step 6. Code for the onAction Methods like Enable, Disable, Show, and Hide. 

In Implementation tab, write the following Code for both the Events Enable and Disable which are created as methods.

In Implementation tab Write a Piece of Code for both the Events Show and Hide which are created as methods. 

Save the changes by clicking on save all metadata on the application tool bar. 

Step 7. Creating an application for the web dynpro project  

Web dynpro explorer->Enable_Disable_Show_Hide_UI_Elements->web dynpro-> Applications. 

Right click on application and create a new application. 

 

Step 8. Rebuild the project 

Web dynpro explorer-> Enable_Disable_Show_Hide_UI_Elements

Right click on Enable_Disable_Show_Hide_UI_Elements .

Choose rebuild project. 

 

Step 9. Deploy and run the application 

Web dynpro explorer-> Enable_Disable_Show_Hide_UI_Elements -->web dynpro->Applications --> EDSH_Application. 

Right click on Application and choose Deploy new archive and run.

You can see the output in the browser as shown below. 

Default View of the Webpage, and when enable is clicked. 

When Disabled and Hide is Clicked 

When Enabled and Shown