58636923 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 implementation is assigned to a package SAP Naming conventions

Oneorder-

BT_ where is S, H, I

or M

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

GS = General Services ( Reusable Components)

BT = 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 Structure Inventory of all items

Views

Component Controllers

Custom Controllers

Windows

Runtime Repository*

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


Component Workbench (II)

Runtime Repository Editor Inventory 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 WAIT

After saving the BOL buffer is invalidated and refreshed on the next access

After reverting data the BOL buffer is actively refreshed


BOL Services

Message Service

Message Service There 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

A

p

p

l

i

c

a

t

i

o

n

M

o

d

e

l

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

N

a

v

i

g

a

t

i

o

n

B

a

r

(

p

e

r

s

i

s

t

e

n

t

)

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

RequestControlleruserinput

data output

View

Model

* .DO

*.

HTM

Context

ContextNodes

Method

*_ CTXT

*_CN01

GET_S_STRUCT

Methods:Before Output

WD_CREATE_CONTEXT SET_MODELS

After Input DO_HANDLE_DATA DO_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 tag Structural setters/getters

Specific implementations possible via: Dedicated setter/getter

implementation Additional 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 perspective A 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 perspective A component can be (re-)used by one or more other components The embedding component defines a component usage in its runtime

repository to formally declare the dependency Also at runtime the component has access to the component usage to

get access to the Interface of the embedded component Each component usage gets its 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 controllers is loaded at initial load of component can serve as data container manages binding of usages manages data transfer between components Binding 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

editor Context nodes of component

controller are made visible to outside

Window 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 other this 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-Component Wrapper for assigned components Manages subcomponents

Customizing storesM-Components only

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

dified Vi

ew

Views from an existing component can be copied into a customer component

The copy can be modified (new context nodes, new buttons, navigation etc.) At runtime, the standard view will be replaced by the copied and modified

view This 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 2006s Introduction to Web Client UI ArchitectureFoliennummer 2Foliennummer 3Layers of SAP CRM 2006s/2 ApplicationsLayers of CRM 5.1 ApplicationsComponent General PartsUI ComponentComponent Workbench: View, Controller and ModelComponent Workbench: Context Nodes, AttributesComponent Workbench (I)Component Workbench (II)Component Workbench (III)Layers of CRM 5.1 ApplicationsBOL and GenIL: Tools BOL and GenIL: Tools Foliennummer 16Definitions 1Definitions 2Getting to know the GENIL...Definitions 3Foliennummer 21BOL ServicesBOL Transaction ModelBOL Transaction Model 2BOL Services Message ServiceArchitectural OverviewBusiness Object Layer vs. Generic Interaction LayerFoliennummer 28Foliennummer 29Views of the CRM Web ClientFoliennummer 31New Component ConceptNew Window ConceptUI-Elements: ViewSet, ViewArea and ViewRuntime RepositoryModel View Controller in WebClient BSPsCRM Web Client: View DetailsComponent Workbench: Context Nodes, Attributes (II)Navigation Between Views (in Same Window)Custom ControllerFoliennummer 41Foliennummer 42New Component Concept: Inside and Outside ViewComponent ControllerNew Window Concept: Inside and Outside ViewComponent InterfaceComponent Usage(1)Component Usage(2)Foliennummer 49Foliennummer 50Customizing of Navigation: OverviewI) Navigation from the Navigation Bar to a ComponentMain ComponentII) Cross Component Navigation (Object Type Determined by Outbound (OP) Plug Definition)III) Cross Component Navigation (Object Type Determined by Descriptor Object)Navigation Between M-ComponentsFoliennummer 57Foliennummer 58Component Enhancement PrincipleComponent Enhancement Concept: 1Component Enhancement Concept: 2Component Enhancement Concept: 3Foliennummer 63Foliennummer 64View, Controller, Context and Context NodeEnhancing Context and Context NodesFoliennummer 67Copyright 2007 SAP AG. All Rights Reserved

58636923 Sap Crm Web Ui Cookbook

Documents

Transcript of 58636923 Sap Crm Web Ui Cookbook