Introduction to Web Dynpro ABAP

Introduction to Web Dynpro  ABAP

Once you got good skills on SAP ABAP ,it will be additional Advantage ,if you learn Web Dynpro .Both skills gives you best opportunity to become Web Dynpro ABAP Consultant ,Here ,i shared the overview of Webdynpro and its Components and short notes on each component of dynpro.

MVC Architecture:

The Model View Controller (MVC) design pattern contains a clear distinction between processing control, data model and displaying the data in the interface.

Model

The model is used as an application object of the application data administration

View

The view handles the graphical and textual output at the interface 

Controller

The controller interprets and monitors the data that is input by the user using the mouse and the keyboard.

Different types of controller in Webdynpro ABAP:

Controllers are key elements in  webdynpro components technically to build every webdypro application so every webdynpro technical consultant must learn about all controllers and their properties and links between them.

The different types of controllers in webdynpro abap are:

1. Component controller

2. Custom controller

3. Interface controller

4. View Controller

5. Window Controller

Before learning about the Controllers let us know something about different types of interfaces that are created at the time of creation of the component. These interfaces are as below.

1. IF_<ControllerName>

2. IG_<ControllerName>

3. IWCI_<ComponentName

4. Component Controller: 

There is only one component controller exists per webdynpro component and it is global. i.e Component controller consist of data and processing logic that is available to all the views in the component. This controller does not have any visual interface. The life time of the component controller is the life time of the component. 

6. Interface Controller:

Interface controller is used for cross component communication. Interface controller does not contain any implementation. It it the point of contact of communication for other component to use this component. Only nodes, methods and events marked as interfaces can be used by other components.

Context in Webdynpro ABAP

Context is a method of storing a data in a hierarchical manner. The data used by the component or a view are stored in the form of context. We can read or write data in the context using the controller as a starting point.

Context Node: Properties 

Cardinality of a Context Node.

When a node is created in the context of a Web Dynpro component, the cardinality of the node is specified. The cardinality defines how often a node is to be instantiated at runtime – that is, how many elements of this node are available at runtime.

• 1…1 only one element is instantiated.

• 0…1 at runtime, no more than one element is instantiated, but it is also possible that no element is instantiated.

• 1…n n elements can be instantiated, but at least one element must be instantiated.

• 0…n the number of instantiated elements of the context node can vary

Lead Selection

At runtime, every child node set as a singleton contains the elements for exactly one element of the parent node. For this purpose, one element from the set of possible elements of the parent node must be highlighted. This is achieved by initializing lead selection. For each newly created context node, lead selection is initialized automatically, but this setting can also be deactivated. However, lead selection must generally be initialized for every context node.

Using the preset automatic initialization of lead selection:

In this case, the first element of a node is always assigned the lead selection property.

     

     Manual initialization of lead selection:

If the automatic initialization was deactivated, the lead selection must be programmed manually. However, in this case it is possible to assign this property to an element other than the first element of a node.

For the above example, this means:

The singleton property of the context node Customer specifies that the elements of this node are only instantiated for one of the three vehicles at runtime – that is, the element that bears the lead selection. Since the lead selection was initialized automatically, this is the first element of the Vehicle node, which in this case is the element Red Car. However, it would also have been possible to manually set lead selection for one of the other two elements (for example, using an index).

The “Singleton” Property

To limit the content of a context node at runtime, the context node can be assigned the “singleton” property. As a result, the elements of the relevant node are instantiated for only one element of the parent node. 

Supply function

Each context node of a controller can be assigned a supply function. This supply function is called by the runtime when the data of the context node is used. This is the case when a UI element is to be displayed for the first time with the data of the corresponding context, for example.

In general, the supply function is called when one or more elements of a context node are accessed and when the context node is not filled yet or is initial, or the context node has been invalidated in a previous step.

Supply Functions of Singleton Nodes

The supply function is particularly beneficial when used with Singleton Nodes: The values of elements of a subnode of type Singleton depend on the element of the parent node that holds the lead selection at this point in time. If the lead selection is changed by the user, the supply function can access the new lead selection element and recalculate the values of the subnode elements accordingly. For more information on the concept of singleton nodes and multiple context nodes.

 Context Nodes: Properties:

 Hook Methods: Methods Called by the Runtime 

Along with the previously mentioned application methods, each local controller interface has a fixed number of methods that can only be called by the runtime. The application developer cannot specify when these methods are called, but can modify the implementation. The time when these methods are called is predefined. For a description, refer to the phase model of Web Dynpro.

There are several Methods present in Webdynpro for ABAP as a Hook Method.  

Question 7: Suppose your Web Dynpro has 10 nodes in the Component Context. Will all 10 the nodes be available in the Interface controller?

Nodes from the Component context are available to the interface controller only when the nodes are declared as interface nodes. To create an interface node, set the interface property to yes as shown in the screenshot below:

Interface Node in Webdynpro ABAP 

To create an interface node, set the interface property to yes as shown in the screenshot to the right: 

Once created, the interface node is indicated by a special symbol as shown in the figure below and the property Interface Node is set to yes:

When do views become available in the interface Controller? 

Whenever we embed any view in a window, at the moment that view becomes automatically available to the Interface Controller and shows up as an interface view in the Interface Controller. You do not have to declare a view as an interface view as is the case with interface nodes.

Is it true that each controller has its own Context node?

Yes, Each controller has its own context , methods , and Events.

How many times will the method WDDOINIT be called and how many times will 

WDDOMODIFYVIEW be called ?

WDDOINIT will be called only once.

WDDOMODIFYVIEW will be called 10 times.

WDDOMODIFYVIEW has a parameter FIRST_TIME . If this is 'X' , then the view is getting called first_time. 

What are PRE POST and OVERWRITE exit methods in web dynpro?

Whenever a web dinpro component is enhanced, these 3 methods become available for all methods in Webdynpro. 

Let’s take an example of these methods for WDDOINIT.

PRE exit: This method is called before WDDOINIT is called.

POST exit: This method is called after WDDOINIT is called.

OVERWRITE exit: In this case, WDDOINIT is not called. Instead, OVERWRITE exit method is called.

What is an Assistance class in webdynpro ABAP? Where do you define an assistance class? How many assistance classes can a webdynpro component have?

Assistance class helps you achieve two things: 

1) Segregation of business specific logic (one of the purpose of MVC). 

2) Performance benefit.                                                        

We can write the business logic in the methods of the View, Window or even the Component controller. But it is not a good practice to load all the business  logic in the views or windows. So SAP has provided an option of assistance class where you can write all your business logic. By this way, you are still in the framework of your webdynpro and also avoid loading too much logic in the components of webdynpro itself. Assistance class methods are much better from a performance point of view than calls of Web Dynpro controller methods.

A web dynpro component will have only one assistance class and it is defined at the component level as per the screenshot below. The assistance class is automatically instantiated when a component is called. You can access the instance of this class with the attribute wd_assist, which is created when you create the assistance class in web dynpro.   

Some important Web Dynpro attributes that you should know:

Wd_this

Wd_context

Each controller has the above two mentioned attributes.

To elaborate, if you are using the above two attributes say in a method of a View Controller, then WD_CONTEXT is the reference to the Context node of the View and WD_THIS is the reference to the View Controller itself.

Wd_comp_controller is the reference to the Component Controller. View and Window controller have this attribute defined by default and methods/attributes of the Component Controller can be accessed by using this attribute.

For example:

Wd_assist: This attribute is created when the assistance class is saved and activated for a web dynpro component. All the methods of the assistance class can be accesses by using this attribute.

 Layout Basics 

The layout specifies the arrangement of the UI elements in their UIElementContainer. An object of the type Layoutmust be added to each container. To each child object contained in this container, an appropriate object of the typeLayoutData must be added. This LayoutData object specifies the layout properties of the corresponding child in the container - for example, the position in a coordinate system defined by the layout.

Each UI element container aggregates a corresponding layout object that describes how the inserted UI element children are assigned within the container. This type of layout object is a subclass of the abstract base classLayout.

The following layout UI elements are available for arranging the UI elements in a view:

●  FlowLayoutsapurl_link_0002_0003_0009

A FlowLayout sequentially arranges the container children. This means that you cannot describe defined line breaks, for example. .

●  MatrixLayoutsapurl_link_0002_0004_0009

A MatrixLayout arranges the container children in a tabular format. 

●  RowLayoutsapurl_link_0002_0006_0009

A RowLayout has a similar behavior to the MatrixLayout. However, it sequentially assigns the UI elements to exactly one column. 

●  GridLayout

Instead of the GridLayout, use the MatrixLayout whenever possible.

A GridLayout arranges the container children in a two-dimensional grid with a defined column number and any number of rows. Line breaks can be defined. 

Can you use multiple layouts in one view?

Layouts can be assigned at the container level. For example, you define the layout for your view at the ROOTUIELEMENT container level.

So if at all you want to use multiple layouts in one view, you can create multiple transparent containers and assign different layouts to them.

How do you introduce line break for a UI element in any layout?

Say if you are using matrix layout, you will say Matrix Head data for the UI element for which you need a line break.

 Can you call/launch one webDynpro application from another webdynpro application?

Yes, you can launch one webdynpro application from another webdynpro application.

First, you should get the URL of the web dynpro component that you want to launch and second, call that URL in an external window.

To get the URL of any web Dynpro component, you use the FM 

CALL METHOD cl_wd_utilities=>construct_wd_url    

    EXPORTING

      application_name = 'ZDEMO’

    IMPORTING

      out_absolute_url = str.  

Once you get the URL in str, you can call this web dynpro using 'str' and fm: create_external_window.

What is Web Dynpro Component Usage?

In webdynpro ABAP ,Real world business scenarios are quite complex and may involve multiple Web Dynpro Components.

While dealing with multiple WD components, you may come across a situation where you need to reuse already developed parts of an existing Web dynpro component.  

How do you close a window in Web Dynpro?

There is a special outbound plug called ‘Exit Plug’ that can be used for this purpose.

wd_this->fire_to_exit_plg( url = url close_window = close_window ).

Can you have Totals and Subtotals in Web dynpro ALV ? How ?

Hint: First get the reference of the ALV. Then get the columns. 

          By looping at lt_columns , get to the required column.

          Once you achieve this, check methods create_aggr_rule and create_sort_rule of the class 

          cl_salv_wd_field.  

 Can you have TOP OF PAGE and END OF PAGE ? How ? 

Hint: Check TOP_OF_LIST and END_OF_LIST events. 

Question: Have you worked on events in ALV in web dynpro? 

                  Which events do you know?

Transparent Container 

The Transparent Container is used in webdynpro applications as a UI container that cannot be displayed. A transparent Container UI element is transparent and can be filled with an any quantity of UI elements (children). In addition, the Transparent Container UI element allows you to arrange its inserted UI elements through the specified layout.

HorizontalGutter 

The HorizontalGutter UI element helps you structure layout and text parts, similar to the HTML tag <hr>.  You use it to insert additional, vertical spaces between UI elements and to group together elements and texts that belong together.  The HorizontalGutter UI element provides different heights. You can display this element with or without a separator.

ViewContainerUIElement 

The ViewContainerUIElement UI element is an area within a view that contains another view.

The UI element does not define its own properties, but inherits all properties from the abstract base classUIElement.

Like all UI elements, the ViewContainer UIElement has the visible property, which controls its visibility within the view layout. The visible property can have one of the following three values: none, blank, and visible.

Group 

The Group UI element is a UI element container and can be used to group multiple UI elements under one common title. The appearance of this UI element looks like a display panel with a colored background.

The enabled property has no effect on the UI element children you inserted into the UIElementContainer. If, for example, you set the enabled property to false in the group UI element, an input field inserted in it is not automatically deactivated. If the UI element children in this group UI element are also to be deactivated, you must set the relevant property for each UI element separately.

Contextual Panel 

This UI element provides navigation functions with view switch. The navigation list can include more than three levels.

●  1. Phase 2 

Element is represented as a group in the navigation list

●  2. Phase 2 

Element is represented as an entry in a group in the navigation list

●  From phase 3 

Element is represented as a menu entry

The view switch is not automatically toggled. There is an INDEX parameter containing the index of the selected view switch (counting from 1 upwards).

The navigation list requests a context node that contains a recursion node on itself. This enables you to map a tree with any number of nodes with links. You can only click on the end node of this “tree”, that is if an element does not contain and subnodes with further elements.

When you click on a link in the navigation list, the ON_SELECT event is triggered. You can find the link you clicked on in the event parameter CONTEXT_ELEMENT (TYPE REF TO IF_WD_CONTEXT_ELEMENT).

RoadMap 

The RoadMap UI element displays the steps followed in a wizard. Each step is represented by a separate RoadMapStep Object or MultipleRoadMapStep. You can use various symbols to mark the start points and the end points of this UI element. If you assign the value more to the property startPointDesign or endPointDesign, this indicates to the user that there are other steps before the first visible step, or after the last visible step.

The RoadMap UI element is used to display step by step workflows. This enables an application development team to display small steps of a clearly defined work process.

Example of the Visual Display

Floor plan Manager for Web Dynpro ABAP Use:

Floorplan Manager (FPM) is a highly configurable user interface (UI) framework for easy and efficient application development and adaptation based on Web Dynpro ABAP.

With the help of predefined elements such as floorplans, toolbars and generic user interface building blocks, FPM provides you with consistency across applications and compliance with SAP UI design guidelines, as well as greatly reducing the time required to create such applications.

Central functions such as navigation, messaging, and personalization is embedded in the framework and can be easily defined by application programming interfaces (APIs).

FPM allows you to easily adapt delivered Web Dynpro ABAP UIs to your specific needs modification-free by simple UI configuration, and to combine application-specific views of one or more business applications into new Floorplan Manager applications.

Concept:

A Floorplan Manager (FPM) application is a Web Dynpro application that is assigned one of the following Web Dynpro components:

• FPM_OVP_COMPONENT

Web Dynpro component providing an overview page type of floorplan

• FPM_OIF_COMPONENT

Web Dynpro component providing an object instance type of floorplan

• FPM_GAF_COMPONENT

Web Dynpro component providing a guided activity type of floorplan

Using explicit configurations of these components, you can assign additional Web Dynpro components as user-specific views to display your content. These user-specific views are referred to as UI building blocks (UIBBs).

The following list details the different types of UIBBs:

• Generic User Interface Building Blocks (GUIBBs)

To ensure that your application has a harmonized look and feel, FPM provides you with templates for displaying content, so that you do not have to be concerned with the layout of the UI. For example, there are templates to display your content in a form layout, and in a list layout. There is also a template for search activities, and for displaying content on tab pages.

GUIBBs allow for modification-free adjustments.

• Freestyle UIBBs

These components are created outside the FPM framework, in the Web Dynpro ABAP development environment, by application developers, and must implement the IF_FPM_UI_BUILDING_BLOCK Web Dynpro interface before they can be assigned to an FPM application.

• Reuse User Interface Building Blocks (RUIBBs):

A special type of UIBB that offers business logic and a user interface as one component.

By combining a configuration of a floorplan with configurations of the GUIBBs, you can compile most of the common application user interfaces.

The interfaces can be changed thereafter using the component-defined configuration options for both the floorplan and the UIBB components.

The figure below illustrates an FPM application, showing a floorplan configuration containing two GUIBBs (for form layout and tab page layout) and a single freestyle UIBB. Note that the tabbed component is included only to show that it is a special kind of GUIBB that contains other GUIBBs.

Some methods 

If_wd_context_node

If_wd_context_element

If_wd_my_controller=>if_my_controller

Wd_this, wd_context

Get_child_node

Get_element

Get_attribute

Get_static_attribute

Set_static_atrribute

Bind_element

Bind_table

Bind_structure

Report_t100_message.

OVS Search Help 

OVS Stands for Object value selection. One way of using the F4 input help can be done by using OVS in ABAP webdynpro, The other forms are dictionary search help and freely programmed search help. Now let us see the way the OVS search help works.

The SAP has provided us with a standard webdynpro component WDR_OVS for OVS Search help. Using this standard component we can provide ovs search help in our component.

This OVS Search help has four phases which you will be able to see from the case statement declared in the code consisting of four phases if_wd_ovs=>co_phase_0 to if_wd_ovs=>co_phase_3.

P1-set_configuration

P2-set_input_structure

P3-set_output_table

P4-set_attributes

Setting a field in Select option

WDR_SELECT_OPTIONS

Choose the view WND_SELECTION_SCREEN in which selection parameters will be displayed

call method lv_r_helper_class->create_range_table 

  exporting 

    i_typename     = ‘ebeln’ 

  receiving 

    rt_range_table = rt_range_table. 

* add selection field 

 call method lv_r_helper_class->add_selection_field 

get_range_tableof_sel_field.

ALV with Link to Action

GET_COLUMN

SET_TEXT_FIELDNAME 

SET_CELL_EDITOR 

Assign the event handler method to the ON_CLICK event of the ALV component.

If you see the importing parameter of this event handler method there will be an importing parameter call r_param which is a reference variable of some ALV Interface.

he attribute Value will gives us the value of the cell that the user has selected. This attribute is of type data reference variable and we can get it in a field symbol.

Code as below in the event handler method:

Now the field symbol will be containing the value of the selected cell.

Based on field symol we can select the item data.

ng excellence together

Creating a custom button in ALV Toolbar

Create an object for the class CL_SALV_WD_FE_BUTTON to create a button.

Then create a custom function in the ALV tool bar by calling the Create function method of the above mentioned function settings interface and assign the button to the function.

Hiding the columns in ALV report in  web dynpro application

The class for the column contains a method called set visible using which we can set the visibility of the column. This method by default will have the visible property as visible which we have to make none in order to make the column invisible. We have already obtained the object reference to the column button using which I am going to hide the column.

Editable ALV Report:

How to make a column of an ALV Table as an Editable.

We will proceed with the same component which we created in the previous blog.

Still we will not be able to see the column as editable because the table read only property will shade the input mode property which we have set for out column.

So we have to change the property of the ALV table using the interface IF_SALV_WD_TABLE_SETTINGS. Call the method set_read_only and set the exporting parameter value as ABAP_FALSE which would previously be ABAP_TRUE.

Radio button UI Element

How radio Button works?

The radio button UI element has two key properties.

Key to select

Selected Key

The radio button gets selected when the value in the key to select is same as the value in the selected key.

Both property Selected key and Key to select is bindable to the attribute of type string.

Code will be generated as below. From the system generated code modify the code as below.

Check Box in webdynpro SAP

With a check box UI element we can implement a single on or off switch. The check mark in the box indicates the option is selected and the value is true.

The Check Box UI element has an obligatory binding property checked which is to be binded to an attribute of type WDY_BOOLEAN.

Modify the code in the event handler method on toggle as shown below.

Note: This method will be triggered only when the check box is selected then only the text view will be set. If you want the text view to hold activated or deactivated by the time of appearance on the screen then you have to set the attribute accordingly in the doinit method.

Read the further deep explanations of webdynpro ABAP components in other posts.

SAP ABAP WebDynpro Introduction

Reference Variables in WebDynpro

Reading attribute value of context element in ABAP WebDynpro

Structure in ABAP WebDynpro

Messages in WebDynpro ABAP

Webdynpro ABAP Input Help

Displaying Data in Table Form in Webdynpro ABAP

Webdynpro ABAP ALV Report

Webdynpro ABAP Editable ALV Report 

Writing Data to Context elements in Webdynpro ABAP

Webdynpro ABAP Interview Questions

SAP ABAP Tutorials

Web Dynpro,Dynpro,web,ABAP,Web Dynpro ABAP,Dynpro ABAP,Web ABAP,Dynpro ,Introduction.