You are on page 1of 68

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 Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 3
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 4
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
Controller
Model
View
Web Browser
Layers of SAP CRM 2006s/2 Applications
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. mySAP

CRM)
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 6
Component

General Parts
Main Component M
IP
IP
OP
OP
NavBar

(Profile)
Logical Link
Technical

ID =

(Target-ID)
Sub component
Search
ViewSet
View
Window
IP
Search
Display
OP
Window
ViewSet
View
IP
Sub component
Header
OP
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


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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 8
Component Workbench: View, Controller and Model
Transaction Code BSP_WD_CMPWB
View: Layout
Model:
Context &
Context
Nodes
Controller:
Event Handling & Navigation
Controller:
Class
SAP AG 2007, SAP Skills 2007 Conference / F4 / 9
Component Workbench: Context Nodes, Attributes
Context
Nodes
Context
Attributes
(Fields)
SAP AG 2007, SAP Skills 2007 Conference / F4 / 10
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.
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.
SAP AG 2007, SAP Skills 2007 Conference / F4 / 12
Component Workbench (III)
BOL Model Browser
Access BOL Model from Component Workbench
Direct testing of component
(or with alternative Test Application)
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. mySAP

CRM)
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 14
BOL and GenIL: Tools
Controller
Model
Presentation
Layer
Business
Layer
Business
Engine
BOL
GenIL
View
BSP
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
API API API
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. mySAP

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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 16
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:

Number of BOs

and their relations.
SAP AG 2007, SAP Skills 2007 Conference / F4 / 18
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.
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 20
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 Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 22
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 ...
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


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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 24
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
After reverting data the BOL buffer is actively refreshed
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
*
SAP AG 2007, SAP Skills 2007 Conference / F4 / 26
Architectural Overview
Order API
GENIL Order
Component
Generic IL
R
R
R
R
BOL
R
UI Controller / BSP page
R
Browser Client
R
IBAse

API Other API
GENIL IBase
Component
Other GENIL
component
RR
A
p
p
l
i
c
a
t
i
o
n

M
o
d
e
l
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
Entities
Query
Services
Core
SAP AG 2007, SAP Skills 2007 Conference / F4 / 28
SAP AG 2007, SAP Skills 2007 Conference / F4 / 29
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 30
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
set
view
view
SAP AG 2007, SAP Skills 2007 Conference / F4 / 31
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 32
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 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 hosting
the views
SAP AG 2007, SAP Skills 2007 Conference / F4 / 34
UI-Elements: ViewSet, ViewArea

and View
ViewSet
ViewArea
View
ViewArea
ViewSet
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
Component workbench
SAP AG 2007, SAP Skills 2007 Conference / F4 / 36
Response
Request
Controller
user
input
data
output
View
Model
* .DO
*.

HTM
Context
Context
Nodes
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. Partner
e.g. Address
Address Field
Structure
DB Tables
BOL
Class _IMPL
Method CREATE_CONTEXT_NODES
*_CN00
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 38
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
method

DO_HANDLE_EVENT .
[] WHEN 'new'.
CALL METHOD eh_onNew. []
method

EH_ONDONE.
* navigate
op_detailsov( ). []
method

OP_DETAILSOV
view_manager->navigate(
SOURCE_REP_VIEW = rep_view
OUTBOUND_PLUG =
ToDetailsOV' ). []
Method: EH_ONDONE
Inbound Plug
Method: IP_FROMDETAILSEF
method

FROMDETAILSEF
SAP AG 2007, SAP Skills 2007 Conference / F4 / 40
Custom Controller
Presentation Layer (BSP)
Controller
View 1
Model
Context Node
Model
Context Node
Custom
Controller
Model
Context Node
Lifespan
Business Layer (BOL, GenIL)
Database
Lifespan Lifespan
View 2
Controller
SAP AG 2007, SAP Skills 2007 Conference / F4 / 41
SAP AG 2007, SAP Skills 2007 Conference / F4 / 42
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
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 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 from
the outside, but what can be seen is different.
SAP AG 2007, SAP Skills 2007 Conference / F4 / 44
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
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.
SAP AG 2007, SAP Skills 2007 Conference / F4 / 46
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
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 48
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 49
SAP AG 2007, SAP Skills 2007 Conference / F4 / 50
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
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
Link/Button
SAP AG 2007, SAP Skills 2007 Conference / F4 / 52
I) Navigation from the Navigation Bar to a Component
CRMC_UI_NBLINKS
Client dependant
Define NavBar

Profile:
Profile:

DEFAULT_IC
Assign Work Centers:
Work Center

IC_BT_SVT
CRMC_UI_NBLINKS
Client dependant
Define Logical Links
LogLink

ID: IC_BT_SVT
Type: Work Center
Target ID:

IC_BT_SVT
Define Work Center
Work Center:

IC_BT_SVT
LogicalLink

ID:

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

Display
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
outboundPlugs of component
SAP AG 2007, SAP Skills 2007 Conference / F4 / 54
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 NavBar

Profile:
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
(Object Type Determined by Outbound (OP) Plug Definition)
SAP AG 2007, SAP Skills 2007 Conference / F4 / 55
CRMC_UI_NBLINKS
Cross client
Define NavBar

Profile:
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)
SAP AG 2007, SAP Skills 2007 Conference / F4 / 56
Navigation Between M-Components
Navigation via Navigation
Bar from M to M components
CL_CRM_UIU_BT_NAVIGATE=>prepare_col_for_navigate.
SAP AG 2007, SAP Skills 2007 Conference / F4 / 57
SAP AG 2007, SAP Skills 2007 Conference / F4 / 58
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 59
Component Enhancement Principle
S
t
a
n
d
a
r
d

V
i
e
w
C
o
p
i
e
d

a
n
d

m
o
d
i
f
i
e
d

V
i
e
w
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 60
Component Enhancement Concept: 1
SAP
Component
Window Main
Comp. Controller
View 3
View 1
View 2
Context
Runtime Repository
Component Usages
View Set Composition
Navigation
Enhance
Component
(wizard supported)
Configure
Views
SAP AG 2007, SAP Skills 2007 Conference / F4 / 61
Component Enhancement Concept: 2
SAP
Component
Window Main
Comp. Controller
View 3
View 1
View 2
Context
Runtime Repository
Component Usages
View Set Composition
Navigation
Customer
Component
Window Main
Comp. Controller
View 3
View 1
View 2
Context
Runtime Repository
Component Usages
View Set Composition
Navigation
Element
Referenced
Element
Copied automatically
SAP AG 2007, SAP Skills 2007 Conference / F4 / 62
Component Enhancement Concept: 3
SAP
Component
Window Main
Comp. Controller
View 3
View 1
View 2
Context
Runtime Repository
Component Usages
View Set Composition
Navigation
Customer
Component
Window Main
Comp. Controller
View 3
View 1
Context
Runtime Repository
Component Usages
View Set Composition
Navigation
Element
Referenced
Element
Copied automatically
Element
Inherited if required
View 2
SAP AG 2007, SAP Skills 2007 Conference / F4 / 63
SAP AG 2007, SAP Skills 2007 Conference / F4 / 64
Layer Overview
BOL/Genil
UI Component Concept
AGENDA
UI Component Elements
UI Component Interface and Usage
Cross Component Navigation
Component Enhancement Concept
Concepts
Technical Basics
The Fast Track to SAP Knowledge
SAP AG 2007, SAP Skills 2007 Conference / F4 / 65
View, Controller, Context and Context Node
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
C
r
e
a
t
e

a
n
d

b
i
n
d

t
o

B
O
L
C
r
e
a
t
e

a
n
d

b
i
n
d

t
o

B
O
L


Create
Call
Call
via page attribute and Getter/Setter
CL_BT111H_O_
DETAILSEF_IMPL
Inherit
SAP AG 2007, SAP Skills 2007 Conference / F4 / 66
ZCL_
DETAILSEF_CN00
C
r
e
a
t
e

a
n
d

b
i
n
d

t
o

B
O
L


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
C
r
e
a
t
e

a
n
d

b
i
n
d

t
o

B
O
L
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
SAP AG 2007, SAP Skills 2007 Conference / F4 / 67
SAP AG 2007, SAP Skills 2007 Conference / F4 / 68
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.

You might also like