© Copyright 2014Wellesley Information Services, Inc.

All rights reserved.

SAP Web UI Enhancements using Advanced SAP Tools

Dhananjay KumarKnack Systems

2

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

3

What We’ll Cover

• Key Technical Architecture for setting up the integration of SAP CRM UI Enhancements

• Best practices for configuration as well as insight into the pre-requisites 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

4

• 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

Technical Architecture for setting up the integration of SAP CRM UI Enhancements

5

Web UI Framework Architecture

6

Web UI Runtime Architecture

7

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.

8

What happens when you enhance a Web UI Component

9

How your enhancement is called at the runtime

10

What We’ll Cover

• Key Technical Architecture for setting up the integration of SAP CRM UI Enhancements

• Best practices for configuration as well as insight into the pre-requisites 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

11

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

12

User Roles and Parameters

Role/Parameter Value Comments

CRM_UI_PROFILE * Will show all business roles on Web UI screen

WCF_IGNORE_ENHANCEMT A 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=Don’t 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 <Skin Name> The Web UI skin maintained against this parameter would be displayed for the given user

13

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.

14

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.

15

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.

16

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

17

Best Practices and Challenges

• How to identify issues in Custom and Standard Web UI Component

• Performance in Web UI• Best Practices and Tips

18

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.

19

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”

20

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

21

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”.

22

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

23

What We’ll Cover

• Key Technical Architecture for setting up the integration of SAP CRM UI Enhancements

• Best practices for configuration as well as insight into the pre-requisites 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

24

Different kinds of Enhancements in Web UI

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

25

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

26

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).

27

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

28

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).

29

Easy Enhancement Workbench (EEWB)

30

Business Add-Ins (BADIs)

• BADI’s 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

31

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

32

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

33

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

34

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

35

Comparison Matrix

Enhancement Technique

Best Scenario Wizard Based

Code Development

TCODE Ease of Use

UI Component

For enhancing Web UI component

Yes No BSP_WD_CMPWB

Medium

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: CRMV_FIELDCHECK

Easy

36

What We’ll Cover

• Key Technical Architecture for setting up the integration of SAP CRM UI Enhancements

• Best practices for configuration as well as insight into the pre-requisites 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

37

Client side technologies in CRM Web UI

• 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:

1. Smart Value Help

2. Drag and Drop Assignment Blocks• Using HTML5 technologies to create an intuitive UI• Demo

38

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

39

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

40

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.

41

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

  

42

Demo of Auto Complete and Voice enabled search integrated with SAP CRM

43

What We’ll Cover

• Key Technical Architecture for setting up the integration of SAP CRM UI Enhancements

• Best practices for configuration as well as insight into the pre-requisites 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

44

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 .

45

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+Fr

amework

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

46

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

47

Your Turn!

How to contact me:Dhananjay Kumar

Dhananjay.kumar@knacksystems.com@dhnanjay

48

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.

49

Sample Code for the Demo Application

Demo App.txt

50

Icon Collection