Preface – This post is part of the SAP ABAP Web Dynpro series.
Table of Contents
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:
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:
- First, create one web dynpro application as shown in the previous article.
- Then we need to create one node in the context tab, here one node ‘SFLIGHT’ is created with some attributes
- Create an event ‘get_flight’ in the method tab and then save the application.
- 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 Exporting bind_value = 'SFLIGHT.CARRID' id = 'INPUT11' RECEIVING control = lo_input. CALL METHOD cl_wd_button=>new_button EXPORTING enabled = 'X' id = 'B11' on_action = 'get_flight' text = 'Get the Flight Data' RECEIVING control = lo_button.