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.