Sap Crm Web Ui Cookbook

SAP CRM 2006s

Introduction to Web

Client UI Architecture

Frederic Heinemann

CRM Consulting EMEA Hub

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

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

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

Technical Basics

Tables CRM WebClient Business Server Pages (BSPs) Presentation Layer Business

Layer Business Object Layer(BOL)

Business Engine

(e.g. mySAPCRM)

Generic Interaction Layer (GenIL)

Appl. Progr. Interfaces (APIs)

CRM

WebClient

specific

Layers

Layers of

underlying

Business

Application

Web Browser

©SAP AG 2007, SAP Skills 2007 Conference / F4 / 5 Tables CRM WebClient Business Server Pages (BSPs) Presentation Layer Business

Layer Business Object Layer(BOL)

Business Engine

(e.g. mySAPCRM)

Generic Interaction Layer (GenIL)

Appl. Progr. Interfaces (APIs) Controller Model View

Layers of CRM 5.1 Applications

CRM

WebClient

specific

Layers

Layers of

underlying

Business

Application

Web Browser

Component –

General Parts

Main Component M

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

UI Component

„

is the logical grouping for UI implementation

„

is assigned to a package

„

SAP Naming conventions

- 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)

Component Workbench: View, Controller and Model

Event Handling & Navigation

Controller: Class

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

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 it’s own Runtime Repository. There is no longer one central repository.

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

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

©SAP AG 2007, SAP Skills 2007 Conference / F4 / 13 Tables CRM WebClient Business Server Pages (BSPs) Presentation Layer Business

Layer Business Object Layer(BOL)

Business Engine

(e.g. mySAPCRM)

Generic Interaction Layer (GenIL)

Appl. Progr. Interfaces (APIs) Controller Model View

Layers of CRM 5.1 Applications

CRM

WebClient

specific

Layers

Layers of

underlying

Business

Application

Web Browser

BOL and GenIL: Tools

Display BOL Model

Transaction:

BSP_WD_CMPWB or GENIL_MODEL_BROWSER

GenIL

IMG: Generic Interaction Layer/Object Layer Æ Basic Settings

test data

retrieval from database to

BOL through the GENIL

Transaction:

GENIL_BOL_BROWSER

©SAP AG 2007, SAP Skills 2007 Conference / F4 / 15 Layers of new UI Framework Presentation Layer (BSP) Layers of underlying Business Application Tables Business Engine (e.g. mySAPCRM) 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

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

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:

Definitions 2

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.

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

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.

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

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

Technical Basics

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

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

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

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

BOL Transaction Model 2

„

Data is always saved synchronously. Either within the dialog

process (local update), or, if this is not possible, with COMMIT

WORK and WAIT

„

After saving the BOL buffer is invalidated and refreshed on the

next access

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

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 one global 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

IBAseAPI Other API GENIL IBase Component Other GENIL component R R Applicat ion Model R R R Data Contai ner Cache R

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

Business Object Layer vs. Generic Interaction Layer

Generic Interaction Layer

API 1 API 2 API ... API n

genIL Component 1 genIL Component 2 genIL Component ... genIL Component n Component IF

Generic Interaction Layer

Component IF Component IF Component IF

Application Interface R R R R R R R R Database(s) Business Object Layer Cache R

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

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

Technical Basics

Views of the CRM Web Client

Other persistent views

Navigation Bar (persistent)

Work area view

set

view

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

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

Technical Basics

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 valid for all Applications which are based on this Framework.

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

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 viewsetor view can only be part of exactly

onewindow (still no direct reuse of views)

– Navigation between views is only possible

withina 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 hosting the views

UI-Elements: ViewSet, ViewArea

and View

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

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

Response Request

Controller

View

Model

describing the view layout

e.g. Bus. Partner e.g. Address Address Field Structure BOL

Class

Model View Controller in WebClient

BSPs

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

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)

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

Navigation Between Views (in Same Window)

Navigation Flow Method: DO_HANDLE_EVENT Outbound Plug Method: OP_DETAILSOV …. …. …. …. …. …. DetailsEF …. …. …. …. DetailsOV Button back Source View Target View methodDO_HANDLE_EVENT . […] WHEN 'new'.

CALL METHOD eh_onNew. […]

methodEH_ONDONE. * navigate op_detailsov( ). […] methodOP_DETAILSOV view_manager->navigate( SOURCE_REP_VIEW = rep_view OUTBOUND_PLUG = ‘ToDetailsOV' ). […] Method: EH_ONDONE Inbound Plug Method: IP_FROMDETAILSEF methodFROMDETAILSEF

Custom Controller

Presentation Layer (BSP)

Business Layer (BOL, GenIL)

Database

Lifespan Lifespan

View 2 Controller

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

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

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 windows that 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 it’s 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 it’s own component instance at runtime Each component could be looked at from the inside as well as from

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

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

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

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

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

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

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

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 NavBar

Scenario II and III)

Cross Workarea Component Navigation

(always) through Navigation Bar

Component: e.g. Service Ticket

Overview

I) Navigation from the Navigation Bar to a Component

CRMC_UI_NBLINKS

Client dependant

Define NavBarProfile:

Profile: DEFAULT_IC Assign Work Centers:

Work Center IC_BT_SVT

CRMC_UI_NBLINKS

Client dependant Define Logical Links

LogLinkID: IC_BT_SVT Type: Work Center Target ID: IC_BT_SVT Define Work Center

Work Center: IC_BT_SVT LogicalLinkID: IC_BT_SVT Title: Service Ticket

Main Window Component

IP1 NavBar (Profile)

WorkCenter Logical Link Target ID 1. 1. 2. 2. 3. 3. IP2 Other Window IP3 IP4 0. 0. CRMC_UI_WA_COMP_REP Cross client Component Definition:

Component Name ICCMP_BT_SVT Window Name Main

Inbound Plug Definition:

Target ID: IC_BT_SVT

IP: DEFAULT Object Type: IC_BT_SVT

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

Main Component

M-Component

„ Wrapper for assigned components

„ Manages subcomponents

„ Customizing stores M-Components only „ Definition of In- and

Component B

CRMS_UI_TLINK

Cross client

Component Definition:

Component Name ICCMP_BT_SVT Window Name Main

Outbound Plug Definition:

Source ID: OP_SVT_PRO OP: PRODUCT Object Type: IC_PRODUCT Object Action: Display

Main Window Component C Create NavBar (Profile) Technical ID (= Target ID) 2. 4. Search Other Window Create Search Main Window Component A OP1 OP2 Other Window OP7 OP8 1. Object Type Object Action Displ. Product 1. Hard coded 2. 2. 3. CRMC_UI_NBLINKS Client dependent

Define NavBarProfile:

Profile: DEFAULT_IC Define Generic OP Mapping: Object Type: IC_PRODUCT ObjAction: Display

Target ID: IP_PRODUCT 3.

CRMS_UI_TLINK

Cross client

Component Definition:

Component Name ICCMP_PRODUCT Window Name Main

Inbound Plug Definition:

Target ID: IP_PRODUCT

IP: DEFAULT Object Type: IC_PRODUCT

Object Action: Display

4.

II) Cross Component Navigation

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

CRMC_UI_NBLINKS

Cross client

Define NavBarProfile:

Profile: DEFAULT_IC

Define Generic OP Mapping: Object Type: IC_PRODUCT ObjAction: Display

Target ID: IP_PRODUCT

Main Window Component C Create NavBar (Profile) 4. Search Main Window Component A OP_DEFAULT 1. Object Type Object Action Displ. Ticket 1.

Descriptor Object:e.g. Hard coded

CL_CRM_UI Obj.Action+ a) ObjType or

b) BOR Obj Type, Key, Log Sys or c) BOL Obj instance

Add to collection hand over to OP

3.

3.

CRMS_UI_TLINK

Cross client

Component Definition:

Component Name ICCMP_PRODUCT Window Name Main

Inbound Plug Definition:

Target ID: IP_PRODUCT

IP: DEFAULT Object Type: IC_PRODUCT

Object Action: 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 ID Target ID Target ID

III) Cross Component Navigation

(Object Type Determined by Descriptor Object)

Technical ID (= Target ID)

Navigation Between M-Components

Navigation via Navigation Bar from M to M components

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

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

Component Enhancement Principle

Standa rd View Copied and m odified View

„ 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

Component Enhancement Concept: 1

SAP

Component

Window Main

Enhance

Component

(wizard supported)

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

Component Enhancement Concept: 2

SAP

Component

Window Main

Customer

Component

Window Main

Element _Referenced

Component Enhancement Concept: 3

SAP

Component

Window Main

Customer

Component

Window Main

Element Referenced

Element Copied automatically

Layer Overview

BOL/Genil

UI Component Concept

AGENDA

UI Component Elements

UI Component Interface and Usage Cross Component Navigation

Component Enhancement Concept

Concepts

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

View, Controller, Context and Context Node

BTAdminH

BTOpportH

via page attribute and Getter/Setter

CL_BT111H_O_ DETAILSEF_IMPL

ZCL_ DETAILSEF_CN00 Crea_{te and} bind to BOL _BTCustomerH attr BTHeaderCustExt

Enhancing Context and Context Nodes

BTAdminH OBJECT_ID DESCRIPTION BTOpportH BUDGET REVENUE BTHeaderOpportunityExt CL_BT111H_O_ DETAILSEF_CTXT CL_BT111H_O_ DETAILSEF_CN00 CL_BT111H_O_ DETAILSEF_CN01 CL_BT111H_O_ DETAILSEF BT111H_OPPT/ DetailsEF.htm BT111H_OPPT/ DetailsEF.do Create an d 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_IMPL WD_CREATE_CONTEXT ZCL_DETAILSEF_CTXT CREATE_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, IntelligentMiner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPowerand 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 MultiWinare trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarksof 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. MaxDBis a trademark of MySQLAB, 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 theinformation, 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 thatyou 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.