CRM WebClient UI Architecture:
Section – I
In this section, you will learn about the following aspects of the CRM WebClient UI architecture:
 CRM WebClient UI and SAP NetWeaver Application Server (SAP NetWeaver AS)
Technology
 The layers of the CRM WebClient UI software architecture
 The detailed view of the CRM WebClient UI layers
 The Business Server Page (BSP) technology-based presentation layer of the CRM
WebClient UI
CRM WebClient UI and SAP NetWeaver Application Server (SAP NetWeaver AS) Technology:

The CRM WebClient UI is built to run within a Web browser. Therefore, on the client side it is
only necessary to install a Web browser. An SAP Graphical User Interface (SAP GUI) is not
necessary.

All data displayed in the Web browser is sent by Hypertext Transfer Protocol (HTTP) from
SAP NetWeaver Application Server (SAP NetWeaver AS) to the client (the Web browser).
SAP NetWeaver AS 70 contains two runtime environments:







ABAP
J2EE (Java 2 Enterprise Edition)
The CRM WebClient UI is fully based on the ABAP stack.
The user interface (UI) is based on BSP technology.
BSPs are a combination of ABAP code and BSP extensions.
BSP extensions provide Hypertext Markup Language Business (HTMLB) tags for a consistent
look and feel throughout all applications.
HTMLB tags have complex and extensible capabilities that are much more powerful than
standard HTML tags.
CRM WebClient UI and SAP NetWeaver Application Server:
The HTTP services of the Internet Communication Manager (ICM) communicate between the
Web browser and the BSP runtime. The ICM handles the inbound and outbound connections
of SAP NetWeaver AS. It is responsible for caching and works with multiple protocols, such
As Simple Object Access Protocol (SOAP), HTTPs, and Simple Mail Transfer Protocol (SMTP).
The layers of the CRM WebClient UI software architecture
Total Architecture is divided into two sections one is CRM application and another is Database.
Presentation layer (BSP’s):
The Business Server Pages (BSPs) are the presentation layer of the CRM WebClient UI. They are used to
generate the HTML page of the CRM web client running on the agent’s browser. The business logic of
CRM Business objects and process is not controlled by BSP’s Presentation and it will handle separately.
Business layer (BOL + GENIL):
BOL: Business object data used during a CRM WebClient UI session, such as business partners, products,
and transactions are handled by the business layer.
GENIL: GENIL handles the data transfer between CRM Database Tables and BOL Business Objects.
Purpose of GENIL is, it checks for the BOL Objects.
Note: The layers are strictly separated.
Because of this separation, connection of any business application through Generic Interaction
Layer (GENIL) and Business Object Layer (BOL) to the CRM WebClient UI presentation layer is possible.
The CRM WebClient UI handles not only CRM business objects and processes, but also ERP system
application objects, such as employees from SAP Human Capital Management (HCM) and ERP sales
orders from SAP Supply Chain Management (SAP SCM).
The detailed view of the CRM Web Client UI layers
The Presentation Layer:
Model View Controller Design Pattern Overview
Business Server Pages (BSPs) can be created using different programming paradigms and design
patterns. But the CRM WebClient UI BSP is based on the Model View Controller (MVC) paradigm. MVC
is a widely accepted design pattern for developing object-oriented user interfaces (UIs). It provides an
effective way of relating UI layouts to an underlying data model.
An MVC application consists of the following:
1. Model
2. View
3. Controller
1. Model:
The model of the CRM Web Client UI BSPs consists of contexts and context nodes
that link the fields of a view to the underlying business layer (the BOL). This linking is
referred to as binding. Each data field on a view visualizes an attribute of a context
node. Each attribute of the context node is connected to a field in BOL Structure.
2. View:
The view handles the visual output. It is responsible for rendering the output and
Relevant UI controls, such as data fields and push buttons. The controller receives all
Output for rendering. All user input is passed from the view back to the controller for
Processing.
3. Controller
The controller handles the interaction logic and provides the connection between a
view and a model of an MVC application. A controller receives all keyboard and
mouse input from the view. Based on these events, the controller can decide how to
react (for example, by accessing data from the model or triggering the navigation to a
different view).
User Input (Request)
Controller.Do
Class _Impl

Implementation of
model

Event Handling

Navigation
Get
Model
Context _CTXT
Context Nodes
-CN00
-CN01
- CN02
Set
Data Output (Response)
-
View.Htm
LayOut: BSP EXT Tags
Defining the View
Layout
Page Attributes
_CN00, _CN01, _CN02
 The controller is the first element that is instantiated when the system navigates to specific
view. It triggers the context class and that itself instantiates the context nodes.
 The context nodes are the link between the input fields on the view and the data model in the
BOL. For each Business object used in BOL, there is one context node necessary. The context
nodes follow the same hierarchy as defined in the data model.
 Data are transported from Model to the view automatically through controller.
 View does not contain any logic. It just uses BSP Extensions which generates HTML Coding and
uses ABAP as Scripting Language.
 All user inputs are handled by controller. The data are transferred to Model and then context
nodes then Updates the BOL.
 In case the user pressed a button (Event) the controller contains the logic what to do with this
click like navigate.
 Whenever a user action is taken then view controller implementation class is triggered first,
because event handler method is defined here in the _IMP Class.
 The views and their corresponding controllers and contexts of CRM Web Client UI components
can be accessed in the BSP WD Component Workbench (transaction BSP_WD_CMPWB) by
clicking Views in the Browser Component Structure.
In CRM WebClient UI components, each view has its own view controller. For example, the view
BTSHeader.htm would have the corresponding controller BTSHeader.do