Web Dynpro User Interface Elements (UI elements)

SAP Tech Pro

SAP Technical Blog
Magzter [CPS] IN

Web Dynpro User Interface Elements (UI elements)

Web Dynpro User Interface Elements (UI elements)

The UI elements we can use in the Web Dynpro ABAP are divided in various categories.In this chapter, we are going to present some of the UI elements, included in the categories:action, selection,layout, complex, graphic and integration. Each UI element will be illustrated by an example,showing the modality of using it either in static or in dynamic variant.

A UI element is a User Interface element we use to create a screen for the end user. The UI Elements are grouped in categories we can access via the View Layout,and each UI Element has some properties, as follows

  • Common with other UI elements,inherited from superclasses
  • Specific only for an UI element
  • For example, the following properties are inherited:
  • Tooltip: Shows a quick info text when the user passes the mouse pointer over the UI element
  • Visible: Determined if an UI element is visible in the screen or not
  • Enabled: Specified if the UI element is active or inactive

By using the Class Builder transaction SE24, we can see different classes along with their inheritances and attributes. For example, the class CL_WD_UIELEMENT is the super class of all the UI elements we use in Web Dynpro ABAP. Being super class, this class has CL_WD_VIEW_ELEMENT.

Figure presents the tooltip,visible and enable properties for an InputField UI element.

Most of the UI elements properties can be bound to different context nodes or attributes.In this way, we can manipulate the UI elements via the data held in the context. Each bindable property of a UI element has a certain type. For example,the enabled property can be bound to an attribute of WDY_BOOLEAN type.

Web Dynpro User Interface Elements (UI elements)

when this attribute is set ABAP_TRUE, the respective UI element is active.When this attribute is set ABAP_FALSE, the respective UI element is inactive.

Add comment

Before Buying, Compare Prices at Topprice.in