Tutorials - Day 1

SAP CRM WebClient UI Tutorials

WebClient UI Overview

August 13, 2012

Web Client UI Development

P a g e | 2

Table of Contents

1 Business Roles and Navigation Bar Customizing ................................... 4

1.1 Create your own Business Role ................................................................... 4

1.1.1 Create your own business Role ..................................................................................... 4

1.1.2 Assign your created business role to organizational model .......................................... 5

1.1.3 Assign your user to the organizational model ............................................................... 7

1.1.4 Prepare your role for role-specific UI Configuration ..................................................... 8

1.1.5 Define UI Object Type .................................................................................................... 8

2 Business Roles and Navigation Bar Customizing ................................. 10

2.1 Create Navigation Bar Profile ................................................................... 10

2.1.1 Deactivate work centers .............................................................................................. 10

2.1.2 Add work center .......................................................................................................... 10

2.1.3 Change 2nd level navigation of navigation bar ........................................................... 12

2.1.4 Change direct links below navigation bar .................................................................... 13

3 Transaction Launcher ......................................................................... 16

3.1 Using Transaction Launcher ...................................................................... 16

3.1.1 Launch a URL ............................................................................................................... 16

3.1.2 Use transaction launcher wizard ................................................................................. 16

3.1.3 Integrate the URL into the Navigation Bar .................................................................. 17

3.1.4 Launch a SAP GUI Transaction ..................................................................................... 19

3.1.5 Define logical system and assign ITS URL .................................................................... 23

3.1.6 Use transaction launcher wizard ................................................................................. 24

3.1.7 Integrate the URL into the Navigation Bar .................................................................. 24

4 UI Configuration Tool and Design Layer Customizing .......................... 29

4.1 Using the UI Configuration Tool ................................................................ 29

4.1.1 Create Business Partner ............................................................................................... 29

4.1.2 Get information of technical objects of Web Client UI ................................................ 29

4.1.3 Read available technical information .......................................................................... 30

4.1.4 Change UI Configuration for Account ‘Search Page’ ................................................... 30

4.1.5 Change UI Configuration for Account ‘Result List’ ....................................................... 31

4.1.6 Change UI Configuration of ‘Overview Page’ of Account Details ................................ 33

4.1.7 Change UI Configuration of ‘Edit Form’ for Account Details ....................................... 34

4.2 Use Design Layer for Enhancement of existing objects for Reuse ............... 37

4.2.1 Use Design Layer for restricting use of certain fields in Configuration ....................... 37


P a g e | 3

4.2.2 Create Design Object ................................................................................................... 37

4.2.3 Assign new Designs to your Design Object .................................................................. 38

4.2.4 Assign your newly created Design Object to Context Nodes of regarding Views ....... 38


P a g e | 4

1 Business Roles and Navigation Bar Customizing

1.1 Create your own Business Role At the conclusion of this exercise, you will be able to:

Create your own Business Role.

Adjust interface setting within your Business Role.

Assign business roles to user.

1.1.1 Create your own business Role

Call transaction PFCG and copy profile SAP_CRM_UIU_SRV_PROFESSIONAL to Z0##_CRM_UIU_SRV_PROFESSIONAL.

Call transaction CRMC_UI_PROFILE and copy business role SERVICEPRO to Z0##_SRVPRO including all related objects and assign your created PFCG role.


P a g e | 5

1.1.2 Assign your created business role to organizational model

Call transaction PPOMA_CRM.

Search organizational unit by „Structure Search‟ and browse organization Operations until you get to Training and double-click on it.

Create a new position Z0##_SERVICE and save your changes.


P a g e | 6

Assign your created business role to the new position. Mark your position and select in the main menu Go To -> Detail object -> Enhanced object description.

On tab „Active‟ select „Business Role‟ and create a new infotype then enter your created business role Z0##_SRVPRO and save.


P a g e | 7

1.1.3 Assign your user to the organizational model

Call transaction PPOMA_CRM.

Search organizational unit by „Structure Search‟ and browse organization Operations until you get to Training and double-click on it.

Mark your position Z0##_SRVPRO and assign your user ID to this position.

On the popup select „Holder‟.

On the search help select tab „User by address data‟ and search for your own user ID.

Save your settings and re-launch the WebClient UI.

o Call transaction BSP_WD_CMPWB.

o Select CRM_UI_FRAME as component and press „Test‟ button to test your changes.


P a g e | 8

1.1.4 Prepare your role for role-specific UI Configuration

Go to Customizing to Define Role Configuration Key.

Create your own Role Configuration Key as Z0##_KEY.

Go to Customizing to Define Business Role. Assign the newly created Role Configuration Key to Business Role Z0##_SRVPRO.

1.1.5 Define UI Object Type

The concept of UI object types has been introduced to define UI objects independently of existing BOL objects. Object types coupled with object subtypes are be used to determine UI configuration.

Log-on to SAP GUI


P a g e | 9

Go to SPRO -> Customer Relationship Management -> UI Framework -> UI Framework Definition -> Define UI Object Types

Click New Entries and fill-in object type data (use below table as reference)

Field Name Field Value

Object Type ZBP_ACCOUNT

Description Test Business Partner Acct. View

Callback Class ZCL_BP_ACCT_OBJTYPE_CALLBACK

GenIL Component Name BP

BOL Object Name BuilHeader

BOR Object Type BUS1006

Save the new object type.

Now, create the callback class declared above (use below table as reference and ZTRAINING package).


Class ZCL_BP_ACCT_OBJTYPE_CALLBACK

Description Callback Class for Object Type ZBP_ACCOUNT

Instantiation Public

Class Type Usual ABAP Class

Final Tick

Add the interface IF_BSP_DLC_OBJ_TYPE_CALLBACK to this class.

Modify the method IF_BSP_DLC_OBJ_TYPE_CALLBACK~GET_OBJECT_SUB_TYPES of this class to add at least 3 object subtypes.

Save and activate the class and the method.


P a g e | 10

2 Business Roles and Navigation Bar Customizing

2.1 Create Navigation Bar Profile At the conclusion of this exercise, you will be able to:

Change the first and second level navigation of the navigation bar.

Change direct links below navigation bar and direct links on work center pages.

2.1.1 Deactivate work centers

Call transaction CRMC_UI_PROFILE.

Select business role Z0##_SRVPRO and double-click on „Adjust Work Centers‟ at the dialog structure on the left.

Set work center pages for email and calendar to inactive.




2.1.2 Add work center

Call transaction CRMC_UI_NBLINKS

Make sure that „Define Navigation Bar Profiles‟ is selected on the left.

Copy NavBar Profile SRV-PRO to Z0##SRV-PRO including all related objects and change the

description to „0## Service Professional‟ and save your changes. Press the skip button if you get an error message.


P a g e | 11

Select „Define Work Centers‟ on the left by double-click.

Copy work center SRV-BILL to Z0##-BILL, change the logical link ID to SRV-REP-WC and title and description to „@## Billing Requests‟. Save your changes.

Select „Define Navigation Bar Profiles‟ on the left by double-click.

Mark NavBar Profile Z0##SRV-PRO and double-click on „Assign Work Centers to Navigation Bar Profile‟ on the left and add your work center Z0##-BILL with position 110. Save your changes.


P a g e | 12


Find the business role Z0##_SRVPRO, change the NavBar Profile to Z0##SRV-PRO and save your changes.

Call transactions PFCG and CRMC_UI_PROFILE and check if the new work center is active for your business role.




2.1.3 Change 2nd level navigation of navigation bar



P a g e | 13

Select business role Z0##_SRVPRO and double-click on „Adjust Work Center Group Links‟ at the dialog structure on the left.

Find WorkCenter ID SRV-CONTR and Group ID SRV-CTR-SR.

o Remove Service Plan Simulation (SRV-FCA-SR) from the menu by deactivating the checkbox of column „In menu‟.

o Add Mass Change Processes (SRV-MCL-SR) to the menu by ticking the checkbox of column „In menu‟.




2.1.4 Change direct links below navigation bar

Call transaction CRMC_UI_NBLINKS.

Select „Define Direct Link Groups‟ on the left by double-click.

Copy entry SRV-CREATE to Z0##_SRVCR including all related objects and change the description to „0## Service Quick Create Links‟.


P a g e | 14

Remove direct link „Email‟ from the direct link group. Select „Assign Links to Direct Link Group‟ on the left (below „Define Direct Link Groups) by double-click and delete SLS-MAI-CR.

Add a new entry for „Service Agreement‟ (SRV-SAG-CR) at position 100. Save your changes.

Select „Define Navigation Bar Profiles‟ on the left by double-click.

Mark the NavBar Profile Z0##SRV-PRO and double-click on „Assign Direct Link Groups to Nav. Bar Profile‟ at the structure dialog on the left.

Add new entry for your direct link group Z0##_SRVCR at position 100 and then remove the direct link group SRV-CREATE.


P a g e | 15

Execute Transaction CRMC_UI_PROFILE.

Select business role Z0##SRVPRO and double-click on „Adjust Direct Links‟ at the dialog structure on the left.

Activate checkboxes of column „Visible‟ and make sure to activate SRV-SAG-CR to see the difference.





P a g e | 16

3 Transaction Launcher

3.1 Using Transaction Launcher At the conclusion of this exercise, you will be able to:

Call an URL by using the transaction launcher

Call a SAP GUI transaction by using the transaction launcher

3.1.1 Launch a URL

Call transaction SM30 and maintain view CRMV_IC_LTX_URL to define URL in the URL Repository:


URL ID Z0##GOOGLE

Description 0## Google

Request Method Get

Non-BSP URL Choose

URL http://www.google.com

Save your entries.

3.1.2 Use transaction launcher wizard

Call transaction CRMC_UI_ACTIONWZ.

Enter Z0##GOOGLE as Launch Trans. ID. Select ALL as Component Set. Press „Continue‟.

Enter „@## Google‟ as Description and a Class Name ZCL_@##GOOGLE. Activate checkbox for New Window. Be sure that the checkbox „Raise Veto‟ is deactivated. Press „Continue‟.

Choose URL Transaction (B) as Transaction Type and enter the URL ID Z0##GOOGLE you have created in the URL repository. Press „Continue‟.


P a g e | 17

Skip screen for Transaction Parameters and Activity Clipboard by pressing „Continue‟.

End the wizard by pressing „Complete‟.

3.1.3 Integrate the URL into the Navigation Bar


Select „Define Logical Links‟ at the dialog structure on the left by double-click.

Create a new logical link:


Logical Link ID Z0##GOOGLE

Type C – Launch Transaction

Target ID EXECLTX

Parameter Z0##GOOGLE

Parameter Class CL_CRM_UI_LTX_NAVBAR_PARAM

Title 0## Google

Description 0## Google

Save your changes.

Select „Define Direct Link Groups‟ at the dialog structure on the left by double-click.

Create a new entry with Group ID Z0##GOOGLE and Description „0## Google‟. Leave everything else empty.

Select „Assign Links to Direct Link Group‟ at the dialog structure on the left by double-click.

Create a new entry for Loglink ID Z0##GOOGLE at Position 10 and save you changes.


P a g e | 18

Select „Define Navigation Bar Profile‟ at the dialog structure on the left by double-click and select profile Z0##SRV-PRO.

Select „Assign Direct Link Groups to Nav. Bar Profile‟ at the dialog structure on the left by double-click and create a new entry for group ID Z0##GOOGLE at position 150 and save your changes.

Call transaction CRMC_UI_PROFILE. Select business role Z0##SRVPRO and select „Adjust Direct Link Groups‟ at the dialog structure on the left by double-click.

Activate your new group ID Z0##GOOGLE in column „Visible‟.


P a g e | 19

Select „Adjust Direct Links‟ at the dialog structure on the left by double-click.

Activate Loglink ID ZJVBGOOGLE in column „Visible‟.




3.1.4 Launch a SAP GUI Transaction

Call transaction SE80 for the workbench editor to create BOR type.

Go to main menu path: Workbench -> Edit Object.

Select tab „Business Engineering‟ for object selection. Copy the Business Object Type TSTC to the following (this requires transport request – do not save locally):


P a g e | 20


Object Type Z0##TSTC

Program Z0##RSOWTSTC

Object name Z0##Transaction

Switch to Repository Information System, browse Business Engineering -> Business Object Browser and search for the business object type Z0##TSTC.


P a g e | 21

Select the Object Type then switch to EDIT mode.

Edit the method Z0##Transaction.Execute by double-click. Set the „Synchronus‟ flag. Save your changes.


P a g e | 22

Implement the object by following the path Edit -> Change Release Status -> Object Type -> To implemented.

Generate the object by following the path Object Type -> Generate.


P a g e | 23

Release the object by following the path Edit -> Change Release Status -> Object Type -> To released.

3.1.5 Define logical system and assign ITS URL

Call transaction CRMS_IC_CROSS_SYS and check entry ERSCLNT500. URL for ITS template looks like below:

http://<hostname>:<port>/sap/bc/gui/sap/its/webgui/!?~transaction=IC_LTXE&~okcode=ICEXECUTE&sap-client=500


P a g e | 24

3.1.6 Use transaction launcher wizard

Call transaction CRMC_UI_ACTIONWZ.

Enter Z0##VL01N as Launch Trans. ID. Select ALL as Component Set. Press „Continue‟.

Enter „0## Create Delivery‟ as Description and a Class Name ZCL_0##VL01N. Be sure that the checkboxes for „New Window‟ and „Raise Veto‟ are deactivated. Press „Continue‟.

Choose A – BOR Transaction as transaction type and enter the following:


Logical System ERSCLNT500

BOR Object Type Z0##TSTC

Method Name EXECUTE

Choose Object Key as Parameter from the F4-help and enter VL01N as Value.

Skip screen for Activity Clipboard by pressing „Continue‟.

End wizard by pressing „Complete‟.

3.1.7 Integrate the URL into the Navigation Bar


Select „Define Logical Links‟ at the dialog structure on the left by double-click.

Create a new logical link with the following data:


Logical Link ID Z0##VL01N

Type C – Launch Transaction

Target ID EXECLTX

Parameter Z0##VL01N


P a g e | 25


Parameter Class CL_CRM_UI_LTX_NAVBAR_PARAM

Title 0## Create Delivery

Description 0## Create Delivery

Save your changes.

Select „Define Work Center Link Groups‟ at the dialog structure on the left by double-click.

Create a new entry with Group ID Z0##VL01N, Group Type AA Create and Title and Description „0## R3 Create Transaction‟. Leave everything else empty.

Select „Assign Links to Work Center Link Group‟ at the dialog structure on the left by double-click.


P a g e | 26

Create a new entry for logical link ID Z0##VL01N at position 10 and save your changes.

Select „Define Work Centers‟ at the dialog structure on the left by double-click.

Create a new entry with Work Center ID ZVL01N, Title and Description „ECC Transaction‟.

Save your changes.

Select „Assign Work Center Link Groups to Work Center‟ at the dialog structure on the left by double-click.

Create a new entry for Group ID Z0##VL01N at position 10 and save your changes.


P a g e | 27

Select „Define Navigation Bar Profile‟ at the dialog structure on the left by double-click and select profile Z0##SRV-PRO.

Select „Assign Work Centers to Navigation Bar Profile‟ at the dialog structure on the left by double-click and create a new entry for group ID Z0##VL01N at position 110. Save you changes.

Call transaction CRMC_UI_PROFILE and select business role Z0##_SRVPRO and select „Adjust Work Center‟ at the dialog structure on the left by double-click.

Check your Work Center Z0##VL01N column „Inactive‟ is deactivated.


P a g e | 28

Select „Adjust Work Center Group Links‟ at the dialog structure on the left by double-click.

Activate your Work Center ID Z0##VL01N in column „Visible‟.





P a g e | 29

4 UI Configuration Tool and Design Layer Customizing

4.1 Using the UI Configuration Tool At the conclusion of this exercise, you will be able to:

Handle new UI Configuration Tool for WebClient UI

Enhance existing Components with new fields

Know the differences of how to customize Search, Overview and WorkCenter Pages

4.1.1 Create Business Partner

Each attendee must have his own business partner which will be used in the succeeding exercises.

Go to Web Client UI.

Select Z0##_SRVPRO from the list of business roles.

Select Accounts & Products -> Accounts from the navigation bar.

Click Individual Account and fill-in your own account data.

Save your own account and take note of your business partner number.

4.1.2 Get information of technical objects of Web Client UI

Go to WebClient UI

Select Z0##_SRVPRO from the list of business roles

Select Accounts & Products -> Accounts from the navigation bar

Search for your newly created business.

Navigate to the details of this business partner.

Q: How to get technical information of the current Component and View?

A: Place you cursor in an input field and press F2 Key


P a g e | 30

4.1.3 Read available technical information

While in EDIT mode, place your cursor in field „Last Name‟. Get technical information displayed.

Q: Which Component is used?

Q: Which View is used?

Q: Which Context Node is used?

Q: Which Attribute is used?

4.1.4 Change UI Configuration for Account ‘Search Page’

Go to WebClient UI and gather the technical object information of Accounts

Select within Search Criteria a field and press F2 Button to retrieve technical information.


P a g e | 31

Log-on to SAP GUI

Call transaction BSP_WD_CMPWB (Component Workbench).

Use technical information gathered above to call right Component in Component Workbench.

Select Component BP_HEAD_SEARCH.

Use technical information gathered to find the right View.

Select View MainSearch

Go to Configuration tab of this View.

Copy current standard Configuration to your own Role Config. Key. Make sure to refer to the technical information gathered.

Select additional fields from the Available Search Criteria and send them to the Selected Search Criteria.

Change sequence of fields. Change assignment of fields, which criteria should be available by default.

Save your settings with your own Role Config. Key.

Re-launch WebClient UI and test your new settings.

4.1.5 Change UI Configuration for Account ‘Result List’

Go to WebClient UI and gather the technical object information of Accounts.

Search for your own business partner.

Select within Result List a row and press F2 Button to retrieve technical information.


P a g e | 32

Log-on to SAP GUI



Select Component BP_HEAD_SEARCH.


Select View MainSearchResult.


Copy standard configuration to your own Role Config. Key. Make sure to refer to the technical information gathered.

Make any changes to field selection for result list. Change field orders, add new fields or remove fields



P a g e | 33


4.1.6 Change UI Configuration of ‘Overview Page’ of Account Details




Select within Account Details AB the Last Name and press F2 Button to retrieve technical information.

Log-on to SAP GUI




P a g e | 34

Select Component BP_HEAD.


Select View BPHEADOverview.


Copy standard Configuration to your own Role Config. Key. Make sure to refer to the technical information gathered.

Remove some of the current Assignment Blocks and add new Assignment Blocks. Change Load Options for Assignment Blocks. Change order of Assignment Blocks.



4.1.7 Change UI Configuration of ‘Edit Form’ for Account Details




While in EDIT mode, place your cursor in field „Last Name‟. Get technical information displayed.


P a g e | 35

Log-on to SAP GUI



Select Component BP_HEAD.


Select View AccountDetails.


Copy standard Configuration to your own Role Config. Key. Use the custom Object Type ZBP_ACCOUNT and choose an appropriate Object Subtype. Make sure to refer to the technical information gathered.

Change settings for field „Title‟, make this field as Mandatory. Click „Apply‟.



P a g e | 36

Change settings for field „Date of Birth, make this field as Mandatory. Change Label of field „Date of Birth‟ to „Birthday‟. Click „Apply‟.


Add caption „Status‟. Add the new field „Bill Block Reason‟, make this field as Display Only. Click „Apply‟.



P a g e | 37


4.2 Use Design Layer for Enhancement of existing objects for Reuse

At the conclusion of this exercise, you will be able to:

Use Design Layer Maintenance in Customizing.

Know how to use Design Objects in several Views.

4.2.1 Use Design Layer for restricting use of certain fields in Configuration

Via Design Layer Customizing you can declare that several fields should not be available for selection in Configuration.

Use Design Layer to restrict usage of fields „Created At‟ and „Created By‟.

Go to Customizing CRM -> UI Framework -> UI Framework Definition -> Design Layers -> Define Design Objects.

4.2.2 Create Design Object

Select Object Type „BP_ACCOUNT‟.

Select Design Objects on left hand side list then select new entries.

Create an entry for field corresponding BOL Object:


Name ZBP_DESIGNOBJ_0##

Description Design Object 0## for BP

BOL Object Name BuilHeader

Save your entry.


P a g e | 38

4.2.3 Assign new Designs to your Design Object

Select your newly created Design Object and select Design on left hand side list then select new entries.

Select attribute „CREATIONUSER‟ of BuilHeader.

Select Radio Button „Field exclude from Field Set‟.

Repeat this step as well as for field „CREATIONTIME‟.

Save your settings.

4.2.4 Assign your newly created Design Object to Context Nodes of regarding Views

Launch Component Workbench with Component BP_HEAD.

Select View CorpDetailsEF. Stay on tab „Structure‟.

Open up Treenodes Context Context Nodes.

Right click BUILHEADER and select “Assignment to Design Layer”.


P a g e | 39

Select proper Object Type and assign your Design Object.


P a g e | 40

Save your settings.

Compare Configuration of both Views IndDetailsOV and IndAccountNewEF with View without Design Object Assignment.

Q: Are you able to find either field „Created by‟ or „Created at‟ at attributes of BuilHeader‟s Item Set?

A: No.

Date post:	18-Apr-2015
Category:	Documents
Upload:	hplee35
View:	126 times
Download:	1 times

Tutorials - Day 1

Documents