CRM WebClient UI Architecture:Section IIn this section, you will learn about the following aspects of the CRM WebClient UI architecture:

1. CRM WebClient UI and SAP NetWeaver Application Server (SAP NetWeaver AS) Technology

2. The layers of the CRM WebClient UI software architecture

3. The detailed view of the CRM WebClient UI layers

4. 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:

1. The CRM WebClient UI is built to run within a Web browser. Therefore, on the client side it isonly necessary to install a Web browser. An SAP Graphical User Interface (SAP GUI) is notnecessary.

1. All data displayed in the Web browser is sent by Hypertext Transfer Protocol (HTTP) fromSAP NetWeaver Application Server (SAP NetWeaver AS) to the client (the Web browser).

SAP NetWeaver AS 70 contains two runtime environments:0. ABAP0. J2EE (Java 2 Enterprise Edition)

1. The CRM WebClient UI is fully based on the ABAP stack. 1. The user interface (UI) is based on BSP technology. 1. BSPs are a combination of ABAP code and BSP extensions. 1. BSP extensions provide Hypertext Markup Language Business (HTMLB) tags for a consistent look and feel throughout all applications. 1. 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 theWeb browser and the BSP runtime. The ICM handles the inbound and outbound connectionsof SAP NetWeaver AS. It is responsible for caching and works with multiple protocols, suchAs 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 (BSPs):

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 agents browser. The business logic of CRM Business objects and process is not controlled by BSPs 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 InteractionLayer (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: 0. Model 0. View 0. 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.

1. View:The view handles the visual output. It is responsible for rendering the output andRelevant UI controls, such as data fields and push buttons. The controller receives allOutput for rendering. All user input is passed from the view back to the controller forProcessing.

1. ControllerThe controller handles the interaction logic and provides the connection between aview and a model of an MVC application. A controller receives all keyboard andmouse input from the view. Based on these events, the controller can decide how toreact (for example, by accessing data from the model or triggering the navigation to adifferent view).

Controller.DoClass _Impl1. Implementation of model1. Event Handling1. Navigation

User Input (Request)

GetModelContext _CTXTContext Nodes -CN00 -CN01 - CN02-

SetView.HtmLayOut: BSP EXT TagsDefining the View LayoutPage Attributes_CN00, _CN01, _CN02

Data Output (Response)

1. 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.1. 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.1. Data are transported from Model to the view automatically through controller.1. View does not contain any logic. It just uses BSP Extensions which generates HTML Coding and uses ABAP as Scripting Language.1. All user inputs are handled by controller. The data are transferred to Model and then context nodes then Updates the BOL.1. In case the user pressed a button (Event) the controller contains the logic what to do with this click like navigate.1. 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. 1. 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