Sapskills Wcui PDF

SAP Skills 2008 Conference SAP CRM 2007: Kundenspezifische Erweiterungen in Web Client UI
Ines Kutne, CRM Center of Expertise 26.06.2008
Agenda
1. Web Client UI Architecture

1.1. Presentation Layer Introduction 1.2. Framework Overview 1.3. Framework Enhancements
2. Presentation Layer
2.1. UI Components 2.2. Component Usage
3. Component Enhancement
3.1. Basics 3.2. Enhancement Examples
SAP 2008 / SAP Skills 2008 Conference / F2 / Page 2
Layers of the CRM User Interface
Web Browser
CRM Web Client
Presentation Controller Layer

CRM Web Client specific Layers View
Model
Business Server Pages (BSPs)
Business Layer
Business Object Layer (BOL) Generic Interaction Layer (GenIL)
Layers of underlying Business Application

Business Engine
Application Programming Interfaces (APIs) Tables
Views of the CRM Web Client
Other persistent views
Navigation Bar (persistent)
view
Workarea view set
view
Identify Component and View
F2
Screenshot vom Popup
Structure of the Presentation Layer

Logical UI Component Grouping
Applications Each Application (Business Transactions, Business Partner etc. is build up from different UI Components Header Component (Header related information) Search Component (Search related information) Item Component (Item related information) Main Component (represents application itself) Services Functionality that is typically used by differnet applications can be encapsulated in separate UI Components Text Handling Popups Partner Handling Search Helps
Naming Conventions Example: 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
Naming Conventions GS<speaking string> = General Services ( Reusable Components) BT<speaking string> = reusable components for Transactions
Component Workbench
Browser Component Structure BOL Model Browser Runtime Repository Editor
Favorites Component Component Controller Windows Custom Controllers Views Pages with Flow Logic Repository.xml WebDynpro.dtd Page Fragments MIMEs
A UI Component is a bundle of views, viewsets, etc. that logically belong together UI Components can be edited in the Component Workbench: Transaction BSP_WD_CMPWB Browser Component Structure Inventory of Component Creation of Component Controller, Windows, Custom Controllers, Views is supported by wizards
Browser Component Structure BOL Model Browser Runtime Repository Editor
Models Windows View Sets Navigational Links Component Interface Component Usage
Runtime Repository Editor Visualization of xml coding Easy maintenance Assignment of component set (Models) Assignment of views/view sets to window Assignment of views to view sets Creation of navigational links Definition of component interface Definition of embedded components (component usage) Save button generates xml code
Visible Model-View-Controller (MVC)

Design Pattern for decoupling presentation and logic of an application
HandleEvents Events Handle Updateapplication applicationdata data Update Request
Controller
Definecontrol controlflow flow Define
set
Model
get Response
Defines Definesapplication applicationdata data Usually Usuallyconnected connectedto to business functionality business functionality
View
Visualization Visualizationof ofthe the application data application data
Data flow Control flow

Model View Controller in CRM Web Client
Controller Class user input
.DO _IMPL
Instantiation of Model
Request
Event handling Navigation
set
Model
Context _CTXT Context Nodes
_CN00 _CN01
data output
View
.HTM Page Attributes: _CN00 _CN01
Response
Layout: BSP extensions (tags) describing the view layout
get
Component Workbench: View, Controller and Model
Controller
Model: Context and Context Nodes
View: Layout
Component Workbench: Context Nodes, Attributes
Context Context Nodes
Attributes
Agenda

Layers of the CRM User Interface
Web Browser
CRM Web Client
Presentation Controller Layer

CRM Web Client specific Layers View
Model
Business Server Pages (BSPs)
Business Layer
Business Object Layer (BOL) Generic Interaction Layer (GenIL)

Business Engine
Application Programming Interfaces (APIs) Tables
Business Layer
User Interface BOL
BOL works with the data at runtime. Data that are changed in the user interface are first changed in the BOL and then transferred to the Generic Interaction Layer Generic Interaction Layer contains mapping components to communicate with the existing APIs
GenIL
Mapping Component for Order API

Order API
Mapping Component for Business Partner API

Business Partner API
Existing Business Logic has not been changed for the Web Client User Interface
CRM Business Logic

GenIL Components
BOL
GenIL
get model
modify
search
GenIL Component
create
save
Interface Methods
map
The GenIL Component is a class that acts as a link between the existing CRM Business Logic and the UI Framework. It communicates with the Generic Interaction Layer via a specific Interface. Each component defines a hierarchical data model that it publishes to the Generic Interaction Layer. These so called Business Objects are used within all layers of the framework and in the Presentation Layer. The Genil Component does the mapping between the data model that it has defined and the actual data interfaces of the APIs
CRM Business Logic

Component Sets
BOL
Order
GenIL
BP
Ibase
Order
BP
Ibase
CRM Business Logic
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 All components in the set are handled by the framework in the same way as each component communicates with the framework via the same methods.
BOL and GenIL: Tools

Model Browser: Visualizing BOL Model
Presentation Layer (BSP)

Layers of new UI Framework
Business Layer (BOL)
Interaction Layer (GenIL)
BOL Browser: Testing Data retrieval from DB to BOL
Business Layers of underlying Engine Business Application

API Tables
DEMO
Business Objects and Data Model

The data model of a component set can be visualized in the BOL Model Browser
Business Object with unique name Name of dictionary structure List of attributes in structure
Relations with unique IDs
BOL Browser: Query Execution

1. Select a Search Object 3. Press Find
2. Enter Parameter
4. Select an entry from the result list to see the details
BOL Browser: Navigate Data Model

1. Press Children to see relations
2. Select a relation by double click
3. Select an entry from the result list to see the details

4. Press Children to see next deeper hierarchy level
Agenda

Enhancement Tools
Requirement
Layout change e.g. move field UI Configuration Tool
Tool
Software Layer
Presentation Layer (BSP) Business Layer (BOL) Interaction Layer (GenIL)
Layers of UI Framework
Add new field to UI Layer
Add new field to Data Model
CRM Easy Enhancement Workbench (EEW)
Business Engine
API
Tables
SAP 2007 2008 / Page SAP Skills 23 2008 Conference / F2 / Page 23
Structure of Easy Enhancement Workbench

Account Plan Business Partner Business Partner Relationships Business Transactions Activity Complaint Lead Opportunity Sales Transaction Service Process Sales Contract Service Contract Categories Case Resource Planning Tool Installed Base Individual Object Partner Product Ranges Product Relationships Marketing Elements Service Completion Confirmation Solution Database Counter Grantor Project Analytical Data Storage
Project
Package Transport Requests Namespace
Available Business Objects
Extension1 Extension2 Extension3
Business Object Extension Type Business Object Extension Type Business Object Extension Type
Each Business Objects offers different Extension Types
Transaction: Configuration:
EEWB EEWC (also backend system!)
EEW Includes are Available in the BOL Objects Example:
Enhancement Process: Add New Fields
Position fields on the screen & set attributes with the UI Config Tool Fields are available in the field set of the UI Configuration Tool (*)
Model Context Node ZZNewField
ZZField1 ZZField2
Fields are available in BOL (within the EEWBinclude of the corresponding object) Tables/APIs are enhanced
BOL e.g. BTActivityH
ZZNewField
ZZField1 ZZField2
New append structure ZZNewField

ZZField1 ZZField2
API
Data Base
Add new fields with EEWB

e.g. CI_EEW_ACTIVITY_H
* In case the related context node is available in the view model
Enhancement of Data Model

Key Message Adding customer data to existing Busines Objects can be done with the EEW Creation of new customer Business Objects and relations needs in most cases development
New Business Objects (and relations) in existing Genil Component

No general rule, each component has own (maybe no) enhancement concept Enhancement concepts for Business Partner and Products only
Simple objects
Integration of customer tables You may implement new unstructured BOL objects as simple objects Generic table object available as example in package CRM_GENIL_SAMPLE
New Genil Component

You have a complex customer application with different tables forming a hierarchy You can implement any number of new BOL objects in an own genil component Have a look in package CRM_GENIL_SAMPLE for an implementation example
EEW Enhancement process: Add new table

Position fields on the screen & set attributes with the UI Config Tool Fields are available in the field set of the UI Config Tool. Create (manually) view in Web Client UI New object / relations in BOL are generated. GenIL component gets enhanced Tables/APIs are generated
ZZNewField
ZZField1 ZZField2
Controller 1 New View
Model Context Node ZZNewField

ZZField1 ZZField2
BOL
New BO and relation
ZZNewField
ZZField1 ZZField2
GenIL Component
API
Data Base
Add new table with EEW BP (& Bus. Transaction*)

* Item Level only
DEMO
Agenda

UI Component Overview
Custom Controller Component Controller Window
Display
IP
View Sub component

Search
OP View OP
ViewSets
Create
IP
View
Runtime Repository Inbound Plugs Outbound Plugs Navigational Links

Context Nodes
user input
Controller Methods: wd_create_context set_models
Request
set
Model
Method: create_context_nodes
Context Nodes
Layout data output
Input1 Input2 Input3
get
Page Attributes:
Response
BOL
Business Object with attributes Data Binding

CRM Web Client: View Details

In contrast to former implementations the CRM Web Client views can be based on a minimal amount of coding
UI Configuration Tool Layout: A page type related configuration tag allows usage of UI configuration tool CHTMLB THTMLB
Page attributes: Structural setters / getters in the context nodes transfer all fields from the BOL structure to the layout
Navigation Between Views (in Same Window)

Controller Method: DO_HANDLE_EVENT Request
*EventID: done
User input: press button Back*
Method: EH_ONDONE Method: OP_TODETAILSOV
DetailsOV DetailsEF
ToDetailsOV
Controller Method: IP_FROMDETAILSEF

Inbound Plug Outbound Plug Navigational Link ID
Response
data output
Component Workbench: Controller, Event Hander and Navigation
Controller Class
Event Handler Inbound Plugs Outbound Plugs
Custom Controller
UI Component
Lifespan
Controller 1 View1 Model Context Node
Custom Controller
Controller
Lifespan Lifespan
Model Context Node
Controller 2 View2
Model Context Node
BOL
Genil
Tables
Component Controller
Controller Model Context Node
Controller Hierarchy
Component Controller
Custom Controller
Controller Model Context Node
A component is represented by a component controller

The component controller is the highest level of all controllers and is loaded at the initial load of the UI component It can serve as data container for the data transfer between components Binding of Context Node is always done from bottom up, that means from view to custom controller to component controller
Controller View
Model Context Node
Window
Controller Inbound plugs Outbound plugs
Model
IP View IP View
View
ViewSets
OP
OP
A Window is part of a component and defines a root for a hierarchy of view sets and views in the runtime repository. A view set or view can only be part of exactly one window technically a window is a special type of view has a context that contained views and viewsets can bind to can trigger navigation inside the window. Navigation between views is only possible within a single window
DEMO
Agenda

Component Interface
Each component can be looked at from the inside as well as from the outside, but what can be seen is different. Inside View
Logical bundle of views, view set and windows Data are shared between views via custom controllers Window acts a container for view sets and views Inventory of component is defined in the runtime repository
Sub component Search
Outside View
Component Controller publishes context nodes as data interface Window acts as view interface Defined inbound and outbound plugs Component Interface is defined in runtime repository
Component Controller Window Sub component Search Inbound Plug Outbound Plug
Component Usage
Custom Controller Component Controller
Window
OP
Sub component Search
View OP
IP
View
ViewSets
Runtime Repository
Components that have defined an interface can be re-used by other components. The usage of components is defined in the runtime repository of the embedding component The embedded window behaves like a view in the embedding component and can therefore be integrated in the navigation via the inbound and outbound plugs Data can be passed to the embedded component via the component controller which is linked to the component controller of the embedding component
Agenda

2.1. UI Components 2.2. Component usage
UI Enhancements
Requirement
Layout change e.g. move field
Tool
UI Configuration Tool
Presentation Layer (BSP)

View layout configuration Could be achieved via the UI Configuration tool Used for customer specific layout and label changes (including adding new fields via EEW) Customer and SAP configurations are stored separately Component Enhancements Enhance the functionality of components, views and controllers provided by SAP Modification free via inheritance and using references Uses replacement concept for components at runtime Component Development Creation of own components
Add Context Nodes New Events e.g. Navigation
Component Workbench
Create own views in own component

Component Enhancement Principle
nd a ed i p Co
ed i f i d mo
w Vie
r a d n Sta
iew V d
Views from an existing component can be copied into a customer own 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
Enhancement Set
Enhancement Set
Component1 Component3 Component2 Component4
An enhancement set is a folder for enhancements that belong together
2) Assign Enhancement to Client 1) Create Enhancement Set Transaction: SM34 Transaction: SM30 View Cluster: BSPWDVC_CMP_EXT View: BSPWDV_EHSET_ASG
Client
No 1
Enhancement Set ZCUSTOPP
Enhancement Set
ZCUSTOPP
800
Create Enhancement
Transaction: BSP_WD_CMPWB
Open Input Field for Enhancement Set Choose Enhancement Set and Component to be enhanced. Press Display
Press Enhance Component
Enter name of Customer BSP Application (will be created if not yet existing) Enter Package for Development
Customizing Generation
Enhancement Set
Component Name BT111H_OPPT
ZCUSTOPP
BSP Runtime Repository ZCUSTOPPH Runtime Rep Page Repository.xml
Assigned BSP Application ZCUSTOPPH
Name of SAP Component
Name of Customer BSP Application
BSP Application for Runtime Repository
File Name of Runtime Repository
* Entries will be created by wizard during creation of enhancements Transaction: SM34 View Cluster: BSPWDVC_CMP_EXT
Enhancement Result
Access Customer specific BSP in Component Workbench
Runtime Repository copied to customer specific BSP Application. Runtime repository only contains references to objects in the original components (objects greyed out)
Enhancement of Objects
Views Custom Controllers Component Controllers Windows
BT111H_OPPT/DetailsEF
Controller 1 View1 Model Context Node
ZCUSTOPPH/DetailsEF Enhancement with wizard

Controller 2 View2 Model2 Context Node
Enhancement Steps Copy Layout Copy Controller Create new controller class in customer namespace* Create new context class in customer namespace* Re-use context nodes *classes inherit from standard classes
Controller Substitution
Transaction: SM34 View Cluster: BSPWDVC_CMP_EXT
Per object enhancement, en entry in customizing is generated by the wizard Enhancement Set Component
BSP Application BT111H_OPPT
ZCUSTOPP BT111H_OPPT
Controller to be replaced DetailsEF BSP Application ZCUSTOPPH Replacement Controller DetailsEF
Standard Component View that will be replaced at runtime
Customer Component View that will be used at runtime instead of standard view
Object Changes
Re-definition of standard methods possible. Additional methods can be created
Creation of new context node completely supported by wizard Creation of event handler, inbound and outbound plugs supported by wizard, additional coding needed
Enhancement Set Determination
Client
Enhancement Set 1 Enhancement Set 2 Enhancement Set 3 Enhancement Set 4
DEFAULT BADI-Definition: COMPONENT_LOADING

Default implementation selects first enhancement set for client
User1 User2 User3 User4
Client
Enhancement Set 1 Enhancement Set 2 Enhancement Set 3 Enhancement Set 4
Customer Logic BADI-Definition: COMPONENT_LOADING

Customers can define own logic to determine enhancement set by e.g. user, business role, etc.
User1 User2 User3 User4
Agenda

2.1. UI Components 2.2. Component usage
DEMO
Questions and Answers
Contact
CRM Center of Expertise: Ines Kutne Senior Development Consultant ines@kutne@sap.com +49 160 3603169
CRM Deep Dive Workshop Series

This series of special Deep Dive Workshops is offered by the CRM Consulting EMEA Hub in cooperation with the RKT team, Application Solution Management and Development. As part of the concept the workshops are conducted in a way that participants can introduce requests out of their projects. Possible approaches are elaborated in a collaborative style to share/build more experience and knowledge than compared to "traditional style" courses. Exercises which are relevant for practical work are part of every lesson.
The following workshops are offered CRM 2007 Web Client UI Development Authorization Concept in CRM2007 Web Client UI ProActive Middleware E-Commerce CRM Pricing in integrated ECC environment Multiple Backend Integration MEP For information please contact Ines Kutne ines.kutne@sap.com Michaela Mhlbauer michaela.muehlbauer@sap.com
Copyright 2008 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. SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, 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 and associated logos displayed 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. 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. 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
Weitergabe und Vervielfltigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrckliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen knnen ohne vorherige Ankndigung gendert werden. Einige von der SAP AG und deren Vertriebspartnern vertriebene Softwareprodukte knnen Softwarekomponenten umfassen, die Eigentum anderer Softwarehersteller sind. SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, SAP Business ByDesign, ByDesign, PartnerEdge und andere in diesem Dokument erwhnte SAP-Produkte und Services sowie die dazugehrigen Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und in mehreren anderen Lndern weltweit. Alle anderen in diesem Dokument erwhnten Namen von Produkten und Services sowie die damit verbundenen Firmenlogos sind Marken der jeweiligen Unternehmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informationszwecken. Produkte knnen lnderspezifische Unterschiede aufweisen. Die in diesem Dokument enthaltenen Informationen sind Eigentum von SAP. Dieses Dokument ist eine Vorabversion und unterliegt nicht Ihrer Lizenzvereinbarung oder einer anderen Vereinbarung mit SAP. Dieses Dokument enthlt nur vorgesehene Strategien, Entwicklungen und Funktionen des SAP-Produkts und ist fr SAP nicht bindend, einen bestimmten Geschftsweg, eine Produktstrategie bzw. -entwicklung einzuschlagen. SAP bernimmt keine Verantwortung fr Fehler oder Auslassungen in diesen Materialien. SAP garantiert nicht die Richtigkeit oder Vollstndigkeit der Informationen, Texte, Grafiken, Links oder anderer in diesen Materialien enthaltenen Elemente. Diese Publikation wird ohne jegliche Gewhr, weder ausdrcklich noch stillschweigend, bereitgestellt. Dies gilt u. a., aber nicht ausschlielich, hinsichtlich der Gewhrleistung der Marktgngigkeit und der Eignung fr einen bestimmten Zweck sowie fr die Gewhrleistung der Nichtverletzung geltenden Rechts. SAP bernimmt keine Haftung fr Schden jeglicher Art, einschlielich und ohne Einschrnkung fr direkte, spezielle, indirekte oder Folgeschden im Zusammenhang mit der Verwendung dieser Unterlagen. Diese Einschrnkung gilt nicht bei Vorsatz oder grober Fahrlssigkeit. Die gesetzliche Haftung bei Personenschden oder die Produkthaftung bleibt unberhrt. Die Informationen, auf die Sie mglicherweise ber die in diesem Material enthaltenen Hotlinks zugreifen, unterliegen nicht dem Einfluss von SAP, und SAP untersttzt nicht die Nutzung von Internetseiten Dritter durch Sie und gibt keinerlei Gewhrleistungen oder Zusagen ber Internetseiten Dritter ab. Alle Rechte vorbehalten.

Sapskills Wcui PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sapskills Wcui PDF

Cargado por

Copyright:

Formatos disponibles

SAP Skills 2008 Conference SAP CRM 2007: Kundenspezifische Erweiterungen in Web Client UI

Ines Kutne, CRM Center of Expertise 26.06.2008

1. Web Client UI Architecture

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 2

Layers of the CRM User Interface

CRM Web Client

Presentation Controller Layer

Business Server Pages (BSPs)

Business Object Layer (BOL) Generic Interaction Layer (GenIL)

Layers of underlying Business Application

Application Programming Interfaces (APIs) Tables

Views of the CRM Web Client

Other persistent views

Navigation Bar (persistent)

Workarea view set

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 4

Identify Component and View

Screenshot vom Popup

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 5

Structure of the Presentation Layer

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 6

Browser Component Structure BOL Model Browser Runtime Repository Editor

Visible Model-View-Controller (MVC)

Definecontrol controlflow flow Define

Visualization Visualizationof ofthe the application data application data

Data flow Control flow

Model View Controller in CRM Web Client

Controller Class user input

Event handling Navigation

.HTM Page Attributes: _CN00 _CN01

Layout: BSP extensions (tags) describing the view layout

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 9

Component Workbench: View, Controller and Model

Model: Context and Context Nodes

Component Workbench: Context Nodes, Attributes

Context Context Nodes

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 11

1. Web Client UI Architecture

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 12

Layers of the CRM User Interface

CRM Web Client

Presentation Controller Layer

Business Server Pages (BSPs)

Business Object Layer (BOL) Generic Interaction Layer (GenIL)

Layers of underlying Business Application

Application Programming Interfaces (APIs) Tables

Mapping Component for Order API

Mapping Component for Business Partner API

CRM Business Logic

CRM Business Logic

CRM Business Logic

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 16

BOL and GenIL: Tools

Presentation Layer (BSP)

Business Layer (BOL)

Interaction Layer (GenIL)

BOL Browser: Testing Data retrieval from DB to BOL

Business Layers of underlying Engine Business Application

Business Objects and Data Model

Relations with unique IDs

SAP 2008 / SAP Skills 2008 Conference / F2 / Page 19

BOL Browser: Query Execution