SAP CRM WebClient UI Tutorials

WebClient UI Overview
August 13, 2012

Web Client UI Development

Table of Contents
1 Business Roles and Navigation Bar Customizing ................................... 4
1.1 Create your own Business Role ................................................................... 4
1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 Create your own business Role ..................................................................................... 4 Assign your created business role to organizational model .......................................... 5 Assign your user to the organizational model ............................................................... 7 Prepare your role for role-specific UI Configuration ..................................................... 8 Define UI Object Type .................................................................................................... 8

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

2.1 Create Navigation Bar Profile ................................................................... 10
2.1.1 2.1.2 2.1.3 2.1.4 Deactivate work centers .............................................................................................. 10 Add work center .......................................................................................................... 10 Change 2nd level navigation of navigation bar ........................................................... 12 Change direct links below navigation bar .................................................................... 13

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

3.1 Using Transaction Launcher ...................................................................... 16
3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 Launch a URL ............................................................................................................... 16 Use transaction launcher wizard ................................................................................. 16 Integrate the URL into the Navigation Bar .................................................................. 17 Launch a SAP GUI Transaction ..................................................................................... 19 Define logical system and assign ITS URL .................................................................... 23 Use transaction launcher wizard ................................................................................. 24 Integrate the URL into the Navigation Bar .................................................................. 24

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

4.1 Using the UI Configuration Tool ................................................................ 29
4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 Create Business Partner ............................................................................................... 29 Get information of technical objects of Web Client UI ................................................ 29 Read available technical information .......................................................................... 30 Change UI Configuration for Account Search Page ................................................... 30 Change UI Configuration for Account Result List ....................................................... 31 Change UI Configuration of Overview Page of Account Details ................................ 33 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

Page | 2

Web Client UI Development

4.2.2 4.2.3 4.2.4 Create Design Object ................................................................................................... 37 Assign new Designs to your Design Object .................................................................. 38 Assign your newly created Design Object to Context Nodes of regarding Views ....... 38

Page | 3

Web Client UI Development

1
1.1

Business Roles and Navigation Bar Customizing

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

profile SAP_CRM_UIU_SRV_PROFESSIONAL to

Call transaction PFCG and copy 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.

Page | 4

Web Client UI Development

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.

Page | 5

Web Client UI Development

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.

Page | 6

Web Client UI Development

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 o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

Page | 7

Web Client UI Development

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

Page | 8

Web Client UI Development

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 Object Type Description Callback Class GenIL Component Name BOL Object Name BOR Object Type Save the new object type. Now, create the callback class declared above (use below table as reference and ZTRAINING package). Field Name Class Description Instantiation Class Type Final Field Value ZCL_BP_ACCT_OBJTYPE_CALLBACK Callback Class for Object Type ZBP_ACCOUNT Public Usual ABAP Class Tick ZBP_ACCOUNT Test Business Partner Acct. View ZCL_BP_ACCT_OBJTYPE_CALLBACK BP BuilHeader BUS1006 Field Value

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.

Page | 9

Web Client UI Development

2
2.1

Business Roles and Navigation Bar Customizing

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.

Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

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 get an error message. if you

P a g e | 10

Web Client UI Development

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 | 11

Web Client UI Development

Call transaction CRMC_UI_PROFILE. 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. Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

2.1.3

Change 2nd level navigation of navigation bar

Call transaction CRMC_UI_PROFILE.

P a g e | 12

Web Client UI Development

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 o Remove Service Plan Simulation (SRV-FCA-SR) from the menu by deactivating the checkbox of column In menu. Add Mass Change Processes (SRV-MCL-SR) to the menu by ticking the checkbox of column In menu.

Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

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 | 13

Web Client UI Development

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 | 14

Web Client UI Development

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.

Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

P a g e | 15

Web Client UI Development

3
3.1

Transaction Launcher
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: Field Name URL ID Description Request Method Non-BSP URL URL Z0##GOOGLE 0## Google Get Choose http://www.google.com Field Value

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 | 16

Web Client UI Development

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

Call transaction CRMC_UI_NBLINKS. Select Define Logical Links at the dialog structure on the left by double-click. Create a new logical link: Field Name Logical Link ID Type Target ID Parameter Parameter Class Title Description Z0##GOOGLE C Launch Transaction EXECLTX Z0##GOOGLE CL_CRM_UI_LTX_NAVBAR_PARAM 0## Google 0## Google Field Value

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 | 17

Web Client UI Development

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 | 18

Web Client UI Development

Select Adjust Direct Links at the dialog structure on the left by double-click. Activate Loglink ID ZJVBGOOGLE in column Visible.

Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

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 | 19

Web Client UI Development

Field Name Object Type Program Object name Z0##TSTC Z0##RSOWTSTC Z0##Transaction Field Value

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

P a g e | 20

Web Client UI Development

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 | 21

Web Client UI Development

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 | 22

Web Client UI Development

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=ICEXEC UTE&sap-client=500

P a g e | 23

Web Client UI Development

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: Field Name Logical System BOR Object Type Method Name ERSCLNT500 Z0##TSTC EXECUTE Field Value

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

Call transaction CRMC_UI_NBLINKS. Select Define Logical Links at the dialog structure on the left by double-click. Create a new logical link with the following data: Field Name Logical Link ID Type Target ID Parameter Z0##VL01N C Launch Transaction EXECLTX Z0##VL01N Field Value

P a g e | 24

Web Client UI Development

Field Name Parameter Class Title Description Field Value CL_CRM_UI_LTX_NAVBAR_PARAM 0## Create Delivery 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 | 25

Web Client UI Development

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 doubleclick. Create a new entry for Group ID Z0##VL01N at position 10 and save your changes.

P a g e | 26

Web Client UI Development

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 | 27

Web Client UI Development

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.

Save your settings and re-launch the WebClient UI. o o Call transaction BSP_WD_CMPWB. Select CRM_UI_FRAME as component and press Test button to test your changes.

P a g e | 28

Web Client UI Development

4
4.1

UI Configuration Tool and Design Layer Customizing

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 | 29

Web Client UI Development

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 | 30

Web Client UI Development

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 | 31

Web Client UI Development

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 MainSearchResult. Go to Configuration tab of this View. 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 Save your settings with your own Role Config. Key.

P a g e | 32

Web Client UI Development

Re-launch WebClient UI and test your new settings.

4.1.6

Change UI Configuration of Overview Page of Account Details

Go to WebClient UI and gather the technical object information of Accounts. Search for your own business partner. Navigate to the details of this business partner. Select within Account Details AB the Last Name and press F2 Button to retrieve technical information.

Log-on to SAP GUI Call transaction BSP_WD_CMPWB (Component Workbench). Use technical information gathered above to call right Component in Component Workbench. P a g e | 33

Web Client UI Development

Select Component BP_HEAD. Use technical information gathered to find the right View. Select View BPHEADOverview. Go to Configuration tab of this View. 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. Save your settings with your own Role Config. Key.

Re-launch WebClient UI and test your new settings.

4.1.7

Change UI Configuration of Edit Form for Account Details

Go to WebClient UI and gather the technical object information of Accounts. Search for your own business partner. Navigate to the details of this business partner. While in EDIT mode, place your cursor in field Last Name. Get technical information displayed.

P a g e | 34

Web Client UI Development

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. Use technical information gathered to find the right View. Select View AccountDetails. Go to Configuration tab of this View. 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. Save your settings with your own Role Config. Key.

P a g e | 35

Web Client UI Development

Change settings for field Date of Birth, make this field as Mandatory. Change Label of field Date of Birth to Birthday. Click Apply. Save your settings with your own Role Config. Key.

Add caption Status. Add the new field Bill Block Reason, make this field as Display Only. Click Apply. Save your settings with your own Role Config. Key.

P a g e | 36

Web Client UI Development

Re-launch WebClient UI and test your new settings.

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: Field Name Name Description BOL Object Name Field Value ZBP_DESIGNOBJ_0## Design Object 0## for BP BuilHeader

Save your entry.

P a g e | 37

Web Client UI Development

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 | 38

Web Client UI Development

Select proper Object Type and assign your Design Object.

P a g e | 39

Web Client UI Development

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 BuilHeaders Item Set? A: No.

P a g e | 40