Post on 25-Oct-2015
description
IBM Global Services
© 2005 IBM CorporationCRM Web Client : Part 1 04/17/23
SAP CRM 2006sWebClient UI
Part 1 User Interface Configuration
Joydeep Mazumder
IBM Global Services
© 2005 IBM Corporation2 04/17/23CRM Web Client : Part 1
Course Content
User Interface(UI) Concepts
Business Roles
Navigation Bar Customization
Use of Transaction & URL Launcher
Framework Concepts
Design Layer Concept
UI Configuration Tool
Easy Enhancement Workbench( EEWB)
IBM Global Services
© 2005 IBM Corporation3 04/17/23CRM Web Client : Part 1
UI Concepts
It is Web-based, easy-to-use, and easy-to-configureUI for all online users who uses
SAP CRM Applications
Easy-to-use: High productivity through intuitiveness and
facilitating functionality Well structured screens and navigation
Quick creation, maintenance and review of Information
Browser Printing ,Groupware Integration, Upload/Download.
Appealing ‘web application style’ visual design consistent across on-demand and on-premise
Rapid time-to-use due to lean end-user documentation and e-tutorials.
UI layers have been completely restructured but is still based on BSP.
It is as consistent as possible but at the same time as specific as necessary.
IBM Global Services
© 2005 IBM Corporation4 04/17/23CRM Web Client : Part 1
New UI Concept – Screen Structure
IBM Global Services
© 2005 IBM Corporation5 04/17/23CRM Web Client : Part 1
New UI Concept – Screen Structure
C – work area for Work Centre
A – header area
B – navigation bar area
= L-shape (fixed part)
IBM Global Services
© 2005 IBM Corporation6 04/17/23CRM Web Client : Part 1
The position and size of L-shape is static and its contents are configured . L-shape shows easy global navigation throughout the entire SAP CRM application. Generic shortcuts for fast data entry, access, and other information are also included. The L-shape contains of a header area (top) and navigation (left-hand) area.
L-shape characteristics Static position and size The specific content of the L-
shape can be configured role-dependent
L-shape contains1) System links
2) Saved searches
3) History back and forward
4) Work area title
5) Navigation bar
6) Quick create links
53
4 2
1
6
UI Element: L-Shape
IBM Global Services
© 2005 IBM Corporation7 04/17/23CRM Web Client : Part 1
L-ShapeThe L-shape is static in position and size. It covers the upper and left-hand parts of the screen. The L-shape consists of the header area and the navigation area.
Header areaThe header area is located at the top of the screen and provides generic shortcuts and special functions.
Navigation areaThe navigation area contains primary navigation through the SAP CRM application and options for directly triggering creation of often-used objects.
L-shape: providing a fixed anchor for the user
Work area – visualization of the requested information
In the work area all content is visualized with different page types
Front Pages
Home pageThe HOME page is the starting point for the daily business of every user. It contains the user’s most important personal information and access to the most frequently used tools. The page can be role-dependent.
Work center pageEvery first-level navigation bar item has an individual work center page. This page contains a set of shortcuts and access to all SAP CRM components related to the work center. The page can be role-dependent.
Reports pageEntry page for direct access to all reports and analysis available for the current role. It consists of a collection of analyses. The page can be role-dependent.
CalendarEntry page that focuses only on appointments and tasks. The corresponding information is visualized in a graphical way similar to familiar groupware solutions.
E-mail inbox Entry page that provides a view into the groupware inbox to trigger the transfer of e-mails to SAP CRM.
IBM Global Services
© 2005 IBM Corporation8 04/17/23CRM Web Client : Part 1
Header Area: System Links
Personalize Offers generic personalization options for the user Examples: Skin selection and keyboard shortcuts
Help center Offers direct access to online help using the knowledge warehouse
System news Provides access to general system messages, such as those set and
published by an administrator
Log off Allows users to log off of the SAP CRM application
IBM Global Services
© 2005 IBM Corporation9 04/17/23CRM Web Client : Part 1
Header Area: Saved Searches
The saved searches area provides direct DDLB access to a list of predefined search queries across all SAP CRM applications
By choosing a predefined search, the user can directly – Start the search with the GO button
– The system automatically navigates to the corresponding search page displaying the result list
– Edit the saved search to redefine search parameters with the EDIT button– The system automatically navigates to corresponding search page with the search
criteria visible for direct changes
– Delete the selected saved search with the recycle bin button
A saved search can be defined in advanced search pages, directly below the search statements (see section on the search page)
The definition of saved searches is user-specific
IBM Global Services
© 2005 IBM Corporation10 04/17/23CRM Web Client : Part 1
Work Centre 2
Work Centre 3
Work Centre 4
Work Centre 1
Work Centre 6
Reports
Work Centre 5
Entry1
Entry2
Entry3
Entry4
Entry5
Entry6
Worklist
Calendar
HOME
Navigation Area: Navigation BarThe navigation bar provides direct navigation to all work centre pages and the most important search components. It allows a maximum of two levels of navigation. Click on the triangle area to open the second-level navigation area.
First-level navigation entries: Selection leads to corresponding entry page Standard navigation targets (e.g., home, worklist, calendar, reports) and
additional work centers that are role-specific
Second-level navigation entries: Second-level navigation opens via a click and closes automatically after
selection or another click on the triangle area Second-level entries represent searches for the most frequently used or
needed applications
The navigation bar can include: Application search launches A URL link SAP NetWeaver BI reports and analysis Transactions in other systems
IBM Global Services
© 2005 IBM Corporation11 04/17/23CRM Web Client : Part 1
Navigation Area: Navigation Bar – Work Centers
A work center is a flexible grouping of applications and information that logically belong to each other from the viewpoint of a business role
Work center page
Search
Work centers: Display a work center page or directly open a search Example: Various objects are grouped together under “Services”
work center In the second-level menu, more than one direct search pages can be accessed directly Additional application searches, direct creation options, and links to related reports are
available on the work center page
The grouping of work centers and the content of a work center page are configurable per role
IBM Global Services
© 2005 IBM Corporation12 04/17/23CRM Web Client : Part 1
Navigation Area: Quick Create Area
The create area allows users to start the creation of an object quickly, no matter where the user is located in the SAP CRM application at the moment
Create options: Links in the create area navigate to the corresponding
standard create pages
The main idea behind the quick create area is to provide the user with quick links for creation of the most frequently used applications
This area thus contains only the entries needed multiple times a day, rather than the ones needed once every two weeks
In the standard delivery the create area contains only the most important create links (appointment, e-mail, task, and sales call) plus new, role-specific links
This area is freely configurable per role
This area can be personalized by the user
IBM Global Services
© 2005 IBM Corporation13 04/17/23CRM Web Client : Part 1
Entry Page: Work List
The work list provides a complete overview of information pushed to the user. It is divided into alerts and workflow tasks.
The work list: Contains information about
alerts and workflow tasks pushed to the users
Both types can be triggered manually or automatically by SAP CRM to inform users about an issue or asking them to take action
Several predefined alerts and workflows are delivered with SAP CRM (campaign approval workflow, accept lead workflow, lost opportunity alert, and so on)
Within a role smaller content areas for alerts and workflows can be embedded directly in the HOME page
IBM Global Services
© 2005 IBM Corporation14 04/17/23CRM Web Client : Part 1
Entry Page: Calendar
The calendar page provides a graphical overview of appointments for today and of open tasks in an presentation similar to that of Outlook
The calendar: Allows a graphical overview of
today’s appointments Allows switching between
daily, weekly and monthly views
Allows switching to a colleague’s calendar
Provides an overview of the next two months
Provides a list of open tasks Provides an option to directly
create an appointment from the daily view
IBM Global Services
© 2005 IBM Corporation15 04/17/23CRM Web Client : Part 1
Entry Page: E-Mail Inbox
The e-mail inbox is an SAP CRM–specific view of the e-mail inbox of the current user that allows triggering the transfer of e-Mails to SAP CRM
The e-mail inbox: Is a temporary view of the
current user’s groupware inbox
By opening this page no e-mail is replicated from groupware to SAP CRM; it is only a real-time view
Using this inbox, the user can choose selected e-mails and transfer (copy) them to SAP CRM
Transferring an e-mail will trigger a user interaction dialogue to add information needed by the SAP CRM application
IBM Global Services
© 2005 IBM Corporation16 04/17/23CRM Web Client : Part 1
Entry Page: Work Center
Every first-level menu item has an individual work center page. It contains a set of shortcuts and access to all work center–related SAP CRM components
The work center page: Is opened by choosing the
first-level navigation entry directly, without selecting a specific second-level entry
Includes important content regarding the current SAP CRM area (indicated by the name of the work center in the first-level navigation)
Includes all searches belonging to this work center (content configurable per role)
Includes direct links for the creation of new objects(content configurable per role)
Related analysis(content configurable per role)
See the section on the L-shape for further details
IBM Global Services
© 2005 IBM Corporation17 04/17/23CRM Web Client : Part 1
Entry Page: Reports
The reports page is the central entry page to access all reports available for a specific role, grouped by business area
The reports page: Provides a linked list of reports
and analysis grouped by business topic
Examples: Account analysis Campaign analysis Pipeline analysis …
The link will call the full page of the analysis
It can have second-level navigation entries providing direct access to important analysis or dashboards
Content and grouping are configurable per role
IBM Global Services
© 2005 IBM Corporation18 04/17/23CRM Web Client : Part 1
Search Pages
Via work center pageVia work center page
Via navigation barVia navigation bar
Via saved searchesVia saved searches
Provide the user with comprehensive, flexible and easy-to-understand (operator-based) search capabilities individually for every SAP CRM applicationThe search pages:
Allow definition and saving of search models Search result lists are optimized for quick overview and easy navigation to detailed
information Offer options like create, delete, mass update and XLS export Multiple ways of navigating to the search pages
IBM Global Services
© 2005 IBM Corporation19 04/17/23CRM Web Client : Part 1
The OVP provides all important information regarding a single object in a scrollable format
Overview Page (OVP)
Main details: The OVP is non-editable The OVP consists of header
information that allows detailed object identification and a set of related information
The information in assignment blocks can be displayed in various formats:
Form views Tables Hierarchies
The OVP is the target page when following a hyperlink to an object instance
The OVP contains the hyperlinks for cross navigation to related information
IBM Global Services
© 2005 IBM Corporation20 04/17/23CRM Web Client : Part 1
Main Interaction Concept for Objects
Coming from the OVP – which contains all information relevant for an object – the user can edit all information of the object in a separate edit view
General navigation is therefore always navigation between the overview page and the edit page and back to the overview page
Overview page (OVP)
Edit Pageheader
Edit Pageassignment block X
Edit Pageassignment block Y
BackEdit
BackEdit
BackEdit
IBM Global Services
© 2005 IBM Corporation21 04/17/23CRM Web Client : Part 1
Overview Page: Main UI Elements
Work area toolbar
Page personalization, print and help
Form view
Table
Work area title
AB toolbar
Header area
Assignment Blocks (ABs)
containing information related to this object
IBM Global Services
© 2005 IBM Corporation22 04/17/23CRM Web Client : Part 1
OVP Elements: ABs
Capabilities:1) AB title – to identify the
content of the AB
2) Personalize icon (in table-based AB) and Back to Top link:
The visibility/ sequence of columns can be changed
Width of columns can be set
3) Column headers in tables are used for sorting
4) One-click actions for fast and easy deletion or editing of an object
5) Expand – appears if default number of visible rows is exceeded; opens up to 50, then it shows pages
6) Lazy load – less important ABs are first shown closed; the content is displayed on request
1 2
3
4
5
6
IBM Global Services
© 2005 IBM Corporation23 04/17/23CRM Web Client : Part 1
Business Roles
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation24 04/17/23CRM Web Client : Part 1
Business Role- : Overview
Business Role The Business role is the central object for controlling the Navigation Bar, the Logical
Links and the authorizations for users.
User Assignment The Business Role is assigned to an organizational unit in the Organizational Model.
The user is assigned to an organizational unit. By this mechanism User and Business Role are linked.
Authorizations The Business role is assigned to a Authorization profile via a PFCG role.
Navigation Bar Profile Link Groups structure the Logical Links for Work Centers. The Navigation Bar Profile
contains Direct Links Groups and Work Centers.
Logical Links are assigned to the Direct Lin Groups.
Work Center Groups aren't visible in the application.
The Role- / Navigation Bar Customizing controls, based on Business Roles,how the Navigation Bar is structured and which Links are available on the Work Center / Home / Report Pages and in the Direct Link Group
IBM Global Services
© 2005 IBM Corporation25 04/17/23CRM Web Client : Part 1
Define Business Role
Configuration: IMG Path: Customer
Relationship Management > Business Roles > Define Business Roles or
Transaction CRMC_UI_PROFILE
Create / change / copy / delete Business Role
IBM Global Services
© 2005 IBM Corporation26 04/17/23CRM Web Client : Part 1
Business Role
The business role determines the different profiles of the UI and
what is visible on the UI.
Business Role
Navigation Bar Profile
• Logical Links
• Work Center / - Group
• Direct Link Group
• Outbound Plug Mapping
Organization Model
Layout Profile
Technical Profile
Role Configuration Key
PFCG Role ID
/ User / Business Partner
IBM Global Services
© 2005 IBM Corporation27 04/17/23CRM Web Client : Part 1
Assign Business Role to Organizational UnitConfiguration:
IMG Path: Customer Relationship Management > Business Roles > Define Organizational Assignment
Transaction: PPOMA_CRM Assign infotyp: Goto > Detailed
Object Users / Business Partners are
assigned within the Organizational Model to a Position
User / Business Partners can be assigned to multiple Positions
Each Position can have exactly one „Business Role“ assigned to (Info type 1163)
IBM Global Services
© 2005 IBM Corporation28 04/17/23CRM Web Client : Part 1
Navigation Bar Customizing
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation30 04/17/23CRM Web Client : Part 1
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 Component Navigation always via Navigation Bar
Component: e.g. Service Ticket
Overview
Link/Button
IBM Global Services
© 2005 IBM Corporation31 04/17/23CRM Web Client : Part 1
I) Navigation from the Navigation Bar to a Component
CRMC_UI_NBLINKS Client dependent
Define NavBar Profile:
Profile: DEFAULT_IC
Assign Work Centers:Work Center IC_BT_SVT
CRMC_UI_NBLINKSClient dependent
Define Logical LinksLogLink ID: IC_BT_SVTType: Work CenterTarget ID: IC_BT_SVT(=Technical ID)Define Work CenterWork Center: IC_BT_SVTLogicalLink ID: IC_BT_SVTTitle: Service Ticket
Main Window
Component
Create
NavBar (Profile)
WorkCenter Logical Link TechnicalID =
(Target-ID)1.
1.
2.
2.
CRMS_UI_TLINKCross 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
3.
3.
Search
Other Window
Create
Search
0.
0.
IBM Global Services
© 2005 IBM Corporation32 04/17/23CRM Web Client : Part 1
Component B
CRMS_UI_TLINK Cross client
Component Definition:Component Name 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)
TechnicalID (= Target
ID)
2.
4.
Search
Other Window
Create
Search
Main Window
Component A
OP1
OP2
Other Window
OP7
OP8
1.
Object TypeObject 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_PRODUCTObjAction: DisplayTarget ID: IP_PRODUCT
3.
CRMS_UI_TLINK Cross client
Component Definition:Component Name ICCMP_PRODUCT Window Name Main
Inbound Plug Definition:Target ID: IP_PRODUCTIP: DEFAULT Object Type: IC_PRODUCTObject Action: Display
4.
Cross Component Navigation - Object type determined by Outbound Plug (OP) definition
IBM Global Services
© 2005 IBM Corporation33 04/17/23CRM Web Client : Part 1
Steps of Navigation Bar Customizing General definition of all single available Navbar entries.
Group single Link Groups as Work Centers
Do Navigation Bar specific Customizing Define Navigation bar Profile, which gets assigned to a Business Roles
Group different Logical Links as Work Center Link Groups
Group different Logical Links as Direct Link Groups
IBM Global Services
© 2005 IBM Corporation34 04/17/23CRM Web Client : Part 1
Navigation Bar Profile – Assigned Work Centers
.
.
.
IBM Global Services
© 2005 IBM Corporation35 04/17/23CRM Web Client : Part 1
Navigation Bar Profile - Assigned Direct Link Groups
IBM Global Services
© 2005 IBM Corporation36 04/17/23CRM Web Client : Part 1
Nav.-Bar and Business Role Customizing
Navigation Customizing Tx: CRMC_UI_NBLINKS
Shared Lists of all Links, Work Centers, …
NavBar Profiles that are separating the Links, Work Centers, … (for example for IC and UIU)
Business Role Customizing Tx: CRMC_UI_PROFILE
Business Roles with assigned NavBar Profiles
Filtering: which NavLinks, WorkCenters … are relevant for this Role
Assign to OrgUnits via Info type 1263 “Business Role”
Further Filtering via PFCG Roles (Authorizations)
A.
B.
C. D.
E.
F.
IBM Global Services
© 2005 IBM Corporation37 04/17/23CRM Web Client : Part 1
How to use Transaction Launcher
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation38 04/17/23CRM Web Client : Part 1
Transaction Launcher
The transaction Launcher can be used to launch URLs and BSPs / BOR transactions from other systems.
Launch GUITransaction
Launch URL
IBM Global Services
© 2005 IBM Corporation39 04/17/23CRM Web Client : Part 1
Launch GUI Transaction
The Transaction Launcher can be used to launch URLs and BSPs / BOR transactions from other systems.
To launch a GUI transaction a BOR object type with a method EXECUTE, that supports synchronous calls, is required.
A mapping of the logical systems is required:Transaction: CRMS_IC_CROSS_SYS
To launch an URL the URL has to be defined in the URL repository first:View: CRMV_IC_LTX_URL
Launch GUI Transaction
IBM Global Services
© 2005 IBM Corporation40 04/17/23CRM Web Client : Part 1
Preparation: Create BOR object type (1)
Configuration To launch a GUI transaction a
BOR object type with a method EXECUTE, that supports synchronous calls, is required.
Transaction: SE80 > Workbench > Edit object
Copy BOR object type TSTC to ZTSTC
Once per System necessary
IBM Global Services
© 2005 IBM Corporation41 04/17/23CRM Web Client : Part 1
Preparation: Create BOR object type (2)
Configuration Set in the method EXECUTE
the flag ‚Synchronous‘
IBM Global Services
© 2005 IBM Corporation42 04/17/23CRM Web Client : Part 1
Preparation: Create BOR object type (3)Configuration
Generate the object
IBM Global Services
© 2005 IBM Corporation43 04/17/23CRM Web Client : Part 1
Step 1: Define Logical system and assign ITS URL
Configuration Transaction:
CRMS_IC_CROSS_SYS URL of ITS:
http://<server>:<port>/sap/bc/gui/sap/its/CRM_CIC_RABOX/!?sap-client=<client>
IBM Global Services
© 2005 IBM Corporation44 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (1)
Configuration IMG:
Customer Relationship Management > UI Framework >> Technical Role Definition > Configure Transaction Launcher
or transaction: CRMC_UI_ACTIONWZ
Enter an ID (don‘t use the F4-help)
IBM Global Services
© 2005 IBM Corporation45 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (2)
Configuration Enter a description Enter a class name
(don‘t use the F4-help):ZCL_<name>
Flag ‚Stateful‘, if the URL should be launched in a new window
IBM Global Services
© 2005 IBM Corporation46 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (3)
Configuration Choose Transaction Type =
BOR Transaction Choose the BOR Object type
you created Choose EXECUTE
IBM Global Services
© 2005 IBM Corporation47 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (4)
Configuration ChooseParameter: Object Key Value: <transaction code>
IBM Global Services
© 2005 IBM Corporation48 04/17/23CRM Web Client : Part 1
Step 3: Integrate the Transaction into your NavBar (1)
Example: Provide a new Direct Link group with the Transaction as a Direct Link
IBM Global Services
© 2005 IBM Corporation49 04/17/23CRM Web Client : Part 1
Step 3: Integrate the Transaction into your NavBar (2)
Configuration IMG: Customer Relationship
Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile
Create an new Logical Link Type: C Launch Transaction Target ID: EXECLTX Parameter class:
CL_CRM_UI_LTX_NAVBAR_PARAM
IBM Global Services
© 2005 IBM Corporation50 04/17/23CRM Web Client : Part 1
Step 3: Integrate the Transaction into your NavBar (3)Configuration
IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile
Create a new Direct Link Group and assign the logical link to it
Assign the Direct Link Group to your Navigation Bar Profile
IMG: Customer Relationship Management > Business Role > Define Business Role > Set the link to visible
IBM Global Services
© 2005 IBM Corporation51 04/17/23CRM Web Client : Part 1
Step 3: Result
Flag ‘stateful’ set in Transaction Launcher Flag ‘stateful’ not set
IBM Global Services
© 2005 IBM Corporation52 04/17/23CRM Web Client : Part 1
Launch URLThe transaction Launcher can be used to launch URLs and BSPs / BOR transactions from other systems.
A mapping of the logical systems is required:Transaction: CRMS_IC_CROSS_SYS
To launch an URL the URL has to be defined in the URL repository first:View: CRMV_IC_LTX_URL
Launch URL
IBM Global Services
© 2005 IBM Corporation53 04/17/23CRM Web Client : Part 1
Step 1: Define URL in URL repository
Configuration Transaction: SM30 View: CRMV_IC_LTX_URL
IBM Global Services
© 2005 IBM Corporation54 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (1)
Configuration IMG:
Customer Relationship Management > UI Framework >> Technical Role Definition > Configure Transaction Launcher
or transaction: CRMC_UI_ACTIONWZ
Enter an ID (don‘t use the F4-help)
IBM Global Services
© 2005 IBM Corporation55 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (2)Configuration
Enter a description Enter a class name
(don‘t use the F4-help):ZCL_<name>
Flag ‚Stateful‘, if the URL should be launched in a new window
IBM Global Services
© 2005 IBM Corporation56 04/17/23CRM Web Client : Part 1
Step 2: Use Transaction Launcher Wizard (3)Configuration
Choose Transaction Type = URL Transaction
Choose the URL ID you defined in the URL repository
IBM Global Services
© 2005 IBM Corporation57 04/17/23CRM Web Client : Part 1
Step 3a: Integrate the URL into your NavBar (1)
Example 1: Provide a new Direct Link group with the URL as a Direct Link
IBM Global Services
© 2005 IBM Corporation58 04/17/23CRM Web Client : Part 1
Step 3a: Integrate the URL into your NavBar (2)
Configuration IMG: Customer Relationship
Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile
Create an new Logical Link Type: C Launch Transaction Target ID: EXECLTX Parameter class:
CL_CRM_UI_LTX_NAVBAR_PARAM
IBM Global Services
© 2005 IBM Corporation59 04/17/23CRM Web Client : Part 1
Step 3a: Integrate the URL into your NavBar (3)Configuration
IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile
Create a new Direct Link Group and assign the logical link to it
Assign the Direct Link Group to your Navigation Bar Profile
IMG: Customer Relationship Management > Business Role > Define Business Role > Set the link to visible
IBM Global Services
© 2005 IBM Corporation60 04/17/23CRM Web Client : Part 1
Step 3b: Integrate the URL into your NavBar (1)
Example 2: Integrate the URL in an existing Work Center
IBM Global Services
© 2005 IBM Corporation61 04/17/23CRM Web Client : Part 1
Step 3b: Integrate the URL into your NavBar (2)Configuration
IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile
Create a new Work Center Link Group and assign the Logical Link (see slide 8)
Assign the Work Center Link Group to a Work Center
IMG: Customer Relationship Management > Business Role > Define Business Role > Set the Group to ‚In menu‘ and ‚In Work Center‘
IBM Global Services
© 2005 IBM Corporation62 04/17/23CRM Web Client : Part 1
Framework
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation63 04/17/23CRM Web Client : Part 1
Framework Elements
Framework
General Overview Framework and Objects
IBM Global Services
© 2005 IBM Corporation64 04/17/23CRM Web Client : Part 1
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 BO’s that is assigned a unique cross-component name. To the relation “a cardinality value” is assigned for each BO. The navigation direction is a characteristic of the relation.
Object model:
Number of BOs and their relations.
IBM Global Services
© 2005 IBM Corporation65 04/17/23CRM Web Client : Part 1
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.
Query-Object: A query object is a special type of BO whose attributes are the parameters of a search request. The result object of a search request is an associated access object at the uppermost level of the hierarchy.
IBM Global Services
© 2005 IBM Corporation66 04/17/23CRM Web Client : Part 1
Definitions 3 Component: A component is an ABAP OO class which implements
the component interface described in this specification. It exposes a set of CRM business objects to the Generic IL, which form an aggregational hierarchy. Each component must have a unique root object.
Component Set: A Component Set is a set of components, that defines the Object Model used while runtime.
Data Container:
The data container is a service of the Generic IL for transporting data of business objects. All business objects in a data container form a strict hierarchy based on the object model and belong to the same component. Each data container has a unique root which is at least an access object.
IBM Global Services
© 2005 IBM Corporation67 04/17/23CRM Web Client : Part 1
CRM WebClient – Model View Controller Concept
Request
Response
Controlleruserinput
data output View
Model
Presentation Layer (BSP)
Business Layer (BOL & GenIL)
Tables
Business Engine
CRM WebClient
set
get
Data flow
Control flow
(APIs)
IBM Global Services
© 2005 IBM Corporation68 04/17/23CRM Web Client : Part 1
Needful things
Often used transaction in context of WebClient UI Development:
- GENIL_MODEL_BROWSER
shows structural Model Data of GENIL
- GENIL_BOL_BROWSER
test environment for BOL Objects
Both can be launched in the new Component Workbench
IBM Global Services
© 2005 IBM Corporation69 04/17/23CRM Web Client : Part 1
Framework Elements
Framework
General Overview Framework and Objects
IBM Global Services
© 2005 IBM Corporation70 04/17/23CRM Web Client : Part 1
UI Component- Is the logical grouping for UI Implementation
- Is assigned to a package
- certain SAP Naming conventions
- e.g. OneOrder:
-BTOPPS_OpportunitySearch
BT<object><type>_<meaningful string>
type is: S - Search
H -Header
I -Item
M - Main
- Leading 7 characters have to be unique!!
IBM Global Services
© 2005 IBM Corporation71 04/17/23CRM Web Client : Part 1
Component – general parts
OP
OP
SubComponent EditForm EF
SubComponent Search S
Window 1
ViewSet
View
SubComponent HeaderData H
Window 2
ViewSet
View
Main Component M
IP
IP
IP
OP
IP
IP
OP
IP
IP
OP
OP
OP
IBM Global Services
© 2005 IBM Corporation72 04/17/23CRM Web Client : Part 1
Technical Implementation of a View
Component Elements:
- *CTXT Model
- *htm View
- *IMPL Controller
IBM Global Services
© 2005 IBM Corporation73 04/17/23CRM Web Client : Part 1
Elements - Controller
- Manages Model (Creation Handling)
- Manages View (Creation, set attributes, lifetime…)
- Does Event handling (e.g. handling for Button clicks)
- Provides Inbound Plugs (enables Navigation to the view)
- Provides Outbound Plugs(enables Navigation away from view)
IBM Global Services
© 2005 IBM Corporation74 04/17/23CRM Web Client : Part 1
Elements – Context and Context Node
Context Class:Is managing all Context Nodes of a ViewCreates Context NodesConnects Context Nodes
Context Node:
represents a BOL Object
has an attribute structure
has methods for accessing attributes
IBM Global Services
© 2005 IBM Corporation75 04/17/23CRM Web Client : Part 1
Elements - Window
- Container which is used for displaying an UI Component
- can contain Views, ViewSets, etc. (defined in Runtime Repository)
- similar to a View (has MVC, In- and OutboundPlugs)
Window
IBM Global Services
© 2005 IBM Corporation76 04/17/23CRM Web Client : Part 1
Component Interface & Component Usage
- Components with a component interface can be included in other components Reuse!
- usage is defined in runtime repository editor
Component Interface:
- needs to be defined if a Component should be reusable
- is defined in the runtime repository editor
- Context Nodes and Windows need to be defined
Component Usage:
IBM Global Services
© 2005 IBM Corporation77 04/17/23CRM Web Client : Part 1
UI Configuration Tool
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation78 04/17/23CRM Web Client : Part 1
Configuration Steps
UI Configuration Tool
UI Configuration – general Overview
IBM Global Services
© 2005 IBM Corporation79 04/17/23CRM Web Client : Part 1
UI Configuration: Overview
To adjust the CRM user interface to your corporate identity, a bundle of integrated tools is provided.
These tools support the UI configuration in an efficient and holistic way.
Examples Add new fields to business objects
Position fields on views
Rename field labels
Use personalization
Define captions
Define navigation bar entries
Create business roles
ToolsTools
BSP WD component workbench UI configuration tool Easy enhancement workbench
(EEWB) Role and navigation bar
customizing Design layer customizing
BSP WD component workbench UI configuration tool Easy enhancement workbench
(EEWB) Role and navigation bar
customizing Design layer customizing
Platzhalter für Bild
IBM Global Services
© 2005 IBM Corporation80 04/17/23CRM Web Client : Part 1
UI Configuration Tools: Overview and Comparison
Tasks Tools for PCUICRM 5.0
Configure views:
Add/remove/position fields/columns
Rename labels
Set fields mandatory/read only
Define load options for blocks
ToolsCRM 2006s/2
Use Parameter to save configuration
Implement same configuration Content for several views.
Define and copy Business Roles
Create customer-specific fields
Use customer-specific fields withinview configuration
Define input helps for customer-specific fields
Configure Buttons
UI Configuration Tool
UI Configuration Tool
UI Configuration Tool
Role Customizing
Easy Enhancement Workbench
BSP Component Workbench
Design Layer Customizing
Design Layer Customizing
PCUI Customizing Transaction: crmc_blueprint_c
Renaming of labels hardly possible
Not available
PCUI Customizing + own development
Not available
Easy Enhancement Workbench
PCUI Customizing
Not available
Own development
X
X
X
X
IBM Global Services
© 2005 IBM Corporation81 04/17/23CRM Web Client : Part 1
UI Configuration Tool: Overview
Project team members and consultants use the tool as follows: Configure pages
Work center pages Overview pages Edit pages Advanced search pages
Configure blocks Forms Tables Trees
Configure fields
The CRM UI configuration tool is an easy-to-use tool for adjustingthe CRM standard views to your needs.
IBM Global Services
© 2005 IBM Corporation82 04/17/23CRM Web Client : Part 1
UI Configuration Tool: General FeaturesGeneral features that are provided by the UI ConfigTool:
Configuration can be stored according to differentiators using the following parameters:
Configuration key (business role)
Component usage
Application-specific parameters like object type and object subtype
Change and transport system
Changes in the configuration are recorded in change requests
Language support
Configuration (labels, captions) can be translated
Personalization
The end user can be enabled to personalize objects
Launch UI configuration tool from the BSP WD component workbench
Transaction “BSP_WD_CMPWB”
IBM Global Services
© 2005 IBM Corporation83 04/17/23CRM Web Client : Part 1
UI Configuration Tool: View Configuration (1)
Adapt the solution even closer to your particular business and terminology:
Configure form views Use simple or detailed configuration view Position fields on views Add fields from field set / remove fields Add captions Change field labels/hide field labels Set fields to editable or display only Define whether a field should be mandatory
Configure table/tree views Change the order of columns Rename column titles Define number of visible rows Choose scrollbar/cutting mode Define column width Define which roles are personalizable Set the horizontal alignment (left, right, or center) Set a column to display only
IBM Global Services
© 2005 IBM Corporation84 04/17/23CRM Web Client : Part 1
UI Configuration Tool: View Configuration (2)
Configure search pages Add/remove search criteria from available search parameter set
Choose default search operators
Define the criteria that should be displayed by default
Configure overview pages
Add/remove blocks from assignment set
Change order of visible assignment blocks
Define load option (hidden, lazy, or direct)
Change titles
Configure work center pages
Add/remove blocks from assignment set
Change order of visible assignment blocks
Position blocks on the right or left side of the page
Change titles
IBM Global Services
© 2005 IBM Corporation85 04/17/23CRM Web Client : Part 1
Configuration Steps
Content Unit 5: UI Configuration Tool
UI Configuration – general Overview
IBM Global Services
© 2005 IBM Corporation86 04/17/23CRM Web Client : Part 1
Start BSP WD Component WorkbenchStart the UI configuration tool
Transaction “BSP_WD_CMPWB”
Choose a component Select a view Choose configuration to start
the UI configuration tool
IBM Global Services
© 2005 IBM Corporation87 04/17/23CRM Web Client : Part 1
Use different parameters to save your configuration
You can save your configuration using several parameters. If different configurations for one view have been saved you get an overview by pressing ‘Choose configuration’. With ‘Copy Configuration’ you can copy an existing configuration.
IBM Global Services
© 2005 IBM Corporation88 04/17/23CRM Web Client : Part 1
Configuration: SearchConfiguration
Add / remove Search parameter
Define displayed search criteria
Define default operator Define order of search criteria Change search parameter
name
IBM Global Services
© 2005 IBM Corporation89 04/17/23CRM Web Client : Part 1
Advanced Search configurationIn the Advanced Search Configuration you can add search parameters from the ‘Available Search Parameters’ set, remove parameters, move the parameters up and down, set them to displayed and set the Default Operator.
IBM Global Services
© 2005 IBM Corporation90 04/17/23CRM Web Client : Part 1
Simple ConfigurationYou can add / remove fields from the field set, enter captions, change labels, set field to mandatory and / or display only, move fields up and down and from the one side to the other
Select fields from the field set and
add them
IBM Global Services
© 2005 IBM Corporation91 04/17/23CRM Web Client : Part 1
Detailed Configuration: Overview
Menu options
Caption area
Context set
Grid area
Property view
The detailed page configuration is used to change the properties for each element in the configuration grid. Column, row, text label, input field width and other properties can be adjusted in the detailed page configuration. Note, that the changes you can make are based on the field type.
IBM Global Services
© 2005 IBM Corporation92 04/17/23CRM Web Client : Part 1
Overview pageIn the Overview Page Configuration you choose the Assignment Blocks from the set. You can move them up / down, change the title and define the load option. With load option ‘direct’ the blocks are loaded expanded, with ‘Lazy Load’, they aren’t get automatically expanded. The user can expand them.
IBM Global Services
© 2005 IBM Corporation93 04/17/23CRM Web Client : Part 1
Configuration: Work Center Page Configuration Add blocks from assignment
set Remove blocks from displayed
assignments Change the titles Move blocks from (up/down,
right/left) Define the use of the whole
width for a block
IBM Global Services
© 2005 IBM Corporation94 04/17/23CRM Web Client : Part 1
Table configurationIn the table configuration you can choose columns from the field. You can change the column title, define the column width, the horizontal alignment. You can set a column to mandatory, disable a column and enable personalization.
Define the number of visible rows and enable the scrollbar. If you mark this option,
the field is display only
IBM Global Services
© 2005 IBM Corporation96 04/17/23CRM Web Client : Part 1
Asynchronous JavaScript and XML (AJAX)
Use of AJAX AJAX = Asynchronous
JavaScript and XML AJAX is a technique that uses
a “XMLHttp Request” object to communicate asynchronously in a Web application and fetch XML packets of data
AJAX is used for table views, tree views, advanced search, and overview pages
IBM Global Services
© 2005 IBM Corporation98 04/17/23CRM Web Client : Part 1
Design Layer Customizing
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation99 04/17/23CRM Web Client : Part 1
Configuration Steps
Design Layer Customizing
Design Layer – general Overview
IBM Global Services
© 2005 IBM Corporation100 04/17/23CRM Web Client : Part 1
Design Layer: Overview
The UI-related settings are simple field settings which are likely to be changed by project team members and consultants.
Field visibility
Set a field to ‘Hidden’: Field isn‘t visible for the end user in the application
Set a field to ‚Field excluded from field set‘: Field isn‘t visible in the field set of the UI ConfigTool (This will be used especially by CoD to reduce the available fields in the field set).
Rename field labels
Value Help from Dictionary: Generic V- and P-Getter methods have been implemented, which define the value help (from DDIC: search help / value table / domain values) and field type (input field, checkbox, DDLB). Only if the flag is set, the new generic V- and P-Getter logic is use
The design layer links UI-related settings to a new, generic design object, which spans several views implementing the same business content.
IBM Global Services
© 2005 IBM Corporation101 04/17/23CRM Web Client : Part 1
Design Layer
The design layer links ‘UI related settings’ to a new, more general ‘design object’ which spans several views implementing the same ‘business content’.
The ‘UI related settings’ are simple field settings which are likely to be changed by customers and application developers:
Field visibility (‘hidden’)
Field labels
IBM Global Services
© 2005 IBM Corporation102 04/17/23CRM Web Client : Part 1
Design Layer Customizing
Two cases need to be distinguished Case 1: Design Layer customizing is delivered by SAP
Check SAP customizing in transaction BSP_DLC_SDESIGN Example: CM Copy names from SAP tables Create design object in customer tables with exactly the same names Path in IMG:
Customer relationship management > UI framework > UI framework definition > Maintain design layer
Advantage: Assignments to BOL context nodes / attributes delivered by SAP are automatically considered
Case 2: No SAP Design Layer customizing available Check SAP customizing in transaction BSP_DLC_SDESIGN Create design object in customer tables Path in IMG:
Customer relationship management > UI framework > UI framework definition > Maintain design layer
Assign your object to context nodes or attributes in BSP_WD_CMPWB
IBM Global Services
© 2005 IBM Corporation103 04/17/23CRM Web Client : Part 1
Configuration Steps
Design Layer Customizing
Design Layer – general Overview
IBM Global Services
© 2005 IBM Corporation104 04/17/23CRM Web Client : Part 1
Case 1: Design Layer Customizing (1) Configuration
Check BSP_DLC_SDESIGN Create Design object with the
same name Path in IMG:
Customer relationship management > UI framework > UI framework definition > Maintain design layer
(Customer table)
(SAP table)
IBM Global Services
© 2005 IBM Corporation105 04/17/23CRM Web Client : Part 1
Case 1: Design Layer Customizing (2) Configuration
Table: BSP_DLC_SDASSIGN Assignment is delivered by
SAP
IBM Global Services
© 2005 IBM Corporation106 04/17/23CRM Web Client : Part 1
Case 2: Design Layer Customizing (1)
Configuration Check BSP_DLC_SDESIGN Create Design object Path in IMG:
Customer relationship management > UI framework > UI framework definition > Maintain design layer
Object type / BOL object name are only used for filtering (to reduce the list attribute list) – later on you can assign this object to every object / attribute you want
Design Layer customizing can be used for form views, trees, tables and advanced searches
(SAP table)
(Customer table)
IBM Global Services
© 2005 IBM Corporation107 04/17/23CRM Web Client : Part 1
Case 2: Design Layer Customizing (2)
Configuration Transaction: BSP_WD_CMPWB Assign the Design object to a
context node or attribute
IBM Global Services
© 2005 IBM Corporation108 04/17/23CRM Web Client : Part 1
Case 2: Design Layer Customizing (3)
Result Assignment is saved in table
BSP_DLC_DASSIGN Assignment is valid for all
configurations of the view
IBM Global Services
© 2005 IBM Corporation109 04/17/23CRM Web Client : Part 1
Translation via Design Layer
Path in IMG:Customer relationship management > UI framework > UI framework definition > Maintain design layer
Utilities > Choose Language
Goto -> Translation
IBM Global Services
© 2005 IBM Corporation110 04/17/23CRM Web Client : Part 1
Assignment of the design layer to context nodes (1)
In the workbench (transaction BSP_WD_CMPWB) select a full context node or an individual context node attribute to assign the design object:
Right mouse click: Assign Design Layer
IBM Global Services
© 2005 IBM Corporation111 04/17/23CRM Web Client : Part 1
Assignment of the design layer to context nodes (2)
1. Use the buttons ‘New assignment’ and ‘Choose assignment’ to select the key fields for the design layer assignment.
2. Select a design object by expanding the corresponding object type and selecting the design object.
3. If used on attribute level, you may enter a BOL attribute name, if it differs from the context nodes attribute name.
4. Save your assignment.
IBM Global Services
© 2005 IBM Corporation112 04/17/23CRM Web Client : Part 1
EEWB
UI Concepts
Business Roles
Navigation Bar Customizing
How to use Transaction Launcher
Framework
UI Configuration Tool
Design Layer Customizing
EEWB
IBM Global Services
© 2005 IBM Corporation113 04/17/23CRM Web Client : Part 1
Main CRM Objects, that can be enhanced with EEW
Business Partner
Business Partner Relationships
Business Transactions
Marketing Planner
Grantor
Counter & Readings
CRM Case
Installed Base
Account Planning
…
IBM Global Services
© 2005 IBM Corporation114 04/17/23CRM Web Client : Part 1
Customer-Specific Fields: Overview
Add customer-specific fields Add new fields to the data dictionary (Easy Enhancement Workbench)
Use wizard for enhancements Choose a business object Define field name, data type, and field length Dictionary objects are generated automatically
Display customer-specific fields on the screen (UI configuration tool) Add fields from field set Position fields Change field labels/hide field labels Set fields to editable or display only Define whether a field should be mandatory All functions provided by the UI configuration tool for standard fields are also available for
customer-specific fields. Use Design Layer customizing to implement the following:
Drop-down list boxes Value help for your fields
Customer-specific fields can easily be added with the Easy Enhancement Workbench. You can use the UI configuration tool to configure these fields.
IBM Global Services
© 2005 IBM Corporation115 04/17/23CRM Web Client : Part 1
Enhancement process :Add new fields / add new tableAdd new fields with EEW
Fields are available in BOL (within the EEW-include of the corresponding object)
Fields are available in the field set of the UIConfig Tool (for the corresponding views)
Add new table with EEW(BP & Bus. Transaction)
New object / relations in BOL are generated
Create (manually) view in WebClient UI
Fields are available in the field set of the UIConfig Tool.
Position fields on the screen & set attributes with the UIConfig Tool
Position fields on the screen & set attributes with the UIConfig Tool
Tables/APIs are enhanced Tables/APIs are generated
IBM Global Services
© 2005 IBM Corporation116 04/17/23CRM Web Client : Part 1
Add Customer-Specific Fields (1)Configuration
Maintain system Landscape:IMG: Cross Application Components > General Application Functions > Easy Enhancement Workbench > Maintain System Landscape
Add customer-specific fields with the easy enhancement workbench
Transaction: EEWB
IBM Global Services
© 2005 IBM Corporation117 04/17/23CRM Web Client : Part 1
Add Customer-Specific Fields (2)Configuration
Business Partner / Grantor:For currency and quantity fields automatically additional fields with the data elements BUX_CUKY and BUX_UNIT are created
IBM Global Services
© 2005 IBM Corporation118 04/17/23CRM Web Client : Part 1
EEW Includes are available in the BOL objects
Example:
IBM Global Services
© 2005 IBM Corporation119 04/17/23CRM Web Client : Part 1
Make fields visible with the UIConfigTool
Configuration Transaction:
BSP_WD_CMPWB
Result:
IBM Global Services
© 2005 IBM Corporation121 04/17/23CRM Web Client : Part 1
Example: EEW for CRM BTX: CI structures The extensibility concept is based on Customizing Includes
For most of the sub objects (on item, header or set level) a customizing include is provided
A CI structure is a DDIC structure that extends data and programming model (data base tables, communication structures, UI structures) of sub objects
For example: Header Data Activity (ACTIVITY_H) CI_EEW_ACTIVITY_H
New fields are appended to relevant customizing includes The BOL automatically “integrates” fields from CI includes
-add new field ZZNewField
-to sub object ACTIVITY_H
Wizard
New append structure
ZZNewField
CI_EEW_ACTIVITY_H
ZZField1 ZZField2
Data Base
BOL