SAP Web UI

Enhancements using
Advanced SAP Tools

Dhananjay Kumar
Knack Systems
Copyright 2014
Wellesley Information Services, Inc.
All rights reserved.

In This Session

Learn how to leverage CRM UI Enhancements to manage your

business processes and increase flexibility of business users and
business analysts. Explore the importance of UI Enhancements
and learn how to recognize different types of enhancements

What Well Cover

Key Technical Architecture for setting up the integration of SAP

CRM UI Enhancements
Best practices for configuration as well as insight into the prerequisites and common challenges
Understand what kind of enhancements are best suited for
different scenarios
Leverage HTML5 and other client side technologies with SAP CRM
Web UI
Wrap-up

Technical Architecture for setting up the integration

of SAP CRM UI Enhancements

Web UI Framework Architecture

Web UI runtime Architecture
What happens when you enhance a Web UI Component
How your enhancement is called at the runtime

Web UI Framework Architecture

Web UI Runtime Architecture

Web UI Runtime Architecture

Web UI as an application consist of many distinct loosely coupled

Web UI Components
Each Component is technically a BSP application
A parent component CRM_UI_FRAME is invoked at the runtime
which is responsible for calling the other Web UI components
Web UI application can be invoked using tcode: CRM_UI. The
above transaction calls BSP application CRM_UI_START which is
responsible for initiating Web UI.

What happens when you enhance a Web UI

Component

How your enhancement is called at the runtime

What Well Cover

Key Technical Architecture for setting up the integration of SAP

CRM UI Enhancements
Best practices for configuration as well as insight into the prerequisites and common challenges
Understand what kind of enhancements are best suited for
different scenarios
Leverage HTML5 and other client side technologies with SAP CRM
Web UI
Wrap-up

10

Best practices for configuration as well as insight

into the pre-requisites and common challenges

User Roles and Parameters

User Role and Parameters used for Web UI development

Enhancement Set
Enhancement Set Configuration

Best Practices and Challenges

How to differentiate and identify issue in Custom and Standard
Component
Performance in Web UI

11

User Roles and Parameters

Role/Parameter

Value

Comments

CRM_UI_PROFILE

Will show all business roles on Web UI

screen

WCF_IGNORE_ENHANCEMT

Will ignore the Custom enhancement in CRM

Web UI. Optional parameter used for testing
and analyzing issues.

SAP_CRM_UIU_FRAMEWORK

Each user using the CRM Web UI must have

the PFCG Role
SAP_CRM_UIU_FRAMEWORK assigned (or
at least the authorization contained in this
role) The missing authorization may lead to
short dumps when starting CRM Web UI

BSPWD_SHOW_NOT_BOUND N

Y=Show, N=Dont Show, The empty input

boxes which are not bound will not show text
Not Bound if this parameter is set to N

CRM_THTMLB_SKIN

The Web UI skin maintained against this

parameter would be displayed for the given
user

<Skin Name>

12

Enhancement Set

Web UI framework comes with a concept called Enhancement Set

which enables developer to modify the standard Web UI
component by creating a corresponding BSP application which is
stored against a valid Enhancement Set.
An enhancement set contains the enhancement definition that
shows the assigned BSP application and the assigned runtime
repository.
Multiple Enhancement Sets can be created in the CRM system, but
for a given client only one enhancement set can be active.

13

Enhancement Set Configuration

Enhancement Set can be defined in tcode: SM34, inside view

cluster BSPWDVC_CMP_EXT.
You only need to enter a name and a description, because the
definition is automatically filled later when you create
enhancements in the BSP Component Workbench.

14

Enhancement Set Assignment

After defining Enhancement Set, the developer needs to assign it

to a particular client in the CRM system.
To assign an enhancement set to a client, use transaction SM30.
Open table BSPWDV_EHSET_ASG to make the necessary
assignment.

15

Enhancement Set Assignment

For a given client, only one active Enhancement Set can be

created but this can be overcome by using BAdI
COMPONENT_LOADING and the DEFAULT implementation. This
implementation uses the customizing entries
from BSPWD_EHSET_ASGN to determine the enhancement based
on a client. You can also use this BAdI to implement other
determination rules for an enhancement set

16

Best Practices and Challenges

How to identify issues in Custom and Standard Web UI

Component
Performance in Web UI
Best Practices and Tips

17

How to identify issues in Custom and Standard

Components

To identify issues between Custom and Standard Component, we

can employ any of the following techniques:
Create implementation of BADI COMPONENT_LOADING and in method :
IF_BSP_WD_CMP_LOADING_BADI~GET_ACTIVE_ENHANCEMENT_SET implement
your logic.
Set user parameter WCF_IGNORE_ENHANCEMT = A in tcode SU01. This
will switch off all the customer enhancements in CRM Web UI
Debugging method CONSTRUCTOR in class
CL_BSP_WD_COMPONENT_DESCRIPTOR. This method is responsible for
determining the enhancement of a component which needs to be
displayed on Web UI and hence it can be utilized by the developers
by manipulating Enhancement Set values in the debugger.
18

Performance in Web UI

If features such as column width adjusting, drag and drop

assignment blocks, and mouseover effects are not desired or
preferred over performance than these can be disabled in order to
achieve better UI performance. The setting is found under
Personalize>Personalize Layout>Performance Settings> Enable
fast Performance mode with fewer UI features = check in Web UI

Set the flag "Disable Browser Back Support" to lower the number of
round trips from the client to the server for every screen change.
This is especially useful in high latency network environments. This
setting can be found in the configuration (tcode:SPRO) under
CRM>UI Framework>Technical Role Definition>Define Technical
Profile
19

Performance in Web UI

The performance of all CRM processes like Create Service Order

is directly related to the number of assignment blocks set as
"Display Expanded therefore it is recommend to set the "Display
Expanded" flag for only those assignment blocks that have a
business requirement to be displayed open with every interaction.

It is recommended to enable caching in the browser setting. For

internet explorer these settings can be found under Tools>Internet
Options>General>Temporary Internet Files>Settings

20

Best Practices and Tips

While enhancing a component, metadata file (Repository.xml) gets

copied to the target BSP Application. The developer should avoid
editing Repository.xml file directly and should use Report
BSP_WD_RT_REP_COMPARE to compare the standard and
enhanced Repository.xml
Changing the operators in advance search (dynamic query), can
be handled in customizing CRM> CRM Cross Application
Component>Generic Interaction Layer>Component Specific
Setting>Define Operators for Dynamic Queries
Newly created OTRs (in tcode SE63) sometimes are not visible on
Web UI. This can be resolved by browser side and server side
cache. Server Side cache can be cleared by executing /$OTR.
21

Best Practices and Tips

Sometimes fields available in Business Objects in UI

Configuration tools are not visible. This can be resolved by
Deactivating hiding of fields in Design Layer: CRM> UI
Framework>UI Framework Definition>Design Layer>Deactivate
Hiding of Fields
Business Data Context (BDC) is an important and widely use
mechanism for storing important information (like confirmed
partner, Equipment etc ) in ICWC. Its parameters are defined in
customizing : CRM > UI Framework > Technical Role Definition >
Define Global Data Context Parameters

22

What Well Cover

Key Technical Architecture for setting up the integration of SAP

CRM UI Enhancements
Best practices for configuration as well as insight into the prerequisites and common challenges
Understand what kind of enhancements are best suited for
different scenarios
Leverage HTML5 and other client side technologies with SAP CRM
Web UI
Wrap-up

23

Different kinds of Enhancements in Web UI

UI Component Enhancement
AET
EEWB
BADIs
Implicit Enhancement
Field Check
Comparison Matrix

24

UI Component Enhancement

As the name suggest, UI component enhancement is primarily

used to modify the behavior of Web UI.
The modification done through this enhancement are only
reflected at UI level.
Enhancement Set concept is used to enhance UI component
Main advantages of using this enhancement is to leverage the
existing code base thus reducing the development effort
The enhancement which primarily consist of running a wizard as
such do not require any coding effort.
GUI based tool, tcode:BSP_WD_CMPWB

25

Application Enhancement Tool (AET)

Application Enhancement Tool is a browser based tool for the

enhancement of Web UI application.

The modification done through this tool is generally implemented

at the front end as well as at the database level.

AET is a wizard based tool and hence require little to no coding

effort

The tool is integrated in the Web UI application itself and hence

does not require SAP GUI access (and no tcode).
26

Application Enhancement Tool (AET)

Generally used for adding fields on Web UI which are not available
in the existing Business Objects
Can be used for UI Configuration as well.

Development Package needs to be defined before using AET. This

is one time activity. Use tcode: AXTSYS or follow the following
customizing path: SPRO>CRM>UI Framework>UI Fr Def>AET>Define sys
settings

In Web UI, the developer needs to enable Configuration Mode via

Personalize>Personalize Settings>Enable Config. Mode
27

Easy Enhancement Workbench (EEWB)

EEWB is used to enhance standard structures in SAP CRM

application.
Supports both field and table extension.
Is a SAP GUI based tool accessed through tcode EEWB
The field added through EEWB is available in both SAP GUI (in
tcode CRMD_ORDER) and Web UI, although not as easily as field
added through AET.
Requires good understanding of Business Process and Business
Object Layer Structures.
Generally use for adding fields on UI (both SAP GUI in
CRMD_ORDER and Web UI).
28

Easy Enhancement Workbench (EEWB)

29

Business Add-Ins (BADIs)

BADIs are enhancement vacancies present in standard code and

are used for implementing customer logic.
Based on Object Oriented ABAP
Each BADI consist of
- BADI definition
- BADI class that implements the interface
Requires deep level of technical knowledge
Business Logic dependent on the parameters available inside the
method of the BADI

30

Implicit Enhancement

In a standard object, BADIs can only be utilized if they are

available in the code. If not then the developer can use another
enhancement technique called Implicit Enhancement
An implicit enhancement is a source code plug-in point provided
in ABAP where the developer can incorporate his/her own custom
logic.
Unlike BADIs, implicit enhancement points are usually provided
and exist for almost all SAP objects. Implicit enhancements are
usually hidden and need to be specified by a user to make them
visible.
Implicit enhancement points are mostly provided: At the
beginning and end of of the source code of a program
31

Implicit Enhancement

In order to make implicit enhancement options visible to the user,

the following path has to be followed in the SAP ABAP editor Edit
-> Enhancement Operations -> Show implicit Enhancement Options Enhancing

Requires deep level of technical knowledge.

Suitable for implementing custom logic where relevant BADI is
not present.

To find existing Implicit Enhancements implemented in the system

, the user can go to tcode se80>Edit Objects>Enhancement>Enhancement
Implementation>F4>Technology = HOOK_IMPL
32

Field Check Function Modules

For simple enabling and disabling of fields on Web UI (and

CRMD_ORDER). The developer can employ another technique
called Field Check FMs.
The developer can write logic inside a Function Module for a
particular Sales/Service related business object and then can
register his/her FM in view CRMV_FIELDCHECK in tcode SM30

33

Field Check Function Modules

Just like BADIs, field check FM work at the back end and hence
once registered, gets executed from GUI as well as Web UI.
Less development objects are created when compared to
enhancement through UI Web component .
Requires good level of technical knowledge

34

Comparison Matrix
Enhanceme
nt
Technique

Best Scenario

Wizard
Based

Code
Development

UI
Component

For enhancing Web UI

component

Yes

No

AET

For adding fields on both

Web UI & database

Yes

No

Browser
Based Tool

Easy

EEWB

For adding fields/table on Web

UI/ CRMD_ORDER & database

Yes

No

EEWB

Expert

BADIs

For writing logic in

vacancies provided in
standard code

No

Yes

SE18/SE19

Medium

Implicit

Useful where BADI

cannot be implemented

No

Yes

SE80

Expert

Field Check Enabling/disabling of UI

fields without enhancing
the UI Component

No

Yes

SM30, view:

Easy

TCODE

Ease of Use
Medium

BSP_WD_C
MPWB

CRMV_FIELDCHECK

35

What Well Cover

Key Technical Architecture for setting up the integration of SAP

CRM UI Enhancements
Best practices for configuration as well as insight into the prerequisites and common challenges
Understand what kind of enhancements are best suited for
different scenarios
Leverage HTML5 and other client side technologies with SAP CRM
Web UI
Wrap-up

36

Client side technologies in CRM Web UI

1.
2.

CRM Web UI is based on BSP technology which leverages on

many Client side technologies such HTML5, AJAX, JavaScript
Some of the inbuilt functions which uses these modern web
technologies are:
Smart Value Help
Drag and Drop Assignment Blocks
Using HTML5 technologies to create an intuitive UI
Demo

37

Smart Value Help (SVH)

As the name suggest SVH is the auto complete functionality of

SAP CRM Web UI
SVH can be enabled for input fields with value help on Web UI
The last typed entries are displayed in the drop-down list box
above a dotted-line separator followed by the rest of the matching
results

38

Smart Value Help (SVH)

To enable SVH following configuration needs to be maintained in

tcode SPRO:
SAP IMG > CRM > UI Framework > Technical Role Definition >
Define Parameters
Ensure that in the parameter profile which is assigned to your
business role, the parameter SVH_DISABLED has not been set.

Apart from the configuration, ensure that the SICF service

CRM_CALLBACK is active
39

Drag and Drop

Drag and Drop is one of the salient feature of CRM Web UI.
The Assignment Block in Web UI can easily be realigned as per
user comfort by just dragging and dropping at the place of his/her
choice within Web UI (overview page).
Other than Assignment Block, Drag and Drop functionality has
been incorporated in Calendar and Resource Planning Application
Allocation (RPA) in Web UI.

40

Client side technologies in CRM Web UI

CRM Web UI front end is based on a technology called Business

Server Pages (BSP).
BSP Views (.htm pages) consist of Tag libraries which are
consolidated functions of HTML, JavaScript and CSS files
The SE80 editor can be used for writing native HTML5/JavaScript
Web Applications.
Using BSP directives, you can mix n match ABAP with JavaScript
and JQuery

41

Demo of Auto Complete and Voice enabled search

integrated with SAP CRM

42

What Well Cover

Key Technical Architecture for setting up the integration of SAP

CRM UI Enhancements
Best practices for configuration as well as insight into the prerequisites and common challenges
Understand what kind of enhancements are best suited for
different scenarios
Leverage HTML5 and other client side technologies with SAP CRM
Web UI
Wrap-up

43

Wrap Up
The

Web UI Application is a mature yet flexible enough to

accommodate wide range of modifications. As a framework, it
provides enough tools to perform different kind if enhancements in
the most modularized and seamless manner.
With different options available it sometimes becomes challenging
for a developer to choose the correct tool and thus it becomes very
important to have a sound understanding of different techniques so
that best tools can be employed to build a robust competent
solution.
And lastly, Web UI application strictly adheres to the underlying
Web UI framework and yet is open enough to be easily integrated
with other Web Technologies .
44

Where to Find More Information

www. crmexpertonline.com/article.cfm?id=4794
Web 2.0 features in SAP CRM Web UI
1162685 - SAP CRM Webclient Performance

http://wiki.scn.sap.com/wiki/display/CRM/CRM+Web+Client+UI+F
ramework

http://wiki.scn.sap.com/wiki/display/CRM/Performance+Tips+and+
Tricks

45

7 Key Points to Take Home

Understood the Runtime Architecture of CRM Web UI

Pre Requisite and useful roles and user parameters required for
Web UI development
Understood the concept of Enhancement Set including relevant
Configuration and Assignment
Issue identification between Standard and Custom Components
Performance Optimization and Best practices
Useful Enhancement Methodologies and matrix to decide suitable
enhancement techniques
HTML5 and other client side technology in combination with Web
UI
46

Your Turn!

How to contact me:

Dhananjay Kumar
Dhananjay.kumar@knacksystems.com
@dhnanjay

47

Disclaimer
SAP, R/3, mySAP, mySAP.com, SAP NetWeaver, Duet, PartnerEdge, and other SAP products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names
mentioned are the trademarks of their respective companies. Wellesley Information Services is neither owned nor controlled by SAP.

48

Sample Code for the Demo Application

Demo App.txt

49

Icon Collection

50