A case-study about a web business application
implemented in different SAP UI technologies
A.D.Berdie*, M.Osaci*, I. Muscalagiu* and G. Prostean**
*
Politehnica University of Timisoara, Engineering Faculty of Hunedoara, Department of Electrical Engineering and
Computer Industry, Hunedoara, Romania
**
Politehnica University of Timisoara, Faculty of Management in Production and Transportation, Timisoara, Romania
adela.berdie@fih.upt.ro, mihaela.osaci@fih.upt.ro, ionel.muscalagiu@fih.upt.ro, gabriela.prostean@mpt.upt.ro
Abstract— This paper proposes a case study about a web
business application implemented in three SAP (System
Application and Products in Data Processing) UI (user
interfaces) technologies:
Web Dynpro (WD) ABAP
(Advanced Business Application Programming), Floorplan
Manager (FPM) and Customer Relationship Management
(CRM) WebClient UI. This study is comparatively realized:
both in terms of application achievement, and also in terms
of the obtained front end time displayed to the end-user.
The application is based on SAP database tables and the
measurements performed to obtain the front end time to the
user are made for the same query in the database with the
help of Internet Explorer HTTP Watch tool.
I.
SAP UI TECHNOLOGIES
During the time, SAP developed many products and
solutions that are implemented by a lot of UI
technologies. One of the SAP solutions is SAP Business
Suite and is based on the SAP technology platform called
SAP NetWeaver (NW). This platform contains a set of
cooperative technologies that provide internal
connectivity between SAP modules and external
connectivity with other systems. For ABAP developers,
the SAP NW technologies and tools include Web Dynpro
ABAP which includes the Floorplan Manager and, for
SAP CRM, the WebClient UI Framework.
A. Web Dynpro ABAP
Web Dynpro ABAP is the UI development platform
preferred from many ABAP developers, and enables the
creation and configuration of web UIs for complex
applications according to the business users’ needs. This
framework, realized in according to the Model View
Controller (MVC) paradigm, is completely integrated in
the ABAP Workbench and contains both an execution and
a graphical development environment with special Web
Dynpro tools.
The Web Dynpro ABAP applications are developed in
the ABAP Workbench (transaction SE80). The creation
of applications using Web Dynpro is structured
in Web Dynpro components [1], see Fig.1:
• component interface – provides the user’s or
other components’ access to the inner workings
of a component;
Figure 1.
•
Web Dynpro component
component usage – defines a component usage
and can embed other components into a
component;
• controller – data flow and binding that are
handled through the controllers;
• view – is the visible area for the UI that contains
all the view elements;
• window – using windows, the views can be
arranged in complex screen layout;
• context – via contexts, used to do all the data
processing in a WD application;
• view element – is the smallest part of a view,
and describes a visible area in the client.
A Web Dynpro component can contains several Web
Dynpro views. Each view contains a hierarchic set of
context variables. These variables serve as data
containers and can be accessed programmatically. An
event logic can be attached e.g. to a button or to an input
field. The views are connected with inbound and
outbound plugs. These are usually triggered by
navigation events. A Web Dynpro application can be
created when the WD component is ready. She delivers
the URL to start the application in the browser as in [2].
The behaviour of the component is programmed
within its controllers. Every controller can implement
different types of methods. They are [3]:
• the hook methods, which interfere with the
program flow at certain times;
• the event handler methods, which are
implemented to respond to events of controller,
to action received from the client, and to events
of navigation plugs;
• the supply function methods, which populate the
context attributes of the context node elements;
• other additional methods that manage data and
control logic.
According to the complexity of the web business
application, the WD component can be achieved through
several methods: the classical method, componentization
(application realized with usage of WD components) or
assistance class.
B. Floorplan Manager
Floorplan Manager Framework, based on Web
Dynpro ABAP technology, is the standard UI Framework
for SAP Business Suite applications. It is implemented as
a Web Dynpro ABAP component and integrated into the
Web Dynpro ABAP development environment, see Fig.2.
FPM Framework currently supports the users in creating
and configuring UIs with the following floorplans, which
can be configured using the FPM Configuration Editor
[4]:
• Object Instance floorplan (OIF)
• Guided Activity floorplan (GAF)
• Overview Page floorplan (OVP)
FPM Framework supports the following floorplan
areas:
• Identification Region (IDR)
• Message Region (MR)
• Context Navigation Region (CNR)
• Roadmap Element
This framework can be used to configure web
business applications based on reusable building blocks.
These components do not have to be implemented again
by an application developer, but can be reused by
leveraging the framework provided by the Floorplan
Manager. In this way, using the Floorplan Manager
decreases the amount of coding and implementation
effort, reducing the cost of development [5].
To create Web Dynpro applications, FPM
Framework, provides many components: floorplans, UI
Building Blocks and a configuration tool. The main task
of FPM is to connect UI Building Blocks (UIBB) or
Generic UIBB. At the Generic UIBBs, Web Dynpro
applications define an input parameter and a field catalog
in flat structure for the business logic. A field catalog is
defined as a list of fields and provides a certain interface
for Generic UIBBs.
Figure 2 Floorplan Manager Framework’s architecture
Through this interface the Generic UIBBs can
communicate with these fields. Input parameters are
defined as special field catalogs for the input attributes.
Usually, UIBBs are provided by the external
application and they communicate with the FPM via APIs.
The APIs consists of methods encapsulated in the
interface [6].
FPM Framework and the Web Dynpro application
components,
which
include
Generic
UIBBs,
communicate via FPM Interfaces during the floorplan
event loop. The floorplan event loop comprises a
sequence of predefined methods belonged to a class,
named feeder class. These class starts when the floorplan
is instantiated at runtime. At the same time, feeder classes
supply the specific information for the UIBBs within the
WD applications by implementing the FPM Interface
together with the predefined methods at runtime.
The communication between the WD applications and
the Generic UIBBs within feeder classes include [7]:
• Web Dynpro application definition: for example,
data definition, structure or table definitions and
the technical aspects;
• Possible default layout information and the
corresponding field dependencies;
• The action definition based on metadata from
Business logic;
• The action or event handling and data is
forwarding to the underlying application model.
The Floorplan Manager can adopts many Web
Dynpro enhancements and accelerate the innovation for
the end user.
C. CRM WebClient UI
The WebClient UI Framework belongs to the
Business Suite Foundation Layer, is a highly configurable
and customizable UI framework and is useful for
developing applications that tightly integrate with SAP
CRM [8]. CRM is a business strategy that aims to
optimize customer interaction in order to maximize the
success of the business. The WebClient UI frameworks
interface is based on a solution, available only in CRM.
CRM has its own navigation framework, the concept of
role and UI programming technique.
The UI technology from CRM is not based on Web
Dynpro, but is based on Business Server Pages (BSP)
technology, which is a combination of ABAP code and
BSP extensions. These extensions consist of HTMLB
(Hypertext Markup Language Business) tags, more
complex than the conventional HTML (Hypertext
Markup Language) tags. The BSP technology is a set of
pages that represent a UI and contain server-side scripting
code. Through the BSP existing SAP logic is directly
used in Web applications.
Like at WD ABAP, the architecture of the CRM
WebClient UI framework is divided into three strictly
separated levels: Database Layer, Business Layer and
Presentation Layer [9], see fig.3:
• The Database Layer consists of the relational
model of the CRM database and all the APIs,
provided for reading and writing
corresponding to the business object.
data
Figure 3. CRM WebClient Framework’s
architecture
•
The Business Layer provides the separation of
the UI from the business logics implemented by
the database layer. This level consists of two
components: BOL (Business Object Layer) and
GenIl (Generic Interaction Layer). The BOL
component contains the persistent business
objects data and exposes them to the
presentation level, as well as to the APIs
programming interfaces at the Business Logic
Level. The data transfer from the BOL to the
persistent system of database is ensured by the
GenIl component. The BSPs from the
presentation level are not able to control the
business logics of any CRM object and process.
• The Presentation Layer is responsible with the
visual part of the application, and consists of the
web pages that are performed at runtime based
on BSP extensions, classes that contain the
navigation logic and calls to the business logic.
This level is divided into three levels, known as
MVC. The Model contains information about
the range of used data structures, known as a
context. In the Business Layer, the context data
is mapped to be understood by the database and
GenIl will make the connection with the
database. The View contains an HTML file and
is responsible for displaying the business objects
data and for defining the layout for each page.
Through the view is defined the design of the
page: buttons, tables, fields and labels, which
will be displayed for each context. This is the
most frequently customized WebClient UI part.
The business users can easily make changes on
the UI with the UI Configuration Tool, and no
programming skills are required.
The tool used to develop, test, and enhance
components is the BSP WD Component Workbench
(transaction BSP_WD_CMPWB). When creating a web
component, the system generates [9]:
• a BSP application with the name of the
component
• a component controller (BSP controller and
corresponding component controller class)
•
A default window named MainWindow (BSP
controller, corresponding controller class and
BSP view)
• a Runtime repository XML file (BSP page
Repository.xml) in the component’s BSP
application
As well as the WD ABAP including Floorplan
Manager, a web business application achieved in CRM
WebClient UI can be very easy configure with different
tools as: UI Configuration tool (transaction
BSP_WD_CMPWB), Design layer customising, Easy
Enhancement Workbench, Changing Skins.
So in [10], component enhancements improve the
functionality of components, views, and controllers
provided by SAP. The components are not modified
because they use inheritance and references. Component
enhancements use the replacement concept for
components at runtime.
II.
EXPERIMENTAL RESULTS
The web business application made in all the three
technologies consists of a user interface that can perform
searching and displaying results from the database. The
data model, from which the results come, is based on the
related tables BUT000, BUT020 and ADRC of the SAP
system see Fig.4, tables which contain 9973 records.
The application achieved in the WD ABAP technology is
realized from a single component [6]. Through an input
field, data from some fields of the system tables: business
partner - BUT000 and address - ADRC, are displayed
according to a search parameter, see Fig.5. All specific
methods for the searching and displaying of data are
defined in the Controller. Here, through a maintenance
view that contains attributes from our tables, reading the
context, implementing open SQL instructions and calling
the bind_table() method from the IF_WD_CONTEXT_
NODE interface, the data will be return from the database
in accordance with the customer request. This, shapes up
the model data to be displayed in the view processes user
entries and returns them to the model.
Using the WD ABAP including Floorplan Manager,
an application similar to the previous can be achieved by
taking an OVP floorplan, named Business Partner Query,
with two Assignment Blocks, see fig.5 and [6]. These are
the Search Component – GUIBB Search - a generic
design template for searching and a Generic UIBB for
result displaying. These GUIBBs will be configured at
the design time, and the fields from the field catalogue
Figure 4. Database SAP tables
Figure 5. Web business application achieved in WD ABAP, FPM and CRM WebClient UI
may communicate with the GUIBBs via the
IF_FPM_GUIBB_SEARCH interface.
Through two methods GET_DEFINITION and
GET_DATA within the FPM event loop, the feeder class
will implement the search logic and then generate the
shape of the result to display. These methods, allows the
feeder to provide all the necessary information for
configuring the search: a list of available search attributes
and a list of columns for the result table. [11].
A web application built using the CRM WebClient
UI's framework is based on a single BSP component of
the CRM system, BP_HEAD_SEARCH (search page).
Using the UI Configuration Tool and through the
enhancement technique, we will adapt the component's
view in order to obtain an application similar to the Web
Dynpro ABAP application, see fig 5 and [6]. This search
page provides the users with comprehensive search
capabilities for every CRM component. The page consists
of a search criteria area (including a save function for
search queries) and a search result list.
The new BSP application, inherit all the functionality
and the implementation part of the BP_HEAD_SEARCH
component. The two views of the component:
MAINSEARCH and MAINSEARCHRESULT will be
separately configured. All the component structures
BP_HEAD_SEARCH are mapped in View layout with a
class and then displayed by the *.htm page [11].
To perform a query in the database we have used the
HTTP Watch Tool for measuring the front end time to the
end user. This Tool is a HTTP monitoring plug-in for
Microsoft Internet Explorer that give detailed information
about applications or websites that are loading in the
browser. It displays the overall time required to load a
website (e.g. our application), and the individual time for
loading of each element of the website.
The set of measurements was realized for two cases: a
search query for a total of 9973 records in the
database and a display list with 9 displayed lines, and the
same search query for 9973 records, but a display list
with 100 displaying lines. The obtained average time
values for searching with Web Dynpro ABAP, with
Floorplan Manager, and with CRM WebClient UI are
transposed and evaluate directly into the graphic, Fig. 6.
These values based on measurements, was done on
reference hardware for NetWeaver 7.20 (2.4 GHz single
core CPU, 1GB Memory, Windows XP SP2, Internet
Explorer 6) which reflects the standard equipment used at
many customer sites.
14000
12000
10000
8000
100 Displayed
6000
9 Displayed
4000
2000
0
CRM
FPM
WD ABAP
Figure 6 Request time in front-end
III.
CONCLUSION
In conclusion, through this study we noted that: the
shortest time for applications achieving, was obtained for
the CRM WebClient UI technology.
Evaluating the results obtained by measurements, we
observed that the application realized with the WD
ABAP technology is the most efficient: the front end time
to the user is the smallest. This is because the WD
application is realized without UI Building Block
components which make the process of extracting data
from the database slower. To optimize this time,
important factors are the quantity (total number of UI
elements), and the quality (different UI elements take
different times to get displayed) of the UI elements which
are used for the realization of the web application.
REFERENCES
[1]
[2]
[3]
[4]:
[5]
[6]
[7]
[8]
[9]
[10]
[11]
SAP Help Portal URL: http://help.sap.com
Ulli Hoffmann, Web Dynpro for ABAP, Publishing House SAP,
Galileo Press, Bonn, Germany, 2007
Ulli Hoffman - Get started developing Web – native custom SAP
application with Web Dynpro for ABAP, SAP Professional
Journal July/August 2007, URL: http://www.sappro.com
Floor Plan Manager Developer’s Guide. SAP AG Internal, URL:
https://portal.wdf.sap.corp/irj/go/km/docs/room_project/cm_stores
/documents/workspaces/e1f2879b-3584-2c10-0ca9bc6e2c47815c/FPM%20Developer's%20Guide%20702e.pdf.
URL: http://www.wiki.sdn.sap.com
A.D.Berdie, M.Osaci, A survey on evaluating the performance of
a software application implemented with SAP technologies,
IJSEKE, 2012, unpublished.
Saundattikar, Rohan. SAP WiKi: GUIBB. SAP AG. June 2009.
URL: https://wiki.wdf.sap.corp/wiki/display/FPM/GUIBB
http://help.sap.com/saphelp_crm700_ehp01/helpdata/en/4c/
ea2be450e94597b5a6017f095a6132/frameset.htm
Michael Füchsle, Matthias E. Zierke, SAP CRM Web Client Customizing and Development, Galileo Press 2009
WebClient UI Architecture, SAP CRM 2007, SAP AG Document,
July 2008, URL: http://service.sap.com/rkt-crm
A.D.Berdie, M.Osaci, L.D.Lemle, Comparative statistical study
of some SAP UI technologies, ICNAAM 2011, Greece