Category: SAP Web Dynpro

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

Introduction

In our previous articles we have already seen how to create a view in Web Dynpro. In Web Dynpro we can create multiple views under a component. It is also important to embed that view in the window to make it visible. In this article we will explore how to navigate between Views in Web Dynpro. Before jumping directly to the navigation concept, we will start with the concept of plugs in Web Dynpro.

Navigate between Views in Web Dynpro

A Web Dynpro application needs following to navigate between two views within a window:

1. Views: At least two views which will have the navigation concept implemented.
2. Navigation Links: A Navigation link is the connection between the above views.
3. Plugs: A plug is the port that exists at both the ends of the Navigation link.

The above concepts can be understood with the diagram shown below:

Plugs

A plug is a junction used for accessing or existing a view. Either you will access a view or exist a view; and for both case we have two different plugs. These are:

Inbound Plug

This is a plug which is used to enter a view. Every inbound plug must be linked to an outbound plug else it produces errors.

Outbound Plug

This is a plug which is used to exit a view. Every outbound plug must be linked to an inbound plug else it produces errors.

Navigation Link

A Navigation link is the connection between two views. It needs plugs to execute a navigation.

Step by step process to create a Navigation between views

Step 1: Go to SE80, create a web Dynpro component ZTest_PLUGS.

Step 2: Go to main view, insert a button, provide button text as ‘Press’, and create action method for button ON_PRESS.

Step 3: Right click on component -> create -> view, provide name as DETAILS_VIEW and enter.

Step 4: Go to “DETAILS_VIEW” view, insert a button, provide button text as ‘Back’, create action method for button ON_BACK.

Step 5: Go to main view, outbound plugs tab, add outbound plug as GOTO_DETAILS_VIEW and inbound plugs tab add inbound plug as IN_MAIN.

Step 6: Go to DETAILS_VIEW view, outbound plugs tab, add outbound plug as GOTO_MAIN and inbound plugs tab add inbound plug as IN_DETAILS.

Step 7: Expand window, drag and drop MAIN, “DETAILS_VIEW” view into window.

Step 8: Expand two views, right click on GOTO_ DETAILS_VIEW -> Create Navigation Link, press F4, select destination view as DETAILS_VIEW and enter.

Step 9: Right click on GOTO_MAIN -> Create Navigation Link, press F4, select destination view as MAIN and enter.

Step 10: Go to main view actions tab, double click on ON_PRESS method and add below code.

wd_this->FIRE_GOTO_ DETAILS_VIEW_PLG( );

Step 11: Go to DETAILS_VIEW view actions tab, double click on ON_BACK method and add below code.

wd_this->FIRE_GOTO_MAIN_PLG( );

Step 12: Save and Activate the components.

Step 13: Run and Test the components.

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

Introduction

A Web Dynpro Application is developed using MVC (Model View Controller) Architecture. It means whatever data model is there that requires binding with the View elements (e.g. Input Field, Check box, Table, etc.). This binding can be achieved using view and controller. In this article we will explore data binding in Web Dynpro.

Data Binding in Web Dynpro

In Web Dynpro, we have multiple components. In our previous article, we have already discussed that we have something called Context which is a data container which stores data at runtime. A context can have multiple nodes e.g. Table nodes which will store table data. These nodes can have multiple Attributes that are the fields of the table.

Definition

Binding of the attributes or nodes of a context with UI elements (e.g. Table, Input Fields, etc.) is known as Data Binding in Web Dynpro.

Why we need Data Binding

1. To show Customer Data on the Web Dynpro screen
2. To auto fill the input fields based on pre-defined selections
3. To provide search helps for an input element
4. To maintain/provide conditions on UI based on backend data

Types of Data Binding

1. Internal Mapping
   It is a mapping between contexts of single component.
2. External Mapping
   It is a mapping between multiple contexts using their interface controller.

Setup and Coding for Data Binding

In our previous articles we have already shared steps to create a Web Dynpro View and publish it as an application. You can follow steps and code mentioned here to convert that application in an Application which utilizes data binding.

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

Introduction

Web Dynpro is a SAP based technology which is used to create web-based Application. To develop a web based application we need multiple components and interfaces. In this article we will explain Components in Web Dynpro in detail.

Components in Web Dynpro

A Web Dynpro component is a reusable entity. The creation of Components in Web Dynpro is a mandatory process. A Web Dynpro component can even contain another Web Dynpro Component. The lifetime of Web Dynpro component begins at runtime of the application and end with the lifetime of Web Dynpro Application.

Context

It is a data container (or a temporary storage area) where we store data during runtime of Web Dynpro Application.

UI Element

It is the most important element of Web Dynpro. It is a display/screen element. Using it, we can display any information on the screen. It include Text View, Radio Buttons, Drop Down, Check Boxes, Tables, etc.

View

Like HTML websites, it is the screen that is visible on the browser. It is the same view that we have discussed in the MVC concept of Web Dynpro earlier.

Window

The window is the container that holds multiple view altogether.

Methods

It is the section that contains the business logic of our Web Dynpro Application. Like SAP ABAP, we include Select statements, Function Module, other code blocks here.

Controller

As we have discussed about MVC architecture of Web Dynpro, a controller is used to communicate between views and models (data). These models are extracted from the Methods.

Navigation Plugs

A navigation plug, as its name suggests is used to navigate between multiple views.

Application

Once we are done with all the component creation, modelling and coding, we need to get an executable link which is extracted from Web Dynpro Application.

Advantage of Components in Web Dynpro

Following are the advantages of Components in Web Dynpro:

1. It helps in Structuring the programming
2. It helps in creating blocks which are easily manageable
3. It creates blocks which are reusable

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

Introduction

Web Dynpro in SAP ABAP is a standard technology which is used to create web-based applications using ABAP programing language. Web Dynpro includes many graphical development tools which are included in ABAP workbench. Because of the use of a graphical tool, it seems to be more user-friendly. In this article we will learn about the setup of SAP Web Dynpro Application.

Setup of SAP Web Dynpro Application

Step 01: Goto the transaction SE80

Step 02: Click Repository Browser

Step 03: Select Create web Dynpro component and assign it a name as shown above. On Clicking enter it will open a pop up as shown below:

Step 04: Enter the description, chose the type and Assign Window and View name as shown below:

Step 05: Now a view is created as shown below:

Step 06: Double click the view to open it, as shown below. Choose the layout option here:

Step 07: In the right hand side, you will see two options, choose Root Element Container, as shown below:

Step 08: In above step, choose Insert Element:

Step 09: Provide ID and TYPE of the element, as shown below:

Step 10: For the element “Page Header” you have just created, define the properties available in the right pane:

The title that we have provided above will be the header of the Web Dynpro Application. It is suggested to give a meaning title, unlike the one we have mentioned.

Step 11: To save your application, click CTRL + S

Step 12: Now activate your application, by right clicking the application name from left pane and clicking “Activate”, as shown below:

Step 13: Whatever, we have done is just the creation of Web Dynpro Interface/Component. To get an executable Application, right click and under Create option, choose “Web Dynpro Application”.

Provide the name of the application and meaningful description. The application you have just created will appear just below the “Windows” option above. Now right click the Web Dynpro Application and click test to open your application. The application will open in Internet Explorer.

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

Introduction

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:

Favorites

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.

Text

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

Action

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.

Selection

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

Complex

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.

Layout

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.

Graphic

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:

Integration

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
   
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

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.

 

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

Introduction

Web Dynpro follows MVC architecture. This model, view and controller design is very helpful while designing any web application as it properly segregates the business logic from (HTML-based) views. The three parts work in such a manner that it gives the user a very easy way of accessing the application.

MVC Architecture

Model

As mentioned in the previous articles models are objects that contains business logic statements to read or write data into the database. This model can be developed in various forms depending on the requirements as like  Function Modules, BAPI`s, Classes, etc. Model, when created as a class (Model class), is nothing but a class which forms certain data in it which one will want to show in Web Dynpro Screen.

View

In simple words, the view is the screen that is displayed in the browser for the user. This is the place where the user actually interacts with the application. User will provide the input through view in order to fetch the required result. It is used to ensure the appropriate representation of data in a web browser.

Controller

Controller works like an interface between the model (which hold the data) and view (which displays the data). That means this is used to control communication between Model and View where it takes input from the users and gets the desired data from the model and displays the data in the browser.

How MVC Architecture works

Basically, MVC segregates the web application into three different modules, for better understanding let us take an example. Suppose you went to a restaurant to have dinner with your friends, after a couple of minutes you decided what to eat then a waiter came and you gave the order, after noting down he went and gave order details to the chef. Now chef will gather ingredients to prepare your order. After completion of your order, he will notify the waiter to deliver the food to your table. So in a way you are giving your Model name to your View and your view is pulling the data from a model and showing with the help of the controller. This is how any MVC Architecture will work.

 

Advantages of MVC Architecture

1. It is easy to identify where the business logic and view design is. The model will contain only the business Logic, View will contain only the UI design, Controller will contain the code to get the value from UI and send it to Model and vice-versa.
2. Due to the segregated design pattern, it is easy to enhance the design and business logic as per the requirement.
3. Use of graphical tools in view part reduces the coding effort.
4. Use of data binding and context mapping concepts in view part passes the data automatically from source to destination without handling the data.
5. The goal of MVC is, by segregating models and views, to reduce the complexity in architectural design and to increase flexibility and maintainability of code.

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

Introduction

Web Dynpro is a framework that is used to design web-based UI applications. We can utilize Web Dynpro in both JAVA and ABAP programming languages. Both of them are utilized in such a way that it incorporates the graphical environment comprising special UI elements which help in building an attractive UI and then resulting in minimization of coding effort.

Web Dynpro ABAP

As explained in last article, Web Dynpro ABAP incorporates the complete ABAP workbench in designing web based UI application. One must be having skill set in ABAP programming, ABAP Objects, Database concepts and Development tools to develop the application. ABAP based applications can be created in one system and can be transported to the destination server with the help of transport request like any other usual ABAP objects.

Web Dynpro Java

Web Dynpro JAVA attracted a bit less commercial success in comparison to web Dynpro for ABAP although it was introduced one year before that is in 2004. So as per SAP, this has been placed in the state of maintenance that means it will be supported till the time, any bugs will get fixed. Web Dynpro JAVA programs cab be executed by JAVA server which accesses remote system in order to obtain business functionality, while model objects are required in order to incorporate the communication functionality.

Difference between web Dynpro ABAP and Web Dynpro Java

1. WEB DYNPRO JAVA was introduced first by SAP that is in 2004 while WEB DYNPRO ABAP was introduced in 2005 due to very less popularity of WEB DYNPRO JAVA it is in the state of maintenance as per SAP rules.
2. It is easier to transport WEB DYNPRO ABAP programs from one server to the destination server using transport request while WEB DYNPRO JAVA programs need to be transported by SAP Net Weaver Development Infrastructure (NWDI). It means if one wants to move the changes from one server to another they will have to additionally install NWDI.
3. As WEB DYNPRO ABAP is incorporated into the ABAP workbench, database access is simple, just like in report programs and function module. One can access the database directly using the select statement. While in WEB DYNPRO JAVA, BAPIs (Business Application Programming Interfaces) are needed in order to eat up the business logic.
4. WEB DYNPRO ABAP applications can be customized on both application level and component level. This configuration is done at design time which offers much flexibility and developers can change the look of the UI, quite easy to meet the business requirements. This is not the case for customization of WEB DYNPRO JAVA applications because for that custom development component (DC) needs to be created in Net Weaver developer studio.
5. With all the points listed, we can easily summarize that Web Dynpro for ABAP is a better option with much more flexibilities in comparison to Web Dynpro for JAVA.

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

Introduction

Web Dynpro in SAP ABAP is a standard technology which is used to create web-based applications using ABAP programing language. Web Dynpro includes many graphical development tools which are included in ABAP workbench. Because of the use of a graphical tool, it seems to be more user-friendly.

Definition and Creation

Definition

Web Dynpro applications are built using declarative programming techniques based on the MVC (Model View Controller) architecture. For developing the Web Dynpro entities, the Object navigator (TCODE SE80) is used.

Creation: Basic steps are:

Goto SE80 Tcode -> Repository Browser -> Create web Dynpro component -> In the component, the Main view will be created, in that view insert elements as per the requirement. Here we have created just the page header. There are various elements that can be created, for example, dropdown elements, rows, columns, etc.

After the creation, the whole web Dynpro component needs to saved and activated.

Creation of Web Dynpro in SAP ABAP

Steps for all the creations steps are shown below in the picture:

Step 01:

Step 02:

Step 03:

 

Step 04:

 

Step 05:

Step 06:

Step 07:

 

Step 08:

Step 09:

 

Step 10:

Step 11:

 

After the creation of the Web Dynpro application, right click on the application and test it. The auto generated URL will open in the internet explorer.

NOTE: In case the URL is not working then the connection can be checked in SICF Tcode, whether the connection is active in that particular system or not. (By default it is automatically activated in the system).

Path: SICF (TCODE) -> default_host  -> sap -> public -> bc -> web dynpro

 

Architecture

As stated earlier Web Dynpro in SAP ABAP applications are built on the MVC architecture. So now we will explain the MVC design in Web Dynpro.

1.Model: Model basically means the part which contains data, that means all the business logic will be implemented in the model part only. So in simple word we can say the model is a section which will provide the data.

2.View: View is the part where the user will be able to see the data.

3.Controller: The data that is processed in the model, needs to be displayed in the view. But to control the flow between model and view we need this part called a controller.

Pre-requisites to learn Web Dynpro in SAP ABAP

1. Core ABAP Programming: Core ABAP programming is prerequisites because as stated earlier in the architecture section the logic for providing data will be written in the model. So the for that ABAP programming skill is required. If one is aware of the ABAP skill then it will be very easy to implement any business logic as per the requirement.

 

2. Object-Oriented Programming: Oops knowledge is definitely beneficial in web dynpro applications because the as we are talking about the model and controllers these are all nothing but the classes which we implement by creating the objects for it.

 

3. MVC Architecture: As discussed in the previous section, it is important to know the MVC design pattern to understand the web dynpro application for ABAP. Because the whole point of the application is to model the data and display it to the user which is happening with this design.

Benefits of Web Dynpro 

1. There are many benefits of using Web Dynpro as like:
2. Due to the uses of graphical tools in Web Dynpro , implementation of coding part is reduced.
3. Use of MVC design ensures the separation of layout and business data.
4. There is a feature of data binding for the elements created in the view of Web Dynpro, due to which it enables the direct transport of data.
5. It can run on number of platforms.