Skip to end of metadata
Go to start of metadata

How to dynamically set visibility of button based on the logged in user

 

This exercise shows how to dynamically set visibility property of a button using Web Dynpro ABAP.

Based on the user logged in, need to set the visibility/invisibility of button. If the logged in user is Requester(say Developer02), he should be able to submit the request with details entered. In this case, button Submit has to be visible. And if the logged in user is approver(say Developer04), he should be able to Approve the details. And so Approve button has to be visible.

The development includes creation of an WebDynpro component, with a view which will be reused for both Requester and Approver. The view consists of an input field and two buttons. And view context with attributes for logged in user, visibility for requester and approver. Based on the user logged, the required button has to be made visible, by setting the value of context attributes accordingly.

 Procedure:

Create component.

Go toTrasaction code SE80.

Select Web Dynpro Comp./Intf. As object type.
Enter the name of the component as ZDEMO_BUTTON_VISIBLE.


 Press ENTER.The following pop up appears for confirmation to create.
 Click on YES.In the Pop displayed, enter the Description for componetn and Window Name.

 And save as local object or in a package.
The component will be created and its structure shown as below.

 Create view.
Right click on the component name on the tree structure ZDEMO_BUTTON_VISIBLE->Create->View, as shown below.

 Enter the View Name and Description as shown below. And press enter.Save the view, so it appears in the comoponent structure. Double click on view name.
Create context.
Click on Context of view and Create the following Attributes of Types as below screen:

Attribute - Purpose
User - For Logged in User
Req_Visible - For Visibility of Requester button
Apprv_Visi - For Visibility of Approver button
User attribute
Visibility for Requester
 Visibility for Approver
The  finally context looks as below. 
Design View Layout.

Click on Layout tab of view.
Insert UI elements Label, TextView, and two buttons(one for Requester and the other for Approver).

Right click ROOTUIELEMENRCONTAINER->Insert Element.
 
 
Insert Label.

 
Insert text view to dispaly logged in user.

Insert Submit Button for requester.
 

 
Insert Approve button for approver.

 Then set the properties of the 3 UI elements as below.
UI Element Properties
Label       : Label for, Text
TextView : Text (thru context binding)
Button1 : Text, Visible(thru context binding)
Button2 : Text, Visible(thru context binding)

Label1 Properties LabelFor and Text
 

Bind Text property of Text view with User attribute
 

 
Bind Button1 visibility property with attribute REQ_VISI
 

 Bind Button2 visibility property with attribute APPRV_VISI


 Finally the view layout looks as below.
 Code implementation to set the visibility based on logged on user.

Click on methods tab of view.

 And in WDDOINIT method of view, code as below:  

 Embed the view into window.
Double click on Window name on right side componet structure to show its details.

 Drag and drop the view ( from right side ) on to the window name (on left side). Or right click on window name(on right side window) and say embed view.
Save and Activate the component.

 Create WebDynpro application.
Rigth click WD component ZDEMO_BUTTON_VISIBLE->Create->Web Dynpro Application.
Enter the description in the following pop up displayed.
Save the application.
Test the Application as shown below.

Test Result:

Say log in user is Developer02, the following view displayed with Requester button.

Say log in user is Developer04, the following view displayed with Approver button.