Download - IBM CRM Web UI -Part 1.ppt

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


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


New UI Concept – Screen Structure

IBM Global Services


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


Business Roles

UI Concepts

Business Roles

Navigation Bar Customizing

How to use Transaction Launcher

Framework


Design Layer Customizing

EEWB

IBM Global Services


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


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


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


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



UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


Navigation Bar

IBM Global Services


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


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


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


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


Navigation Bar Profile – Assigned Work Centers

.

.

.

IBM Global Services


Navigation Bar Profile - Assigned Direct Link Groups

IBM Global Services


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



UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


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


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


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


Preparation: Create BOR object type (2)

Configuration Set in the method EXECUTE

the flag ‚Synchronous‘

IBM Global Services


Preparation: Create BOR object type (3)Configuration

Generate the object

IBM Global Services


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


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



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



Configuration Choose Transaction Type =

BOR Transaction Choose the BOR Object type

you created Choose EXECUTE

IBM Global Services



Configuration ChooseParameter: Object Key Value: <transaction code>

IBM Global Services


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


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


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


Step 3: Result

Flag ‘stateful’ set in Transaction Launcher Flag ‘stateful’ not set

IBM Global Services


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


Step 1: Define URL in URL repository

Configuration Transaction: SM30 View: CRMV_IC_LTX_URL

IBM Global Services



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


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


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


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


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


Step 3a: Integrate the URL into your NavBar (3)Configuration


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


Step 3b: Integrate the URL into your NavBar (1)

Example 2: Integrate the URL in an existing Work Center

IBM Global Services


Step 3b: Integrate the URL into your NavBar (2)Configuration


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


Framework

UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


Framework Elements

Framework

General Overview Framework and Objects

IBM Global Services


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


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


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


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


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


Framework Elements

Framework

General Overview Framework and Objects

IBM Global Services


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


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


Technical Implementation of a View

Component Elements:

- *CTXT Model

- *htm View

- *IMPL Controller

IBM Global Services


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


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


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


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



UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


Configuration Steps


UI Configuration – general Overview

IBM Global Services


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


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




Role Customizing

Easy Enhancement Workbench

BSP Component Workbench



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


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


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


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


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


Configuration Steps

Content Unit 5: UI Configuration Tool

UI Configuration – general Overview

IBM Global Services


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


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


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


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


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


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


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


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


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


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



UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


Configuration Steps


Design Layer – general Overview

IBM Global Services


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


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



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:


Assign your object to context nodes or attributes in BSP_WD_CMPWB

IBM Global Services


Configuration Steps


Design Layer – general Overview

IBM Global Services


Case 1: Design Layer Customizing (1) Configuration

Check BSP_DLC_SDESIGN Create Design object with the

same name Path in IMG:


(Customer table)

(SAP table)

IBM Global Services


Case 1: Design Layer Customizing (2) Configuration

Table: BSP_DLC_SDASSIGN Assignment is delivered by

SAP

IBM Global Services


Case 2: Design Layer Customizing (1)

Configuration Check BSP_DLC_SDESIGN Create Design object Path in IMG:


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



Configuration Transaction: BSP_WD_CMPWB Assign the Design object to a

context node or attribute

IBM Global Services



Result Assignment is saved in table

BSP_DLC_DASSIGN Assignment is valid for all

configurations of the view

IBM Global Services


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


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


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


EEWB

UI Concepts

Business Roles



Framework



EEWB

IBM Global Services


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


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


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


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


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


EEW Includes are available in the BOL objects

Example:

IBM Global Services


Make fields visible with the UIConfigTool

Configuration Transaction:

BSP_WD_CMPWB

Result:

IBM Global Services


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

IBM Global Services


THANK YOU