UI Elements in Web Dynpro

Preface – This post is part of the SAP ABAP Web Dynpro series.


There are various categories with user interface elements (UI elements) that are available in the Web Dynpro Explorer for creating the interface layout. These standard UI elements are for instance a Button, a Table or an Input Field. While developing the Web Dynpro applications, the UI elements are placed in a view displayed in a particular screen area at runtime.

What is a UI Element in Web Dynpro

Web Dynpro provides a design-oriented development of user interfaces and provides a compact class library of UI elements in the form of categories for application programming. Each UI element that is present in the library has different properties, events, and aggregations that determines the fact that how it is going to be appeared on the user interface. There are various categories available for the particular UI element’s properties, actions and aggregations, such as:


By default, this category remains empty, unless one will select some of the frequently used UI elements. So this saves time because one will not need to select the elements over and over again.


This category contains all the UI elements with textual content, as like caption, explanation, input field, label, etc.


All the UI elements having some sort of property of action are grouped in this category, for example, button, button choice, link to action, link to URL, etc.


As the name suggests this category contains all the selection option like a radio button, checkbox, drop down, checkbox group, etc.


All the complex elements are categorized in this unit as like table, tree(hierarchy form), road-map(it displays the steps followed in a particular wizard), legend(this element helps to display descriptive text in different colors), date navigator(this element helps the user to enter and display the desired date), etc.


The elements that are used to form the design of the layout are grouped into this category, for example, page header, button row, tab strip, scroll container, etc.


This category contains all the UI elements that include presentation graphics such as, network(The design that displays each entity in the form of nodes and connection between the nodes), image, value comparison, progress indicator, etc.

Network will look like this:

UI Elements in Web Dynpro


Those properties which are used to integrate different technologies in web Dynpro are achieved by the UI elements grouped in this category. For example, file upload, file download, interactive form, etc.

Creating UI elements

Steps to create UI Element:

  1. First, create one web dynpro application as shown in the previous article.
  2. Then we need to create one node in the context tab, here one node ‘SFLIGHT’ is created with some attributes
    Steps to create UI Element
  3. Create an event ‘get_flight’ in the method tab and then save the application.
  4. For creating UI elements dynamically in web dynpro ‘WDModify’ method is used.


Code to create the input field and button element on the screen is:

CALL METHOD cl_wd_input_field=>new_input_field


         bind_value = 'SFLIGHT.CARRID'

          id         = 'INPUT11'


         control    = lo_input.

CALL METHOD cl_wd_button=>new_button


                      enabled   = 'X'

                       id        = 'B11'

                       on_action = 'get_flight'

                       text      = 'Get the Flight Data'


                        control   = lo_button.



  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.

    View all posts


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.