Sap Crm Web Ui Cookbook

SAP CRM 2006s Introduction to Web Client UI Architecture

Frederic Heinemann CRM Consulting EMEA Hub

The Fast Track to SAP Knowledge

© SAP AG 2007, SAP Skills 2007 Conference / F4 / 2

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage

Cross Component Navigation

Component Enhancement ConceptConceptsTechnical Basics



Layer Overview

BOL/Genil


AGENDA







Tables

CRM WebClient

Business Server Pages (BSPs)

Presentation Layer

Business Layer

Business Object Layer(BOL)

Business Engine(e.g. mySAP

CRM)

Generic Interaction Layer(GenIL)

Appl. Progr. Interfaces(APIs)

CRM WebClient

specific Layers

Layers of underlying Business Application

ControllerModel

View

Web Browser

Layers of SAP CRM 2006s/2 Applications


Tables

CRM WebClient


Presentation Layer

Business Layer



CRM)



ControllerModel

View

Layers of CRM 5.1 Applications

CRM WebClient

specific Layers


Web Browser


Component –

General Parts

Main Component M

IP

IP

OP

OP

NavBar

(Profile)

Logical Link

Technical

ID =

(Target-ID)

Sub componentSearch

ViewSet

View

WindowIP

Search

Display

OP

Window

ViewSet

View

IP

Sub componentHeader

OP


UI Component

is the logical grouping for UI implementationis assigned to a packageSAP Naming conventions–

Oneorder-

BT<object><type>_<speaking string> where <type> is „S“, „H“, „I“

or „M“–

Other components ( e.g. Business Partner, Marketing) have own naming conventions

–

GS<speaking string> = General Services ( Reusable Components)–

BT<speaking string> = reusable components for Transactions


Component Workbench: View, Controller and Model

Transaction Code BSP_WD_CMPWB

View: Layout

Model:Context & Context Nodes

Controller:Event Handling & Navigation

Controller:Class


Component Workbench: Context Nodes, Attributes

Context Nodes

Context

Attributes (Fields)


Component Workbench (I)

Browser Application StructureInventory of all items–

Views–

Component Controllers–

Custom Controllers–

Windows–

Runtime Repository*

* Each UI Component has it’s own Runtime Repository. There is no longer one central repository.


Component Workbench (II)

Runtime Repository EditorInventory of all items–

Windows–

View sets–

Navigational Links–

Component Interface–

Component Usage

The runtime repository editor is not only a visualization tool for the xml file,but offers a set of functionality as wizards to create e.g. navigational links.


Component Workbench (III)

BOL Model Browser

Access BOL Model from Component Workbench

Direct testing of component(or with alternative Test Application)


Tables

CRM WebClient


Presentation Layer

Business Layer



CRM)



ControllerModel

View

Layers of CRM 5.1 Applications

CRM WebClient

specific Layers


Web Browser


BOL and GenIL: Tools

ControllerModel

PresentationLayer

BusinessLayer

BusinessEngine

BOL

GenIL

View

BSP

Display BOL ModelTransaction: BSP_WD_CMPWB or GENIL_MODEL_BROWSER

GenILIMG: Generic Interaction Layer/Object Layer Basic Settings

test data retrieval from database to BOL through the GENIL

Transaction:GENIL_BOL_BROWSER

API API API


Layers of new UI Framework

Presentation Layer (BSP)


Tables


CRM)

API

Interaction Layer (GenIL)

Business Layer (BOL)

Model Browser: Visualizing BOL Model

BOL Browser: Testing Data retrieval from DB to BOL

BOL and GenIL: Tools


Definitions 1

Business Object (BO): Smallest unit of an object model with exclusively unstructured attributes. Each BO is assigned a unique name. A BO can be either an access object, a dependent object or a query object.

BO instance: Instance of a BO that is uniquely identified by the name of the BO and an identifier (ID).

Relation: A relationship between two BOs

that is assigned a unique, cross-

component name. The relation is assigned “a cardinality value”

for each BO. The navigation direction is a characteristic of the relation.

Object model: Number of BOs

and their relations.


Definitions 2

Access Object: An access object is a special type of BO, whose ID can be used to determine both the

attributes of the access object itself and those of its dependent objects.

Dependent Object: A dependent object is a special type of BO, whose attributes cannot be determined solely from the ID of this BO, but instead, only or together with the ID of the superior access object.

Root object: A root object is a special element within a group of objects that are linked to one another

in a hierarchy structure via aggregations. The root object is the only object within this structure that is assigned as a superior object to all other objects. Each root object is also an access object.

Search-Object: A query object is a special type of BO whose attributes are the parameters of a search request.

Dynamic Search-Object: A dynamic query object is a type of BO whose attributes are the parameters of a search

request. It is possible to create select options for these parameters.

Search Result Object: The result object of a search request is an associated access object at the uppermost

level of the hierarchy.


Getting to know the GENIL...

Access the GENIL Component Details

Transaction: SPRO ->IMG -> Customer Relationship Management -> CRM Cross-Application Components -> Generic Interaction Layer/Object Layer -> Basic Settings


Definitions 3

Component: A component is an ABAP OO class which implements the component interface. It exposes a set of CRM business objects to

the Generic IL, which form an aggregation hierarchy. Each component must have a unique root object.

Component Set A component set is a collection of components that build a

business context for a specific application that uses the business layer as its framework.


Layer Overview

BOL/Genil


AGENDA







BOL Services

Buffering service–

any data is only read once until it is changed

–

all changes are buffered and will be send together–

automatic buffer synchronization in almost all cases

Transaction service–

objects may be saved individually or all together

–

all changed/created object will be saved or reverted

Query services–

New Query service for dynamic searches with CRM 2006

Simple sorting and filtering on object lists (collections)Attribute properties–

for each attribute of an entity a property is available

–

possible properties: read-only, hidden, mandatory ...


BOL Transaction Model

The transactional behavior of BOL objects is modeled in the transaction context. A transaction context is created:–

when an entity is locked, or

–

if it is requested, but not yet existing.

A transaction context can have several kinds of granularity–

The smallest granularity of a transaction context is a root entity instance

–

The biggest granularity are all changed/created entity instances–

The custom transaction context allows any granularity in between

Each transaction context has a defined life cycle. Once it was created it ends with either–

Saving all covered entities, or

–

Reverting all covered entities


BOL Transaction Model 2

Data is always saved synchronously. Either within the dialog process (local update), or, if this is not possible, with COMMITWORK and WAITAfter saving the BOL buffer is invalidated and refreshed on the next accessAfter reverting data the BOL buffer is actively refreshed


BOL Services –

Message Service

Message ServiceThere is one message protocol/container per root object instance and the message container manager handles them all. Additionally oneglobal message container exists were all non-business object (BO) instance-related messages should go to.

CL_CRM_BOL_CORE

CL_CRM_GENIL_MESS_CONT_MANAGER

1

1

IF_GENIL_MESSAGE_CONTAINER

1

*


Architectural Overview

Order API

GENIL OrderComponent

Generic ILR

R R

R

BOL

R

UI Controller / BSP page

R

Browser Client

R

IBAse

API Other API

GENIL IBaseComponent

Other GENILcomponent

R R

App

licat

ion

Mod

el

R

R

R

Data

Contai

ner

Cache

R


Business Object Layer vs. Generic Interaction Layer

GenericInteractionLayer

API 1 API 2 API ... API n

genILComponent 1

genILComponent 2

genILComponent ...

genILComponent n

Component IF

Generic Interaction Layer

Component IF Component IF Component IF

Application Interface

R R R R

R R R R

Database(s)

BusinessObjectLayer

Cache

R

Entities QueryServices Core


Layer Overview

BOL/Genil


AGENDA







Views of the CRM Web Client

Other persistent views

Nav

igat

ion

Bar

(pe

rsis

tent

)

Work area view

setview

view


Layer Overview

BOL/Genil


AGENDA







New Component Concept

A Component...…is a meaningful bundle of view sets, views and custom controllers…is a self-contained reusable unit –

black box approach:-

Own runtime repository-

Exposes clear interface to the outside:-

windows (as interface views)-

public context nodes

… can have multiple instances at runtime… technically is mapped to a BSP application–

thus it is the organizational unit in the development logistic that is assigned to a package

With the new CRM UI Framework a new concept is introduced validfor all Applications which are based on this Framework.


New Window Concept

A Window...… is part of a component and defines a root for a hierarchy of view sets and views in the runtime repository–

A viewset

or view can only be part of exactly one

window (still no direct reuse of views)

–

Navigation between views is only possible within

a single window

…. mediates between the embedding and the embedded component during runtime–

has the character of a view to the inside (window aspect)

–

has the character of a simple view to the outside (interface view aspect)

Each component must have one or more windows which are hostingthe views


UI-Elements: ViewSet, ViewArea

and View

ViewSet

ViewArea View

ViewArea

ViewSetView


Runtime Repository

Each component has its own runtime repository fileIt acts a a catalogue containing –

views, viewsets

and the composition of views within viewsets–

Navigational links (with target and source view)–

Inbound and outbound plugs definitions–

etc.Technically stored as .xml file

Can be displayed and maintained in the Runtime repository editor of the Component workbench


Response

RequestControlleruser

input

data output

View

Model

* .DO

*.

HTM

Context

ContextNodes

Method

*_ CTXT

*_CN01

GET_S_STRUCT

Methods:Before Output

WD_CREATE_CONTEXTSET_MODELS

After InputDO_HANDLE_DATADO_HANDLE_EVENT

Layout:ABAP/HTMLB-code

describing the view layout

e.g. Bus. Partnere.g. Address

Address Field Structure

DB Tables

BOL

Class _IMPL

Method CREATE_CONTEXT_NODES

*_CN00

Model View Controller in WebClient

BSPs


CRM Web Client: View Details

Each configurable view is based on:A page type related configuration tagStructural setters/getters

Specific implementations possible via:Dedicated setter/getter implementationAdditional usage of base tags

In contrast to former implementations the CRM Web Client views can be based on a minimal amount of coding


Component Workbench: Context Nodes, Attributes (II)

Generic Setter Getter methods

Explicitly create setter and getter with additional methods:

Get_V_ (Value Help)

Get_P_ (Properties)


Navigation Between Views (in Same Window)

Navigation Flow

Method: DO_HANDLE_EVENT

Outbound PlugMethod: OP_DETAILSOV

….….….

….….….

DetailsEF

….….….

….

DetailsOV

Button

back

Source View

Target View

method

DO_HANDLE_EVENT .[…] WHEN 'new'.

CALL METHOD eh_onNew. […]

method

EH_ONDONE.* navigate

op_detailsov( ). […]

method

OP_DETAILSOVview_manager->navigate(

SOURCE_REP_VIEW = rep_viewOUTBOUND_PLUG =

‘ToDetailsOV' ). […]

Method: EH_ONDONE

Inbound PlugMethod: IP_FROMDETAILSEF

method

FROMDETAILSEF


Custom Controller

Presentation Layer (BSP)

Controller

View 1

ModelContext Node

ModelContext Node

Custom Controller

ModelContext Node

Lifespan

Business Layer (BOL, GenIL)

Database

Lifespan Lifespan

View 2

Controller


Layer Overview

BOL/Genil


AGENDA







New Component Concept: Inside and Outside View

Inside perspectiveA component is represented by a component controller–

has a context that is partially public to the outside

A component consists of custom controllers and one or more windowsthat host the views

Outside perspectiveA component can be (re-)used by one or more other components The embedding component defines a component usage in it’s runtime repository to formally declare the dependencyAlso at runtime the component has access to the component usage to get access to the Interface of the embedded componentEach component usage gets it’s own component instance at runtime

Each component could be looked at from the inside as well as fromthe outside, but what can be seen is different.


Component Controller

highest level of all controllersis loaded at initial load of componentcan serve as data containermanages binding of usagesmanages data transfer between componentsBinding of Context Node from custom controller to component controller

Coding not done by wizard, has to be inserted manually


New Window Concept: Inside and Outside View

Inside: (window aspect)Technically a window is a special type of view–

hosts (serves as root viewset

) views and viewsets

of the component–

has a context that contained views and viewsets

can bind to–

can trigger navigation inside the window

Outside: (Interface view aspect)has inbound and outbound plugs as entry and exit points from the view of the embedding component–

inbound plugs are called when the embedding component navigates to the view

–

can fire an outbound plugs (e.g. if view request so) to request navigation on the level of the embedding component -> navigation destination is determined by embedding component (runtime repository)

Each Window can as well be seen from the inside as well as from the out-side.


Component Interface

Needs to be defined if a component shall be reusable

is defined in the runtime repository editorContext nodes of component controller are made visible to outsideWindow is made visible to outside


Component Usage(1)

Components with a component interface can be included in other components (reuse)usages are defined in the runtime repository editor


Component Usage(2)

Component controllers need to be bound against each otherthis is done in method WD_USAGE_INITIALIZE of the component controller class


Layer Overview

BOL/Genil


AGENDA







Customizing of Navigation: Overview

Component: e.g. Service Ticket

NavBar

Service ticket

Work Area Component: e.g. Service Ticket

Navigation Bar (as part of L-Shape)

Scenario I)Navigation from Navigation Bar Button to a Component(Button = Work Center)

Component: e.g. Product Details

NavBarScenario II and III)Cross Workarea

Component Navigation (always) through Navigation Bar

Component: e.g. Service Ticket

Overview

Link/Button


I) Navigation from the Navigation Bar to a Component

CRMC_UI_NBLINKSClient dependant

Define NavBar

Profile:

Profile:

DEFAULT_IC

Assign Work Centers:Work Center

IC_BT_SVT

CRMC_UI_NBLINKSClient dependant

Define Logical LinksLogLink

ID: IC_BT_SVTType: Work CenterTarget ID:

IC_BT_SVT

Define Work CenterWork Center:

IC_BT_SVTLogicalLink

ID:

IC_BT_SVTTitle:

Service Ticket

Main Window

Component

IP1

NavBar

(Profile)

WorkCenter Logical Link Target ID1.

1.

2.

2. 3.

3.

IP2

Other WindowIP3

IP4

0.

0.

CRMC_UI_WA_COMP_REPCross client

Component Definition:Component Name

ICCMP_BT_SVT Window Name

Main

Inbound Plug Definition:Target ID: IC_BT_SVTIP: DEFAULT Object Type:

IC_BT_SVTObject Action:

Display


Main Component

M-ComponentWrapper for assigned componentsManages subcomponents

Customizing storesM-Components onlyDefinition of In- and outboundPlugs of component


Component B

CRMS_UI_TLINK Cross client


ICCMP_BT_SVT Window Name

Main

Outbound Plug Definition:Source ID: OP_SVT_PROOP: PRODUCTObject Type:

IC_PRODUCTObject Action:

Display

Main Window

Component C

Create

NavBar

(Profile)

Technical

ID (= Target

ID)

2.

4.

Search

Other WindowCreate

Search

Main Window

Component A

OP1

OP2

Other WindowOP7

OP8

1.

Object TypeObject Action

Displ. Product 1.

Hard coded

2.

2.

3.

CRMC_UI_NBLINKSClient dependent

Define NavBar

Profile:Profile:

DEFAULT_IC

Define Generic OP Mapping:Object Type:

IC_PRODUCTObjAction:

DisplayTarget ID:

IP_PRODUCT3.

CRMS_UI_TLINK Cross client


ICCMP_PRODUCT Window Name

Main

Inbound Plug Definition:Target ID: IP_PRODUCTIP: DEFAULT Object Type:


Display

4.

II) Cross Component Navigation (Object Type Determined by Outbound (OP) Plug Definition)


CRMC_UI_NBLINKSCross client

Define NavBar

Profile:

Profile:

DEFAULT_IC

Define Generic OP Mapping:Object Type:

IC_PRODUCTObjAction:

DisplayTarget ID:

IP_PRODUCT

Main Window

Component C

Create

NavBar

(Profile)4.

Search

Main Window

Component A

OP_DEFAULT

1.

Object TypeObject Action

Displ. Ticket 1.

Descriptor Object:

e.g.Hard coded CL_CRM_UIObj.Action

+ a)

ObjType

orb)

BOR Obj

Type, Key, Log Sys orc)

BOL Obj

instance

Add to collection hand over to OP

3.

3.

CRMS_UI_TLINKCross client


ICCMP_PRODUCT Window Name

Main

Inbound Plug Definition:Target ID: IP_PRODUCTIP: DEFAULT Object Type:


Display

4.

Displ. Order

Displ. EMail

Displ. Prod.

2. In case of b) or c)hard coded* Determination of Object Type

* with mapping class in case of b) or c): CRMC_UI_OBJ_MAP or CRMS_UI_OBJ_MAP

2.

Target IDTarget ID

Target ID

III) Cross Component Navigation (Object Type Determined by Descriptor Object)

Technical

ID (=

Target ID)


Navigation Between M-Components

Navigation via NavigationBar from M to M components

CL_CRM_UIU_BT_NAVIGATE=>prepare_col_for_navigate.


Layer Overview

BOL/Genil


AGENDA







Component Enhancement Principle

Standard View

Copied and modified View

Views from an existing component can be copied into a customer componentThe copy can be modified (new context nodes, new buttons, navigation etc.)At runtime, the standard view will be replaced by the copied and modified viewThis process is supported by wizards


Component Enhancement Concept: 1

SAP Component

Window Main

Comp. Controller

View 3

View 1

View 2

Context

Runtime RepositoryComponent UsagesView Set CompositionNavigation

Enhance Component(wizard supported)

Configure Views



SAP Component

Window Main

Comp. Controller

View 3

View 1

View 2

Context


Customer Component

Window Main

Comp. Controller

View 3

View 1

View 2

Context


Element Referenced

Element Copied automatically



SAP Component

Window Main

Comp. Controller

View 3

View 1

View 2

Context


Customer Component

Window Main

Comp. Controller

View 3

View 1

Context


Element Referenced

Element Copied automatically

Element Inherited if required

View 2


Layer Overview

BOL/Genil


AGENDA







View, Controller, Context and Context Node

BTAdminHOBJECT_ID

DESCRIPTION

BTOpportHBUDGET

REVENUE

BTHeaderOpportunityExtCL_BT111H_O_

DETAILSEF_CTXT

CL_BT111H_O_DETAILSEF_CN00


CL_BT111H_O_DETAILSEF

BT111H_OPPT/DetailsEF.htm

BT111H_OPPT/DetailsEF.do

Create and

bind to

BOL

Create and

bind to BOL

Create

Call

Call

via page attribute and Getter/Setter

CL_BT111H_O_DETAILSEF_IMPL

Inherit


ZCL_DETAILSEF_CN00

Create and bind to BOL BTCustomerH

attr

BTHeaderCustExt

Enhancing Context and Context Nodes

BTAdminHOBJECT_ID

DESCRIPTION

BTOpportHBUDGET

REVENUE

BTHeaderOpportunityExtCL_BT111H_O_DETAILSEF_CTXT



CL_BT111H_O_DETAILSEF

BT111H_OPPT/DetailsEF.htm

BT111H_OPPT/DetailsEF.do

Create and

bind to

BOL

Create

Call

Call

via page attribute and Getter/Setter

CL_BT111H_O_DETAILSEF_IMPL

Inherit ZCUST/DetailsEF.htm//CustomerH/attr

ZCUST/DetailsEF.do

ZCL_DETAILSEF_IMPLWD_CREATE_CONTEXT

ZCL_DETAILSEF_CTXTCREATE_CONTEXT_NODES


Copyright 2007 SAP AG. All Rights Reserved

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent

Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower

and PowerPC are trademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin

are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks

of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB

is a trademark of MySQL

AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, Duet, PartnerEdge, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.

This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP®

product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice.

SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the

information, text, graphics, links, or other items contained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.

SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence.

The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that

you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.

Sap Crm Web Ui Cookbook

Documents

Transcript of Sap Crm Web Ui Cookbook